WEBサイトにおいて、トップページはとても大事なページです。
でも、トップページを作るのに慣れていないと、どんな作り方をすればいいかわからないと思います。
もしあなたがWEBサイト制作に慣れていないなら、以下のような悩みがあるのではないでしょうか？
- トップページには何の要素を入れるべきなの？
- トップページでは何を重視すべき？
- トップページにはどんな役割があるの？
- トップページで表示すべきものはサイトの種類で変わる？
- トップページを作る手順は？
ここでは、WEBサイト制作のディレクションやコーディングを10年以上行っている私が、もっとも成果の出るトップページの作り方を解説します。
トップページの役割とは
トップページの作り方を解説する前に、トップページが持つ役割を解説しておきましょう。
トップページの役割を知ることで、トップページに必要な要素がわかります。
- 全体像を伝える
- ユーザーを引き込む
- プッシュを行う
トップページには、上のような役割があります。それぞれの役割を解説していきます。
全体像を伝える
トップページというのは、サイトの「顔」であり、そのサイトがどんなサイトなのかを最も伝えるページです。
多くの人は、WEBサイトを訪れた時にトップページを見ますし、トップページでサイトのコンセプトを知り、トップページから自分の読みたい情報を探します。
だからこそトップページでは、どのようなサイトなのかという全体像を知らせなくてはなりませんし、ユーザーが知りたい情報を掲載しなくてはなりません。
トップページを見た時に、何のサイトなのかがわからないようなサイトではダメですし、情報が少なすぎるサイトもトップページの役割を果たせていません。
ユーザーを引き込む
トップページは、サイト名で調べた人がアクセスしますし、初めてサイトを訪れた人の多くが見るページです。
だからこそ、興味本位でみているユーザーの関心をつかみ、さらにユーザーに多くのページを読んでもらうよう引き込む必要があります。
ですので、トップページでは期待感を持たせたり、ユーザーの役に立つ情報を掲載することで、ユーザーを引き込むのがよいです。
お店なんかでも、ウインドウに商品を並べておいて、通りかかった人が商品に興味を持ってお店のなかに入りますよね。あれと同じです。
プッシュを行う
ユーザーに情報を届ける方法としては、「プッシュ型」と「プル型」があります。
プッシュ型は自分からアプローチをかけていくものであり、プル型はユーザーが自分から情報を得て訪れるものです。
GoogleやYahooなどの検索からWEBサイトに集客する場合には、ユーザーが自分から検索してサイトを見つけるので「プル型」になります。一方、営業やテレアポなどは、こちらから情報を届けるので「プッシュ型」となります。トップページは、この「プッシュ型」の役割となります。
WEBサイトを訪れた人に対して、「こんなサービスがありますよ」「こんな新商品が出ましたよ」「こんなコンセプトですよ」という情報をプッシュするのがトップページなのです。
そして、情報に興味を持ってもらって下層ページで成約を獲得するのです。つまりトップページは、新規獲得の営業マンのような役割があります。
トップページの作り方：準備編
トップページを作る時には、いきなり取り掛かるのではなく準備が必要です。
誰に向けて、どんな情報を、どんな構成で提供するかを決めなくては、トップページを作ることができないからです。
「とりあえずこんな情報を入れときゃいいだろ」とトップページを作ってしまうと、誰にも興味を持ってもらえないトップページが出来上がりますので注意してください。
トップページを作る時には、以下の準備を行いましょう。
- ターゲットを設定する
- マーケティング戦略をまとめる
- 読者の思考の流れを考える
- マーケティング戦略と読者の思考をミックスする
ターゲットを設定する
WEBサイトを作る時にはターゲットユーザーを設定すると思いますが、トップページでもそのターゲットに向けてコンテンツを作ります。もしまだターゲットが決まっていなければ、早速設定しましょう。
ターゲットを考える時には、ペルソナを設定しましょう。ペルソナは典型的なユーザー像のことで、できるだけ詳細な現実にいる人物像を作りましょう。
年齢や性別、家族構成、職業などのデモグラフィーや、ターゲットユーザーはどのような情報を知りたいのか、知識レベルはどれくらいなのか、どんな言葉に魅力を感じるのかを具体的に考えましょう。
トップページでは、そのターゲットユーザーが求める情報を提供していくのが大事になります。
マーケティング戦略をまとめる
トップページを作る時には、マーケティング戦略をまとめておくと、後々の作業がスムーズに進められます。
マーケティング戦略とは、「競合の情報」や「自社の資産・強み・ターゲット」などの情報を分析しまとめた戦略です。競合を調べ、他社にはない自社の資産を分析し、その資産から生まれる独自の強みは何かを考えましょう。
これらの情報をまとめることで、トップページで掲載すべき情報がわかってきます。
例えば、もし自社の強みが老舗であることなのであれば、トップページでは実績や老舗のブランドをアピールすべきですし、強みが技術力なのであれば、その技術力の根拠の設備や人材、商品の写真などをアピールすべきでしょう。
このマーケティングの分析で便利なのは「Basics戦略」というマーケティング戦略です。興味がある人は以下の記事を読んでみてください。
ユーザーの思考の流れを考える
トップページに必要な情報がわかったら、次にはどのような順序でそれらの要素を並べるかを考えます。
トップページの要素は、ユーザーが読みたい順序で並べるのがポイント。なぜなら、ユーザーは自分が読みたい情報を読みたいタイミングで求めるからです。
WEBサイトや本、雑誌などのコンテンツは読者の思考の流れに沿っていないと、読者は読むのをやめてしまいます。あなたも、ページで読みたくもない商品の紹介が書いてあると、さっさと読み飛ばすと思います。
ユーザーが、どんなことを考えながらトップページを読むかを想像しましょう。例えば、ユーザーがサイトを初めてみたときは、以下のような流れで疑問を持つことがあります。
- 何がテーマのWEBサイトだろう？
- どんな情報があるんだろう？
- どんなサービスがあるんだろう？
- どんな企業が運営しているの？
- 実績はある？
トップページのコンテンツは、この思考の流れに沿って設置していくのです。
- 何がテーマのWEBサイトだろう？→コンセプト
- どんな情報があるんだろう？→カテゴリ一覧
- どんなサービスがあるんだろう？→サービス紹介
- どんな企業が運営しているの？→運営企業紹介
- 実績はある？→実績紹介
このように、ユーザーの思考の流れに沿ってトップページのコンテンツを配置すれば、ユーザーにちゃんと読んでもらえます。
ワイヤーを作成する
ここまでで、トップページに配置すべきコンテンツと配置順が決定しました。次には、それをワイヤーを使ってビジュアルに落とし込みます。
メニューや画像や見出し、キャッチコピー、リンクはどのように配置されるのかなど、トップページに必要なすべての要素を設置します。
これによって、実際のトップページに近い形でイメージができるようになります。
デザイナーやライター、コーダー、クライアントともイメージを共有することができるので、必ず作成するようにしましょう。
トップページの作り方：作業編
WEBサイトのトップページを実際に作る作業での、注意すべきポイントを紹介していきます。
ファーストビューに注意
トップページのファーストビューには注意が必要です。
トップページは、「ユーザーを引き込む」のが目的ですので、ファーストビューでは特に目を引くコンテンツを持ってきましょう。
よく「メインビジュアル」と言われる大きな画像を上部に設置することが多いです。映像などを上部に設置することもあります。ユーザーの興味をひと目で引くコンテンツにしましょう。
また、ファーストビューでは文字を詰め込みすぎないようにしましょう。ファーストビューがごちゃごちゃしていたり、文章が多いと、ユーザーは敬遠してサイトを離脱する可能性があります。
ユーザーは、ちょっとでも抵抗感を感じたらサイトを見るのをやめてしまいます。
キャッチコピーをうまく使おう
トップページでは、全体像やコンセプトを伝えてユーザーを引き込む必要がありましたが、キャッチコピーはそれに最適です。
トップページでは、長文で説明するよりも短いメッセージで伝える方が、読者を引き込めますし読者の頭にも残ります。
強みやコンセプトをひと言で表すキャッチコピーを利用しましょう。
また、ユーザーの悩みをキャッチで入れるのも、ユーザーの共感を得られるので良いでしょう。「●●ができない…」「●●が不便…」「こんなお悩みないですか？」などのようにユーザーの気持ちを代弁するのです。
これらのキャッチコピーは、メインビジュアルの画像のなかに入れるのでも良いです。
トップページからリンクを作成する
トップページは、サイト内のすべてのページのハブになるページです。トップページからユーザーは色んなページを探します。
また、WEBサイトの情報を集めるGoogleの検索ロボットは、サイト上をリンクをたどって巡回しますが、トップページからリンクがあるとロボットに把握されやすくなります。トップページから2クリックで到達できるように下層ページを作りましょう。
下層ページすべてにトップページからリンクするのは難しいと思いますが、カテゴリページへのリンクであれば作れると思います。
これによって、ロボットが移動しやすくなりSEO対策にもなるだけでなく、ユーザーもどんなカテゴリがあるかを把握でき便利です。
トップページのコンテンツ量は多めに
検索結果でトップページを上位表示して集客を狙う場合には、トップページのコンテンツ量を多めにしましょう。
例えば歯医者さんのサイトで、「地名＋歯医者」というキーワードで検索した時に上位表示しようと思うと、トップページの評価を高めなくてはいけません。
トップページに多くの説明があり、各ページからもリンクがある場合には、トップページはメインのキーワードで上位表示する可能性が高まります。
例えば、このサイトは「豊田 注文住宅」という検索で良い順位にありますが、網羅的にすべてのカテゴリの説明やリンクがあります。コンテンツの量も多くなっています。
画像サイズを抑える
トップページは、ユーザーにひと目で伝えるためにもビジュアルで見せることが多いので、画像を利用することが増えます。
トップページは、ただでさえコンテンツが増える傾向にあり、画像をたくさん使うとなおさらページが重くなります。ページの表示速度が落ちてストレスを感じると、ユーザーはすぐにサイトを離脱してしまいます。
トップページではデータ量を抑えるためにも、画像のサイズを小さくしたり、画像の遅延読み込みを利用しましょう。
また、Googleが推奨する次世代の画像フォーマット「JPEG 2000」「JPEG XR」「WebP」などの画像のフォーマットを利用することでも画像サイズを抑えられます。
トップページでは売り込みをしない
トップページで売り込みはしないようにしましょう。これは、トップページで商品を買わせるためのセールストークを書かない、ということです。
もちろん、商品の紹介をするのはいいのですが、あくまで紹介だけで詳しい売り込みは下層ページでしましょう。
トップページを見る人はサイトを初めて見る人だったり、まだ買う気もない人です。そんな人に売り込みをかけても購入するわけはありません。
あなたも初対面の異性から、その場ですぐに「結婚してください」と言われても付き合わないですよね？それと同じです。
ニュースやお知らせ、企業ブログはページ下部で
WEBサイトのトップページでよくページの上部に表示されているのが、「ニュース」や「お知らせ」、「企業ブログの更新情報」です。これらはページの下部で表示するのがおすすめです。
「セミナー開催のお知らせ」「WEBサイト更新のお知らせ」「雑誌掲載」などが掲載されますが、これらの情報に興味を持つ人なんてあまりいないです。
トップページは全体像を伝えたり、ユーザーを引き込む役割があるので、トップページの目立つ箇所には、重要な内容を設置した方がいいです。
コンセプトや強みの紹介、実績、ターゲットの悩んでいることなどを掲載した方がいいのです。ニュースやお知らせ、企業ブログの更新情報は重要度が低いので、ページの下部で表示するようにしましょう。
デザインはユーザーに与えたい印象で決める
トップページのデザインは、サイト全体のデザインの基準になるのでとても重要です。デザインテイストやカラーは、ユーザーに与える印象を基準に考えましょう。
例えば、青は信頼というイメージを与えますし、緑は安心やおだやかさ、黒は高級感やクールな印象を与えます。このように、ユーザーに与えたいイメージから色を選びましょう。もちろん、コーポレートカラーなどは取り入れた方がよいです。
また、直線的なデザインにするのか、流線的なデザインにするのかなど、デザインテイストも与える印象を元に作るとよいでしょう。デザインテイストは、以下のように多くの種類があります。
- シンプル
- クール
- ポップ
- ラグジュアリー
- ナチュラル
与えたい印象を「信頼性」「エネルギッシュ」「丁寧」などの言葉にしたり、他のサイトなどでも似たテイストのサイトを探すなど、なるべく具体的にするとイメージ通りのものが作れます。
【サイト別】トップページに必要な要素
WEBサイトにはいくつかの形態がありますが、大きく分けるとコーポレートサイト・ECサイト・メディアサイトに分かれます。
それぞれで、トップページの作り方は変わってきます。トップページに入れる要素や見せ方が変わるのです。
コーポレートサイト
今ではほとんどの企業がWEBサイトを持っていますが、コーポレートサイトはこの企業の公式サイトのことです。
コーポレートサイトでは、自社の事業内容やコンセプト、強みなどを知ってもらうのが優先度が高いはず。
だからこそ、トップページを作るときには、以下の要素を優先的に表示すべきであり、各ページに対してのリンクを設置します。
- コンセプト
- ポリシー
- サービス
- 自社の強み
- 実績
- ターゲット像
- ニュース
- カテゴリ紹介
トップページにこれらの要素へのリンクを設置することで、ユーザーは企業に関して知っておくべき情報を得ることができます。
また、コーポレートサイトでは、社員や社長などの姿を掲載するようにしましょう。よく写真素材の人物しか使っていないものがありますが、怪しく感じてしまいます。
ECサイト
ECサイトはネットショップのことです。
ネットショップで最も大切なのは、なによりも「商品」です。商品力がなければ、ネットショップを見てくれませんし、購入もしてくれません。
だからこそ、何よりも見せるべきは、「最も見るべき商品は何か」「どんなジャンルの商品があるか」「どんな商品を扱っているか」「お得な情報はあるか」です。
トップページでは以下を必ず見せるようにしましょう。
- 目玉商品
- 商品カテゴリ
- 商品一覧
- 新着商品
- キャンペーン情報
トップページの作り方としては、商品が最も重要なので、商品の写真は大きくきれいなものを利用しましょう。
メディアサイト
メディアサイトとは、豊富な情報を扱っている、以下のようなサイトのことです。
- ポータルサイト
- オウンドメディア
- ブログ
SUUMOのようなポータルサイトサイボウズ式のようなオウンドメディア、ブログなどがメディアサイトにあたります。
メディアサイトに対して、ユーザーは情報を求めてアクセスしてきます。「どんな情報を扱っているのか」「何を知ることができるのか」を知りたいのです。
だからこそ、メディアサイトのトップページでは情報をたくさん見せるとともに、どんなカテゴリ・ジャンルを扱っているかわかってもらわないといけないのです。
また、収益化が目的のページや特集ページなど、ユーザーに見せたいページへのリンクもトップページで表示するとよいでしょう。そのためには、以下の情報をトップページで表示しましょう。
- 各情報ページ
- 特集ページへのリンク
- メディアのコンセプト
- カテゴリ
まとめ：トップページは何よりもユーザー目線で作ろう
トップページの作り方を解説しました。
トップページを作る時には、ちゃんとターゲットを設定して、自社の情報を整理し、読者が求める情報を提供する必要があります。
そして、トップページの見せ方としては、ユーザーの使い勝手を一番に考え、ユーザーに見せるべき情報を厳選して見せるのがよいです。
何よりもユーザーを第一に考えることで、素晴らしいトップページを作れるはずですので、しっかりと考えてみてください。
