BtoBサイトのデザインのポイント｜成果につながる構成と事例5選

BtoBサイトのデザインは「見た目」より「構造」を優先する

結論から言うと、BtoBサイトでは、ビジュアルを強めるよりも、シンプルで情報が分かりやすい構造にした方が、事業へのインパクトは大きくなります。BtoBの商材は、複数の担当者が比較検討してから導入を決めるのが一般的です。検討する人が判断の材料を迷わず見つけられることが、何より大切になります。

BtoBサイトで特に大切なのは、サービスの価値と、導入・契約したときのベネフィットを分かりやすく示すことです。導入事例や料金、進め方など、検討する人が自社に当てはめて比べられる材料を用意すると、問い合わせにつながりやすくなります。

例えば、システム開発会社のmofmofでは、サイトの優しい雰囲気は保ったまま、トップページの構造を見直しました。改修から1か月で、サービスの詳細ページへ進む人の割合が1.6倍になっています（mofmofの事例）。

BtoBサイトのトップページに置く要素・置かない要素

トップページは、初めて訪れた人が「自分に関係のある会社か」を判断する場所です。置く要素を絞るほど、伝えたいことがまっすぐ届きます。

必ず置く3つの要素

1. ファーストビューに、認知してほしいキャッチコピーと、コピーを表すキービジュアル

2. 一番してほしい行動（問い合わせや資料請求など）へのボタン

3. グローバルナビゲーションに、訪れてほしいページへの導線

ファーストビューに詰め込まない

認知してほしいことと、してほしい行動以外の優先度の低い情報は、ファーストビューに置きません。最初の画面に情報を並べすぎると、本当に伝えたいことが埋もれてしまうからです。詳しい情報は下の階層やほかのページに任せ、最初の画面では「何の会社で、次に何をすればよいか」が伝わる状態を目指しましょう。

事例・料金・資料ダウンロードの置き方

事例・料金・資料ダウンロードは、BtoBサイトで検討する人が特によく見る情報です。どこに、どの順番で置くかは、企業や事業のモデルによって優先順位が変わります。GOROでは、ヒアリングをしながら案件ごとに決めています。

事例は、アクセスしやすい場所に置く

事例は、多くの事業モデルで気にされる情報です。検討する人は、自社と近い業界や規模の事例から、導入した後の姿を思い描きます。グローバルナビゲーションやトップページから、すぐにたどり着ける場所に置きましょう。

料金は、載せるかどうかから判断する

料金は、顧客が一番気にする情報です。一方で、競合にも伝わるため、Webに載せるかどうかの判断が必要になります。

料金を載せて問い合わせが減った場合、残った問い合わせは確度の高いリードとも言えます。ただし、検討の途中にいる人を育てる余地を、自ら手放すことにもなります。どちらを選ぶかは、営業の進め方とあわせて決めましょう。

資料ダウンロードは、行動の選択肢を絞って置く

資料ダウンロードは、すぐには問い合わせない人の受け皿になります。ただし、メールマガジンの登録や資料ダウンロード、問い合わせなど、行動の選択肢を増やしすぎると、訪れた人は迷ってしまいます。ページごとに一番してほしい行動を決めて、ボタンを絞るのがポイントです。

ワイヤーフレームで構成を固めてからデザインする

BtoBサイトの構造は、デザインに入る前にワイヤーフレームで決めます。ワイヤーフレームとは、ページに載せる情報と並び順を、色や装飾を使わずに示した設計図のことです。

ワイヤーフレームの段階で全体を見渡すと、伝えるべきことと、なくてもよいことを整理できます。会計事務所とIPO支援の2つの事業を持つプロソフィーでは、ワイヤーフレームでサイト全体の構成を見える形にし、不要な要素を削ぎ落としました。デザインや実装に入ってからの、大きな手戻りも防げます。

GOROでは、主要なページから順に、訴求や構成、原稿、レイアウトのイメージをワイヤーフレームで形にしています。mofmofのトップページでは、2〜3週間の議論を通じてワイヤーフレームを磨き上げました。

デザインの方向性を決める3つの手順

いきなりデザインを作り始めると、好みの話で議論が進み、合意に時間がかかります。GOROでは、次の3つの手順で方向性を決めています。

1. 顧客から評価されている点を抜き出す

まず、顧客事例やインタビューを読み込み、その会社が顧客から評価されている点を抜き出します。mofmofでは、分析をもとに、同社が大切にしている「人柄の良さ」や「雰囲気の優しさ」を損なわないことを軸に据えました。

2. デザインのコンセプトを言葉にする

抜き出した評価をもとに、デザインのコンセプトを言葉にします。言葉になっていると、デザインを判断するときの基準になり、社内の確認でも説明しやすくなります。

3. 雰囲気の違う2〜3案を比べて決める

コンセプトをもとに、ムードボードやファーストビューの案を、雰囲気を変えて2〜3案出します。並べて比べると、言葉だけでは伝わりにくい印象の違いを、関係者のあいだで具体的に話し合えます。

mofmofでは、サイトのトーンを「ビジネスとフレンドリー」「動的と静的」の2つの軸で整理し、複数の案を比べました。プロソフィーでは、案ごとに「違う」「近い」を判断する消去法で絞り込み、イラストで統一した親しみやすいトーンに決めています。

こだわっても成果に効きにくい2つのこと

BtoBサイトの制作では、強くこだわる方が多いのに、成果にはあまり効かないと感じる点が2つあります。

アニメーション

アニメーションを、サービスを表現する要素の1つと捉える人は多くいます。コンセプトサイトやブランドサイトなら効果的ですが、一般的なBtoBサイトでは情報設計の方が重要です。

情報の網羅

自社のことをすべて説明したいと詰め込んでも、サイトを訪れる人は基本的に文字を読みません。GOROでは、需要のない説明は削ぎ落とすこともあります。SEOやAI検索のために、検索されている語を調べて見出しに入れる工夫は、説明を削ることとは別に行います。

コミュニティサービスのTEIDA LABでは、ワイヤーフレームの段階で伝えるべきことを整理し、原稿を2割ほど削りました。サービスサイトの改修後、有料会員数は2倍以上に増えています。

参考サイトは目的を分けて集める

最初の打ち合わせで、参考サイトを持ってきていただくことはよくあります。競合他社のサイトのこともあれば、業界の違う会社のサイトのこともあります。参考にしたい理由は、大きく次の3つです。

1つのサイトを丸ごと参考にすると、構造は良いのに見た目は合わない、といったズレが起きがちです。どの点を参考にしたいのかを分けて伝えると、制作会社との認識がそろいやすくなります。

GOROが手がけたBtoBサイトの事例5選

最後に、GOROが構成からデザインまで手がけたBtoBサイトの事例を紹介します。

1. リブ・コンサルティング｜モビリティ領域の事業サイト

コンサルティングファームのリブ・コンサルティングでは、モビリティ領域の事業サイトを刷新しました。大企業向けへ事業を広げる段階だったため、「できること」を並べるのではなく、強みの領域を形にして打ち出す構成に変えています。

2. mofmof｜コーポレートサイトのトップページ

システム開発会社のmofmofでは、資料請求につながる導線を強める目的で、トップページを作り直しました。複数のサービスを一覧で見渡せる構造にし、メインビジュアルの近くに問い合わせと資料ダウンロードのボタンを置いています。改修から1か月で、サービスの詳細ページへ進む人の割合は1.6倍になりました（事例を見る）。

3. フォトラクション｜施工BIMビルダーのサービスサイト

建設業界のDXを進めるフォトラクションの新サービス「施工BIMビルダー」のサービスサイトです。専門性の高い内容を初めての人にも伝えるため、代表へのヒアリングで業務の流れを分解し、顧客に届ける価値を言葉にしました。そのうえで、ワイヤーフレーム上で構成と見せ方を検討しています（事例を見る）。

4. プロソフィー｜2つの事業のコーポレートサイト

京都で会計事務所とIPO支援の事業を営むプロソフィーでは、2つのサイトを同時にリニューアルしました。事業ごとにターゲットが違うため、2つのサイトのトーンに差をつけています。一方で、フォントやイラスト、余白の使い方はそろえ、会社としての一貫性を保ちました。公開後は、取引先から「信頼感が増した」という声が寄せられています（事例を見る）。

5. mofmof｜Web広告用のLP

高単価の開発案件の新しいリードを獲得するため、Web広告の受け皿となるLPを2週間で構築しました。広告運用チームが社内でLPを複製・改善できるように、Studioで作っています。6か月で、一定数の資料ダウンロードと問い合わせを獲得しました（事例を見る）。

関連記事：BtoB LPの作り方｜成果につながる構成と事例・費用の目安

まとめ

• BtoBサイトのデザインは、見た目より分かりやすい構造を優先する

• トップページは、キャッチコピーとキービジュアル、一番してほしい行動、主要ページへの導線に絞る

• 事例はアクセスしやすい場所に置き、料金は載せるかどうかから判断する

• 構成はワイヤーフレームで固め、デザインは評価されている点から方向性を決める

• アニメーションや情報の網羅は、成果に効きにくい

関連記事：BtoBサイトのリニューアル｜失敗しない進め方と期間・費用の目安

関連記事：BtoBサイト改善の進め方｜最初の2週間の手順と効果が出た施策

BtoBサイトの構成やデザインを見直したい場合は、事業の価値を言葉にするところから一緒に考えます。今回の進め方は、GOROの「BtoBサイト制作支援」でご相談いただけます。