ホームページのトップページで意識すべき３つのポイントとデザイン構成

「ホームページを作りたいけどトップページにどんなことを掲載すれば良いのかわからない・・・」

「ホームページはトップページが大事だってよく聞くけど、いまいちピンとこない」

「トップページをどんな構成にすればいいのか基礎知識を教えてほしい・・・」

今あなたは、ホームページのトップページに関するあれこれを探してこのページに辿り着き、解決策を求めてご覧いただいているのではないでしょうか？

そこで、このページでは、はじめての方でもわかるようにホームページにおけるトップページの基礎知識をはじめ、トップページに掲載すべき内容、トップページの役割についてまでをも一気に解説していきます。

この記事を一本読むだけで、トップページについて悩むことがなくなりますよ！

また、誰でも簡単に、わかりやすくて使いやすいトップページを作っていただけるようにトップページ制作のコツまでをも、まるッと整理してまとめさせていただきました！

ホームページにおけるトップページの役割から、魅力的なトップページの作り方に至るまで、どこよりもわかりやすく解説しておりますのでホームページ作成で悩んでいる方は是非ご覧ください！

それではいきま〜す！

トップページってホームページでどんな役割があるの？

トップページはホームページの「入り口」となるページで、ホームページにアクセスしたほぼ全てのユーザーが目を通す「顔となるページ」だと思ってください。

トップページは、いわばホームページにおける「入場門」のようなイメージです。

だから、トップページを基点（入り口）として、ホームページ上のさまざまな場所とつながることができ、さまざまな情報にアクセスできるページであることが望ましいです。

トップページはホームページの掲載情報や会社のイメージをわかりやすく伝えるページ

それに加えて、ホームページ特有の「色」を示すページでもあります（ここでいう「色」とは「個性」のことだと思ってください）。

トップページはいわば該当するホームページが、何について書かれたものなのか、どんなホームページなのか、その印象を大きく左右する一枚のページだと思ってください。

だから、トップページはアクセスしてくれたユーザーに向けて、そのホームページが何についてのページなのかわかりやすく整理され情報のありかとしてまとめられている必要があります。

ようは、簡単な話でホームページにアクセスしたユーザーはトップページにどんな情報が掲載されているかで「どのような会社なのか」または「どのようなサービスを提供しているのか」を直感的に判断します。

そのため、トップページを見ただけでどのような会社なのか？またはどのようなサービスを提供しているのかがわかりやすく示されている必要があります。

トップページの役割は？

トップページの役割は、ホームページ内で扱う情報の「概要」を示すページだと思ってください。

ユーザーがアクセスしたホームページには、どのような情報が掲載されているのかを端的に示し、なおかつホームページにまとめられている「情報の概要」が掲載されているページをトップページとすることが一般的だからです。

ホームページは階層構造になっている

ホームページの全体像を紐解いてみると、実はトップページを基点としてわかりやすくアクセスしやすいように「階層構造」をとっています。

それぞれのページは単体（単ページ）で存在しますが、内容や情報ごとに階層としてまとめられ階層が深くなるにつれ、より上の階層で示されている情報について細かく記されている構造になっています。

ホームページに掲載されている情報はさまざまとありますが、このうちトップページは、ホームページ内で最も高い位置の階層に位置し、ホームページで扱う情報や内容ごとにカテゴリーとして分けられ、全体として一つの統一した情報がまとめられているページとして機能しています。

このようにホームページ内で一番上の階層に位置するのがトップページで、ホームページの顔となる部分がトップページです。

一般的にはトップページを頂点とし、ピラミッド型に第二階層、第三階層と情報が広がりを見せていきます。

そして、コーポレートサイトであれ、サービスサイトであれ、トップページを見ただけでどんな情報が記されているのかを一瞬でイメージできる。

それがトップページの役割です。

だから、トップページを開いた瞬間に、どんな内容について書かれているホームページかがわかる。そんなトップページが最も好ましいです。

入り口は広く開かれ、ページをめくる（階層を降りる）ごとに、入り口に掲載されている情報について詳しく専門的なことが記されている・・・よりそれについて細かい内容が掲載されていたり、深い情報にアクセスできる・・・そんなイメージを持ってください。

言うなれば、トップページは本の表紙（第一階層）、目次がカテゴリー（第二階層）、そして中身がコンテンツ（第三階層）だと思ってください。

英語圏ではトップページのことをホームページと言う

実は英語圏では「トップページ」のことを「ホームページ（home page）」と表現をします。

これはウェブサイトの「ホーム（home）」となるページが「トップ」に当たることからきています。

日本のホームページを見てみると、入り口となるトップページのことを「TOP」または「Home」と記載されていたりと同じ意味を示す言葉が２種類の表現として混在していますが、海外ではトップページのことを「Home」と表現するのが主流です。

ですからもしもあなたの会社が英語圏の人もターゲットに入れているのであれば、「Home」と表現した方がいいと思います。

もちろんどどれをとっても間違いではありません。間違いではありませんが、わかりやすいように一つのホームページ内では第一階層のトップページへ戻る表現を一つに統一するといいと思います。

あるページではTOPに戻ると表現されているのに、別のページではHomeと表現されているとユーザーの立場からすると混乱してしまうからです。

ホームページのトップページ作成で意識すべき３つのポイント

ホームページのトップページを制作するときに意識すべきポイントは下記の３点です。

この３点を意識するだけでトップページが見違えるようにわかりやすくなります。

以下から詳しく解説していきます。

１：ホームページ全体の概要が記されている（何についてのサイトなのかわかる）

トップページの一番の役割は、ホームページに何が掲載されているのか、その内容を概略として理解していただくことにあります。

だから一般的なトップページの構成としては「詳しい内容」は「別ページ」にゆずり、どんな内容が掲載されているホームページであるのかをトップページでは「イメージ」と「テキスト」を使って端的に表現します（トップページの詳しい構成については後ほど説明します）。

つまりは、ホームページにおけるトップページで伝えたいことはホームページに掲載される内容を「イメージ」と「テキスト」を使って的確に表現し伝えることです。

例えば歯医者のホームページは、開いた瞬間にそれがわかるでしょうし、同じ病院でも眼科のホームページは眼科のホームページだとわかるように工夫されています。

歯医者っぽいのに眼科、眼科っぽいのに歯医者なんてことはないはずですよね。

書籍でいう表紙、お店でいうファサード（たてがまえ）、住宅でいう外観のようなイメージを持ってください。

直感的にわかることが大事で、ページを開いた瞬間に目に飛び込んできた画面の表示を見るだけで、どのようなことが記されているのか、どのような事業を行っているのか、どのような会社なのか、中身を読まなくても一瞬でわかるトップページが理想的です。

ホームページにアクセスしたユーザーは、トップページに書かれている内容で自分が求めている情報があるかを判断し、求める情報がなさそうであれば、そのページから離脱してしまいます。

例えば飲食店であれば、イタリアンだったら、イタリアンのそれだとわかる、フレンチならフレンチ、和食なら和食とわかるお店の外観になると思います。

外観はイタリアンでメニューもイタリアンなのに、中身は和食・・・そんなお店があったら、期待を裏切ってしまいますよね。

また何だかよくわからない、何のお店だかわからない外観のお店には足を運びづらいと思うはずですし、中を覗いてみようなんてことは思わないはずです。

そんな、中身をのぞきたくなるようなトップページがいいトップページだと思ってください。

２：扱う情報の概要がまとめられており、それぞれの情報にストレスなくアクセスできる

ホームページ内部に掲載されているそれぞれのページに、ストレスなくアクセスできるようにわかりやすく情報がまとめられているトップページになっているのかは意識してください。

理想としてはどの情報にもトップページからアクセスできるような「導線がある」ことが好ましいです。

ただ、全ての情報に一瞬でアクセスできるページを作成すること、それは難しいでしょうから、基本的には第二階層に当たるカテゴリーにはトップページからアクセスできるように情報を整理してまとめていきます。

（逆にトップページから、全てのページにアクセスできるようにしてしまうとトップページがごちゃごちゃしてしまい使いづらいものとなってしまいます。そうではなく概要が伝わればいいですし、きちんと情報が整理されていれば大丈夫です）

情報をわかりやすく整理するにはナビゲーションメニューを使う

ではどうやって？と言う部分なのですが、多くはヘッダーの位置にナビゲーションメニューを設け、ホームページ内に書かれている情報へとアクセスしやすいように適切に誘導していきます。

トップページはショッピングモールでいうフロアガイドのような役割を担っています。

大きなショッピングモールに買い物に出かけた時、どこに行けば目的となるお店にたどり着けるのか、フロアガイドがないと非常に不便に感じると思います。

だからユーザーが不便を感じないように、それについての情報が欲しい方が、その情報へとすぐにアクセスできるようにまとめていきます。

ナビゲーションメニューに掲載する情報は目的によって変わる

例えば飲食店の場合だったら、メニュー、アクセス、店舗一覧などは気になる方が多いでしょうから、トップページ内の目に留まる位置に配置しておくべきでしょう。

また、トップページはそれぞれのページに誘導する役割も担っていることを強く意識してください。

ホームページ上で伝えたい最も大事なページにもトップページからアクセスできるようにしていくことも忘れてはなりません。

トップページにはユーザーが求めている情報の概要を掲載する

ユーザーがアクセスしたトップページに探している情報がない、このホームページには期待している情報が掲載されていないと思われた時点で下層のページは見られることなく離脱してしまう可能性が高くなります。

探している商品を販売しているお店がモール内にあると思ったからきたのに、モール内に目当ての商品がないと感じたら、そのモールを後にしますよね？

このように、トップページからストレスなくアクセスできないと、そのまま中身を閲覧せずに離脱してしまうユーザーは多いので、扱う情報が整理して適切な箇所にまとめられて、かつトップページからそれぞれの情報にストレスなくアクセスできるのかを意識してトップページを作成して行ってください。

３：常に最新の情報が記されたり、更新されていることがわかる

トップページは常に最新の情報がわかるようになっていたりホームページの更新状況がわかるようにしてください。

なかには最後の更新が随分と古いものだったり、作っただけで放置しているようなページを見ることがありますが、更新情報が古いと、この会社は今も元気なのだろうかと不信感を与えてしまいます。

だから作って終わりではなく、会社としてきちんと動いているイメージを日々の更新でお伝えすることも大事です。

その役割を担っているのが「お知らせ」でしょう。

だから、一般的には「お知らせ」や「ニュース」または「最新情報」などのカテゴリーに分けてトップページに掲載されていることが多いです。

この「お知らせ」の部分を定期的に更新しているだけで、ユーザーからこのサイトは生きているサイトであると認識されます（会社が元気であると思われます（笑））。

お知らせは簡単な情報でいい

何も「お知らせ」するようなことがないと思っている方もいらっしゃるかも知れませんが、そんなことはありません。

例えば、大型連休の前に「お知らせ」として更新する、展示会があれば、日程についてお知らせする、新商品の案内、障害発生のニュースなどもお知らせに記しておくべきでしょう。

その他会社の状況がわかるニュースなど、少しでも伝えられるニュースがあればトップページに掲載してください。

ホームページのトップページは特に、利害関係者が目に留めるページですから、ちょっとした情報にも目を向けてもらえます。

取引先との話のネタを提供すると言う意味でも、定期的に更新をしておくと思わぬところでご縁があったりするものです。

LINEやメールなどを使って定期的に情報をお伝えしている場合でも、トップページにも同じように情報を掲載してください。よりオープンに広く伝わる可能性が高くなります。

トップページの構成要素

トップページは、何が掲載されているのか、どのような情報がホームページ内に掲載されているのかをわかりやすく示すページです。

ではトップページはどのような構成にすればわかりやすく伝えていけるのでしょうか。また具体的にトップページにはどんな情報を掲載すればわかりやすくなるのでしょうか。

実はこれはとっても簡単です。

それは役割と領域ごとにそれぞれの要素を組み合わせるだけでできます。

トップページをわかりやすくする領域と要素は下記の通りです。

ホームページのトップページは基本的に上記の各要素の組み合わせでできています。

それぞれについて詳しく解説していきます。

ホームページの第一印象を左右する要素について

トップページはホームページの中で最も上層に位置するページです。

そしてトップページの中で一番初めに画面に表示される情報でそのホームページは何について書かれたページなのかをユーザーは判断します。

このとき、画面を通して真っ先に目に飛び込んでくる画面領域と情報を「ファーストビュー」と言います。

そしてトップページではファーストビューとして表示される情報がヘッダー領域、それにメインビジュアルまでとなるのが一般的です。

ユーザーはトップページに訪問したときにそのホームページが何について書かれているものなのかを判断しますから、トップページにアクセスした際に、はじめて目にするファーストビューの領域にこそ、最も力を入れる必要があります。

そしてそのファーストビューに当たる部分が下記から解説する「ヘッダー（＋グローバルナビゲーション）」と「メインビジュアル」に当たります。

トップページのヘッダーの役割と掲載する情報

ヘッダーとはウェブページの最上部にあるパーツ（領域）のことを言います。

ヘッダーはトップページを基点として、他のページを開いた時もあらゆるページで表示されることが一般的で重要な役割を担っている要素です。

では、そんな大事な役割を担っているヘッダー部分にはどんな情報を掲載するのが良いのか。

一般的なホームページのヘッダーには以下のような要素を掲載します。

ロゴの役割

ロゴはホームページの運営者を認識するために掲載します。「名札」のような役割がロゴだと思って下さい。

一般的にロゴはヘッダーの「画面左上」、もしくは「画面中央」に表示されます。

またヘッダーにはトップページへのリンクがついていることが一般的で、特定のページにアクセスしたユーザーが閲覧中に「トップページ」に戻りたいと思った時、ロゴをクリックもしくはタップした時にいつでもトップページに戻ることができるようにリンクを張っておきます。

効果的なロゴのデザインについては、ここでは詳しく触れませんが、その会社やその会社のサービスを象徴するデザインであることが好ましいです。

相手にどんなイメージを持ってもらいたいのかによってデザインに手を加えていくものだと思ってください。

電話番号・お問い合わせボタンの役割

ホームページにアクセスしたユーザーが「お問い合わせをしたい」と思ったときに、すぐに問い合わせできるように、ヘッダーにはお問合せ先を記していきます。

電話番号、もしくはお問合せフォームのボタンなどを設置することが多いです。

例えばホームページを閲覧いただいて、自社のことを知ってもらい、双方の利害が一致した際にすぐに問い合わせできるように、わかりやすい位置にお問い合わせページを設置しておく。

お問合せ先ページに誘導する。

するとストレスなく、問い合わせすることができます。

ホームページは会社の名刺のような役割を担っていますが、その主たる目的は、ビジネスの拡大にあるため、わかりやすい位置に問い合わせフォームを設置することが必要なのです。

グローバルナビゲーションの役割

グローバルナビゲーションとは、ホームページの上部に表示されるメニューのことだと思ってください。

「会社概要」「サービス内容」「お問い合わせ」など、横にずらっと短文で据えられているメニューのことです。

一般的なホームページでは全ページ共通で表示されます。

グローバルナビゲーションの役割はホームページにアクセスしたユーザーを迷わせないためにあります。

ですから、グローバルナビゲーションを通して、ユーザーが「目的の情報まで簡単かつ最短で到達できる」ことが望ましいです。

ホームページ内の情報を示す、目次のような役割を担っていると思ってください。

メインビジュアルの役割と掲載する情報

メインビジュアルは「企業イメージ」もしくは「サービスイメージ」を象徴するものです。

トップページにアクセスした際に表示されるファーストビューの領域に含まれており、ユーザーから見た場合、ホームページの印象を大きく左右する要素だと思ってください。

一般的なホームページでは、トップページにアクセスすると「ヘッダー」「グローバルナビゲーション」「メインビジュアル」この３点までが画面一杯に表示されます。

ページを開いた瞬間に真っ先に画面に表示される部分なのでとても大切な情報です。

だから、ここにはホームページに掲載されている内容についての「重要なメッセージ」が含まれていなければなりません。

これは「画像」であれ「テキスト」であれ「動画」であれ、またその両方であれ同じことだと思ってください。

トップページはファーストビューにこそ心血を注ぐべき

なぜ大事なのか？

それは、最初に表示される画面を見ておよそ数秒程度で判断されてしまうからです。

ですから、トップページのファーストビューでユーザーにとって必要のない情報が記されていると、ページから離脱してしまう可能性が高くなります。

それでは離脱されないためには、メインビジュアルとして、どのような要素を端的に伝えていけばいいのか。

キャッチコピーで端的に内容を示す

それは画像と共にキャッチコピーを使うことで解決できます。

短すぎず、長すぎず、画面内に収まるようにおよそ１５文字程度でキャッチコピーをまとめてください。

メインビジュアルに載せるキャッチコピーを作成する上で意識したいポイントは下記の通りです。

以上４つの要素を意識してキャッチコピーを作ると魅力的なキャッチコピーを作ることができます。

ホームページの中身の印象を左右する要素について

ファーストビューで興味をひかれたらユーザーは次に画面をスクロール（またはスワイプ）してこのホームページにはどんな情報が掲載されているのだろうと、トップページから中身を吟味していきます。

このとき目にするのが、各コンテンツへの入り口となる情報です。

もちろんヘッダー領域のグローバルメニューから下層ページに、直接アクセスするユーザーもいますが、ホームページに掲載されている情報に興味を持ったユーザーは、トップページに掲載されている情報をなめるように読み進め、各コンテンツにアクセスしたり、最後までスクロールしてフッター領域まで確認したりといった行動を示します。

コンテンツの役割と情報

トップページ内のコンテンツ領域にはそのホームページの役割と目的に応じた情報を掲載していきます。

例えばコーポレートサイトの場合、「自社のことを知ってもらう」ことが目的ですから、名刺となる役割を担えるようなコンテンツを掲載していきます。

代表的なのは「NEWS（お知らせ）」また「当社の取り組み」などです。

NEWS（お知らせ）

NEWS（お知らせ）は会社の最新情報がわかるページへと誘導するコンテンツです。

企業から伝えたい最新情報を更新してニュースコンテンツとして伝えていきます。

代表挨拶、IR情報

ケースによってはトップページに「代表挨拶」や「IR情報」を掲載することもあります。

代表挨拶の全てではなく一部自社を象徴する重要となる言葉が含まれているキーセンテンスを抜粋したものを掲載し、下層のページに誘導していきます。

また上場企業であれば投資家が閲覧することも多いため「IR情報」としてトップページからもアクセスできるようにリンクを張り誘導をかけていきます。

このように、メインビジュアルより下部の領域は、そのホームページの目的や役割に応じて、必要なコンテンツを掲載していきます。

サービスサイトのケース

サービスサイトの場合は「自社の特徴」や「自社サービスの特徴」をメインコンテンツで打ち出していきます。

例えば、メインビジュアルより下部の領域で下記のようなコンテンツを掲載していくことが一般的です。

以上のような要素を適宜メインビジュアル下部に盛り込み、下層ページにしっかりと目を通してもらえるようにトップページから誘導をかけていきます。

ただ、トップページでは「詳細」については記す必要はありません。

あくまで端的に自社（またはサービス）の特長を伝えることに徹してください。

あまりにも詳しい情報を盛り込みすぎると情報量が多くなり、ユーザーの印象に残らないページになってしまいます。

トップページはあくまで概要、詳細については各ページへ誘導し、案内をしてください。

フッターの役割と情報

フッターはページ最下部にある領域のことを言います。

ヘッダーがページ最上部にある領域に対して、フッターは最下部の領域のことだと覚えてください。

フッターは意外と重要で、なぜならトップページを訪問して内容に興味を持った方は下まで一気にスクロールしていくことが多いからです。

だからヘッダーと同様に下層ページへと簡単にアクセスできるようにリンクを用意し、ユーザーのアクセス先をサポートしていくことが一般的です。

通常は、フッターに下層へとアクセスできるサイトマップ（階層構造のカテゴリー）を設置することが多く、ヘッダー領域に戻ることなくフッターからもストレスなく各ページへアクセスできるようにユーザーの行動をうながしていきます。

まとめ

この記事ではホームページのトップページで意識したい３つのポイントとデザイン構成について解説してきました。

この記事の内容をまとめると、下記の通りです。

以上、今回解説したことを意識してホームページを制作してみてください！

トップページ一つで、ビジネスそのものが変わってくることもあります。トップページはそれほど、ホームページ制作で象徴的でいて大事なページだと思ってください。

以上、最後まで読んでいただきありがとうございました！