「Webサイトの顔」と言われるトップページは、Webサイトの中で最も閲覧される最も重要なページです。トップページが作り込まれていれば、他ページも閲覧されやすくなりますし、コンバージョンにつなげることも可能です。

本記事では、良いトップページを作るためのWebデザインの考え方をご紹介します。Webデザインを外注する際のポイントも解説しておりますので、最後まで読むことで効果の出るトップページが作れるでしょう。

トップページのデザインを作成する前には、他社のサイトを参考にすることで、どんなデザインにしたいか具体的なイメージを持つことが出来ます。シフトが手掛けてきた様々なデザインをぜひ参考にしてください。サイトデザインの参考に！シフトデザイン集⇒

トップページとは

トップページはWebサイトの顔とも称され、ユーザーからの印象が決まる重要なページです。まずは、トップページの概要とホームページとの違いについてご紹介します。

階層構造の一番上に位置しているページ

トップページとは「階層構造の一番上」に位置するページで、Webサイトの入口や玄関と呼ばれることもあります。リンクによって各下層ページに飛べるようになっています。

Webサイトはユーザーが情報を見つけやすいよう、階層を分けて情報を整理しているのが一般的です。たとえば、企業情報の下層には会社概要や代表者挨拶、サービス・製品紹介の下層には各サービスや製品のページがあります。

ホームページとの違い

トップページと似た言葉に「ホームページ」があります。日本でのホームページは「Webサイト全体」を意味することが一般的です。

一方、英語にはトップページという言葉はなく「ホームページ」がトップページを意味します。本来は英語の呼び方が正しいとされていますが、日本ではWebサイト全体を指す言葉としてホームページが広く普及したため、本来のホームページをトップページと呼んでいるようです。

トップページは日本独自の呼び方であり、海外での「TOP」は「各ページの頭に戻る」ことを意味します。そのため、海外向けのサイトでトップページへのリンクを貼る際は「TOP」ではなく「HOME」が適しているでしょう。

トップページの3つの役割

トップページは、Webサイトに訪れたユーザーが最初に目にするページです。Webサイトの印象を決める以外にも、内容を伝える、求める情報に案内する、最新情報を発信するなどの役割があります。ここではトップページの役割を3つご紹介します。

1. ユーザーにWebサイトの内容を伝える

トップページは、Webサイトの内容をユーザーに伝える役割があります。的確に内容を伝えることで、離脱率の低下につながります。

たとえば、オシャレなカフェの情報が欲しくてトップページにアクセスしたのに、カフェのページだとわからない場合、ユーザーは「自分の求める情報はない」と思って離脱してしまいます。仮にカフェだとわかっても、オシャレではないと判断した場合もホームページから離れてしまうでしょう。

トップページで事業内容とターゲットがわかれば、ユーザーは「自分の求める情報があるかも」と思い、サービス内容や企業情報などを続けて閲覧します。場合によっては、購入や問い合わせにつながるかもしれません。

2. ユーザーが求める情報へ案内する

トップページには、情報案内の役割もあります。ユーザーは自分が欲しい情報を求めてWebサイトを回遊することがありますが、別ページを閲覧してもらうために大切なのは「求める情報をスムーズに探せること」です。

たとえば、トップページを見て「この店に行きたい」と思ったユーザーが、Webサイト内でアクセスや営業時間が記載されているページを探します。しかし記載されているページがわからない、深い階層まで潜ったのに情報がないなどの場合、ユーザーは足を運ぶ意欲が低下してしまうでしょう。

こうしたことがないように、トップページではわかりやすいナビゲーションが大切です。ユーザーがストレスなく目的の情報にたどり着けるか、ユーザー目線で確認しましょう。

3. 最新の情報を発信する

最新情報の発信もトップページの役割のひとつです。トップページはWebサイトの中で最も閲覧されるページであるため、トップページに最新情報や重要情報を掲載することで、ユーザーの目に留まりやすくなります。

またトップページで最新情報を発信することは、信頼性のアップにもつながります。定期的な情報発信を行っている企業は「きちんと営業している」「Webサイトの管理ができている」という印象を与えられます。Webサイトは新規顧客だけでなく既存顧客も閲覧しているため、最新情報を定期的に発信することで既存顧客にも飽きられないWebサイトになるでしょう。

トップページの構成と必要な要素

トップページは、ヘッダー、メインビジュアル、コンテンツ、フッターの4つで構成されています。ここではトップページの構成と必要な要素について、詳しくご説明します。

ヘッダー

ヘッダーはトップページの最上部に表示されるパーツです。下層ページにも共通して表示される場合が多く、ページの印象や使い勝手を決める重要な部分です。ユーザーが目的のページに素早くたどり着けるよう、配置する要素やデザインはユーザー目線で分かりやすいものにしましょう。

ヘッダーについてはこちらの記事で詳しく解説しています。気になる方はぜひご一読下さい。
▼ホームページのヘッダーは何が必要？役割や作成ポイントも解説！

ヘッダーには「ロゴ」「グローバルナビゲーション」「お問い合わせ情報」の3つを掲載することが一般的です。

ロゴ

ロゴは企業をシンボル化したもので、ホームページではヘッダーの左上に配置されることが一般的です。横書きの場合、人の視線は左上、右上、左下、右下という順で移動するため、最初に目にする左上に配置することで見る機会を増やして会社名や商品名などをユーザーに印象付けます。

ロゴには、マークのみの「シンボルマーク」、文字のみの「ロゴタイプ」、文字とマークを組み合わせた「ロゴマーク」の3つがあります。ヘッダーに配置するなら、ロゴタイプかロゴマークがおすすめです。これらは企業名がわかりやすく、ユーザーが覚えやすいでしょう。

またほとんどの場合、ロゴをクリックするとトップページに戻れるようになっています。Webサイト内を回遊しても、ロゴからトップページに戻れれば、他の情報にもアクセスしやすくなります。

グローバルナビゲーション

グローバルナビゲーションとは、各ページに飛ぶためのリンクです。メインメニューやグローバルメニューとも呼ばれます。固定されたヘッダーに配置することで、どのページからでも他のページにアクセスできるようになります。

グローバルナビゲーションは第二階層へのリンク集となっていることが一般的で、コーポレートサイトの場合は「企業情報」や「サービス・製品情報」、ECサイトの場合は「ミュージック」「キッチン用品」など、各サイトにおけるユーザーの導線を考えたジャンル分けがされています。数が多いと使い勝手が悪くなるため、5～7個程度にリンクを厳選する、もしくはドロップダウンメニューにするなどして、整理すると良いでしょう。

お問い合わせ情報

ヘッダーにはお問い合わせ情報を掲載することも多いです。電話番号や問い合わせフォームへのリンクなどをヘッダーに設置しておけば、ユーザーが問い合わせたいと思ったときにスピーディに問い合わせにつなげられます。中には最初から問い合わせするつもりでWebサイトを閲覧するユーザーもいるため、トップページの目立つ場所に問い合わせ先が記載されていると助かるでしょう。

お問い合わせ情報は、ヘッダーの右上に配置されることが多いです。大きさや色などを工夫して、目立つようにすると視認性が上がります。

メインビジュアル

メインビジュアルは、ユーザーがトップページで最初に目にするイメージ画像です。「キービジュアル」や「メイン画像」とも呼ばれます。

ヘッダーとメインビジュアルを合わせた領域が「ファーストビュー」で、大切なことは「ファーストビューの段階でユーザーの求める情報があると伝えること」です。ユーザーがトップページに訪問してから離脱を判断するまではおよそ３秒とされており、この間にユーザーが離脱しない情報を与える必要があります。

そのために、メインビジュアルでは自社のイメージを端的に、わかりやすく伝えましょう。イメージが湧きやすい画像はもちろんですが、キャッチコピーをつけることでコンセプトが伝わりやすくなります。コピーの文字数は15文字程度で、自社がどのような企業か、ユーザーにどのようなベネフィットがあるのかを簡単に示しましょう。

コンテンツ

トップページでは、ヘッダーとメインビジュアルの下にコンテンツを表示することが一般的です。

特にWebサイトの全体像を把握したいユーザーやファーストビューで興味を持ったユーザーは、まだ自分の知りたい情報が定まっていません。トップページのコンテンツで概要を示すことで、より詳しく知りたいと思ったユーザーを下層ページに誘導します。たとえばシフトのWebサイトでは、サービス・製品、自社の強み、導入事例などを簡単に記載して、クリックするとより詳しいページに飛べるようになっています。

ただし、コンテンツの情報が多すぎるとスクロールが長くなって、ユーザーに飽きられてしまいます。情報は厳選し、簡潔かつクリックしたくなるような内容にしましょう。

フッター

フッターはページの最下部に表示される領域です。ヘッダー同様、基本的にはすべてのページで共通して表示されます。主に、企業名やロゴ、住所、電話番号、問い合わせ先などのほか、SNSへのリンクやプライバシーポリシーなどを掲載する場合が多いです。フッターに企業情報を掲載することはすでに一般的となっており、企業情報があることでユーザーからの信頼性も高まります。

またフッターにはコンテンツと同様に、ユーザーの動きを誘導する役割もあります。特に、サイトマップを掲載してユーザーがサイト内を回遊できるようにするWebサイトは多いです。フッターまで閲覧したユーザーは、自社に興味を持っている可能性が高いため、問い合わせや資料請求などのリンクを設定することで、コンバージョンにつなげることも可能です。

フッターについてはこちらの記事で詳しく解説しています。気になる方はぜひご一読下さい。
▼ホームページのフッターはどのように作成・デザインすべき？

デザイナー直伝！トップページのデザインを作るときのポイント

トップページはWebサイトの「顔」です。トップページのデザインで興味を惹けなければ、下層ページも見てもらえません。ここではトップページのWebデザインにおけるポイントをご紹介します。

色数を絞り、統一感のある配色にする

トップページの色数は限定し、統一感のある配色にすることが重要です。色数が多いと情報が錯綜し、まとまりのない印象になってしまいます。

色数は3種類～4種類程度。割合は、背景などのベースカラーが７割、背景以外の部分に使用するメインカラーが２割、目立たせたい部分に使用するアクセントカラーが１割程度の割合で使用しましょう。これを守ることで、まとまりのあるトップページになります。

また色を選ぶときは、自社のイメージに合った色にしましょう。たとえば、IT企業や銀行、士業では知性的なイメージを持たせるために青をメインカラーとする場合が多いです。すでにロゴがある場合は、ロゴとWebサイトの色を合わせるのも良いでしょう。

スマホでもデザインが崩れないようにする

トップページはスマホで閲覧した場合でも、デザインが崩れないよう配慮しましょう。現在はスマートフォンから閲覧するユーザーが多い上、Googleもスマホ表示を重視しているため、対策は必須と言えます。

スマホ・パソコン両方からのアクセスに対応するなら、レスポンシブデザインを採用しましょう。レスポンシブデザインは、同じURLを利用しながら、閲覧するデバイスに合わせて表示を最適化する手法です。レスポンシブデザインを採用することで、デバイスにかかわらず閲覧しやすいWebサイトになり、ユーザーの満足度が向上します。

ただし、レスポンシブ化することでスマホで表示したときにレイアウトが崩れてしまう場合もあります。レスポンシブデザインを採用する場合は、必ずパソコンとスマホの両方から確認して、どちらでも見やすいように調整しましょう。

情報は適切な量に絞る

トップページに掲載する情報は、適切な量に絞りましょう。情報が多すぎると詰め込まれた印象になり、ユーザーの閲覧する気力をなくしてしまいます。情報に優先順位をつけて、優先度の高いものを簡潔に表示することを心がけましょう。

トップページでは、基本的に「シンプル」を大切にしましょう。アイコンやイラストなどの画像と簡潔な文章を適切に組み合わせることでユーザーには十分伝わります。簡単な情報を見て、ユーザーがもっと知りたいと思った場合は下層ページに誘導するという導線が適しています。

ただし画像が重いと表示速度が遅くなるデメリットもあるため、画像を使用する場合はサイズを最適化することも重要です。

ユーザーが迷わないレイアウトにする

トップページではユーザーが迷わないレイアウトを心がけましょう。デザインにばかり配慮した結果、ユーザーが情報を見つけにくくなっては意味がありません。ある程度のデザイン性を担保しつつ、ユーザーが迷わずに情報にたどり着ける導線を作ることが大切です。

ユーザーが迷わないレイアウトにするには「シンプルなデザイン」を意識することです。シンプルなデザインを意識して不要な情報を削除することで、伝えたい情報を効率よく伝えることができます。

CTAを適切な場所に配置する

CTAとは、Call To Action(コール トゥ アクション)の略で、Webサイトの訪問者に特定の行動を促すためのテキストやボタンなどの要素のことです。お問い合わせや資料ダウンロードなどが該当します。

CTAは適切な場所に配置しましょう。CTAが適切な場所に配置されていると、ユーザーが行動を起こす可能性が上がり、コンバージョンにつながりやすくなります。

トップページでCTAを配置しておきたい場所は、ヘッダーとフッターです。先述したように固定されているヘッダーにお問い合わせや資料請求のCTAが配置されていれば、ユーザーが行動を起こしたいと思った際に迷わず行動ができます。

またフッターもCTAを配置する場所として適しています。フッターにたどり着いたユーザーは、トップページを最後まで見ているユーザーです。トップページを見て意欲が高まっているところにCTAを配置することで、行動を促しやすくなります。

サイト種類別！トップページのデザイン事例

Webサイトには、コーポレートサイトやECサイトなど、さまざまな種類があります。いずれのページにもトップページは必要ですが、デザインのポイントは種類によって違います。ここでは、各WebサイトにおけるトップページのWebデザインのポイントを事例と共にご紹介します。

コーポレートサイト

コーポレートサイトの目的は「企業の紹介」です。新規顧客はもちろん、既存顧客や投資家、求職者などさまざまなユーザーが閲覧します。

コーポレートサイトでは「企業の印象」を残すことが非常に大切です。事業内容などの基本的な情報をわかりやすく伝えることに加え、自社ブランドやイメージを伝えるためのデザインを意識しましょう。

参考事例

ロゴにも使用されているイメージカラーの青をメインカラーとした統一感のあるデザインです。ユーザーに伝えたい情報が簡潔にまとまっているため、迷わずに目的のページへたどり着けるわかりやすいレイアウトになっています。

株式会社シフトで制作したコーポレートサイトの実績は下記よりご覧ください。
コーポレートサイトの実績を見る

ECサイト

ECサイトの目的は「売上の増加」です。既存顧客と新規顧客を主なターゲットとしており、ターゲットが使いやすいトップページであることが重要になります。

購入したい商品に辿り着けるようにわかりやすい場所に検索窓を設ける、手早く買い物ができるようにログインや買い物かごの確認がしやすいなど、利便性の高いトップページを目指しましょう。

参考事例

ヘッダーの中央に検索窓を大きく配置しています。ファーストビュー内に検索窓を適切な大きさで配置することで、サイト内検索の利用率を高めています。また、トップページでは各カテゴリー名に製品を連想できる写真を一緒に並べることで、文字だけでは目が滑ってしまう単調さをカバーしています。

株式会社シフトで制作したECサイトの実績は下記よりご覧ください。
ECサイトの実績を見る

ポータルサイト

ポータルサイトは他サイトへの玄関口となるWebサイトで、主な目的は「認知度の拡大」です。基本的にターゲットは定めず、すべてのユーザーへの認知を目的としています。ただ、ジャンルを定めたポータルサイトの場合、そのジャンルに興味を持っているユーザーがターゲットです。

ポータルサイトは情報が集まる場所のため、情報を整理して閲覧しやすくしましょう。注目度の高い情報をファーストビューにすることで、回遊性も高められます。

参考事例

扱っている製品の情報を集約しているポータルサイトです。常に最新の情報が更新されており、注目度の高い情報はファーストビューに大きく掲載しています。画像が大きく数も多いですが、情報と色数を絞ることでごちゃごちゃした印象を与えないバランスが取れたデザインです。

株式会社シフトで制作したポータルサイトの実績は下記よりご覧ください。
ポータルサイトの実績を見る

サービスサイト

サービスサイトの目的は「特定のサービス・商品の認知度アップ」です。主に見込み客をターゲットとしていますが、既存顧客にも新しいサービスや製品を知ってもらえる機会になります。

サービスサイトでは、サービス・製品のイメージが大切です。イメージに合ったデザインにすることで、ユーザーに強い印象を残せます。ユーザーのベネフィットがわかりやすい内容にしましょう。加えて、コンバージョンまでの導線を意識した構成も大事です。

参考事例

ファーストビューでセミナー実績を具体的な数値で大きく掲載し、ユーザーに対して安心感と透明性を与えています。また、スクロールすると画面下部にCTAとなるボタンが固定で表示されるため、ユーザーがいつでも簡単にアクションを起こせるようになっています。

上記サイトを含めたサイト種類ごとの目的や制作のポイントについては、こちらの記事で詳しく解説しています。気になる方はぜひご一読下さい。
▼自社に合うWebサイトの種類とは？目的や制作のポイントも解説！

トップページのデザインを制作会社に依頼するときのポイント

Webサイト制作のノウハウがない場合、制作会社に制作を依頼することになります。依頼の際、門外漢だからと制作会社に丸投げするのは止めましょう。イメージと違うWebサイトになってしまい、修正のために余計な時間やコストがかかる可能性があります。

イメージ通りのWebサイトを作成するには、事前準備や作業など自社側でも協力することが大切です。ここでは制作会社にトップページデザインを依頼する際のポイントをご紹介します。

参考とするサイトを用意する

制作会社に依頼する際は、参考サイトを用意しましょう。参考サイトを用意することで、Webサイトのイメージを制作会社と正確に共有できます。

Webデザインに限らず、イメージは言語化は非常に難しいものです。たとえば「スタイリッシュでカッコ良いトップページにしてほしい」と依頼しても、自社が思うスタイリッシュと制作会社が思うスタイリッシュは違う場合があります。結果、自社が思っていたイメージと違うものになってしまいます。

参考サイトを事前に用意してイメージを共有しておけば、イメージ通りのデザインを作成してもらうことができます。

参考とするサイトや画像を探すのにおすすめのギャラリーサイト

SANKOU!　　公式サイト：https://sankoudesign.com/

SANKOU!は、サイトの種類はもちろんのこと、テイストや色、動きなど沢山のカテゴリで見ることができます。スマホでのデザインを一緒に確認できるため、レスポンシブデザインを確認したいときにおすすめです。

ちょうどいい　　公式サイト：https://choooodoii.com/

ちょうどいいは、各サイトのポイントを解説しています。いいと感じるサイトが何故いいのか、次の項で紹介する「そのデザインにしたい理由」を考えるときに参考になります。

S5-Style　　公式サイト：https://www.s5-style.com/

S5-Styleは、「AND検索」や「OR検索」で見たいサイトを絞り込むことができます。「コーポレートサイトかつ青色」など、自社の条件やイメージに近いサイトを見たいときにおすすめです。

なぜそのデザインにしたいか、理由を伝える

制作会社への依頼では「そのデザインにしたい理由」を伝えましょう。理由を伝えることによって、制作会社に目的が伝わります。制作会社はWebデザインのプロですので、理由を聞いて目的や方向性が明確になれば、より良い提案をしてくれることもあります。

たとえば「ピンクを使って欲しい」という要望をする場合、「若い女性がターゲットで、製品のコンセプトカラーがピンク」と伝えれば「ピンクをベース、もしくはメインカラーに使用して、全体的に淡い色。フォントもポップで可愛いものにしましょう」などの提案をもらえるでしょう。

制作会社が自社側の意図を汲み取れれば、デザインは徐々にブラッシュアップされていき、より良いものになっていきます。

素材はデザイン着手前に共有する

使用したい写真や動画などがある場合、デザイン着手前に共有しましょう。

写真や動画などの素材が着手前に共有されていない場合、制作会社は仮の素材を入れて制作を行います。しかし、実際に使用する素材に差し替えた結果、イメージが変わってしまったというケースがあります。

ロゴや写真、動画などの素材は、Webデザインの一部です。別のイメージを使用して作成すると、差し替えたときに全体のバランスが崩れてしまい、イメージと違うものになる可能性があります。この場合、バランスを整えるための修正が必要になるため、時間やコストがかかってしまいます。

こうした状況を防ぐために、着手前の素材の共有が大切です。もし着手前の準備が難しい場合は、渡せる期日を制作会社に伝えましょう。

関係者全員でデザインを確認する

Webデザインは、関係者全員での確認が必要です。事前に関係者で方向性をすり合わせてから依頼を行い、段階的に納品してもらって、全員で確認を行いましょう。関係者内での確認ができないままデザインが完成すると意見の相違が起こり、場合によっては大きな修正や一から作り直しになり、結果としてスケジュールが後ろ倒しになるる可能性があります。こうなると、時間もコストも倍かかってしまいます。

特に注意したいのは、担当者と承認者間での共有です。承認者の確認を得ず、担当者と制作会社でWebデザインを進め、完成してから承認者に提案したら承認されなかったというケースがあります。まずは担当者と承認者が方向性やデザインのイメージをしっかり共有し、その上で制作会社に依頼しましょう。

制作会社に依頼するときに、他に用意しておくべきことはこちらの記事で詳しく解説しています。気になる方はぜひご一読下さい。
▼最低限知っておきたい！ホームページリニューアルの進め方

魅力的なトップページをデザインしよう

トップページはサイトの階層構造の一番上に位置しており、企業の印象に関わる重要な役割を担っています。配色や情報量に気を付けて作成することが大切ですが、サイトの目的やサービス内容などを元に自社らしさが伝わるデザインを作成することで、他社と差別化できる魅力的なトップページになります。

株式会社シフトでは、これまで様々な業種、サイト種別のトップページを作成してきました。「どんなデザインにしたらいいか分からない」「古いデザインを一新させたい」など、トップページのデザインでお悩みを抱えている方はぜひこちらからお問い合わせ下さい。
⇒トップページのデザインについて相談する

まとめ

トップページのWebデザインは、ユーザーがWebサイトを閲覧するか決める重要な要素です。自社のブランドやWebサイトの種類に合わせて、最適なトップページを作りましょう。