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


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

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

目次[非表示]

  1. 1.トップページで伝えるべきこと
  2. 2.トップページの作り方
  3. 3.キャッチコピー
  4. 4.メインビジュアル
  5. 5.サービス紹介
  6. 6.導入するメリット
  7. 7.導入事例・実績
  8. 8.最新ニュース
  9. 9.CTA
  10. 10.他ページへの導線
  11. 11.ワーディングはわかりやすく
  12. 12.トップページで「もっと知りたい」を引き出す


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

トップページで明確に伝えるべきことは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をご用意しています。

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

    サイトリニューアルに失敗しないための3ステップ

    One Tip編集部

    One Tip編集部

    One Tipは、Webマーケティングツール「ferret One」からスピンアウトして生まれた、「BtoBマーケティングの成功のヒントとなるメディア」です。 BtoBマーケティングにかかわる人にとって、価値あるコンテンツをお届けしていきます。

    無料お役立ち資料

    Webマーケティングからセミナー施策や名刺活用まで。BtoBマーケティングに関するノウハウをまとめた資料を無料でダウンロードできます。

    Documents

    人気ダウンロード資料


    Seminar

    開催予定のセミナー


    Ranking

    週間人気記事ランキング

    Tag

    タグ

    ferret Oneとは?

    ferret Oneは、誰でも簡単に使えるマーケティングツールとBtoBマーケティングに必要な成功メソッドをセットで提供するサービスです。


    One Tip

    ワンティップ