Webサイトトップページは、このサイトは何のサイトなのかを示す「顔」とも言えます。御社のサービス・製品サイトは、訪問者にとって「わかりやすい顔」をしているでしょうか?

この記事では、Webサイト制作の際に知っておきたい、トップページの作り方について解説します。

トップページで伝えるべきこと

トップページで明確に伝えるべきことは2点あります。「何についてのサイトか」そして、「どんなサービスをやっているのか」です。

ユーザーは、さまざまな経路でサイトに訪れます。はじめからトップページに着地するケースばかりではありません。どのページからトップページにたどり着いても、上記の2点がわかるような情報構造にしておきましょう。

トップページの構造

では、トップページはどのような情報で構成すればよいでしょうか?基本的には、下記をそろえておけば十分です。

  • キャッチコピー
  • メインビジュアル
  • サービス紹介
  • 導入するメリット
  • 導入事例・実績
  • 最新ニュース
  • CTA(Call-To-Action)
  • ページへの導線
    作り方のポイントを、各パートごとに見ていきましょう。

キャッチコピー

まずは、スクロールせずに見られるエリアである「ファーストビュー」で、メインビジュアルとともにキャッチコピーを伝えます。

キャッチコピーでは、 商品・サービスがユーザーにもたらす「変化」を伝えましょう。
商品の特徴を伝えるのではなく、商品の特徴を「ユーザーに与える変化」まで落としこむことが重要です。

例えば、業務効率化ITツールを商品として扱っていた場合、どちらの方がキャッチコピーとして優れているでしょうか?

A. 高性能で低価格!〇〇機能搭載のツールが登場!

B. 普段の業務が、半分の時間で終わります

正解は、Bの方が優秀なキャッチコピーと言えます。

「高性能で低価格!〇〇機能搭載のツールが登場!」は、商品の特徴を示しているにすぎません。それに対して「普段の業務が、半分の時間で終わります」というメッセージは、ユーザーにもたらす「変化」を伝えられています。

 
img_One_Tip3.png

キャッチコピーで離脱されないように!

「自分に関係ない」と判断されたページは、すぐに離脱されてしまいます。
トップページを訪れた人に「自分にとって価値がある」と思ってもらえるように、キャッチコ    ピーでは「ユーザーにもたらす変化」を訴えましょう。

メインビジュアル

「メインビジュアル」とは、ファーストビューにある大きな画像のことです。

メインビジュアルを決めるときに重要なことは2点です。

  • ペルソナに合った画像を選ぶ
  • 商品・サービス内容がわかる画像を選ぶ

例えば、下記のようなペルソナを設定しているとしましょう。

website_toppage_pattern_1.png

このペルソナに対して、どちらの方がメインビジュアルとして優れているでしょうか?キャッチコピーのときと同じ、業務効率化ITツールを例に考えてみましょう。

A. 女性がPCで作業をしている画像

普段の業務が、半分の時間で終わります
website_toppage_pattern_2.jpg

B. 女性3人がガッツポーツしている画像

普段の業務が、半分の時間で終わります
website_toppage_pattern_3.jpg

ここでは、どちらの画像も女性になっていますが、ペルソナが女性だからといって、メインビジュアルも女性でなくてはいけないわけではありません。

例えば、ペルソナの「製品やサービスの選び方」と「課題、目指したいゴール」から、近いイメージの画像を選んでみましょう。「慎重に選ぶ」という性格や、「リソースがない」という状況を改善したいという課題からは、Aの画像がイメージに近いのではないでしょうか。また、「商品・サービス内容がわかる」という点からも、Aの画像の方がイメージが湧きやすいと言えます。

絶対的な正解はないので、キャッチコピーやメインビジュアルはABテストを重ねて、成果が出るものを見極めていきましょう。

サービス紹介

メインビジュアル・キャッチコピーで訪問者の心をつかみ、「もっと知りたい」と思ってもらったら、次はサービス紹介です。トップページで、サービスの機能をすべて紹介する必要はありません。機能一覧などの詳細は、別途サービスページで紹介すればOKです。

トップページでのサービス紹介は「気になるところを、つまみ食い的に読んで納得してもらう」「さらに知りたいと思ってもらう」ことが目的です。
魅力的なメイン機能について、わかりやすく、見やすく紹介しましょう。

導入するメリット

続いて、その商品・サービスを使った際のメリットを伝えるパートです。

キャッチコピーでは、商品・サービスがユーザーにもたらす「変化」を伝えました。
メリットでは「商品を使って得られる確実な結果」を伝えましょう。
ここでも、業務効率化ITツールの例で考えてみましょう。導入するメリットは、下記のようなものが考えられます。

商品を使って得られる確実な結果(導入するメリット)
・ 月〇〇時間かかっていた業務を自動化
・ 複数ツールをまたいでいた作業を一元管理
・紙やExcelに散在していたデータを、すべてWebで完結

キャッチコピーで訴える「変化」は「結果」の先にあるもの、と考えるとわかりやすいのではないでしょうか。

導入事例・実績

導入事例パートでは、商品・サービスを実際に購入したユーザーの声を紹介します。
キャッチコピーで「変化」、導入メリットで「結果」を伝えても、どちらも書き手の一方的なメッセージです。
「本当にそうなの?」という疑問を持たれているかもしれません。
そういった不安に対して、自分と同じ悩みを抱えた人が「どう変わっていったのか」、
「 解決してどうなったのか」を伝えることで、根拠と安心感を与えることができます。

実績パートでは、権威ある第三者からの主張を紹介します。

テレビ出演 ・雑誌のインタビュー ・新聞掲載 ・ラジオ出演 ・有名人の推薦 ・権威者の推薦 ・第三者機関からの認定 ・受賞歴 ・会社の設立年数、など「この商品を信頼してもいい理由」を伝えましょう。

img_One_Tip3.png

それぞれのパートの違いをチェックしましょう!
・導入するメリット :商品・サービス提供側の主張
・導入事例 :使用者の主張
・実績 :権威ある第三者の主張

最新ニュース

ニュースパートでは、商品・サービスに関連するニュースを掲載します。ニュースページを別で作成し、そこから新着何件かをトップページに表示するというパターンが多いでしょう。

ニュースを表示するメリットは「商品・サービスが更新されている印象を与えられる」ことです。
逆に、更新されずに古い情報のままになっていると、サイトへの信頼感を失ってしまう危険もあるため、作業時間の都合などで更新が難しい場合は、このパートを設置しないという選択肢もあります。

CTA(Call-To-Action)

CTAは「Call-To-Action(コール・トゥ・アクション)」の略で、Webサイトの訪問者を具体的な行動に誘導することを指します。お問い合わせボタン・資料請求ボタンなどがそれに当たります。

website_toppage_pattern_5.png

CTAを作成するときのポイントは、「次のアクションをイメージできる」文言を使うことです。

  • ボタンを押すことで何が起こるのか?
  • 自分にメリットがあるもの(商品・資料・情報など)が手に入るのか?
    をわかりやすいテキストで伝えましょう。

他ページへの導線

問い合わせには至らなくても、このパートまで読んでくれた訪問者は、商品・サービスに興味を持っている可能性が高いです。

「他の情報を知りたい」というニーズに応えられるよう、他のページへの導線を作っておきましょう。
機能一覧ページ、サービスの強みページ、事例一覧ページなど、トップページでは紹介しきれなかったコンテンツへ誘導し、ユーザーの興味を高めてもらいます。

ここまでが、トップページを構成するパーツになります。

▼あわせてチェックしたい、他のページの作り方
BtoBサイト制作の型・サービスページ編
BtoBサイト制作の型・強みアピール編​​​​​​​

ワーディングはわかりやすく

トップページに限ったことではありませんが、ワーディングは気をつけたいポイントです。

サイト上の表記を統一する

例えば「貴社・御社」、「お客様・お客さま」、「痩せる・ヤセる」のように、同じ意味でも表記が揺れていると、ユーザーにとって読みにくくなります。サイト上での表記は統一しましょう。

一般的にわかる表現にする

社内では一般的な表現でも、初めて見るユーザーには馴染みがない言葉もあります。「一般的にわかる表現になっているか?」を意識しましょう。

トップページで「もっと知りたい」を引き出す

トップページは、サイト訪問者の「ちょっと知りたい」から「もっと知りたい」を引き出し、適切な情報へ誘導する役割があります。御社のトップページでは、ユーザーが求める情報を、見つけられやすく提示できているでしょうか?

website_toppage_pattern_6.png

サイト訪問者が「知りたいこと」「調べたいこと」と、Webサイトが「伝えたいこと」が合致していると、ユーザーは迷うことなく情報にたどり着くことができます。
逆に、「わかりにくい」と判断されると、すぐに離脱されてしまいます。

トップページを作成する際は、会社が伝えたいメッセージや、商品スペック紹介に終始することなく、「訪問者にとってわかりやすい」ページを意識していきましょう。