ホームページやECサイトなどWebサイトを作成する際に、必ず必要になるトップページ。トップページの印象はWebサイト全体の印象を左右するといっても過言ではありません。
とはいえ、トップページの役割やどのようなデザインにすればいいのか、よく分からないという方も多いでしょう。 この記事では、トップページを作成するうえで意識すべき役割やデザインのポイント・NG例など分かりやすく解説します。
トップページとは、Webサイトの入り口となるページのことです。
本で言えば、表紙・目次の役割を果たします。
ここでは、トップページについて基本を押さえていきましょう。
トップページは、Webサイトの階層構造の最上位に位置します。
一般的に、Webサイトは情報を見やすくするため階層構造で設計されています。
このように、トップページから企業情報をクリックすると企業情報のページに飛び、さらにそこから会社概要や代表者紹介のページに移動できるというように、階層になっているのが一般的でしょう。
仮に、トップページにこれらすべての情報を掲載すると、どこまでも長く分かりにくいページが出来上がってしまいます。
そのため、情報を探しやすく見やすくするために、ページが枝分かれする階層構造を用いているのです。
そして、その枝分かれするすべての階層のスタート地点にくるページがトップページなのです。
トップページを指す言葉には、「TOP」や「HOME」があります。
これらは、利用する言語の違いで異なるものです。
日本では、一般的にWebサイト全体をホームページといい、その入り口となるページをトップページと呼びます。
それに対し、英語圏ではWebサイト全体はWebサイト、その入り口となるページをホームページと呼ぶのが一般的です。
基本的にはどちらの表現を用いても意味が通じることが多いですが、英語圏のユーザーが多いなら表記の違いを理解して使い分けるとよいでしょう。
トップページは、大きく次の3つの役割を担います。
トップページは、Webサイトを訪れた人が最初に目にする部分であり、いわば顔ともいえる部分です。
人の印象は、最初の見た目とくに顔が大きく左右します。それと同様にWebサイトの印象を大きく左右するのが、Webサイトの顔であるトップページです。
ユーザーはトップページにアクセスして最初に見た情報で、そのページが自分の求めているページなのかを判断します。
トップページが分かりにくい・伝わらないものだと、Webサイト全体のイメージも悪くなり離脱されやすくなるでしょう。反対に、トップページでユーザーの興味を引ければ、他のページにもアクセスしてもらいやすくなります。
そのため、トップページは一目でどのようなWebサイトなのかが分かりやすいことが重要です。
トップページは各ページへの案内板の役割もあります。
Webサイトで欲しい情報を入手するには、トップページからさらに下位のページにアクセスする必要があるのが一般的でしょう。
しかし、その情報がどのページにあるのか分からなければ、ユーザーが情報を探すのにストレスを感じ離脱してしまいます。
ユーザーがストレスなくスムーズに情報を得られるように、適切に案内するのもトップページの役割です。
イベントやキャンペーン・新商品の情報など、最新情報をアナウンスすることも役割の一つです。
トップページは、入り口のページであるためユーザーの目に留まる機会は多くなります。
下位ページからアクセスしている場合でも、トップページにアクセスする人は多いでしょう。
そのため、トップページに特に伝えたい情報を掲載することでより多くのユーザーに届けやすくなるのです。
トップページには何を掲載すればよいのでしょうか？ ここでは、トップページの役割を果たすうえで掲載しておきたい重要なコンテンツを紹介します。ホームページ作成の参考にしてください。
ヘッダーとは、ページの最上部にあるパーツです。
最初に目に入る部分でもあるので、Webサイトの印象を決める重要なパーツでもあります。
一般的には、次のような内容で構成します。
ユーザーの中にはWebサイトを見て問い合わせたいという方もいます。
最上部の目立つ場所に連絡先や問い合わせフォームへのボタンがあれば、ユーザーもスムーズに問合せしやすくなります。
また、Webサイトのすべてのページでヘッダーを統一しているケースも多いでしょう。
ロゴ部分がトップページへのリンクになっていれば、他のページからでもスムーズにトップページに戻りやすくなります。
グローバルナビゲーションとは、すべてのページで表示されるメニューのことです。
メニューに各ページへのリンクを設定することで、知りたい情報のあるページにスムーズに誘導できます。
グローバルナビゲーションはヘッダー部分に設置するケースが一般的でしょう。
ただし、掲載するメニュー数には注意が必要です。
メニュー数が多いと項目の幅が狭くなりメニューが見えにくくなります。
数を絞ってスッキリさせるとユーザーも探しやすくなるので、掲載したい項目が多い場合は階層を設けるなど工夫するとよいでしょう。
キービジュアルとは、Webサイトの中心となるイメージ画像のことです。
メインビジュアルとも呼ばれます。
一般的に、ユーザーがページにアクセスして最初に目にする「ファーストビュー」では、ヘッダー・グローバルナビゲーション・キービジュアルが含まれます。
その中でもキービジュアルが占める割合は大きく、サイト全体の印象を左右する重要な要素となります。
そのため、企業やブランドイメージが分かりやすく伝わるキービジュアルにすることがポイントです。イメージ画像だけでなく、キャッチコピーも大切になってきます。
Webサイトの内容や提供するサービス・商品が端的に伝わるキャッチコピーを意識して、キービジュアルを作成するとよいでしょう。
Check
ファーストビューについて、詳しく知りたい方はこちらの記事も併せてご覧ください。
ファーストビューとは？ 重要な理由やCVアップにつながるポイントを解説
ファーストビューでユーザーの興味を引ければ、ユーザーは他のコンテンツへ移動します。
欲しい情報が下位のページにあれば、グローバルナビゲーションから別のページに移動する方もいるでしょう。
とくに見たい情報が決まっていない、とりあえずWebサイトを眺めたいというユーザーは、ファーストビュー部分から下のコンテンツ部分を見ることになります。
コンテンツ部分では伝えたい情報を端的にまとめることが重要です。
コンテンツ部分の情報が多すぎると、下に長く続くページになりユーザーが離脱しやすくなるので注意しましょう。
コンテンツに何を掲載するかは、会社や提供するサービスなどによって異なります。
一般的には、次のようなコンテンツがあります。
ニュースやお知らせ
商品・サービスの特徴
自社の強み
実績
お客様の声
コンテンツ部分で掲載する内容は、あくまで概要です。 詳しい情報は下位ページを設けて誘導するようにしましょう。
フッターとは、ページの最下部にあるパーツです。
トップページ同様に、他のページと共通して設置するケースが一般的です。
フッターはWebサイトの信頼性を高めるために重要になるだけでなく、サイトマップとしての役割を担うケースも増えています。
フッターには下記のような情報を掲載するのが一般的です。
会社情報（ロゴ、住所、電話番号など）
著作権表記
プライバシーポリシー
問い合わせ先や問い合わせフォームへのリンク
SNSリンク
ナビゲーション
ユーザーはフッターまで閲覧したら、次にどうするかを検討することになります。
フッターに別ページのリンクがあれば、ユーザーに次の情報を案内しやすくなるでしょう。
またフッターは、最後までページを見た、企業やサービスに興味関心が高いと思われるユーザーに訴求できる場所です。ここに見てほしいページや重要なページへの誘導を入れれば、クリックされる率は高いでしょう。
トップページを作成する際に、注意しなければならないことがいくつかあります。
ここでは、トップページのNG例として以下の5つを紹介します。
トップページは、あくまで入り口であり案内板です。
すべての情報をトップページで伝えようとすると、文字や画像など詰め込む必要があります。情報量が多いと、ユーザーも欲しい情報が探すのが難しくなりストレスを感じてしまうでしょう。
また、見た目の印象が悪くなることで、ファーストビューで離脱される可能性も高くなります。
トップページは優先度の高い情報だけ掲載して、シンプルで分かりやすくすることが大切です。
トップページの表示が遅いと、表示される前にユーザーから離脱される可能性が高くなります。 表示速度が遅くなる要因としては画像が問題である場合が多く、下記のような点が挙げられます。
高画質の画像を使用している
大量の画像を使用している
画像サイズが大きい
表示速度の遅さはSEOにも影響が出るので注意しましょう。
導線とは、Webサイトに訪れたユーザーを欲しい情報（ゴール）にたどり着くように誘導するルートのことです。
欲しい情報にスムーズにたどり着けないとユーザーはストレスを感じます。
オシャレなデザインで凝ったトップページにしても、どこをクリックすれば知りたい情報にたどり着くのか分かりにくいと離脱されやすくなります。
商品購入や資料請求などWebサイトの目的を明確にし、ユーザーの行動予測をもとに適切な動線設計を行うようにしましょう。
レスポンシブデザインとは、パソコンだけでなくスマホやタブレットなど異なる端末の画面サイズに自動で合わせる機能です。
ユーザーの使用する端末に対応していないと、Webサイトが非常に見づらくなり離脱の原因となります。
ユーザーがどの端末でWebサイトにアクセスするかは分かりません。
近年は、とくにスマホからWebサイトにアクセスするユーザーも増えているので、異なる端末からでも見やすいかは確認することが大切です。
Check
レスポンシブデザインについては、下記で詳しく解説しています。
レスポンシブデザインとは？メリットと作り方のポイントを解説
フォントやデザインはWebサイトの印象を左右する大きな要素です。
ページごとに複数のフォントやデザインが使用されていると、統一感を感じにくいだけでなく読みづらさにもつながります。
パーツごとでは見やすくてもWebサイト全体で統一感がなくなってしまえば、違和感を感じ、離脱につながる恐れもあります。
使うフォントの種類や数・デザイン・色などはルールを決めて、サイト全体に統一感をもたせるようにしましょう。
ここでは、トップページをデザインする際に意識したい具体的なポイントとして次の5つを紹介します。
トップページは見やすく分かりやすいことが大切です。
とくに、ファーストビューの部分は重要になります。
この部分で情報量が多いと、ユーザーはそれ以上見たくなくなってしまいます。
トップページに掲載する情報は優先度の高いものだけにして、それ以外の情報は下位ページに掲載するようにしましょう。
また、トップページに掲載する情報であっても、文字量には注意が必要です。
文字量が多いと一目で理解できずに途中で読まれなくなる可能性が高くなります。
情報は簡潔にまとめて、詳しい情報は別ページに誘導するようにすると読みやすいでしょう。
端末に合わせて自動でサイズを調整する「レスポンシブデザイン」を意識することが大切です。
とくに、近年はスマホで情報を検索するユーザーが増えているので、スマホで表示された場合にどう見えるかを意識してトップページを作成するようにしましょう。
作成する際には、パソコンやスマホで画面を確認しながら作成することが大切です。
トップページの表示速度が遅いと、ユーザーが離脱しやすくなるだけなくSEOにも影響しサイトの評価が低くなる恐れがあります。
必要以上に高画質な画像を多く使用すると、表示速度が遅くなるので注意しましょう。
かといって、解像度が低すぎると画像が荒くなるので、見た目を損ないます。
表示速度を意識する場合、画像の解像度は72dpiがおすすめです。
トップページはデザイン性よりも分かりやすさ・使いやすさが重要です。
会社や商品のイメージに合わせて凝ったページにしても、ユーザーがゴールにたどり着かなければ意味がありません。
そのため、コンテンツのレイアウトは重要になります。
ユーザーが迷子にならずに知りたい情報にスムーズにたどり着けるかを意識したレイアウトかにしましょう。
トップページの色は、Webサイト全体の印象を左右します。
また、トップページの色調に他のページも合わせることで、統一感も生まれます。
色数が多いと目立たせたいコンテンツも分かりにくくなるでしょう。
色調を統一する際は、コーポレートカラーを意識して色を選ぶとより会社や商品をユーザーに印象付けられます。
トップページは、Webサイトの顔でありユーザーに与える印象を左右する大きなポイントです。
トップページの役割を理解し適切にデザインできていないと、ユーザーも離脱してしまいWebサイトの目的を果たせなくなってしまいます。
デザインに凝るのではなく、ユーザーの使いやすさを考え、分かりやすく伝わるトップページをデザインすることが重要です。
効果的なトップページを作りたい、LPのコンバージョンを高めたいと考えている方へ。TOPPANクロレでは、ホームページ制作、ECサイトの運用やマーケティング施策の支援をしております。お悩みや疑問は、どんなことでもお気軽にご相談ください。