自社の企業ブランドや実績の豊富さ、事業内容、組織構成などをアピールするWebサイトは、インターネットが普及した昨今の環境において重要です。
しかし、サイト制作経験がないままに自社でWebサイトを構築する場合、何から手をつければよいかかわからない場合も多いでしょう。
今回は初心者の方向けに、Webサイト制作の手順や基本的な構成と構成方法、さらに注意点までご紹介します。
Webサイト構成時に重視したい考え
Webサイトを構成する際には、階層構造と導線を意識することが大切です。階層構造と導線とは、具体的にどのようなことなのでしょうか。
まずは、Webサイト構成時に重視すべき考えについて解説します。
階層構造
通常、Webサイトは最初のページから次のページへという構造になっています。このように次ページへと続くような構造を「階層構造」といいます。
階層構造は、階層を重ねるごとに「第一構造」「第二構造」と深くなり、サイト構造が順序だてて見られることが特徴です。しかし、あまり階層構造を深くしすぎると目的のページにたどり着くまでに時間がかかり、ユーザーが目的のページに辿り着く前に離脱してしまいます。そのため、階層構造は、あまり深くしすぎないことがポイントです。
導線
Webサイトの構成は、導線を考えながら行わなければなりません。これは言い換えれば、サイト訪問者がどのように動くのかを考えてページを構成するということです。導線が適切でなければ、ユーザーの離脱率の増加につながります。
訪れるユーザーの商品への関心の程度、知識の有無によっても導線は変わります。そのため、ターゲット層を明確にしてそのターゲットに適した導線にすることが大切です。
Webページ構成の基本
Webページは、一般的に以下の構成でできています。
・ファーストビュー
・メインコンテンツ
・クロージング
それぞれについて、詳しく解説します。どのような構成なのかを知ることで、Webサイト構築をイメージしやすくなるでしょう。
ファーストビュー
ファーストビューとは、Webページを開いて最初に目に入る部分のことです。Webページを開いて一番最初に表示されることから、全ユーザーが目にする重要なページでもあります。
ファーストビューでは、全ページ固定のヘッダー部分やキャッチコピー、ページごとのタイトルやメイン画像などを慎重に決めなければなりません。顧客がページを読み進めるかどうかを決める基準になるため、ターゲットのニーズに合ったデザインや文字の大きさにしたり、画像の数を考慮して見やすいページにしましょう。
メインコンテンツ
メインコンテンツとは、Webページの主題となる部分のことです。見出しと本文のセットを繰り返す構成になっており、自社製品やサービスを具体的にアピールしたり、どのような会社なのかを紹介するページに該当します。
文字だけでは見にくいページになることから、図や画像を多く用いるのがトレンドです。ただし、あまりにも図や画像が多すぎると逆に見にくくなるため、使う数やどのような図や画像にするのかが重要です。
クロージング
クロージングとは、ページの締めくくりの部分のことです。具体的には、お問い合わせやメニューなどを含む全ページ固定のフッター部分がクロージングに該当します。
クロージングは、ユーザーが興味を示した上で訪れる部分でもあるため、文字の大きさや配色などを工夫してより興味を持ってもらえるようにしなければなりません。特に、コンバージョンにつながりやすいように、すぐに問い合わせページに飛べるようにしておくことで、ユーザーの離脱率の低下につながります。
Webサイトの構成図
Webサイトを構成する際は、構成図を参考にします。構成図にはサイトマップ・ディレクトリマップ・ワイヤーフレームの3種類があります。
ここからは、それぞれの概要と特徴をご紹介します。
サイトマップ
サイトマップとは、ホームページ全体の構成図のことです。サイトマップを事前に作成しておくと、必要な情報や頭の中にある構成を視覚化できるため、どのようなサイトになるのかイメージしやすくなるメリットがあります。
ディレクトリマップ
ディレクトリマップとは、ページの一覧表のことです。
第一階層、第二階層、第三階層のそれぞれでどのようなページを作成するのかを書き出します。ページ構成の順序などを整理でき、必要なページを洗い出すことができます。
ワイヤーフレーム
ワイヤーフレームとは、ページ単位での設計図のことです。サイトマップとディレクトリマップに比べて細かい設計図であり、ワイヤーフレームを作成することでページのどこに何を配置するかが分かりやすくなります。
ある程度の全体的な構成ができたら、ワイヤーフレームを作成しましょう。
サイトの構成方法
Webサイトを構成する際は、基本的に以下の手順で行います。
①Webサイトの目的を定める
②必要なページを特定する
③サイトマップを作成する
④各ページの構成を決める
それぞれの工程について、詳しく解説します。
Webサイトの目的を定める
まずは、Webサイトを作る目的を明確にしましょう。Webサイトには、売上向上や採用窓口としての役割など何かしらの目的があるはずです。目的を明確にしておくことで、デザインやターゲット層のブレを防げます。
ただし、1つのサイトに複数の目的を盛り込みすぎないようにしてください。複数の目的を盛り込みすぎるとブレが生じ、目的を定める意味がありません。
なお、目的を定める際にターゲットとする訪問者も決めておいてください。
必要なページの特定
次に、目的を達成するためにどのようなページが必要かを書き出します。この工程がディレクトリマップの作成です。
必要なコンテンツは、目的によって変わります。そのため、定めた目的に必要なコンテンツを洗い出しましょう。行き詰った場合は、同じ目的で作られた他社のサイトを参考にしても構いません。特に、初めてWebサイトを作成する際は、さまざまなサイトを参考にするとよいでしょう。
サイトマップの作成
必要なページを特定したら、次にサイトマップを作成します。必要なページをカテゴリーごとに分け、サイトマップを作成しましょう。
この際、階層が深くなりすぎないように意識することが大切です。階層構造が深すぎると、ユーザーが目的のページまで辿り着かず離脱しやすくなります。せっかくユーザーがサイトに訪れてくれても、離脱してしまっては意味がありません。階層構造に注意しながら、サイトマップを作成してください。
なお、サイトマップはExcelやPowerPointなどのツールで簡単に作成できます。
各ページの構成を決める
次に、各ページの構成を決めます。具体的にすべきこととして、全ページに共通のヘッダー・フッターを設定しましょう。次にワイヤーフレームを作成し、各ページのレイアウトを決めていきます。
レイアウトは、そのページの見やすさを左右する重要なものです。見やすさやターゲットに合ったレイアウトにしましょう。
Webサイト作成時の注意点
Webサイトを作成する際には、以下の点にご注意ください。
・顧客にとって価値のあるWebページを目指す
・自社の戦略から見直し、一貫性のあるサイトにする
・1つのページに1つのテーマを心掛ける
Webサイトは、ターゲットのニーズに合ったものでなければ意味がありません。顧客にとって価値のあるWebページになるように、ターゲットを絞って適切に作成しましょう。
また、1つのページに複数のテーマを設けるとまとまりがなく、見にくいページになります。見にくいページは離脱率アップにつながるため、1つのページのテーマは1つに絞りましょう。
まとめ
せっかくWebサイトを作成し、ユーザーが訪れてくれても離脱率が高くては意味がありません。
Webサイト作成時は目的とターゲットを明確にし、階層構造や導線を意識しながら見やすいWebサイトを目指しましょう。
株式会社 吉和の森
