離脱させないトップページの作り方｜基本設計と入れるべき内容や注意点

本記事では、自社のホームページ作成を任された企業の担当者に向けて、トップページの作り方を中心に解説します。ホームページの顔とも呼ばれるトップページは、重要な位置づけにあります。トップページの役割や基本的な構成、入れるべき内容、注意点などを詳しく解説しているため、トップページを作る際の参考にしてください。

ホームページ作成サービス「BiNDup」のテンプレートは目的に合わせたサイト設計をしっかり意識。一緒にみていきましょう。

トップページの役割とは

「HOME」とも呼ばれているトップページは、Webサイト全体の入口にあたる重要なページです。トップページは訪れたユーザーにどのようなWebサイトか、誰のためのWebサイトなのか、Webサイト内で得られる情報は何かを伝える役割を持っています。
トップページに掲載した情報は、ユーザーの興味や関心を引くと同時に離脱を引き起こす可能性があるため、トップページをしっかりと作り込むことが重要です。

BiNDupのテンプレート Daisy Jewellery　より | ユーザーの知りたい情報がひと目でわかるメニューを配置したトップページ

BiNDupのテンプレートはプロのデザイナーがサイト設計を考案。380種以上の豊富なテンプレートはこちらでご紹介しています。

ホームページの内容をユーザーに伝える

トップページは、ホームページで提供している内容をユーザーに伝えるためのものです。ユーザーに対し、役に立つページであると伝える役割を持っています。ユーザーがトップページへアクセスした瞬間に、「こんな情報が欲しかった」と思われる情報があるとわかることが大切です。
ユーザーにとってわかりやすいトップページを作るためには、ヘッダービジュアルとキャッチコピーが重要です。

ユーザーが必要としている情報へスムーズに案内する

トップページは、ユーザーが必要とする情報へ案内するためのページです。トップページを設けることで、ユーザーが求める情報を詳細に解説しているページへスムーズに誘導できます。必要な情報へスピーディーに誘導できれば、ユーザーの離脱を防げます。
ただし、トップページを作る際はユーザーの視点に立つことが大切です。とくに、アイキャッチやレイアウトを決めるときに注意しましょう。

ユーザーに伝えたい内容を目立たせ周知する

トップページは、役立つ内容があると知らせるためだけでなく、ユーザーにとってメリットがある情報を伝える役割を担っています。たとえば、セミナーやイベントの開催情報などは、企業にとって見込み客になり得るユーザーを獲得できる可能性が高まります。
トップページにお知らせやイベント情報などを盛り込み、ユーザーに伝えたい内容を際立たせるなどの工夫が必要です。

ユーザーの信頼感を得る

新しく開発したばかりの商品やサービスなど、知名度の低いものを紹介する場合は、ユーザーの信頼感を得る必要があります。どうすればユーザーの信用を得られるのかを考慮したうえで、トップページにわかりやすく掲載しましょう。
具体的な方法は、トップページを作る際のポイントの項目で詳しく解説しています。また、トップページはユーザーだけでなく、検索エンジンに新しい情報を扱っていることを伝える役割もあります。

→テンプレートからすぐにサイトが作れる「BiNDup」を30日無料体験する

NGなトップページ・ホームページの例

トップページやホームページを作成する際に、やってはいけないことがいくつかあります。NGとされる一例を紹介します。

• トップページですべてを伝えようとする
• 信用を裏付ける内容が含まれていない
• 高画質な画像などを使用し、表示速度が遅い
• 誇大表現でアピールする
• バナーやボタンなどを詰め込みすぎて、どのような企業なのかがわからない
• 導線が複雑になっている
• デザインやフォントに統一感がない
• レスポンシブデザインに対応していない

トップページ（ホームページ）の作りは数年前から変化

従来は、ヘッダー画像やサイドメニューのあるトップページが主流でした。近年は、スマホでインターネット検索するユーザーが増えたため、スマホに対応したページ作りが重視されています。たとえば、「レスポンシブデザイン」や「ペライチ」が挙げられます。
レスポンシブデザインとは、パソコンやスマホ、タブレットなどのデバイスの画面サイズに自動であわせられる機能です。ペライチは「LP」とも呼ばれており、一枚のページにトップページからコンテンツまでを盛り込んでいます。

BiNDupのテンプレート VERT. houseplant shop　より | レスポンシブデザインになっているサイトはスマホ表示の際に最適化された構成になっている

BiNDupのテンプレートはすべてレスポンシブWebに対応。シングルページと複数ページの2パターンのサイト設計から選べます。

トップページの作り方

ここでは、トップページの構成の種類や盛り込むべき内容がわかるように解説します。

トップページの一般的な構成

トップページの構成は、上からヘッダー、ナビゲーションメニュー、メインビジュアル・コンテンツ、フッターの順番になっています。これらの構成をもとに、トップページを作成するのが一般的です。

エリアごとのトップページに載せるべき内容

ヘッダーエリア

トップページの最上部にあたるヘッダーエリアには、会社をイメージさせる画像やキャッチコピーを載せる必要があります。イメージ画像は、ホームページのコンセプトを伝えるうえで有効です。自社のホームページを作成する場合は、会社名のロゴ画像を使用しましょう。
キャッチコピーは、どのようなホームページかを一目で見て理解させるために重要な要素です。長文よりも、短文で誰が見てもわかりやすい言葉を使用すると良いでしょう。

BiNDupのテンプレート Leonardo Spice Shop　より | メインのキャッチコピーでどんなショップなのかすぐにわかるようになっている

飲食店をはじめ、BiNDupのサービスのテンプレートはこちらでご紹介しています。

メニューを記載するエリア

ナビゲーションメニューのエリアには、各ページのリンクを配置しましょう。たとえば、会社情報や問合せ、お客様の声などが挙げられます。ナビゲーションメニューの項目数は、5～7種類が理想的です。数が多すぎると、項目ごとの幅が狭くなりユーザーから見えづらくなる可能性があります。
ナビゲーションメニューに入れたい項目が多い場合は、下の階層を設けるとすっきりしたメニューになります。

メインビジュアル・コンテンツを記載するエリア

メインビジュアルは、ホームページを象徴する重要な要素です。自社がどのような企業なのか、どういった事業を展開しているのかがわかる内容にしましょう。伝えたい内容が複数ある場合は、数枚の画像をスライド形式で表示させる、動画を掲載するなどの方法が有効です。
コンテンツエリアは、ユーザーに伝えたい内容を記載するためのエリアです。たとえば、新着情報・事業内容などの会社情報や、商品・サービスの紹介などが挙げられます。優先順位の高いコンテンツをエリア内の最上部に記載するようにしましょう。

フッターエリア

フッターエリアには、会社名のロゴ画像や会社の基本情報を記載するのが一般的です。フッターエリアに記載した情報は、すべてのWebページに表示されます。会社の基本情報として、会社名や所在地、電話・FAX番号、メールアドレスなどを記載しておくと、実体のある企業の証明になり、ユーザーから信用を得やすくなります。
また、ナビゲーションメニューを簡略化した簡単なメニューやプライバシーポリシー、著作権に関する表記なども配置しましょう。

→テンプレートからすぐにサイトが作れる「BiNDup」を30日無料体験する

トップページを作る際のポイント9選

1.レイアウトを重視することが重要

ビジュアルデザインよりもレイアウトを重視するほうが、トップページの作成で重要です。おしゃれなデザインでも、ユーザーが知りたい情報がどこにあるのかがわからなければ、すぐに離脱されてしまいます。
また、レイアウトの改善が効果を高めたという例も報告されています。ただし、デザインは、一定以上のクオリティが必要です。

2.スマホ表示を重視した作りにする

パソコンユーザーだけでなく、スマホユーザーを意識したトップページを作成しましょう。インターネットを検索するのはパソコンだけではありません。スマホの普及にともない、スマホユーザーによるインターネットの利用が増加傾向にあります。トップページを作成する際は、スマホの画面から見やすいページになっているか確認してから公開しましょう。

3.ごちゃごちゃしたイメージにならないように注意する

すべての情報を伝えようとしてトップページに画像や長文のテキスト、バナー、ボタンなどを詰め込みすぎると、ユーザーにごちゃごちゃした印象を与えてしまいます。優先度の高い内容を掲載し、不要な情報や画像は削除しましょう。近年は、シンプルな構成のトップページが主流なため、目を引く画像と簡単なテキストのみのデザインにするのも良いでしょう。

4.色の使い方に注意する

トップページを作成する際は、配色も考慮しましょう。複数の色を使用すれば、ごちゃごちゃとしたイメージを与えかねません。トップページに使う色を決めることで、統一感のあるデザインになります。たとえば、会社のロゴや企業イメージで利用している配色にあわせるのもおすすめです。トップページの基調となる色は、他のWebページと統一しましょう。

5.文字数や情報量、最初に伝えるべき内容に注意する

キャッチコピーと事業内容を掲載する場合は、一目見て理解できる文字数や情報量にする必要があります。目安は、スクロールせずに見える範囲に、主要情報を1～2個に絞り込むことが大切です。本文の要約は、100～200文字程度におさまるように記載します。トップページでは、ユーザーに最初に伝えたいメッセージを端的に記載するようにしましょう。

6.ユーザーが抱えている悩み・疑問に寄り添ったコンテンツを掲載する

トップページで悩みや疑問に答えるコンテンツを掲載すれば、ユーザーに安心感や共感を与えることができます。たとえば、会話でのやりとりのような内容を入れる、ユーザーと同じ悩みを持っている人の体験談などを掲載するのも良いでしょう。ただし、ユーザーの悩みや疑問を事前に把握しておく必要があります。

7.サービスや商品の信用性を高めてくれる内容を記載する

自社で提供しているサービスや商品をホームページで紹介する場合は、信用性を高める内容を盛り込みましょう。たとえば、「〇〇で第1位を獲得」や「お客様満足度〇％」などの文言は、サービスや商品の信用を高める際に有効です。ただし、誇大表現にならないように、事実に基づいた内容を入れるように注意しましょう。

→テンプレートからすぐにサイトが作れる「BiNDup」を30日無料体験する

8.SEO対策を行う

SEO対策は、トップページだけでなく各ページのコンテンツに施すことで、検索エンジンから評価されるようになります。SEOに有効な施策として、トップページのタイトルは30字以内でビッグキーワードを含めましょう。また、ホームページは公開して終わりではありません。公開後もWebサイトで改善が必要な箇所がないか、定期的に見直し・改善が必要です。

9.ページの表示速度に注意する

トップページが表示されるまでに時間がかかると、ユーザーが離脱するリスクが高まります。たとえば、大量の画像を挿入する、サイズの大きい画像を使用するなど、ページ内の容量が大きくなりすぎると表示速度が遅くなるため注意が必要です。また、表示速度はSEOに影響を及ぼし、検索エンジンからの評価が下がる場合があります。

プロのデザインで構成されたテンプレートなら簡単にトップページが作成できる

トップページは、ホームページの中でも重要なページです。ユーザーの安心感や共感に繋がる内容を掲載しましょう。自社でポイントを押さえたトップページを作成するなら、BiNDupがおすすめです。

BiNDupのテンプレート TSUBAME Hotel より | トップページに必要な要素をプロのデザインで構成されているテンプレートなら簡単にクオリティの高いサイトが作成できる

BiNDupは、豊富なテンプレートや基本的なSEO対策の機能などがそろったCMSです。テンプレートは簡単にアレンジすることができ、手軽にレイアウトの改善を行うことができます。また、画像の最適化も自動で行われるので、ページの表示速度を改善できるなど、トップページに必要なポイントをしっかりとおさえることができます。自社でホームページを作成するなら、ぜひお試しください。

無料でBiNDupを使ってみるBiNDの制作事例を見る