BtoBサイト制作の型・トップページ編

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

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

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

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

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

トップページの作り方

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

• キャッチコピー
• メインビジュアル
• サービス紹介
• 導入するメリット
• 導入事例・実績
• 最新ニュース
• CTA
• 他ページへの導線

作り方のポイントを、各パートごとに見ていきましょう。

キャッチコピー

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

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

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

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

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

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

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

　

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

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

メインビジュアル

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

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

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

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

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

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

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

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

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

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

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

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

サービス紹介

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

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

導入するメリット

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

キャッチコピーでは、商品・サービスがユーザーにもたらす「変化」を伝えましたが、ここでは「商品を使って得られる確実な結果」を伝えましょう。

ここでも、業務効率化ITツールの例で考えてみましょう。導入するメリットは、下記のようなものが考えられます。

商品を使って得られる確実な結果（導入するメリット）

• 月〇〇時間かかっていた業務を自動化
• 複数ツールをまたいでいた作業を一元管理
• 紙やExcelに散在していたデータを、すべてWebで完結

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

変化（キャッチコピー）

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

導入事例・実績

導入事例パートでは、商品・サービスを実際に購入したユーザーの声を紹介します。

キャッチコピーで「変化」、導入メリットで「結果」を伝えても、どちらも書き手の一方的なメッセージです。「本当にそうなの？」という疑問を持たれているかもしれません。

そういった不安に対して、自分と同じ悩みを抱えた人が「どう変わっていったのか」、「 解決してどうなったのか」を伝えることで、根拠と安心感を与えることができます。

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

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

それぞれのパートの違いをチェックしましょう！

• 導入するメリット ：商品・サービス提供側の主張
• 導入事例 ：使用者の主張
• 実績 ：権威ある第三者の主張

最新ニュース

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

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

CTA

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

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

• ボタンを押すことで何が起こるのか？
• 自分にメリットがあるもの（商品・資料・情報など）が手に入るのか？

をわかりやすいテキストで伝えましょう。

他ページへの導線

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

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

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

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

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

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

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

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

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

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

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

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

▼あわせて読みたい「サイト制作の型」

BtoBのサイト制作で、これだけはそろえておきたいページ一覧

BtoBサイト制作の型・サービスページ編

BtoBサイト制作の型・グローバルナビゲーション編

BtoBサイト制作の型・強みアピール編

▼この記事を読んだ方にオススメの「お役立ち資料」

毎回好評をいただいている人気セミナー「サイトリニューアルセミナー」のエッセンスを詰め込んだe-bookをご用意しています。

無料でダウンロードいただけますので、ぜひサイトリニューアルの参考書としてご活用ください。