こんにちは、編集長のカワウソです！
ホームページの作成にあたり必ず用意することになる「トップぺージ」。
ただ、いざ作るとなると、「何を掲載すべきかわからない」という方も多いのではないでしょうか。
そこで今回は、トップページの「基礎知識」や「掲載すべき情報」を解説します。
カワウソ
この記事は次のような人におすすめ！
- はじめてホームページを作る人
- トップぺージと他のページの違いが分からない人
- トップぺージに掲載する情報について迷っている人
この記事を読めば、ユーザーにとって「わかりやすい」「使いやすい」トップぺージが作れます。
それではどうぞ！
目次
トップページとは
トップぺージは「ホームぺージの入口」です。
ホームぺージにアクセスしたユーザーのほとんどが、トップぺージから閲覧します。
参考に、弊社が提供するレンタルサーバー「エックスサーバー」のトップぺージは以下になります。
階層構造上のトップぺージ
ホームぺージは一般的に「階層構造」を取っています。
階層構造の一番上が「トップぺージ」、それ以外が「下層ページ」です。
トップぺージにすべての情報を掲載すると、とてつもなく長い、情報が探しづらいページになってしまいます。
そのため、ホームぺージでは情報を整理するために、階層構造が用いられます。
トップぺージには下層ページで扱う「コンテンツの概要」を載せます。
下層ページは2階層目（大カテゴリ）や3階層目（中カテゴリ）というように、カテゴリごとにまとめて配置されます。階層が深くなればなるほど、情報は専門的になります。
言語によって解釈が違うトップぺージ
「トップページ」や「ホームぺージ」は、日本語と英語では異なる意味で使われます。
そのため、ターゲットが理解できる表記に統一するようにしましょう。
まずは表をご覧ください。
| 表現したい内容 | 日本語 | 英語 |
| サイト全体 | ホームページ（ウェブサイト） | website |
| 入口になるページ | トップページ | home page |
前述の通り、日本だと入口になるページは「トップぺージ」と呼びます。しかし、英語圏では「home page」と表現します。
日本でいう「ホームぺージ」はサイト全体を指すことが多いです。
※Web業界など、一部「Webサイト」と表現する人もいます。
とはいえ日本では、下層ページからトップぺージに誘導するためのリンク（画像・テキスト）について、さまざまな表記が見られます。
- TOP（トップへ）
- TOPにもどる（トップにもどる）
- HOME
- ホーム
どれを用いても意味は伝わりますが、できればホームぺージ（サイト全体）で使用する表記は統一するようにしましょう。そうすれば、ユーザーが迷わなくなります。
カワウソ
ホームページとは？Webサイトとの違いや種類を分かりやすく解説
トップページの役割
企業ホームページにおけるトップページの役割は次の通りです。
- ホームページの内容を理解してもらう
- ストレスなく情報を探せるようにする
- ニュース（お知らせ）で新しい情報を届ける
ホームページの内容を理解してもらう
トップページの役割は、ユーザーにホームぺージの内容を理解してもらうことです。
たとえば「ショッピングモールの飲食フロア」を想像してください。どの飲食店も入口のショーウインドウに「メニュー（サンプル）」を置いていますよね。
メニューを見たお客様が「食べたい」と思わなければ、他のお店を求めてその場を離れます。
トップぺージも同じです。
トップぺージに訪問したユーザーはまず、「自分が求めている情報があるか」判断します。なければ離脱するでしょう。
詳しくはあとの「メインビジュアル」で解説します。
ストレスなく情報を探せるようにする
ユーザーが求めている情報をストレスなく探せるようにするのも、トップぺージの役割です。
再度、ショッピングモールを例に考えてみましょう。
ショッピングモールでは、入口に「フロアガイド」が掲示してあります。これを見れば、目的の商品が何階にあるのか分かります。
フロアガイドを見ない場合、目的の商品を歩き回って探すことになるため、時間がかかりますよね。
ホームぺージも同じです。
トップぺージに適切な案内がなければ、ユーザーは情報を探し回らなければなりません。
中には「探すのは面倒だ」と下層ページにアクセスせずに、ホームぺージから離脱するユーザーもいるでしょう。
つまり、トップページはユーザーを適切に誘導するために重要な役割を担っているといえます。
詳しくはあとの「ヘッダー」で解説します。
ニュース（お知らせ）で新しい情報を届ける
ユーザーに新しい情報を伝えるには、トップぺージに「ニュース（お知らせ）」を掲載します。
長期休暇のお知らせ・新商品・展示会・セミナーなど、ユーザーにいち早く伝えたい情報がある場合は、トップぺージのニュース（お知らせ）に掲載しましょう。
先述のとおり、トップぺージは入口であるため、一番最初にユーザーの目に留まります。
また、トップページは初めて訪問するユーザーのためだけにあるわけではありません。以前訪問したユーザーもいれば、すでに自社の顧客であるユーザーも含まれます。
以前とサービス内容が変わったり、提供サービスに障害が発生したりした場合は、できるだけ多くのユーザーに知ってもらう必要があります。
LINEやメールで伝えると同時に、トップぺージに掲載するようにしましょう。
トップぺージの構成
ここではトップぺージによく用いられる構成を解説します。
トップぺージの役割を果たすのに必要なものばかりのため、ぜひ自社のホームぺージに取り入れてください。
ヘッダー
ヘッダーは、トップぺージの一番上のエリアです。
下層ページにも共通して表示されることが多く、一番目にする機会が多いです。
ヘッダーは以下の要素で構成されます。
- ロゴ（社名）
- 電話番号
- お問い合わせフォームのボタン
- グルーバルナビゲーション
ロゴ
ヘッダーにロゴがあれば、ユーザーが一目見ただけで、ホームぺージが誰のものか認識できます。
ロゴのデザインによって、ユーザーが抱く印象は変わります。
まだ、作っていないという方は以下の記事を参考にしてください。
ホームページに適したロゴとは？作り方やお役立ちサイトを紹介
次に、ヘッダーのロゴには、必ずトップページへのリンクが付いています。
ホームぺージを閲覧しているユーザーが迷った際、いつでもトップぺージに戻れるようにするためです。
ユーザーが情報探しに迷ったとしても、トップぺージに戻れれば、「再スタート」が切れます。
ユーザーに情報を届けるために必要な仕掛けです。
電話番号・お問い合わせフォームのボタン
ユーザーの中には、商品・サービスについて、「この商品ちょっと気になるな。質問できないかな？」と考える人もいます。
ヘッダーメニューに「電話番号」や「お問い合わせフォームのボタン」があれば、ユーザーが探し回らずに済みます。
もしお問い合わせの方法がわかりづらかったら、大切なお客様を逃してしまう可能性があります。
ユーザーからのお問い合わせを積極的に獲得したい場合は、必須の要素といえるでしょう。
グローバルナビゲーション
グローバルナビゲーションとは、全ページ共通で表示される「メニュー（リンク）」です。ヘッダーに設置されるケースが多いです。
グローバルナビゲーション作成のポイントは「ユーザーが目的の情報まで簡単に到達できる」こと。
そうすれば、ユーザーが情報を探しやすくなるため、ホームぺージから離脱する可能性が減ります。
近年は、下層ページまで表示・アクセスが可能な「メガメニュー」と呼ばれるグローバルナビゲーションを実装する例も増えています。
引用：ヤマサ醤油株式会社
グローバルナビゲーションの「商品情報」にマウスを乗せてみます。
引用：ヤマサ醤油株式会社
メガメニューを使うと、仮にユーザーの目的のページが三階層目にあったとしても、直接アクセスできます。二階層目のページを経由しないため、よりユーザーのストレスが減ります。
参考例でいうと、「しょうゆ」を探すにしても、「商品情報」にアクセスする必要がありません。
また、グローバルナビゲーションのテキストは簡潔に表現しましょう。リンク先にどんな情報があるのか一目でパッとわかるものが望ましいです。
「テキストだけだと内容が伝わりにくい」と判断する場合は、参考例のように画像を付けると効果的です。
メインビジュアル
ホームぺージにおけるメインビジュアルとは、「ファーストビューにある大きなイメージ画像」を指します。
ファーストビューはユーザーがトップぺージにアクセスした際に、最初に表示される領域です。
多くの場合、ファーストビューには「ヘッダー」「グローバルナビゲーション」「メインビジュアル」までが表示されます。
ユーザーは自分の欲しい情報があるかどうかを、ファーストビューだけを見て瞬時に判断します。トップページすべてを読むことはほとんどありません。
情報の有無について、ユーザーが判断するまでの平均時間は、なんと3秒。
仮に「知りたい情報が掲載されていない」と判断したユーザーは直ちに離脱します。残念ながら、続き（他の情報）は読まれません。
であれば、メインビジュアルではホームぺージの内容をできるだけ端的に伝えるべきです。
情報をシンプルに伝えるのにおすすめなのが、15文字程度の「キャッチコピー」を使うこと。
以下、キャッチコピーの作成ポイントです。
- 何のホームぺージか
- 誰に向けたものか
- 提供されるものは何か
- どんなメリットがあるのか
では実際の例を見てみましょう。
キャッチコピーである「登録するだけで驚きのスカウトが。」を読むだけで、ホームぺージの内容（サービスの内容）について、大方理解できます。
「BIZREACH」はハイクラス転職サイトです。ターゲットは主に役職者です。
役職者は多忙なので、転職するにも「時間を作れない」という悩みを抱えている人がほとんどだと思います。
そんな忙しい人でも、このキャッチコピーを読めば、「登録するだけならやってみようかな」と考えるかもしれません。
このように、メインビジュアルでは、ターゲットに刺さるキャッチコピーを用意しましょう。
コンテンツ
ファーストビューで「知りたい情報がある」「自分にとって価値がある」と判断したユーザーは次の行動に移ります。
欲しい情報が明確に決まっているユーザーは、すぐにグローバルナビゲーションから下層ページにアクセスするでしょう。下層ページだと詳しい情報が取得できます。
欲しい情報が明確に決まっていないユーザーは、トップぺージをスクロールして、さらにホームぺージ全体の概要を掴もうとします。
その際、訴求したいのは「自社の特徴」です。
- 自社の強み
- 自社を活用するメリット
- 自社が選ばれる理由
- 導入事例（お客様の声）
- 実績（導入社数、利用ユーザー数）
自社の特徴を伝えられれば、ユーザーがさらに興味を持つため、下層ページを読んでもらえる可能性が増えます。
ここで意識したいのは、企業の特徴を端的に伝えるということです。
前述の通り、トップぺージに詳しい情報を盛り込みすぎると、ページが長くなり、ユーザーが情報を取得しづらくなります。
トップぺージはあくまでも概要を伝えるようにし、詳しい情報は下層ページに案内するようにしましょう。
ニュース（お知らせ）
ニュースはコンテンツの中に掲載する事例が多いです。
企業からユーザーに伝えたい最新情報があれば、ニュースで紹介しましょう。
ニュースをホームぺージに表示するなら、WordPress（ワードプレス）という無料のソフトウェアがおすすめです。
WordPressはCMS（シー・エム・エス）と呼ばれるものの一種で、ホームぺージやブログの制作・更新ツールです。
WordPressを使えば、Web制作スキルがない方でも簡単に「ニュース機能付きのホームぺージ」が作れます。
詳しくは以下の記事で解説しています。
WordPressでホームページを自作する手順！無料テーマですぐに作れる
なぜ？WordPressが会社のホームページ制作に適している理由
フッター
フッターは、ページの最下部のエリアです。
ヘッダーと同じく、トップぺージ以外にも共通して表示されます。
フッターはページを最後まで読んだユーザーの目に入るもの。ユーザーは「次の行動」を検討します。
情報に満足したユーザーはホームぺージから離脱するかもしれませんし、そうでないユーザーは他の情報を求めます。
後者の場合、フッターに下層ページのリンクがあると、ユーザーの情報探しをサポートできます。
ヘッダーと同じで、クリック数が少ないほど、ユーザーが情報探しに迷わなくなります。
以下、ご覧ください。
引用：おそうじ本舗
テキストリンクで下層ページへのリンクを網羅しているものの、しっかりとグルーピングされているため、情報を探しやすいです。
【種類別】トップページ参考事例
ホームページの種類によって、多少ながらトップページを作るポイントは異なります。
ここでは、トップぺージの参考事例を種類別に紹介します。
ホームぺージの種類ついては、以下の記事で解説しています。
ホームページとは？Webサイトとの違いや種類を分かりやすく解説
コーポレートサイト
コーポレートサイトの目的は「会社のことを知ってもらう」です。
ステークホルダーといわれるように、顧客・取引先・従業員・株主など、さまざまな方が閲覧します。
そのため、必ずしもターゲットを絞るのが正解とはいえません。
そのため、特定のユーザーのみに刺さるメリットを訴求するのではなく、「何の会社なのか」が伝わるように意識しましょう。とくに、まだ知名度を獲得していない創業期の会社では重要です。
以下、参考にご覧ください。
引用：株式会社山崎製作所
「ひとつのギアに想いをこめる」というキャッチコピーから「ギア」を扱う会社だとすぐに理解できます。
その他、コンテンツでは下層ページに案内するためのリンクが分かりやすく設置されています。
引用：株式会社山崎製作所
まさしく、自社の特徴を端的に伝えながらも、ユーザーを下層ページに上手く誘導できているトップぺージの好例といえるでしょう。
ブランドサイト
ブランドサイトは「ブランドのことを知ってもらう」や「ブランドの価値や信頼性を伝える」が目的です。
いくつか種類があるホームぺージの中でも、最もデザイン性が求められます。
以下、参考にご覧ください。
引用：Serta
デザイン性が高いホームぺージは、ユーザービリティ（使いやすさ）が犠牲にされるケースが多いです。
しかし、このSertaのホームぺージは、さまざまな工夫が散りばめられています。
- ターゲットにとって閲覧・操作がしやすい作りにしている
- ファーストビュー以降も見てもらえるように「動き」を付けている
- 「自分だけ」をコンセプトにさまざまなユーザー像を演出している
- 数あるラインナップから選びやすいように特徴が記されている
一見、パソコンから見ると「ヘッダー」がないように思われるかもしれませんが、スマートフォンから見るとヘッダーがあります。
ハンバーガーメニューと呼ばれるように、右上三本線のマークをタップすれば、メニューが展開します。
これは、ターゲットユーザーを一般消費者に設定し、利用率の高いスマートフォンに寄せたデザインといえます。
※法人向けには別途専門ページを設けています。
ファーストビューの下部に「丸」と「縦に伸びる線」で動きを付けています。これはファーストビュー以下のコンテンツも見てもらえるようにするための工夫です。
また、「自分だけの寝心地」が伝わるように、年齢や性別の違う人物の写真を使っているのもポイントでしょう。
さらに、数あるラインナップの中からユーザーが商品選びで迷わないように、「〇〇という人におすすめ」という表記を用いています。
ブランドサイトでありながら、ユーザビリティを意識したホームぺージの好例といえます。
サービスサイト
サービスサイトの目的は「商品・サービスのことを知ってもらう」です。また、多くの場合、「受付窓口」としての役割も担います。
サービスサイトでは、ファーストビューでユーザーが得るメリットを分かりやすく提示する必要があります。
以下、参考にご覧ください。
引用：クラウド人事労務ソフト「SmartHR（スマート・エイチ・アール）」
「仕事の無駄よ、さようなら。」というキャッチコピーで、ユーザーに「仕事の無駄が減らせる」というメリットを提示しています。
トップページをスクロールすると、以下の情報が目に入ります。
引用：クラウド人事労務ソフト「SmartHR（スマート・エイチ・アール）」
「仕事の無駄が減らせる」メリットを「1/3」という数字を用いて説明しています。「導入効果を見る」というボタンを押せば、さらに詳しい情報が取得できます。
このように、ファーストビューで訴求したメリットについて、コンテンツで根拠を示せば、ユーザーにさらに興味を持ってもらえます。
そうすれば、ユーザーを下層ページに案内できます。
リクルートサイト（採用サイト）
リクルートサイトの目的は「人材を獲得する」です。
求職者に向けて、企業や仕事、労働環境に関する情報を発信します。
リクルートサイトでは、自社に合う人材からの応募を促すため、企業や仕事の雰囲気を伝える工夫が欠かせません。
「どんな人に応募して欲しいか」に注目して、メインビジュアルを作るようにしましょう。
以下、参考にご覧ください。
引用：株式会社dig
求める人材像を「考えすぎる人」として募集しつつ、活気よく議論されている様子が、手書き風イラストで表現されています。
社内の雰囲気はもちろん、企業のスキルやセンスが伝わってきます。
デザインにこだわりながらも、ユーザーが求めるコンテンツを適切にトップぺージに配置しています。
「引き算の美学」というように、全体をモノクロカラーに統一し、ヘッダーにある「応募する」というボタンを赤色で際立たせているのもポイントです。
まとめ
この記事では、トップページの基礎知識や構成について解説しました。
今回の内容をまとめると次のとおりです。
- トップページとは「ホームページの入口になるページ」のこと
- トップページには主に3つの役割がある
- ユーザーに下層ページを見てもらえるかは、トップぺージ次第といえる
- トップぺージを作る際は、構成をもとに、ポイントを意識する
ユーザーのことを考えた「分かりやすくて、使いやすい」トップページで、ビジネスを加速させましょう。
以上、最後まで読んでいただきありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
4月21日12時まで利用料金最大30%OFFキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2022年10月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
