制作会社にwebリニューアル（またはwebサイト構築）を依頼する場合、多くの段階とタスクを踏み、webサイトの規模によりますが、通常3ヶ月～半年ほどかけて完成を目指します。企業・団体のプロジェクト担当者は、通常業務と掛け持ちすることが多く、“効率よく”成果を出せるwebサイトを構築したいという想いをお持ちではないでしょうか。

そこで今回と次回の2回にわたり、円滑で効果的なwebサイトを構築するための基礎知識として、webサイト構築プロジェクトの流れをご紹介していきます。

今回は、「1.要件定義書」から「4・各種タグの取得」について説明していきます。

1. 要件定義書の策定

なぜ今、どのような目的でwebサイトを構築するのか。それらの要件を明確にするタスクです。クライアントと制作会社間で、実施の目的・コンセプト・内容の共通認識を持つことで、目標や課題の優先事項が明確になります。

要件定義は、要件定義書としてきちんと書面に残すことで、各種検討段階における方向性の揺れやブレを防ぎ、スムーズなプロジェクト進行に不可欠です。

関連記事：Web制作の見積もりや企画提案依頼時に制作会社に伝えるべきこと

要件定義書の掲載内容（例）

2. サイト設計（構造設計・画面設計）

構造設計では、必要ページのピックアップと、各ページにユーザーを最適に誘導する構造・レイアウトの設計を行います。
一般的には、webサイト内のページ構造をまとめた「サイトマップ」と、各ページの要素配置をまとめた「ワイヤーフレーム（レイアウト設計図）」を用いて、クライアントとのすり合わせを行います。

サイトマップ

サイトマップとは、webサイトの階層構造を示したものです。
構造設計は、ユーザー視点で行なう必要があります。webサイトに訪れるユーザーの属性や目的を明らかにした上で、導線を考え、情報を適切にカテゴライズし、階層化することが重要です。

サイトマップ例

ワイヤーフレーム（画面レイアウト図）

ワイヤーフレームはwebサイトの起点となるトップページから作成します。掲載すべき情報を整理し、優先度と目的を考えてページレイアウトを決めていきます。
人はwebサイトを見るとき、左から右に視線を動かすため、重要な情報は上部の左側に配置します。また、ユーザーの興味を引きたい情報には画像を使用するなど見せ方も考えます。
トップページのワイヤーフレームが決定したら、下層ページのワイヤーフレームを作成していきます。

ワイヤーフレーム例

3. デザイン作成

ワイヤーフレームをベースに、デザインを作成する段階です。

webサイトの目的とユーザーをふまえて、使用する色や雰囲気を決め、デザイン作成を行ないます。色は、サイトのメインとなるカラー、差し色となるアクセントカラー等を決めます。

関連記事：Webデザインにおける「配色のポイント」

制作会社に要望を伝える場合には、できるだけ具体的にして伝えることが望ましいです。めざすイメージを言葉で表すのが難しい場合には、デザインの参考になるwebサイトを伝えるのもよいでしょう。

デザイン参考「縦長のwebデザインギャラリー・サイトリンク集」

http://muuuuu.org/

デザイン例

4. 各種タグの取得

webサイトは、ユーザーの閲覧状況や行動変化を知り、評価・改善を行い、効果を高めることができる広報媒体です。分析に必要なアクセス解析ツールの設置や、また、ユーザーの快適な閲覧をサポートするためのサイト内検索ツールの導入なども必要となります。
各種ツールは、外部サービスを利用することが一般的で、サービスが指定するアカウントを取得し、管理画面で発行できるタグをwebサイト内に埋め込み、利用します。

タグの発行は、デザインをブラウザで機能するようにする“コーディング”の前に行いますので、デザインの相談と並行して進むタスクとなります。

サイト内検索

代表的なものとして「Googleカスタム検索エンジン」があります。
Googleアカウントがあれば、無料で利用することができますが、検索結果にGoogleのロゴと検索連動型広告が表示されます。

無料で広告非表示のサービスに「Yahoo!検索 カスタムサーチ」がありますが、こちらはレスポンシブデザイン非対応になります。

関連記事：Google Site Searchの終了に伴い、無料で広告非表示な「Yahoo! 検索 カスタムサーチ」への移行を検討してみる

Googleアナリティクス

Googleタグマネージャー

さいごに

「要件定義」から「各種タグの取得」までの流れを説明しました。
後編では下記の項目について説明してきます。

• コーディング、システム実装
• サーバ、ドメイン取得
• 公開
• 動作確認
• Googleサーチコンソール設定

この記事を書いた人

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。

この執筆者の最新記事

この執筆者の記事一覧

• 2022年10月24日WEBGraphQLサーバを構築するためのGoライブラリ「gqlgen」を使ってGraphQLサーバーを構築してみる
• 2022年8月25日WEBGo WebAssemblyでブラウザ上でGoを実行する その3 Javascript側からGoの関数を呼び出す
• 2022年6月21日WEBGo WebAssemblyでブラウザ上でGoを実行する その2 Go側からJavascriptを操作する
• 2022年4月25日WEBGoのコードをWebAssenblyにコンパイルしてブラウザ上でGoを実行する