BtoBサイト制作の型・トップページ編
Webサイトのトップページは、このサイトは何のサイトなのかを示す「顔」とも言えます。御社のサービス・製品サイトは、訪問者にとって「わかりやすい顔」をしているでしょうか？
この記事では、Webサイト制作の際に知っておきたい、トップページの作り方について解説します。
「サイトリニューアル」をお考えですか？
詳しい資料をこちらから無料ダウンロードできます
目次[非表示]
トップページで伝えるべきこと
トップページで明確に伝えるべきことは2点あります。「何についてのサイトか」そして、「どんなサービスをやっているのか」です。
ユーザーは、さまざまな経路でサイトに訪れます。はじめからトップページに着地するケースばかりではありません。どのページからトップページにたどり着いても、上記の2点がわかるような情報構造にしておきましょう。
トップページの構造
では、トップページはどのような情報で構成すればよいでしょうか？基本的には、下記をそろえておけば十分です。
- キャッチコピー
- メインビジュアル
- サービス紹介
- 導入するメリット
- 導入事例・実績
- 最新ニュース
- CTA（Call-To-Action）
- 他ページへの導線
作り方のポイントを、各パートごとに見ていきましょう。
キャッチコピー
まずは、スクロールせずに見られるエリアである「ファーストビュー」で、メインビジュアルとともにキャッチコピーを伝えます。
キャッチコピーでは、 商品・サービスがユーザーにもたらす「変化」を伝えましょう。商品の特徴を伝えるのではなく、商品の特徴を「ユーザーに与える変化」まで落としこむことが重要です。
例えば、業務効率化ITツールを商品として扱っていた場合、どちらの方がキャッチコピーとして優れているでしょうか？
A. 高性能で低価格！〇〇機能搭載のツールが登場！
B. 普段の業務が、半分の時間で終わります
正解は、Bの方が優秀なキャッチコピーと言えます。
「高性能で低価格！〇〇機能搭載のツールが登場！」は、商品の特徴を示しているにすぎません。それに対して「普段の業務が、半分の時間で終わります」というメッセージは、ユーザーにもたらす「変化」を伝えられています。
キャッチコピーで離脱されないように！
「自分に関係ない」と判断されたページは、すぐに離脱されてしまいます。トップページを訪れた人に「自分にとって価値がある」と思ってもらえるように、キャッチコピーでは「ユーザーにもたらす変化」を訴えましょう。
メインビジュアル
「メインビジュアル」とは、ファーストビューにある大きな画像のことです。
メインビジュアルを決めるときに重要なことは2点です。
- ペルソナに合った画像を選ぶ
- 商品・サービス内容がわかる画像を選ぶ
例えば、下記のようなペルソナを設定しているとしましょう。
このペルソナに対して、どちらの方がメインビジュアルとして優れているでしょうか？キャッチコピーのときと同じ、業務効率化ITツールを例に考えてみましょう。
A. 女性がPCで作業をしている画像
普段の業務が、半分の時間で終わります
B. 女性3人がガッツポーツしている画像
普段の業務が、半分の時間で終わります
ここでは、どちらの画像も女性になっていますが、ペルソナが女性だからといって、メインビジュアルも女性でなくてはいけないわけではありません。
例えば、ペルソナの「製品やサービスの選び方」と「課題、目指したいゴール」から、近いイメージの画像を選んでみましょう。「慎重に選ぶ」という性格や、「リソースがない」という状況を改善したいという課題からは、Aの画像がイメージに近いのではないでしょうか。また、「商品・サービス内容がわかる」という点からも、Aの画像の方がイメージが湧きやすいと言えます。
絶対的な正解はないので、キャッチコピーやメインビジュアルはABテストを重ねて、成果が出るものを見極めていきましょう。
サービス紹介
メインビジュアル・キャッチコピーで訪問者の心をつかみ、「もっと知りたい」と思ってもらったら、次はサービス紹介です。トップページで、サービスの機能をすべて紹介する必要はありません。機能一覧などの詳細は、別途サービスページで紹介すればOKです。
トップページでのサービス紹介は「気になるところを、つまみ食い的に読んで納得してもらう」「さらに知りたいと思ってもらう」ことが目的です。魅力的なメイン機能について、わかりやすく、見やすく紹介しましょう。
導入するメリット
続いて、その商品・サービスを使った際のメリットを伝えるパートです。
キャッチコピーでは、商品・サービスがユーザーにもたらす「変化」を伝えました。メリットでは「商品を使って得られる確実な結果」を伝えましょう。
ここでも、業務効率化ITツールの例で考えてみましょう。導入するメリットは、下記のようなものが考えられます。
商品を使って得られる確実な結果（導入するメリット）
- 月〇〇時間かかっていた業務を自動化
- 複数ツールをまたいでいた作業を一元管理
- 紙やExcelに散在していたデータを、すべてWebで完結
キャッチコピーで訴える「変化」は「結果」の先にあるもの、と考えるとわかりやすいのではないでしょうか。
変化（キャッチコピー）
- 普段の業務が、半分の時間で終わります
導入事例・実績
導入事例パートでは、商品・サービスを実際に購入したユーザーの声を紹介します。
キャッチコピーで「変化」、導入メリットで「結果」を伝えても、どちらも書き手の一方的なメッセージです。「本当にそうなの？」という疑問を持たれているかもしれません。
そういった不安に対して、自分と同じ悩みを抱えた人が「どう変わっていったのか」、「 解決してどうなったのか」を伝えることで、根拠と安心感を与えることができます。
実績パートでは、権威ある第三者からの主張を紹介します。
テレビ出演 ・雑誌のインタビュー ・新聞掲載 ・ラジオ出演 ・有名人の推薦 ・権威者の推薦 ・第三者機関からの認定 ・受賞歴 ・会社の設立年数、など「この商品を信頼してもいい理由」を伝えましょう。
それぞれのパートの違いをチェックしましょう！
- 導入するメリット ：商品・サービス提供側の主張
- 導入事例 ：使用者の主張
- 実績 ：権威ある第三者の主張
最新ニュース
ニュースパートでは、商品・サービスに関連するニュースを掲載します。ニュースページを別で作成し、そこから新着何件かをトップページに表示するというパターンが多いでしょう。
ニュースを表示するメリットは「商品・サービスが更新されている印象を与えられる」ことです。逆に、更新されずに古い情報のままになっていると、サイトへの信頼感を失ってしまう危険もあるため、作業時間の都合などで更新が難しい場合は、このパートを設置しないという選択肢もあります。
CTA（Call-To-Action）
CTAは「Call-To-Action（コール・トゥ・アクション）」の略で、Webサイトの訪問者を具体的な行動に誘導することを指します。お問い合わせボタン・資料請求ボタンなどがそれに当たります。
CTAを作成するときのポイントは、「次のアクションをイメージできる」文言を使うことです。
- ボタンを押すことで何が起こるのか？
- 自分にメリットがあるもの（商品・資料・情報など）が手に入るのか？
をわかりやすいテキストで伝えましょう。
他ページへの導線
問い合わせには至らなくても、このパートまで読んでくれた訪問者は、商品・サービスに興味を持っている可能性が高いです。
「他の情報知りたい」というニーズに応えられるよう、他のページへの導線を作っておきましょう。機能一覧ページ、サービスの強みページ、事例一覧ページなど、トップページでは紹介しきれなかったコンテンツへ誘導し、ユーザーの興味を高めてもらいます。
ここまでが、トップページを構成するパーツになります。
▼あわせてチェックしたい、他のページの作り方
BtoBサイト制作の型・サービスページ編
BtoBサイト制作の型・強みアピール編
ワーディングはわかりやすく
トップページに限ったことではありませんが、ワーディングは気をつけたいポイントです。
サイト上の表記を統一する
例えば「貴社・御社」、「お客様・お客さま」、「痩せる・ヤセる」のように、同じ意味でも表記が揺れていると、ユーザーにとって読みにくくなります。サイト上での表記は統一しましょう。
一般的にわかる表現にする
社内では一般的な表現でも、初めて見るユーザーには馴染みがない言葉もあります。「一般的にわかる表現になっているか？」を意識しましょう。
トップページで「もっと知りたい」を引き出す
トップページは、サイト訪問者の「ちょっと知りたい」から「もっと知りたい」を引き出し、適切な情報へ誘導する役割があります。御社のトップページでは、ユーザーが求める情報を、見つけられやすく提示できているでしょうか？
サイト訪問者が「知りたいこと」「調べたいこと」と、Webサイトが「伝えたいこと」が合致していると、ユーザーは迷うことなく情報にたどり着くことができます。逆に、「わかりにくい」と判断されると、すぐに離脱されてしまいます。
トップページを作成する際は、会社が伝えたいメッセージや、商品スペック紹介に終始することなく、「訪問者にとってわかりやすい」ページを意識していきましょう。
この記事を読んだ方にお勧め、「BtoBサイトリニューアルの3つのステップ」
ferret Oneでは、毎回好評をいただいている人気セミナー「サイトリニューアルセミナー」のエッセンスを詰め込んだe-bookをご用意しています。
無料でダウンロードいただけますので、ぜひサイトリニューアルの参考書としてご活用ください。
▼無料ダウンロードはこちらから
