基本ノウハウ
Webサイトの設計段階は、運用開始後の成果を左右する重要な工程です。しかし「Webサイト立ち上げに関する企画は固まったものの、具体的な設計がなかなか進まない」と悩んでいる担当者も多いでしょう。
本記事ではWebサイト設計のやり方を、5つのステップに分けて解説します。成功させるコツや役立つツールも、あわせて紹介しています。ぜひ参考にしてみてください。
サイト制作における設計とは、企画段階でまとめたターゲットやコンセプトに基づき、Webサイト全体やページごとの構造を組み立てて可視化する工程です。ここではWebサイト設計が重要な理由を、3つ解説します。
ターゲットやコンセプトに基づいて設計をあらかじめ明確化しておくと、サイトが扱うジャンルにも、サイト構造自体にも一貫性を持たせられます。サイトの制作・運用についてメンバー間で方向性がズレないよう、共通認識を持って作業を行えるのです。
コンセプトやターゲットに基づいた設計がされていれば、コンテンツの方向性についてメンバー内で共有し、ユーザーにとっても専門性があり信頼の置けるサイトづくりを実現できます。また設計によりサイト構造に一貫性があれば、制作中の手戻りが少なくなる上、新しいページを追加する際にもどこへ配置すれば良いかがすぐに分かり、業務の効率化にもつながります。
Webサイト設計は、ユーザビリティとクローラビリティの向上にも寄与します。
ユーザビリティは「ユーザーにとっての使い勝手の良さ」を指し、クローラビリティは「クローラー（Web上の情報を収集して検索エンジンに登録するためのロボット）の巡回しやすさ」を指します。綿密な設計によりWebサイトの構造が整理されていると、ユーザーは自分が求める情報へたどり着きやすくなり、クローラーもサイト内を巡回して情報の収集・登録を行いやすくなります。優れたWebサイト設計を実現できているかどうかが、ユーザビリティとクローラビリティに影響するのです。
上記2つの理由により、SEOの評価も高まりやすくなり、結果として上位表示が期待できます。Webサイトの評価基準である、E-E-A-Tを意識して設計できるとより効果的です。
例えばテーマやコンセプトに一貫性のあるWebサイトは、専門性に影響します。また後述の「3.Webサイト設計を成功させる3つのコツ」で解説する関連キーワードの盛り込みも、専門性を高める上で重要です。E-E-A-Tを含めたSEOのテクニックを知りたい方は、下記の記事をあわせてチェックしてみてください。
関連記事：「SEOライティングとは？初心者必見！プロも使う11のコツ」
関連記事：「SEOとは？用語の基礎知識を初心者にも分かりやすく解説」
ここではWebサイト設計に必要なステップを、5つに分けて解説します。
なお設計を含め、Webサイト制作で押さえたい項目はこちらの資料で網羅しています。成果の出る自社サイトを立ち上げたい方は、ぜひダウンロードしてみてください。
売れるBtoBサイトにする「セルフチェックリスト120」を、サイト作成や改善の参考にぜひご利用ください。
まずは以下のステップに沿って、Webサイトの企画を固めます。
企画フェーズにおける各ステップの詳細について知りたい方は、こちらの記事もあわせてチェックしてみてください。
関連記事：「【5STEP】Webサイト制作の流れと期間｜各フェーズごとに徹底解説」
ターゲットと目的を明確にしたのち、2つを掛け合わせて考えると制作すべきWebサイト像が見えてきます。
例えば自社が業界でも長年実績を積んでおり十分なノウハウを持っているものの、認知度の面から他社に後れを取っており、認知度の向上によってWeb上で売上を作りたいと考えているとします。この場合、下記のようなターゲットと目的、企画案が考えられるでしょう。
【ターゲットと目的の例】
ターゲット：自社製品を認知していない潜在層
目的：認知拡大・集客から長期的に売上につなげること
⇒企画：自社製品に関連したコンテンツを発信するオウンドメディア制作
自社の課題を整理し、Webサイト制作により何を実現するのか、そのためにWebサイト設計はどうあるべきかを順序立てて考えていきましょう。
どのようなWebサイトを制作するのか具体的なイメージをつかむため、調査や現状分析を行います。
競合サイトの調査・分析を行い、真似すべきポイントや差別化ポイントを明らかにして設計に生かします。また、社内で実践している他マーケティング施策とどのように連動させるかも重要であるため、調査や分析結果を社内で共有し、方向性についてすり合わせるようにしましょう。
Webサイトにどのような役割や提供価値を持たせるのか、コンセプトを決定します。20字ほどのキャッチコピーに言語化すると、社内外問わず共通認識を持ちやすく、Webサイトの一貫性にもつながるでしょう。
Webサイトの構造を可視化したサイトマップを作成します。サイトマップはページをカテゴリ別に分けたのち、ツリー構造で整理します。
サイトマップの作成手順は、以下の通りです。
情報を洗い出す際は複数人でブレインストーミングを行うなど、抜け漏れがないように工夫しましょう。また、「カテゴリをどのように分けるか」「各ページをどのカテゴリに入れるか」の判断も重要で、ユーザビリティ・クローラビリティに影響します。ユーザー目線で分かりやすい構造にできているかをチェックしましょう。
Webサイト構成の作成手順や注意点などについて詳しく知りたい方は、こちらの記事もぜひ参考にしてみてください。
関連記事：「成果につながるWebサイト構成とは？作成手順とおすすめツールまで紹介！」
サイト構造を整理したあとは、ワイヤーフレームで各ページのレイアウトを固めていきます。ワイヤーフレームとは、以下のような構成要素の配置を可視化した図面です。
はじめにトップページのレイアウトを決め、そのデザインと統一感を持たせながら、下層ページのワイヤーフレームを作成します。
作成時は紙面で試行錯誤し、ある程度形が固まってきたらツールで整えると効率的です。
またワイヤーフレームは、モノクロなどシンプルなスタイルで問題ありません。本格的なデザインはのちほど詳細を詰めるため、配置する構成要素の種類や機能を共有できる程度に形を整理しましょう。
次にWebサイトの仕様を決める、要件定義という工程を進めます。ここまでに固めた以下の情報を踏まえながら、詳細を詰めていきましょう。
なお要件定義書に記載する主な項目は、次の9つです。
要件定義書は制作中に迷いが生じたとき、あるいはメンバー間で意見が対立したときなどに振り返り、判断軸となる重要な書類です。Webサイト制作を外部の専門会社へ委託する場合は、RFP（提案依頼書）への流用もできます。
要件定義の進め方や各項目の詳細について知りたい方は、こちらの記事もあわせてチェックしてみてください。
関連記事：「Webサイトの要件定義書に必要な9項目｜進め方からテンプレートまで解説」
設計フェーズ最後のステップが、デザインの方向性を決める工程です。具体的にはデザインコンセプトと、デザインカンプを検討・作成します。
デザインコンセプトでは、Webサイトに一貫性を持たせるために以下のような要素の基本方針を定めます。
デザインカンプはWebサイトの完成イメージです。エンジニアが実装できるレベルにまで作り込みましょう。
Webサイト設計を成功させるコツは、主に以下の3つです。
階層構造とURLは、シンプルな設計を心がけましょう。例えば階層構造は多くても3階層まで、つまり2クリック以内で最下層のページへたどり着けるように設計します。ショートカットやタグなども積極的に活用し、ユーザーがなるべく早く求める情報を見つけられるような工夫も大切です。
またURLは自動生成の文字列ではなく、下記のようにページの内容を表す簡潔な英単語を付けます。
例：「Webサイトの種類は？用途と目的・運用のポイントまで5分で徹底解説」
→https://be-marke.jp/articles/knowhow-website-type
上記によりユーザーは現在位置が分かり、クローラーもページ内容を理解しやすくなります。ユーザビリティとクローラビリティを向上させるためにも、「シンプルで分かりやすいWebサイト」を念頭に設計を進めていきましょう。
ターゲットやコンセプトに沿って上位表示を狙いたいキーワードを盛り込み、専門性を高めることもWebサイトの一貫性につながります。具体的な手順は、以下の通りです。
例えばWebサイトのテーマが「マーケティング」で、テーマに関連して以下のようなキーワードを選定したとしましょう。
上記は営業やマーケティングにカテゴライズでき、サイト構造としては次のような形に整理できます。
【テーマ：BtoB】
カテゴリA：営業
→「営業 コツ」
→「営業 テレアポ」
カテゴリB：マーケティング
→「マーケティング 手法」
→「マーケティング 事例」
なお関連キーワードは、ツールの利用やペルソナからの連想といった方法で選定できます。詳しいやり方やおすすめのツールなどについて知りたい方は、こちらの記事もあわせてチェックしてみてください。
関連記事：「簡単SEOキーワード選定方法！5つの手順とおすすめツール5選」
Webサイトの見やすさやCVポイントへの導線づくりを考える際は、ユーザーの視線移動を踏まえたレイアウトが大切です。Webサイトの場合、特にZ型やF字型が多い傾向にあり、N字型が主の紙媒体とはまた違った配置になります。
Z型の場合はCTAとなるボタンを右下に配置する、F型の場合は下に行くほど読まれにくくなるため重要な要素はなるべく上部にするなど工夫しましょう。
最後にWebサイト設計に役立つツールを、3つ紹介します。
XMindは、サイトマップの整理などに活用できるツールです。マインドマップで階層構造を可視化でき、複数人でのブレインストーミングや情報共有時にも役立ちます。また以下のようなデバイスに対応しており、使用環境に制限を受けにくい点もメリットです。
6,800円/年の有料版では全機能を利用できるため、使用感を無料版で確認してから切り替えを検討してみるのも良いでしょう。
Figmaは、ワイヤーフレームの作成などに活用できるツールです。最も特徴的なのは、複数人がリアルタイムで共同作業できる点にあります。ワイヤーフレームの作成・検討時はもちろん、Webサイト制作のミーティング時にホワイトボードとして利用し、掲示情報の随時更新・共有も可能です。
既成のワイヤーフレームキットやコミュニティ内にあるアセットも使用できるため、Webサイト制作の経験が浅い方や効率化を図りたい方にもおすすめのツールとなっています。
Sketchは、WEB制作やUIデザインに活用できるベクターグラフィックツールです。UIデザインに特化しているため、効率的なUIデザインが可能です。
動作が軽く、複数ページを1つのファイルで作業することも簡単に行えるほか、カラーパレットの管理がしやすくデザインルール・ガイドラインを作成しやすい点などが強みです。UIデザインに特化している分、PhotoshopやIllustratorほど機能が煩雑ではなく学習しやすいツールといえます。
Webサイト設計は階層構造などを整理し、ユーザーやクローラーが巡回しやすい形を可視化するための工程です。管理側も運用しやすくなるメリットがあり、中長期的な視点が必要になるWebサイト運営に欠かせません。
具体的には企画で定めたコンセプトに沿って、サイトマップやワイヤーフレームを作成します。要件定義書やデザインカンプなどで社内の認識を統一することで、制作途中における方向性のブレや手戻りを最小限にできます。
Webサイトの成果を確実に上げたい方は、長期運用の土台となる設計を丁寧に進めましょう。
文章での価値創出に関心があり、製造業から転身後、BeMARKE編集部でBtoBマーケティングを専門に年間およそ70本の記事執筆・編集を担当。「読者に分かりやすく品質の高い記事を届けること」をモットーに日々制作に励んでいる。
著者の最新記事
もっと読む >
