トップページに必要な8つの要素と気を付けるべき4つのポイント

1154
Pocket

 

トップページのデザインをどうするか、どんなコンテンツを表示させるか、Webサイトを運営する多くの方が、一度は悩んだことがあるのではないでしょうか。

 

トップページのデザインはカスタマイズ性が高く、サイト運営者のこだわりや方針などが色濃く反映されます。しかし、大前提として、トップページのデザインはユーザビリティを考慮したものでなければなりません。

 

多くのユーザーが、トップページを見てそのサイトを「閲覧するかどうか」を判断します。斬新なデザインであってもユーザーがどんなサイトか瞬間的に理解できないようなトップページでは、ユーザーは離れていきます。

 

では、ユーザビリティの高いトップページデザインにするために、どのようなことを意識すべきでしょうか。また、どんな情報をトップページに載せるべきでしょうか。

 

トップページが備えておくべき8つの要素と、気を付けるべき4つのポイントについて、ユーザビリティに関する書籍から抜粋してご紹介します。

 

トップページが備えておくべき8つの要素

まずは、トップページが備えておくべき8つの要素についてご紹介します。

 

①サイトの概要と役割

このWebサイトがどのようなサイトで、何のために存在するのかを示したもの。また、他のサイトとの違いを示したもの。

 

②サイトの階層概略

どんなものが提供され、どんな機能があり、どのように構成されているかを明らかにしたもの。グローバルナビゲーションなどがこれに相当します。

 

③検索機能

多くのWebサイトのトップページには検索窓が設置されています。情報量の多いWebサイトでは検索窓を使用するユーザーが多いので、設置は必須と言えるでしょう。

 

④見どころ紹介

見どころ紹介では、コンテンツの宣伝や最新の話題などを取り上げることで、サイト内に素晴らしい情報があることをユーザーに知らせることができます。ここでユーザーの心をつかむことができれば、じっくりサイトを閲覧してくれるかもしれません。

 

⑤タイムリーなコンテンツ

トップページには、頻繁に更新される「本日のニュース」のようなコンテンツを置く必要があります。これは、ユーザーに対してサイト全体が頻繁に更新されていることを示します。

 

⑥広告

バナー広告など、商取引に充てられるスペースも設けておく必要があります。

 

⑦ショートカット

頻繁にアクセスされるコンテンツには、トップページから直接リンクを張っておくとよいでしょう。

 

⑧登録

登録制を取り入れている場合は、新規登録やログインするためのリンクと、ログインした際の表示をトップページに掲載しましょう。

 

トップページが備えておくべき8つの要素

 

これらすべての要素をトップページが備えていることが理想的ですが、トップページのスペースは限られているので、多くの場合いくつかの要素を妥協しなければなりません。

 

そして、最も重要でありながら最も頻繁に取り除かれてしまう要素が「サイトの概要と役割」です。この要素はユーザーが「どんなサイトで何ができるのか」理解するために必要で、サイトのユーザビリティに大きな影響を与えます。

 

「一目瞭然だから必要ない」「何度も訪れるユーザーが煩わしく思うのでは」という理由でこの要素を入れないサイト運営者をよく見かけますが、できる限り入れるようにしましょう。

 

サイトに訪れたユーザーはまず、トップページのわかりやすさでそのサイトを利用するかしないか判断します。だからこそ、トップページでサイトの全体像を伝える必要があるのです。

 

ユーザビリティの高いトップページデザインにするために注意すべき4つのポイント

 

適切なタグラインを設定する

タグラインはしばしば、サイトIDの横や上下に表示されます。

その役割は、ユーザーに「どんなサイトで何ができるのか」紹介することです。

 
タグラインの例
 

タグラインを設定する際に気を付けなければならないことが、明確で必要な情報を提供することです。漠然としているものや、独特な言い回しは避けた方が良いでしょう。また、タグラインは20~30文字程度にし、長すぎないようにしましょう。

 

誰もがそのサイトのことを知っているような大規模なサイトであっても、タグラインを設定しておいて損はないので、設定しておくことをおすすめします。

 

ナビゲーションで下層ページにどんな情報があるか示す

グローバルナビゲーションは、サイト全体の階層構造を理解するのに役立ちます。ユーザーにとって使いやすいグローバルナビゲーションのデザインに関しては、以下の記事で詳しく説明しているので、1度目を通してみてください。

 

グローバルナビがユーザビリティを大きく左右する!あなたのサイトが“使いやすい”と思われるために必要な4つのこと

 

トップページは他のページとは性質が異なっているため、グローバルナビゲーションのデザインが他のページと多少異なっても構いません。しかし同じサイトであることが明確に分かるように、フォントや色などはできる限り同じものにしましょう。

 

ポップアップやドロップダウンメニューのデメリットを理解する

トップページのスペースは限られているため、マウスオーバー時のポップアップやドロップダウンメニューを活用している方も多いと思います。これらは便利なものですが、ユーザビリティを下げる原因になっているかもしれません。

 

ポップアップやドロップダウンメニューのデメリットは以下の通りです。

 

  • 見つけ出す手間がかかる
  • 1度に1つしか表示できない
  • 素早く表示されたり消えたりするため、落ち着いて読むのが難しい
  • 斜め読みができない

 

ポップアップやドロップダウンメニューはスペースの節約という面では非常に便利ですが、これらのデメリットもあるということを理解して利用しましょう。

 

特別な理由がない限り、バナー広告をファーストビュー※に置かない

どうしても必要でない限り、バナー広告をファーストビューに配置しない方が良いでしょう。ファーストビューはトップページの中でも特に重要な部分であり、スペースは限られています。ユーザーにサイトを瞬間的に理解してもらうためにも、他の要素を優先して配置しましょう。

 

アフィリエイトのような広告収入がメインのビジネスモデルや、自社の商品やサービスのバナー広告を出すことでトラフィックを増やしたいといった例外もあるので、サイトの目的によって判断しましょう。

 

※ファーストビュー:スクロールしないで見ることができる範囲のこと

 

まとめ

初めてあなたのサイトに訪れたユーザーが、以下の質問に答えられるようなトップページでなければ、わかりやすいトップページとは言えません。

 

  • 検索するならどこから?
  • サイトを閲覧するならどこから?
  • このサイトの1番のおすすめのコンテンツはどこ?

 

トップページが備えておくべき8つの要素と、今回説明した4つのポイントをしっかり理解したうえでトップページをデザインすれば、多くのユーザーがこれらの質問に答えられるようなトップページになるでしょう。

 

Pocket

無料ebook

今すぐ見直すべきサイト内部リンク4つのポイント
姓(必須)
名(必須)
会社名(必須)
電話(必須)
メールアドレス(必須)
個人情報のお取り扱いについて

競合比較ができるSEOツール

最大10項目(順位/被リンク数など)の競合調査が無料でできます。

プロモニスタ編集部
プロモニスタでは、コンテンツマーケティングとコンテンツSEO、SEO対策を中心にwebマーケティング関連の最新情報やノウハウ、当社の事例を発信しています。