ホームページの制作で多くの人が悩むのは、トップページの構成です。トップページはサイトの顔であり、そのサイトを読み進めるかどうか瞬間的に判断されかねない重要なパートなので、多くの方が妥協できないのも当然です。
そこでこの記事では、そもそもWebサイトのトップページにはどんな役割があるのかを解説します。トップページの構成要素やトップページ作りのコツもわかりやすくお伝えしていきますので、これからホームページを制作・リニューアルされるという方はぜひ参考にしてくださいね！
この記事を読んだらわかること
・トップページの構成要素
・トップページ作りのコツ
ホームページは、制作して終わりではなく、公開後の集客が必要になります。
我々はSEOに強いサイト設計とコンテンツ作りを強みに、公開後も検索エンジンから集客し続けるホームページをご提案できますので、集客にお困りの方はお気軽にご相談ください！
ホームページのトップページの役割
まず、トップページの役割を理解しておきましょう。
トップページの主な役割を下記3つです。
- サイトの目的が一目でわかること
- ユーザーが知りたい情報（ページ）にすぐ辿り着けること
- お知らせやイベント情報などが一目でわかること
それでは、各項目を詳しく説明していきます。
サイトの目的が一目でわかること
トップページはサイトの顔です。訪問してきたユーザーが一目でサイトの目的を瞬時に理解できるかどうかが重要となります。
例えば、ネットショッピングのためにアクセスしてきたユーザーが、サイトのトップページを見てECサイトに見えなかったら、自分が勘違いしていたかと思って離脱してしまう可能性もあります。また、求人情報を見たい人は「見るからに求人サイト」の顔をしたトップページでいと不安になってしまうのです。
そのため、トップページで使用するキャッチコピーや写真・画像などは、ユーザーが一目でわかるような明確なものにしなければいけません。
ユーザーが知りたい情報（ページ）にすぐ辿り着けること
トップページにはサイトの顔としての役割とともに、目次の役割もあります。そのため、ユーザーが求めている情報をしっかり案内してあげることが重要です。
初めてホームページに訪れるユーザーは、どのページにどんな情報があるのかわかりません。もしユーザーが求めている情報があったとしても見つけられなければその時点で離脱してしまうでしょう。
ですので、トップページを見ただけでサイトの方向性や内容を把握できる構成内容にしなければいけません。
お知らせやイベント情報などが一目でわかること
ホームページのトップ画面では、今ユーザーに一番伝えたい旬な情報をお知らせする役割もあります。推したい情報がトップページにあれば、自ずと見つけてもらいやすくなるからです。
イベント情報やキャンペーンなどを知りたくてアクセスしてくるユーザーに対してはもちろん、その情報をきっかけにサイトに興味を持ってくれる見込み客へのアピールにもなります。
トップページの構成要素
ホームページのトップページは、そもそもどのようなパートで構成されているのでしょうか？
ここでは、トップページとしての機能をしっかりと持たせるために必要な構成要素を紹介します。
ヘッダーエリア
ヘッダーエリアとは、Webページの最上部に位置し、会社のロゴマークや短いキャッチコピーなどが入ります。ホームページ内のどのページに推移してもヘッダー部分は変化しない場合がほとんどです。後述するメニューエリアとヘッダーエリアを兼ねているサイトも多く見受けます。
メニューエリア
メニューエリアでは、ホームページにある各ページの中から重要度の高いページを設定します。ホームページを構成しているそれぞれのカテゴリーから設定される場合が多いです。
また、スマホなどではスペースが限られているため、メニューエリアを広く設けず、格納できるハンバーガーメニュー化するのが一般的です。パソコン版デザインでも格納タイプを採用しているサイトが増加傾向にありますが、特に狙いがなければ無闇に収納してユーザーに手間を取らせず、表示させたままにしておくことをお勧めします。
コンテンツエリア
コンテンツエリアはトップ画面の中でも一番目立つメインの部分で、最も注目される箇所です。
例えば、下記の例が挙げられます。
- コーポレートサイトのトップページであれば会社の理念やサービス紹介
- ECサイトのトップページなら季節商品のPRや新着商品の紹介
- など「つかみ」となるような情報を提供するエリア
なお、コンテンツエリアでは、ユーザーに見てほしい順番でコンテンツを配置することがとても重要です。
フッターエリア
フッターエリアとは、トップページの最下部にあります。
概ねホームページの全てのカテゴリーやメニュー情報が掲載してある部分です。
会社のロゴやよくある質問、会社概要などを記載します。調べたいと思われる可能性のある情報はフッターに網羅的に用意しておくと良いでしょう。
トップページ作りのコツ
- トップページを作る際には絶対に押さえておきたいポイントがあります。
- ファーストビューはユーザーに一番伝えたいことを載せる
- 基本的にコンテンツは要約したものを載せる
- ビジュアルよりもレイアウトを重視する
- スマホ表示も重視する
- ユーザーのことを理解する
それでは、各項目を詳しく解説していきます。
ファーストビューではユーザーに一番伝えたいことを載せる
トップページのファーストビューは、ユーザーに伝えたいことをダイレクトに表現するのが最も効果的です。
例えば、下記の例が挙げれらます。
- コーポレートサイトであれば、会社の社風や理念がひと目でわかる短文やキャッチコピー
- 採用サイトであれば採用したい人物像
- ECサイトならピックアップしたお薦め商品の紹介
あまりに多くの情報がファーストビューで目に飛び込んでくるとユーザーは混乱してしまうので、できるだけ情報を選別して掲載することを心がけましょう。
基本的にコンテンツは要約したものを載せる
トップページに載せるコンテンツは、それぞれの下層ページを要約して説明しましょう。ユーザーは一度に多くの情報を処理できません。そのため、ある程度の情報量がありなおかつ楽に読み切れる100～200字程度を目安に設定すると良いでしょう。
下層ページへのリンクも必ず設定してください。興味を持ってくれたユーザーが下層ページを訪れることで、より会社やサービスの理解を深めてくれます。
ビジュアルよりもレイアウトを重視する
おしゃれなデザインやインパクトも重要ですが、無駄を削ぎ落とした使いやすいレイアウトの方が重要です。ユーザーが素敵なデザインに心奪われるのはほんの一瞬で、その後情報を探し始めた時に見つけにくいと離脱の原因になります。
デザインを軽んじていいというわけでは、もちろんありません。ユーザー目線の使いやすいレイアウトを決定した上で、サイトのイメージに合うビジュアルを総合的に考えることが大切です。
スマホ表示も重視する
近頃はスマホからホームページを閲覧する人が圧倒的に増えています。
そのため、ホームページのレスポンシブ対応は必須です。
トップページをレスポンシブ対応するためには、ビジュアル重視ではなく、レイアウト重視のデザインが必須です。ビジュアル重視デザインは、スマホで再現することが難しいためです。
トップページの役割は、スマホにおいても変わりません。パソコンでは機能を十分に実現できてもスマホでできなければ意味がないので、必ずスマホでもトップページとしての役割をはたせているか確認しましょう。
ユーザーのことを理解する
ここまででトップページ作りのコツをいろいろとお伝えしてきましたが、全てのサイトにあてはまるような”絶対”の方法論はありません。自サイトを利用してくれるユーザーがいかに扱いやすく、次も訪れたくなるか、ユーザー目線に立って、トップページのデザインや構成を考えること大事です。
デザインよりも機能的なレイアウトを重視する方がいい業界もあれば、ファッションブランドやデザインの専門学校のように、ビジュアルにモードや斬新さが不可欠なジャンルもあります。大切なのは、自サイトのユーザーが何を望んでいるのか、どんなホームページを見たいと思うのかを理解し、それを形にすることです。
ZERO式ホームページ制作はこちら
まとめ：トップページ構成はユーザーにとってかなり重要
ホームページのトップページは、サイトの顔であり目次でもあります。トップページの見やすさや魅力で、アクセス数や離脱率は大きく動き、引いてはサイトや企業の実績をも左右します。
企業イメージを決定しかねないため、ビジュアルデザインも重要ではありますが、最も大事なのはユーザーが欲しい情報を最短で見つけられる使いやすい構成とレイアウトです。
バランスの良いトップページは、ホームページ全体の評価と業績を高めてくれます。どのようなトップページ作りが自社に合っているのかは、社内でよく検討・計画し、制作会社に細やかに説明しましょう。
この記事のまとめ
・トップページは、目次としての役割がある
・トップページ作りではデザインよりもレイアウト重視
・良いトップページを作るには、ユーザー心理を理解することが何より大事
ホームページは、制作して終わりではなく、公開後の集客が必要になります。
我々はSEOに強いサイト設計とコンテンツ作りを強みに、公開後も検索エンジンから集客し続けるホームページをご提案できますので、集客にお困りの方はお気軽にご相談ください！
