ホームページの構成について、７つの要素を説明しました。各部分を詳しく知りたい初心者が対象ですが、上級者でも参考になると思います。作り方だけでなく、コンバージョン率アップを考慮したまとめ方も解説しているからです。
※これから説明する内容は、「HTML・CMS（WordPress）」どちらでも対応できます。
ホームページの構成とは？
最初に、ホームページ構成の全体像を説明します。ホームページは複数のエリアに分かれていますので、その部分ごとの役割に応じて、内容を作る必要があります。もちろん、いろいろな分け方があるんですが、ここでは４エリア７か所に分けて解説します。
基本的なホームページの構成は、次の通りです。
 |
※図の番号はエリアの番号と一致しています。
このように、４エリア７か所に絞って説明します。 |
大事なポイントは、ホームページの構成を単純にまねすることではなく、見やすくわかりやすいまとめ方です。これは、最終目的であるコンバージョン率の向上に欠かせない視点ですので、その点を中心に説明しましょう。
ホームページ構成、７要素のポイント！
それでは、ホームページの構成を具体的に説明します。要素は７つありますので、しっかり目を通して頭に入れましょう。
構成１．共通ヘッダー・エリア
共通ヘッダー・エリアとは、ホームページの構成で最上部にある統一された部分のことで、文字通りすべて同じ情報が表示されます。具体的には、左側に会社名（サイト名）と説明を入れ、右側には所在地や連絡先などを入れるのが一般的です。
共通ヘッダーで特に重要なのは左側です。なぜなら、人間は必ず左上から物を見るという、ある種の習性があるからです。したがって、ここには最も重要なサイト名と説明を入れて、どのようなホームページであるのかを着地したユーザーがすぐ理解できるようにします。
グローバルメニューについても説明しておきましょう。これは、共通ヘッダーの上部や下部にある、サイト全体にアクセス可能なリンクです。重要なカテゴリーやページで内容を構成します。なお、数が多いとわかりにくいので、５つ程度に収めましょう。
このように、共通ヘッダーは最初に目に触れますから、シンプルにしながらもしっかり情報が伝わるように作ることで、見やすくわかりやすいエリアになるでしょう。
これで、ホームページ構成のうち、共通ヘッダーが出来上がります。
構成２．メイン・エリア
メイン・エリアは、ホームページの構成において中核となる部分ですのでかなり重要ですが、広範囲にわたるため、ここでは次の４つ要素に絞って説明します。
- パンくずリスト
- アイキャッチ
- 本文
- 関連ページの紹介
では、具体的にそれぞれの要素を説明しましょう。
ａ．パンくずリスト
パンくずリストとは上位へのリンクを並べたもので、現在閲覧中のページがサイト内でどのような位置にあるのか、道しるべとして働きます。ホームページの構成としては、ユーザーフレンドリーと検索エンジン対策になる要素です。
ユーザーが検索で到達した場合、トップページにたどり着くことはほとんどありません。すると、どこにアクセスしたのか分かりにくくなりますが、着地点にパンくずリストがあれば、サイト構造がつかみやすくなるのです。つまり、迷子になりにくくなるんですね。
また、検索エンジンはサイト構造を把握しようとして、リンクをたどります。すると、パンくずリストがあることで全体像がつかみやすくなり、若干ですがSEO対策上も有利になるようです。このようなポイントを押さえると、見やすくわかりやすいページになるでしょう。
これで、ホームページ構成のうち、パンくずリストが出来上がります。
パンくずリストは、童話『ヘンゼルとグレーテル』が由来です。物語中、主人公が森で迷子にならないよう、通り道にパンをちぎって置いていったエピソードに似ているところから、そう呼ばれるようになったそうですよ。
ｂ．アイキャッチ
アイキャッチとは、文章の直前にある大きめの画像のことです。ホームページの構成としては、閲覧者の目をいったん絵や写真に向けさせることで、直帰率を下げる役割を担います。これはある種の心理作戦で、イメージの後に続く文章は読みやすくなるのが人間なんですね。
したがって、必須ではないものの、文章を読ませるための推進力としてはぜひ欲しい画像です。ちなみに、サイズはなるべく大きくしてください。縦横比については、 16:9 が見やすいのではないかと思います。ようするにテレビ画面の比率ですね。
なお、画像の中身は何でも構いません。もちろん、商品紹介のページであればその写真を載せましょう。それ以外のページ（ブログなど）であれば内容に合わせても良いし、物品やサービスが関係しないのであれば無関係なイメージでも構いません。
このように、文章を読ませるための推進力として必要なのがアイキャッチ画像ですので、面倒くさがらずにしっかり対応しましょう。心理的に、見やすくわかりやすいホームページになりますよ。
これで、ホームページ構成のうち、アイキャッチが出来上がります。
ブログで見かける文章直前の画像は、まさにアイキャッチです。それだけ、文章を読ませるための推進力として効果的なんですね。
ｃ．本文（☆超重要ポイント）
本文は、ホームページ構成の中で最も重要な部分です。なぜなら、閲覧数や直帰率に最も影響を与えるからです。具体的な書き方ですが、最初に概要説明を行いましょう。場所は、アイキャッチの真下あたりになると思いますが、 description に入力した内容と同一で構いません。
というのも、ほとんどの訪問者は、読むかどうかを概要説明で決めるからです。その後は、実際の本文を書きます。基本的な文章構造は３部構成ぐらいにし、『導入部分・本論・まとめ』のような形にすればわかりやすいでしょう。記述するコツとしては、いかに読み手の疑問に答えるかです。
決して自分の主張を繰り広げるのではなく、閲覧者が何に疑問を持ち、どのような答えを望んでいるのかよく考えます。つまり、本文は閲覧者にとってのＱ＆Ａのような内容にすると、一番うまくまとまると思います。（もちろん見かけ上は、文章の形で構いませんよ。）
なお、行間や段落の間は「詰め過ぎず広げ過ぎず」文字サイズとの兼ね合いで、読みやすい間隔を心がけてください。このように、本文は最初に概要説明で読む価値を伝えた後、問題とその解決策を書く流れにすると、見やすくわかりやすい文章になりますよ。
必要に応じて、挿絵やグラフなどの画像も入れて説明しましょう。
これで、ホームページ構成のうち、本文が出来上がります。
参考 本文の詳しい書き方については、以下のページを参考にしてください。
ｄ．関連ページの紹介
本文の後は、関連ページの紹介をしてください。ホームページの構成としては、読み終わった後の離脱をできるだけ防ぐ役割があります。つまり、別の情報を紹介することで複数ページを読んでもらうようにし、閲覧者をサイトに長時間滞在させようというわけです。
複数のページを読んでもらえれば、会社や商品の魅力が伝わりやすくなるので、購入や問い合わせを増やすことにつながります。したがって、内容に関係のある情報が他にも存在する場合は、関連ページとしてぜひ紹介してください。
なお、関連ページの紹介は本文の最終行からやや広めに間隔を取った場所にします。なぜなら、本文と区別したいからです（広すぎると目に留まらないので注意しましょう）。すると、離脱者を少しでも減らしながらも、見やすくわかりやすい形にできると思います。
これで、ホームページ構成のうち、関連ページの紹介が出来上がります。
関連情報が無い場合は、見せたいページやお問い合わせなどのバナー（リンク）を配置するのも、良い方法ですよ。
このように、メイン・エリアは４つの部分に分けて考えることで、ホームページ構成が作りやすくなるでしょう。
構成３．サイドカラム・エリア
サイドカラムは、メイン・エリアのとなりにある縦長の部分です。ここはホームページの構成上、本文以外にも多数の情報があることを知らせる役割があるので、バナー・リンク・告知・メニューなど様々なものを置きます。ポイントは３つありますので、順を追って説明しましょう。
サイドカラムの位置は？
まずサイドカラムの位置ですが、左・右・両方の３種類が考えられ、目的に応じて使い分けます。具体的には、左はカタログ的なサイトで、右はブログ的なサイトです。なお、両方というのはおすすめしません。なぜなら、デザイン的にも心理的にもうるさく感じるからです。
サイドカラムの内容は？
続いてサイドカラムの内容です。基本的には、「役に立つ情報への入り口」を配置する場所と捉えてください。なお、重要なバナーやリンクは必ず最上部に置きましょう。なぜなら、他の位置では埋もれてしまい、全くと言っていいほど目立たないからです。
サイドカラムは無しにもできる？
もう一つお話ししておきます。サイドカラム・エリアは、無しというやり方もあります。一般的に多いのは、ランディングページです。これは、閲覧者が一切わき目を振ることなく内容に集中するよう仕向けるものです。スマホがメインの場合も、こうすることが多いですね。
このように、サイドカラム・エリアはサイトやページの特性と閲覧者の見方に合わせて、配置や使用の有無を決めることで、見やすくわかりやすい構成ができるでしょう。
これで、ホームページ構成のうち、サイドカラムが出来上がります。
構成４．共通フッター・エリア
共通フッター・エリアは、ホームページ構成の最下部にある部分のことで、各ページに同じ情報を入れます。内容は様々ですが、一般的にサイト名を入れる例が多く見られます。つまり、ヘッダーと合わせて両方に名前を入れるわけですね。繰り返すことで、認知度を上げるのが狙いです。
それ以外の内容はサイトによって違いがあります。なぜなら、フッター・エリアだけは唯一何を発信するか決まりが無いからです。そのため、人によってはあまり力を入れない場合もあります。ところが、案外見られる部分なのでそれではもったいないんです。
そこで積極的に活用します。具体的には、自分が一番読んでほしいと思うものを発信するんです。主張したいことや非常に重要な情報へのリンクなど、自由で構いません。なお、縦に３分割すると見やすくわかりやすい作り方ができると思います。
このように、共通フッター・エリアは自由にしてよい部分なので正解というのはありませんが、積極的に活用していただきたいと思います。ただし、ゴチャゴチャと詰め込まないように注意してください。大事なのは、見やすくわかりやすい内容にすることですから。
これで、ホームページ構成のうち、共通フッター・エリアが出来上がります。
まとめ：ホームページの構成は、内容のまとめ方も重要です。
いかがでしたか？ ホームページの構成、超重要な７つの要素を説明しました。
今回説明したのは、共通ヘッダー、メイン、パンくずリスト、アイキャッチ画像、本文、関連ページの紹介、サイドカラム、共通フッター、などのエリアからなる構成要素でした。
基本的には、４エリア７か所という構成で作り込めば１ページが完成します。HTML で作るときは、テンプレートを作ってしまったほうが便利でしょう。また、CMS（WordPressなど）を使っているときはそのままで形ができているので、面倒なところは無いと思います。
ところで、ホームページは構成だけまねしても不十分で、見やすくわかりやすい内容にまとめることがとても大切です。なぜなら、最終的な目的であるコンバージョン率の向上は、外見ではなく中身が強く影響するからです。エリア分けは、閲覧者の心理をうまく利用しているんですね。
これでホームページの構成に関する説明は終わりますが、見た目だけでなく、内容のまとめ方も参考にしていただければ幸いです。
以上、「ホームページの構成、超重要な７つの要素とは？」と題して説明しました。