- 集客できるBtoBサイトは、見た目の良さよりも「トップページの各要素が問い合わせから逆算して設計されている」点が共通する。
- まず改善するなら、効果の大きい「ファーストビュー」と「実績の見せ方」から。すべてを一度に直す必要はありません。
- ただし、こうしたテクニックは「誰に・何を・なぜ自社なのか」という軸が決まっていてこそ効果を発揮。上流の戦略や情報設計が曖昧なままでは、良い要素を取り入れても成果にはつながりません。
- 自社サイトの改善やSEO集客にお悩みなら、大手の40〜60%の費用で成果を狙えるエイチリンクへの無料相談がおすすめです。
- 大規模な組織や過剰な営業体制ではなく、ホームページ改善とSEO・LLMO対策に特化した少数精鋭の体制だからこそ、相場よりも安い費用でのご支援が可能です。
「うちのHPから毎月、お問合せが来ればいいのに…営業のメールばかり届く…」と悩む企業様へ
エイチリンク株式会社は、従業員10名以下のBtoB中小企業のWeb集客に特化したSEO・LLMO実行支援会社です。これまでに
- 営業代行会社：問い合わせ 1〜2件 → 月40件
- イベント会社：サイト経由売上 0 → 月500万円
など、中小企業のSEO集客改善を多数支援してきました。
また、弊社自身もBtoBの中小企業ですが、テレアポやフォーム営業は一切行わず、自社のSEO集客と紹介のみで事業を拡大しています。
最近ではSEOだけでなく、AI検索（ChatGPT・Geminiなど）に引用されやすくするLLMO対策も重要になっています。弊社自身も弊社のクライアントもLLMOの成功事例が急増中。
- そもそもうちはSEO対策をやるべき？
- どんなキーワードを狙えばいい？
- 問い合わせが来るホームページにするには何を直すべき？
- LLMOって何をすればいいの？
無料相談では、あなたの事業に合わせて具体的な改善案をお伝えします。
＼毎月3社限定・営業なし・完全無料／
この記事の筆者
【本郷輝】
エイチリンク株式会社代表取締役／SEOコンサルタント
中小企業のSEO対策・HP制作を専門とするエンジニア・ディレクター。
これまで100サイト以上の構築に携わり、SEO歴は7年目
筑波大学在学中に独学でWeb制作を学び、SEOコンサル会社にてインターン修行。
限られたリソースで最大限の結果を出すための、現場目線の伴走支援を強みに持つ。
「自社のHPから毎月お問合せが来るようにしたい」そんな方は、ぜひお気軽にご相談ください。
※この記事は、SEO対策やLLMO対策によってホームページから集客したい中小企業または小規模事業者の経営者や担当者に向けて、エイチリンク株式会社代表の本郷 輝が記事品質を監修し、作成しております。また、当コラムは弊社独自のコンテンツ制作・編集ポリシーに沿って制作されています。
集客できるBtoBサイトは「トップページ」で決まる
エイチリンクのメンバーには、単に「かっこいいホームページをつくる」ことをゴールにしてほしくありません。
私たちが目指すのは、「問い合わせにつながるホームページ」です。
そして、ホームページは、お客様から見れば一つの成果物。
エンドクライアントと直接顔を合わせる機会がないメンバーも含め、一人ひとりが「自分の仕事で、お客様にもっと価値を届けられないか」という視点を持ってほしいと思っています。
ただ、価値を届けたい気持ちはあるけれど、「具体的にどうしたらいいのか分からない…」という方も多いのではないでしょうか。
結論、成果につながるホームページを作る近道は、良い事例を数多く見て、「なぜ成果が出ているのか」を考え続けることだと考えています。この積み重ねが、提案や制作の質を高め、お客様への価値提供につながります。
本記事の読み方
本記事は、エイチリンクでホームページ制作に携わるメンバー向けに作成した参考資料です。※今回、特別に一般公開しています。
次のように使ってみてください。
- 気になったサイトは、「なぜ成果につながるのか」を自分なりに考えながら読んでみましょう。
- 制作中にデザインや構成に迷ったときは、このページに戻って参考にしてください。
- 良いと思った表現やレイアウトは、引き出しとしてストックしておきましょう。
- 今回はトップページに絞って解説しています。料金ページや導入事例ページ、お問い合わせフォームなど、ページ単位の考え方は後日、別記事で紹介します。
なお、普段社内メンバーには、日頃から本記事よりも踏み込んだ内容を共有しています。
実際の案件で得た数値や、施策の全体像・詳細、Webには公開できない検証結果などをもとに、実務で役立つ知見を蓄積・共有しています。
本記事は、そのなかから社外の方にも役立つ内容を抜き出して整理したものです。
【要確認】成果につながるホームページ制作で重要なのは上流設計
デザイン事例を紹介する前に、最も大切なことをお伝えします。
それは、デザインを考える前に、上流設計を固めることです。
エイチリンクのメンバーはご存知のとおり、制作前にはターゲットやサイトの目的、自社の強みを整理するチェックリストを記入していただいています。
では、なぜ制作前に、このチェックリストを記入する工程を設けているのでしょうか？
それは、ホームページの方向性を定めるためです。
チェックリストは、目的地までの地図のようなもの。
地図がなければ、その場の思いつきで進むことになり、デザインやコンテンツにも一貫性がなくなります。
実は、この工程でホームページの方向性はほぼ決まります。
だからこそ、制作前のチェックリストは、できるだけ具体的に、解像度高く記入してください。
例えば、同じ内容でも次のように解像度が大きく変わります。
以下を見比べていただければ、どちらのほうが、お客様に伝えるべき内容や打ち出すべき強みが明確になるか、お分かりいただけると思います。
| 項目 | NG | OK |
|---|---|---|
| ターゲット | 製造業 | 自動車部品メーカーの購買担当者。既存の加工会社では対応できない短納期案件に困っており、新しい外注先を探している。 |
| 強み | 品質が高い | 試作品なら最短3営業日で納品可能。設計段階から加工方法を提案できるため、開発スピードを落とさず進められる。 |
| 選ばれる理由 | 実績がある | 量産前の試作案件に特化しており、小ロット・短納期にも柔軟に対応。設計変更にも迅速に対応できるため、開発部門から継続的に依頼をいただいている。 |
手段から考えるのではなく、目的から考える。
この順番を間違えないことが、成果につながるホームページづくりでは何よりも重要です。
そして、「問い合わせにつながるホームページ」を作るうえで必ず知っておきたいのが、「読まれない」「信じてもらえない」「行動してもらえない」という3つの壁（3つのNot）です。
3つの壁（3つのNot）の考え方や、それぞれの壁を乗り越えるためのポイントは以下のページで解説していますので、必ず一度は目を通しておいてください。
ファーストビュー（FV）で参考にしたいサイト
ではここからは、実際の事例を見ていきましょう。
まずは、ホームページの第一印象を決めるファーストビュー（FV）です。
ファーストビューとは、ページを開いて最初に表示される画面のことです。ここで興味を持ってもらえなければ、その先のコンテンツを読んでもらうことはできません。
どんな言葉やデザインを打ち出すかは、「誰に、何を届けるのか」という上流設計をもとに決めます。
株式会社プルークス
トップに「動画制作・映像制作なら株式会社プルークス」と掲げ、何の会社かが一瞬でわかります。
2,000社・8,000本以上の実績に加え、リクルート・JAL・楽天などの大手企業のロゴを掲載し、信頼性を高めているのもポイント。
FVの見出しには「サービス名＋会社名」を入れ、初めて訪れた人でも3秒で事業内容が伝わるようにしたいですね。
人は「自分に関係がありそう」と感じて初めて読み進めるものです。何の会社か一目で伝わらないと、中身を読む前に離脱してしまうため、まずはここを押さえたいポイントです。
クラウドキャスティング
「検索から、発注・契約・支払までワンストップ」と発注側のベネフィットを提示。「年間成立数10,000件突破」や「登録キャスト数40,000人突破」などの数字でスケール感を出しています。
また、「ヒトケ、モノケ、トンガリ」の3つの切り口でサービス内容を整理しているのも特徴。
- 1行目はユーザーベネフィットから始める
1行目は自社の説明ではなく、「使うと何が楽になるのか」というユーザー目線のベネフィットから始めたいですね。結果を先に示すことで、「続きを読む価値がありそう」と感じてもらいやすくなります。 - 数字で信頼性を伝える
実績は「登録数」「導入社数」「利用企業数」など、具体的な数字で見せたいですね。数字はサービスの規模や信頼性を直感的に伝えられるため、「多くの企業に選ばれているサービスなんだ」と安心感を持ってもらいやすくなります。 - サービス内容を分かりやすく整理する
「ヒトケ、モノケ、トンガリ」のように、サービスをいくつかの切り口で整理できると、初めて訪れた人でも全体像を理解しやすくなります。情報を羅列するのではなく、分類して見せるのがポイント。
株式会社LANY
「The Growth Partner.（成長を支援するパートナー）」というシンプルなコピーで、自社の立ち位置を一言で伝えています。
あれこれ盛らず、自社の役割を短いフレーズで言い切るパターンもあります。
情報を詰め込むほど「結局、何をしてくれる会社なのか」がぼやけてしまいがち。一言で立ち位置を示せると、初見の人でも数秒で「自分向きかどうか」を判断できて、記憶にも残りやすいです。
MVV（Mission・Vision・Value）が明確に定まっている企業であれば、その考え方をコピーに反映させるのもおすすめ。
機能や価格だけでは伝わらない「何を大切にしている会社なのか」が伝わるため、他社との差別化にもつながります。
JOYSOUND.Biz
「かんたん1分・無料・予算に合わせてお見積り」と、問い合わせのハードルの低さをFVで訴求しています。
また、サービス内容がひと目で伝わるコピーと、実際の導入シーンがイメージできる実物写真を掲載し、「何を提供しているサービスなのか」が直感的に伝わるデザインになっています。
- 問い合わせのハードルを下げる言葉をFVに入れる
問い合わせの「所要時間」や「無料」であることをFVに書いて、行動のハードルを最初に下げたいですね。問い合わせをためらう理由は、「時間がかかりそう」「費用が発生しそう」「営業を受けそう」といった不安であることが大半です。
「1分・無料」と先に伝えることで、その不安をやわらげ、問い合わせボタンを押しやすくできます。 - 一目で伝わるコピーを意識する
FVのコピーは、サービス内容や提供価値がひと目で伝わる言葉にしたいですね。難しい表現よりも、誰でもすぐ理解できるシンプルな言葉のほうが、読み進めてもらいやすくなります。 - イラストより実物写真で利用シーンを伝える
FVの画像は、イラストや抽象的なビジュアルだけでなく、実際のサービスや利用シーンが分かる写真を見せられるとよいですね。
ユーザーが「実際に使うとどうなるのか」をイメージしやすくなり、サービスへの理解と安心感が高まります。特に店舗や設備、制作物など、実物を見せられる業種では効果的です。
トソーマ
「元塗装職人が経営」と、業界出身であることを信頼の軸にしています。
- 創業背景として伝える
創業背景や出身が強みになるなら、FVで「なぜ自社か」の理由として使いたい。同じサービスでも「その道の出身者がやっている」とわかると、専門性への信頼がぐっと高まります。自社ならではの背景があるときに使えるとよさそうです。 - 「人」が見えるデザインを意識する
代表者やスタッフの顔を見せられるなら、積極的に掲載したいですね。BtoBでは、「どんな会社か」だけでなく「どんな人が対応してくれるのか」も重要な判断材料です。
比較ビズ
ファーストビューでは、「見積もり依頼、多数発生中」という表示とともに、実際の相談内容が吹き出し形式で表示されています。「生成AIを活用したFAQチャットボットを導入したい」のような、リアルな依頼内容を見せることで、「多くの企業が利用しているサービスなんだ」という安心感につながっています。
- 利用状況をリアルタイム風に見せる
「現在○○件の相談が進行中」や「こんな相談が届いています」など、サービスが実際に利用されている様子を見せることで、安心感や信頼感を高められます。 - 社会的証明を活用する
人は「多くの人が利用しているサービス」を選ぶ傾向があります。利用者数や相談件数だけでなく、実際の相談内容や導入事例を見せることで、「自分と同じような人も利用している」と感じてもらいやすくなります。
ヘッダー・グローバルナビで参考にしたいサイト
ヘッダーのグローバルナビは、訪問者が「自分に関係あるサイトか」「どこを見れば知りたい情報があるのか」を数秒で判断するための重要な導線です。
どれだけデザインが良くても、メニューが分かりにくいと目的のページにたどり着けず、そのまま離脱されてしまうことも。
反対に、ユーザーが知りたい情報を優先した並びになっていれば、迷わずページを回遊してもらいやすくなります。
ここでは、BtoBサイトで参考になるヘッダー・グローバルナビの設計を紹介します。
シナジーマーケティング株式会社
グローバルナビの「ソリューション（課題別）」にマウスを当てると、「新規顧客を増やしたい」「リピーターを増やしたい」「休眠顧客を再活性化したい」など、課題ごとにサービスを探せるようになっています。
サービス名を知らない人でも、自分の悩みから必要な情報へたどり着ける設計です。
グローバルナビは、「サービス一覧」だけでなく、「課題別」の入口も用意できるとよいですね。
訪問者の多くは商品名やサービス名ではなく、「新規顧客を増やしたい」「業務を効率化したい」といった困りごとから情報を探しています。
課題ごとに導線を設けることで、「これは自分のことだ」と感じてもらいやすくなり、目的のページにもスムーズにたどり着けます。
特に複数のサービスを展開している企業では、ユーザーに最適なサービスへ案内しやすくなるため、取りこぼしを防ぐ効果も期待できます。
株式会社LANY
グローバルナビに「サービス」「実績」「ブログ」「メディア」「イベント」を並べ、会社の情報発信や知見にすぐアクセスできるようになっています。サービスだけでなく、継続的な情報発信を見せることで、専門性や信頼感が伝わる設計です。
ブログや導入事例、セミナーなどのコンテンツは、グローバルナビからアクセスできるようにするのも効果的。発注前の人は、「本当にこの会社に任せて大丈夫かな？」と、専門性や信頼性を確認しています。
情報発信のコンテンツがすぐ見つかるだけで、「この会社は知見が豊富そう」「継続的に情報を発信している会社なんだ」という印象を持ってもらいやすくなります。
株式会社だるまペイント
ナビゲーションの一番左に「はじめにご覧ください」というメニューを設け、塗装業者の選び方や失敗しないための知識など、教育コンテンツをまとめています。
いきなりサービスを紹介するのではなく、まずユーザーの不安や疑問を解消することで、安心して問い合わせへ進める導線になっています。
- 教育コンテンツを用意する
サービスを売り込む前に、業界の基礎知識や選び方、失敗例などを伝えることで、ユーザーの不安を解消できます。問い合わせ前に知っておいてほしい内容をまとめておくと、商談もスムーズになります。 - CV率を高めるためのコンテンツとして活用する
教育コンテンツはSEOだけが目的ではありません。検討中のユーザーに「この会社は信頼できそう」と感じてもらうことで、問い合わせや資料請求の後押しにもなります。商品を売る前に、まず相手の理解を深めるコンテンツを用意したいですね。
デジタル化の窓口
スクロールしても表示される追従ヘッダーに、検索窓や絞り込み機能を配置しています。
記事を読んでいる途中でも、「部門」「業種」「企業規模」などの条件から、すぐに別の製品や導入事例を探せる設計になっています。
- 追従ヘッダーに検索機能を設置する
情報量が多いサイトでは、ページ上部へ戻らなくても検索できるようにすると、目的の情報へたどり着きやすくなります。特に記事数やサービス数が多いホームページでは効果的。 - 回遊しやすい導線を作る
記事を読んで興味が深まったタイミングで、別の記事や関連サービスを探せる導線を用意することで、サイト内の回遊率向上につながります。
トップページ全体の構成で参考にしたいサイト
トップページは、どんな情報を「どの順番で見せるか」で成果が大きく変わります。成果につながるサイトは、ユーザーの疑問や不安を一つずつ解消しながら、自然に問い合わせまで進める構成になっています。
ここでは、その流れが参考になるサイトをご紹介します。
なお、サイト全体を掲載すると画像が長くなってしまうため、本記事ではファーストビュー付近のみを掲載しています。全体の構成もぜひ参考になるので、気になったサイトは出典URLから実際にご覧ください。
株式会社うるるBPO
サービスの特長から始まり、サービス内容、活用事例、料金・導入フローへと、ユーザーが知りたい情報を順番に配置しています。
また、各セクションの要所に「無料見積り」「資料請求」のCTAを設け、興味を持ったタイミングですぐ行動できる導線になっています。
トップページは、「強み → 根拠（実績・事例）→ 料金・導入イメージ → 行動」の順に整理する。人は「興味を持つ → 信頼する → 自分でも利用できそうと感じる → 行動する」という順番で意思決定することが多いため、この流れに沿って情報を並べると、自然に読み進めてもらえます。
逆に、料金や導入事例が見つけにくかったり、信頼できる根拠が後半まで出てこなかったりすると、納得する前に離脱されてしまうこともあります。ユーザーの気持ちの変化に合わせて情報を配置することが、成果につながるトップページ設計のポイントです。
株式会社Speee
「強み→実績数字→無料相談」という王道の流れで、読み終えたときに自然と相談へ向かう設計です。
奇をてらわず、王道の並び順（強み→実績→行動）を丁寧に組みたいですね。凝ったレイアウトよりも、迷わせない導線のほうが問い合わせにつながりやすいです。
特にBtoBは比較・検討期間が長く、複数社を見比べながら意思決定するケースがほとんどです。そのため、凝ったレイアウトやアニメーションよりも、知りたい情報を順番に確認できる分かりやすい構成のほうが、安心感や信頼感につながり、結果として問い合わせにも結び付きやすくなります。
数字・実績の見せ方で参考にしたいサイト
「信じてもらえない壁」を越えるには、「高品質」「豊富な実績」といった言葉ではなく、証拠が必要です。
実績は「数」「成果」「継続」の3軸で、さらにロゴ・顔・時間軸・お客様の声を足すと厚みが出ます。
株式会社Wacworks
成功事例で、導入前（Before）と導入後（After）の変化をグラフや数値で分かりやすく見せています。
売上やアクセス数、CV数などがどのように改善したのかを視覚的に伝えることで、「このサービスを導入すると、こんな成果が期待できるのか」と一目で理解できます。
また、施策内容や改善のポイントもあわせて紹介されているため、成果の再現性もイメージしやすくなっています。
- Before・Afterをグラフや数値で比較する
- 「売上○%アップ」「問い合わせ数○倍」など成果を具体的に示す
- どのような課題があり、どんな施策を行ったのかを簡潔に添える
この3点を意識するだけで、事例の説得力は大きく変わります。成果を見える化することで、導入後の未来を具体的にイメージしてもらいやすくなります。
株式会社CINC（シンク、CINCcorp.）
ページを開くとすぐに、具体的な成功事例が目に入ります。
EOは形のないサービスだからこそ、「何をしてくれるか」よりも先に、「どんな成果が出たのか」を見せる構成になっています。わかりやすい数字やグラフで成果を伝えており、サービスの価値を直感的に理解できるデザインです。
ページ下部では、具体的な成果事例に加え、担当するコンサルタントの顔写真や経歴、支援体制を掲載しています。
SEOやコンサルティングのような無形サービスは、成功事例を最初に見せるのもいいですね。「どんな成果が出たのか」が分かると、その後のサービス内容も興味を持って読んでもらいやすくなります。
また、このサイトでは成功事例だけでなく、担当コンサルタントの顔写真や経歴も掲載しています。
エイチリンクが大切にしている「ヒトケ（人間らしさ）」を伝えるためにも、人が見えるコンテンツは積極的に取り入れたいポイントです。
信頼性の見せ方で参考にしたいサイト
BtoBでは、サービス内容だけで問い合わせが決まることはほとんどありません。
担当者は「本当に成果が出る会社なのか」「他社も導入しているのか」といった信頼性を確認したうえで比較・検討しています。
ここでは、問い合わせにつながる信頼の見せ方が上手いホームページを紹介します。実績や導入企業、口コミなど、すぐに取り入れられるポイントもあわせて解説します。
株式会社ミヤケン
アンケート用紙に直筆で書かれたお客様の声を、そのまま画像で掲載しています。
きれいに作り込まれたレビューではなく、実際に書かれた原本を見せることで、本物ならではの信頼感を生み出しています。
お客様の声は、手書き原本やアンケート画像など「本物らしさ」が出る形で見せたいですね。きれいに整形されたテキストの声は「自作では？」と疑われがち。
直筆の原本やアンケート画像は、その不安を払拭する強い証拠になります。信頼性を高めたいなら、見た目のきれいさよりも、リアルさを優先するのがおすすめです。
お助けうさぎ
サービスページ内で、お客様の声だけでなく、Googleの口コミも掲載しています。
第三者サービスに投稿された実際の口コミを見せることで、「本当に利用した人の評価なんだ」という安心感につながっています。
Googleの口コミを活用する。★4.8／5.0・口コミ○○件のように、評価と件数も合わせて表示すると、実績がひと目で伝わります。
StockSun株式会社
Web業界で不安に感じられやすい「担当者によって品質に差があるのでは？」という懸念に対して、担当者を選べる仕組みを用意し、不安を解消する設計になっています。
自社の業界でお客様が不安に感じやすいポイントを先回りして解消する工夫。
StockSunでは「担当者ガチャ」というWeb業界特有の不安に対して、「担当者を選べる」という仕組みを提示しています。
このように、業界ならではの不安へ具体的な解決策を示すことで、「この会社なら安心して任せられそう」という信頼につながります。
問い合わせ導線（CTA・追従・チャット・診断）で参考にしたいサイト
CTA（Call To Action）とは、問い合わせや資料請求、無料相談などへ誘導するボタンや導線のことです。
ホームページでは、CTAのクリック率が成果を大きく左右します。ボタンのデザインだけでなく、文言や配置、限定性など、ちょっとした違いで反応は変わります。
ここでは、思わずクリックしたくなるCTAの作り方が参考になるサイトを紹介します。
株式会社BIRDY
「毎月5社限定」の無料相談で、対応できる件数の限りを正直に見せて背中を押しています。
対応できる件数に限りがあるなら、「毎月◯社限定」と正直に書けるといいですね。
人は「手に入りにくいもの」ほど価値を感じて、「今動かないと逃す」と思うと行動が早まります（希少性の効果）。
株式会社レジェンダ
CTAの直前に、「創業29年」「支援実績800社以上」「リピート率90%以上」といった実績を配置しています。
お問い合わせや資料請求をする直前に信頼できる根拠を提示することで、最後のひと押しになっています。
- CTAの近くに実績を配置する
実績は会社紹介ページだけで見せるのではなく、お問い合わせや資料請求ボタンの近くにも配置するのもgood。行動を決める直前に信頼性を伝えることで、安心してクリックしてもらいやすくなります。 - 数字で信頼を伝える
「実績があります」ではなく、「累計○社」「創業○年」「リピート率○%」など、具体的な数字で示すことで説得力が増します。
株式会社プルークス
FV内に問い合わせフォームを設置しているため、別ページへ遷移することなく、その場で問い合わせができます。
- FV内で問い合わせまで完結できる導線をつくる
問い合わせフォームをFV内に配置できるなら、別ページへ移動せず、その場で問い合わせを始められる導線にしたい。ページ遷移や読み込みを待つ時間は、思っている以上にユーザーのストレスになります。入力項目も必要最低限に絞ることで、「あとでいいか」と離脱されるのを防ぎ、問い合わせにつながりやすくなります。 - CTAには実際の資料や成果物を見せる
CTAの近くには、アイコンだけを並べるのではなく、実際の資料や制作物の画像を見せられるとよい。ダウンロードできる資料や成果物がひと目でわかると、「何が手に入るのか」を具体的にイメージしてもらえます。内容が視覚的に伝わることでクリックへの心理的なハードルが下がり、CTAの反応も高まりやすくなります。
カリトルくん（StockSun）
「今月残り4社」と、その場の空き枠を見せて申し込みを促しています。
「今月の空き枠」を数字で見せられると、今動く理由が生まれますね。
BIRDYの「毎月◯社限定」と同じ希少性の効果ですが、「残り4社」のようにリアルタイムで変わる見せ方だと、より切迫感が伝わります。「次に来たときには埋まっているかも」と思ってもらえると、後回しを防げます。
税理士法人チェスター
ページをスクロールしても、画面右側にはフリーダイヤルやお問い合わせボタンが常に表示される追従CTAを採用しています。
長いページを読んでいる途中でも、「相談したい」と思ったタイミングですぐに問い合わせができる導線になっています。
CTAはページの最後まで読まないと押せない設計ではなく、いつでも行動できる状態をつくる。
特にサービス紹介ページは情報量が多くなりがちで、読んでいる途中で問い合わせを決める人もいます。追従CTAや画面上部に固定されたお問い合わせボタンを設置することで、「問い合わせたい」と思った瞬間を逃さず、スムーズに行動へつなげられます。
株式会社グランネット
スクロール中も画面横に固定された追従バナーで、問い合わせページに常に誘導しています。
また、「300分かかる競合分析が、1分で可能に」という文言もいいですね。問い合わせ後に得られる価値がひと目で伝わるため、CTAを押す理由が明確になっています。
- 追従CTAを設置する
PCでは追従バナーを活用し、スクロール中もCTAを切らさないように。常に視界にCTAがあることで、「問い合わせたい」「資料が欲しい」と思った瞬間に、迷わず行動してもらえます。特にコラムのような縦に長いページでは、読み進めるほどCTAから遠ざかるため、追従CTAは効果的です。 - CTAの文言でメリットを伝える
「無料資料はこちら」ではなく、「300分かかる競合分析が、1分で可能に」のように、ダウンロードすると何が得られるのかを具体的に伝えたいですね。時間短縮やノウハウの習得など、ユーザーにとってのメリットを数字を交えて表現すると、クリックする理由が明確になります。
タスカル
画面右下に、無料相談の日程調整フォームへ遷移するCTAを常時表示しています。
ページを読んでいる途中でも、「相談してみよう」と思ったタイミングで、すぐに予約へ進める導線になっています。
- 無料相談への導線を常時表示する
スクロールしてもCTAが見える状態にしておくことで、「相談したい」と思った瞬間を逃しません。 - 問い合わせではなく、日程調整まで進める
「お問い合わせはこちら」よりも、「無料相談を予約する」「30分無料相談を予約する」など、次の行動が明確なCTAのほうがクリックされやすくなります。日程調整フォームへ直接遷移させることで、問い合わせの手間を減らし、コンバージョンにつながりやすくなります。
未知株式会社のデジタルマーケティングコラム
画面右下に「AI木村部長に質問」というAIチャットを設置しています。女性の顔写真を表示し、人格を持たせることで、気軽に相談できる雰囲気を演出しています。
- AIやチャットにも、人間らしさを持たせる
「AIチャットはこちら」と表示するよりも、「○○に質問する」のように名前や顔写真を付けることで、心理的なハードルを下げることができます。エイチリンクが大切にしている「ヒトケ（人間らしさ）」にも通じる考え方です。 - 離脱前の最後の接点をつくる
ページを閉じる前に疑問が出ても、その場で質問できる導線があれば、別サイトへ調べに行くことなく検討を続けてもらえます。特にAIチャットは24時間対応できるため、機会損失を減らす仕組みとして有効です。
ビジトラ
サービス紹介だけでなく、「業務自動化診断シミュレーター」を設置し、自分に合った結果をその場で確認できる仕組みになっています。
ユーザーは「自分の場合はどうなのか？」を知りたいので、一方的にサービスを説明されるよりも、診断形式のほうが興味を持ってもらいやすくなります。
診断・シミュレーターを活用する。
「自分に当てはまるか知りたい」という心理に応えられるため、滞在時間やお問い合わせにつながりやすくなります。
最近はAIの進化により、以前よりも診断コンテンツやシミュレーターを作りやすくなっています。業種によっては、簡易診断や料金シミュレーション、適性診断なども十分実現可能です。競合との差別化にもつながるため、作れるものがあれば積極的に取り入れていきたいですね。
お役立ちコンテンツへの導線で参考にしたいサイト
BtoBサイトを訪れる人の多くは、すぐに問い合わせる段階ではありません。まずは情報収集をしたり、比較検討を進めたりしながら、自社に合う会社かどうかを見極めています。だからこそ、トップページから「まず学べる」「まず試せる」コンテンツへ自然に誘導し、少しずつ信頼関係を築く設計が重要です。
株式会社イールドマーケティング
SEOで集客したユーザーに対して、記事の途中で履歴書テンプレートをダウンロードできる導線を設置しています。「1977年生まれ 履歴書」のような検索キーワードで訪れる人は、履歴書を書く機会がある可能性が高いため、検索意図に合った資料を提供することで自然にリード獲得へつなげています。
- 検索意図に合った資料を用意する
記事を読みに来た人が、そのまま使えるテンプレートやチェックリスト、サンプルなどを用意すると、自然な流れで資料ダウンロードにつながります。 - SEO記事からリード獲得につなげる
SEOはアクセスを集めるだけで終わりではありません。検索キーワードからユーザーの目的を考え、その人が次に必要になる資料やツールを用意することで、お問い合わせや資料請求につなげやすくなります。
Backlog
機能紹介では、画面キャプチャだけでなく、実際の操作画面を動画で見せています。
文字で説明するよりも、「実際にどう動くのか」がひと目で伝わるため、サービスを利用するイメージが湧きやすくなっています。
- 動画で使うイメージを伝える
システムやSaaSは、文章だけでは使い方が伝わりにくいものです。実際の操作画面を動画やGIFで見せることで、「自分でも使えそう」という安心感につながります。 - 説明より体験を見せる
「簡単に操作できます」と文章で伝えるよりも、実際に操作している様子を見せたほうが説得力があります。サービスの魅力は、説明するより体験してもらうことを意識したいですね。
株式会社ミヤケン
外壁塗装に関する動画をまとめたセクションを設けています。文章だけでは伝わりにくい内容を分かりやすく解説しています。
文章では伝わりにくい内容は動画で伝える。作業工程や施工事例、商品の使い方などは、文章や写真より動画のほうが伝わるケースも。特に専門性の高いサービスでは、「見るだけで理解できる」コンテンツを増やすことで、問い合わせ前の不安を減らせます。
株式会社リーピー（Leapy Inc.）
画面右下に動画ポップアップを表示し、会社紹介動画へ誘導しています。
スクロール中でも視界に入りやすく、「1分でわかる」「○○社以上に選ばれる理由」など、短時間で価値が伝わる内容になっています。
- 動画ポップアップで興味を引く
文章を読むよりも動画を見るほうがハードルが低い人もいます。画面右下に動画への導線を設置することで、サービスを知ってもらうきっかけを増やせます。 - 短時間で価値が伝わる動画にする
「1分で分かる会社紹介」「3分でサービス概要」など、短時間で見終わることを明記すると、再生されやすくなります。特にBtoBでは、営業資料の代わりになる動画を用意しておくと、問い合わせ前の理解促進にもつながります。
その他の要素で参考にしたいサイト
ホームページの成果は、大きなデザインだけで決まるものではありません。ユーザーが迷わず情報を探せる導線や、サービス理解を深めるコンテンツなど、細かな工夫の積み重ねが問い合わせ率を左右します。
ここでは、すぐに取り入れられる「その他の改善ポイント」を参考サイトとあわせてご紹介します。
フジ子さん｜お悩みセクション
「このようなお困りごとはありませんか？」という悩み一覧にカーソルを合わせると、その悩みに対する解決策が表示されるインタラクティブなデザインを採用しています。
ユーザーは自分に当てはまる悩みだけを選んで確認できるため、情報を探しやすく、サービス内容も理解しやすくなっています。
- 悩みごとに解決策を切り替えて見せる
すべての説明を並べるのではなく、「この悩みなら、こう解決します」と切り替えて表示すると、自分ごととして読み進めてもらいやすくなります。 - ユーザーが操作できるコンテンツを作る
ホバーやクリックで内容が切り替わる仕組みを取り入れることで、一方的に読むだけのページよりも印象に残りやすくなります。AIの活用でこうしたインタラクティブなUIも以前より作りやすくなっているため、取り入れられる場面では積極的に活用したいですね。
志村坂上駅前整骨院｜強み・他社との違いを打ち出しセクション
自社の特徴を説明するだけでなく、「一般的な整骨院・整体院」と比較しながら違いを分かりやすく伝えています。比較対象があることで、自社の強みや特徴がひと目で理解できる構成になっています。
- 競合との違いを比較で見せる
「当社の強み」だけを並べるよりも、「一般的には○○」「当社は○○」と比較すると、違いが直感的に伝わります。 - 比較は視覚的に分かりやすくする
表や左右比較、アイコンなどを活用すると、文章だけで説明するより理解しやすくなります。特に競合との差別化ポイントは、見た瞬間に伝わるデザインを意識したいですね。
すぐに使える小ワザ集
最後に、細かいけれど効果の大きい工夫を紹介します。どれも今日から取り入れられる内容です。
CTAは「無料」を先に伝える
「Webのプロに無料相談」よりも、「無料でWebのプロに相談」のように、メリットを先に伝えると行動のハードルが下がります。
運営組織のロゴは正方形に近づける
横長のロゴは表示枠によって左右が切れてしまうことがあります。正方形に近いデザインなら、さまざまな場所で表示崩れが起こりにくくなるので心がけたいポイントです。
AIO対策として「日本」を自然に入れる
AIに「○○業のおすすめ会社」を質問すると、「日本」というキーワードを補って検索されることがあります。
不自然にならない範囲で、タイトル・ディスクリプション・H1に「日本」を含めることを意識しましょう。
スマホ表示を必ず確認する
ファーストビューの文字サイズやCTAボタンの押しやすさ、画像や表の見やすさなどは、PCだけでなくスマートフォンでも必ず確認しましょう。
実際にスマートフォンで操作してみると、PCでは気付かなかった改善点が見つかることも多くあります。
まとめ｜トップページは「問い合わせから逆算」して一つひとつの要素を整えよう
本記事では、成果を出しているBtoBホームページを参考に、トップページで押さえたいデザインや導線設計を紹介しました。
ただし、最も重要なのはテクニックではありません。
本記事の冒頭でもお伝えしたように、「誰に・何を・なぜ自社なのか」という上流設計が固まっていて初めて、デザインやCTA、導線といった施策が効果を発揮します。
改善に迷ったら、小手先のデザインを変える前に、この土台を見直してみてください。
これからも、お客様にとって本当に成果につながるホームページとは何かを考え、一つひとつ改善を積み重ねていきましょう。
＼毎月3社限定・営業なし・完全無料／
ホームページ改善でお悩みの方へ
エイチリンクでは、小規模事業者・中小企業に特化し、ホームページ改善とSEO対策を通じて、集客や売上向上をご支援しています。
今回ご紹介したような事例も継続的に研究・蓄積し、「どのようなホームページなら成果につながるのか」を検証しながら、お客様へご提案しています。
月額20万円〜、大手SEO会社の40〜60%程度の費用で、1年以内の投資回収を基本目標にご支援しています。
成果が見込めないと判断した場合は、無理に契約をおすすめすることはありません。現状の課題整理だけでも構いませんので、お気軽にご相談ください。