BtoBサイトのダークモード対応とパーソナライズ｜手順と失敗例

2026年に入って「ダークモードに対応すべきか」「サイトを訪問者ごとに出し分けたいが何から手をつければいいのか」と迷っていませんか。どちらも流行りの言葉として聞くものの、自社で何をすればいいのかが見えにくいテーマです。

この記事では、BtoBサイトでダークモード対応とパーソナライゼーションを進める具体的な手順を、非エンジニアの方にも分かるように解説します。実装の流れ、判断の基準、現場でやりがちな失敗まで、手を動かせるレベルでお伝えします。

Contents / 目次

1. 2026年のBtoBサイトで先に押さえるべき結論
2. ダークモードとパーソナライズの始め方と手順
3. 取り組むとどんな成果が期待できるのか
4. よくある失敗と回避法
5. 現場で見えてくる落とし穴と妥協点
6. よくある質問
7. まとめと次の一歩

2026年のBtoBサイトで先に押さえるべき結論

結論から言うと、2026年のBtoBサイトで取り組むべきことは3つに絞れます。ダークモードへの対応、訪問者に合わせた情報の出し分け、そしてその土台になるデータの整理です。この3つは別々の施策に見えて、すべて「訪問者の意思決定をどれだけ助けられるか」という1点でつながっています。

BtoBサイトの役割は、ここ数年で大きく変わりました。かつては会社案内のパンフレット代わりでしたが、いまは購買担当者が比較・検討をほぼオンラインで完結させる「意思決定の補助ツール」になっています。だからこそ、見た目を整えるだけのリニューアルでは成果が出ません。

押さえるべき軸。ダークモードは「快適に読ませる配慮」、パーソナライズは「相手に合う情報を出す配慮」です。どちらも訪問者への配慮であり、自社都合の演出ではありません。

まず、3つのテーマがそれぞれ何のための施策なのかを整理しておきましょう。下の表で全体像をつかんでから、次の章で手順に入ります。

テーマ	ひとことで言うと	最初の一歩
ダークモード対応	OSの暗い画面設定に合わせて読みやすく見せる	配色とコントラストの見直し
パーソナライゼーション	訪問者の属性や検討段階に合わせて情報を出し分ける	顧客データの整理とセグメント設計
データの土台づくり	誰が何を見たかを記録し、判断に使える形にする	収集する項目と保管場所を決める

ダークモードとは、画面の背景を黒や濃いグレーにして文字を明るく表示する表示モードのことです。スマートフォンやパソコンのOSが標準で備えるようになり、自分でOSを暗い設定にして使う人が増えています。

利用者がOSを暗い設定にしているのに、サイトだけが真っ白でまぶしい。そんなギャップを避けるのが、いまのダークモード対応の考え方です。

パーソナライゼーションとは、訪問者の企業規模・業種・役職・閲覧履歴などに応じて、表示する内容やメッセージを変える手法のことです。全員に同じトップページを見せるのではなく、検討段階の浅い人には課題解決のヒントを、比較段階の人には導入事例や比較情報を出す。この出し分けが商談化の確率を上げます。

ダークモードとパーソナライズの始め方と手順

ここからは実際の進め方です。先にダークモード対応、次にパーソナライゼーションの順で、手を動かせる手順を示します。どちらも「いきなり全部」ではなく、小さく始めて広げるのが現場での鉄則です。

ダークモード対応は配色の見直しから始める

ダークモード対応の第一歩は、色の置き換え設計です。単に背景を反転させるだけだと、文字が読みづらくなったりブランドカラーが沈んで見えたりします。だから「明るいとき用」と「暗いとき用」の2セットの色を先に決めるのが正しい順番です。

配色を決めるときの判断基準は具体的に決まっています。次の3点を守るだけで、強すぎるコントラストを抑えつつ文字をはっきり読ませられます。

• 純黒・純白を使わない：純黒（#000000）と純白（#FFFFFF）は避け、少し彩度を落とした暗色と明色を使う
• 背景は濃いグレー：真っ黒ではなく#121212のような濃いグレーにする
• 文字は明るいグレー：真っ白ではなく#e0e0e0のような明るいグレーにする

この#121212という背景色は、GoogleのMaterial Designのダークテーマ指針でも推奨値として示されています。

実装には、OSの設定を読み取って自動で切り替える方法があります。CSSの「prefers-color-scheme」という標準の仕組みを使うと、訪問者がOSを暗い設定にしているかどうかを判定できます。下のコードはそのまま使える最小の例です。

/* OSの設定がダークモードのときだけ適用される標準のCSS */
:root {
  --bg: #ffffff;        /* 明るいとき用の背景 */
  --text: #1a1a1a;      /* 明るいとき用の文字色 */
  --accent: #2b6cb0;    /* ［自社のブランドカラーを入れる］ */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;      /* 純黒(#000)は避け、少し明るい暗色にする */
    --text: #e0e0e0;    /* 純白(#fff)は避け、彩度を落とした明色にする */
    --accent: #4a9eff;  /* ［ブランドカラーをダーク用に明るめ調整］ */
  }
}
body { background: var(--bg); color: var(--text); }

このコードは、色を「変数」としてまとめて管理し、暗い設定のときだけ変数の中身を入れ替える仕組みです。サイト全体の色をこの3つの変数で参照しておけば、ダーク用の色を1か所変えるだけで全ページに反映できます。手動で切り替えるボタンを置く方法もありますが、まずはOS連動だけで十分です。

ロゴや画像も忘れてはいけません。白背景を前提に作られた透過ロゴは、暗い画面で輪郭が消えて見えなくなります。暗い背景でも見えるロゴを別に1枚用意し、ダークモードのときだけ差し替えるのが現場の定番です。公開前のチェック項目を雛形にまとめておきます。

• 文字の読みやすさ：暗い背景の上で本文がはっきり読めるか、薄すぎないか
• ブランドカラー：コーポレートカラーが沈んだり蛍光色に刺さって見えたりしないか
• ロゴと画像：透過ロゴや白背景の図版が消えていないか、ダーク用を用意したか
• ボタンとリンク：押せる場所だと分かるコントラストが保たれているか

パーソナライズはデータ整理とセグメント設計から

パーソナライゼーションの第一歩は、ツール選びではなくデータの整理です。出し分けたくても、誰がどんな会社の人で何に興味があるかが分からなければ、出し分けようがありません。順番を間違えると、高機能なツールを入れたのに使いこなせない状態に陥ります。

進め方は次の手順で考えると整理しやすくなります。

最初のデータ収集では、企業規模・業種・部署・役職といった基本情報と、どのページを見たか・どの資料をダウンロードしたかという行動情報を集めます。

このとき、フォームでいきなり全部聞かないのがコツです。「プログレッシブプロファイリング」という段階的に集める方法にすると、入力の負担が減って離脱を防げます。具体的には次のように分けて集めます。

• 初回はメールアドレスだけを聞く
• 2回目の接触で会社名や役職を聞く

フォームの項目を絞る考え方は問い合わせフォームを5項目に減らすBtoBの設計でも詳しく扱っています。

次のセグメント設計では、集めたデータを意味のあるグループに分けます。たとえば「製造業・従業員100名以上・情報システム部」のように、似た課題を持つ人をまとめます。ここで分け過ぎないことが大切です。細かくしすぎると管理が煩雑になり、各グループ向けのコンテンツを用意しきれません。最初は3〜4グループから始めるのが現実的です。

最後の出し分けで、グループごとに見せる内容を変えます。検討初期の人には業界動向や課題のヒント、比較段階の人には導入事例や比較情報を出す、といった具合です。ここで使うのがMA（マーケティングオートメーション）ツールやCRM（顧客関係管理）ツールですが、まずはトップページのおすすめ記事を業種別に変える程度の小さな出し分けから試すと、効果と手間のバランスをつかめます。

取り組むとどんな成果が期待できるのか

結論として、ダークモード対応とパーソナライゼーションは「読みやすさ」と「響く情報」の両面で訪問者の体験を底上げし、結果として滞在やお問い合わせにつながりやすくなります。ここでは期待できる変化を具体的にイメージしておきましょう。

ダークモード対応の効果は、主に読みやすさへの配慮として表れます。OSを暗い設定にしている人にとって、サイトだけがまぶしい状態を避けられます。離脱率や閲覧時間への影響は業種やサイト構成で大きく変わるため、自社では導入前後のセッション時間や直帰の傾向を見比べて判断するのが確実です。

パーソナライゼーションの効果は、商談につながる質の高い接点が増えることに表れます。一斉配信のメルマガを属性別に出し分けるだけでも、開封率やクリック率の改善が期待できます。サイト上でも、訪問者の閲覧履歴に合わせて関連事例やホワイトペーパーを提示すれば、相手の検討段階に近い情報を届けられます。

成果が出る企業の共通点。施策を「見た目の刷新」ではなく「意思決定を助ける情報設計」と捉え、サイトで得たデータを営業のフォローまでつなげている点です。

成果を出している企業に共通するのは、サイトを作って終わりにせず、データを部門をまたいで使っている点です。Webで集めた「どの会社がどのページに何度も来ているか」という情報を営業に渡し、関心の高いタイミングでフォローする。この連携があると、サイトの数値がそのまま商談の数につながります。

逆に、マーケティングと営業が分断されていると、サイトで指標を達成しても売上に結びつきません。

大切なのは、最初から完璧を目指さないことです。ダークモードは主要ページだけ、パーソナライズはトップの記事出し分けだけ、と範囲を絞って始め、数値を見ながら広げる。この小さく回す進め方が、結果的に一番早く成果に届きます。

よくある失敗と回避法

ここでは現場で実際によく見かける失敗を3つ取り上げます。どれも「やってしまいがち」なものばかりなので、着手前に目を通しておくと回り道を避けられます。

失敗1。色を反転させただけのダークモード

もっとも多いのが、明るい配色をそのまま機械的に反転させてしまうケースです。この状態だと、信頼感を出すために選んだコーポレートカラーが暗く沈んで見えたり、アクセントカラーが蛍光色のように目に刺さったりします。文字も背景とのコントラストが足りず、読みづらくなります。

防ぐには、反転に頼らずダーク専用の配色を別に設計することです。純黒・純白を避け、ブランドカラーは暗い背景でも品よく見える明度に調整します。文字と背景のコントラストは、W3Cが公開するWCAG（Webアクセシビリティ基準）のコントラスト指針に沿って確保すると安心です。

失敗2。勘でセグメントを切ってしまう

パーソナライズで起きがちなのが、データではなく営業の経験や勘だけでグループ分けを決めてしまうことです。「この業種はたぶんこれに興味がある」という思い込みで出し分けると、的外れな情報を見せてしまい、かえって信頼を損ねます。

防ぐには、実際の閲覧履歴やダウンロード履歴といったデータを根拠にセグメントを作ることです。仮説を立てたら小さく試し、反応を見て修正する。この検証を回すことで、勘の精度ではなくデータの精度で出し分けられるようになります。

失敗3。コンテンツが足りず出し分けられない

セグメントは細かく作ったのに、各グループに見せるコンテンツが用意できていない、という失敗もよくあります。出し分ける器だけ作って中身が空では、どのグループにも同じ内容を見せることになり、パーソナライズの意味がなくなります。

防ぐには、セグメントを増やす前に、検討段階や興味に応じたコンテンツをどれだけ用意できるかを先に見積もることです。手持ちの記事や事例が少ないなら、まずは2〜3グループに絞り、コンテンツの拡充と並行して段階的に広げます。AIを下書き作成に使えば、コンテンツを増やす負担はかなり軽くできます。

現場で見えてくる落とし穴と妥協点

ここからは、教科書的な解説では触れにくい、実際にやってみると見えてくる現実をお伝えします。相談を受ける中でよく出てくる本音の部分です。

まず正直にお伝えすると、ダークモード対応は「やれば必ず成果が上がる」施策ではありません。読みやすさへの配慮であって、それ単体でお問い合わせが増えるわけではないのです。だから、デザインの全面リニューアルを後回しにしてまで最優先で取り組むものではありません。優先度としては、フォームの改善や読み込み速度のほうが先に効くことが多いです。

パーソナライゼーションも同じで、ツールを入れれば自動で成果が出るものではありません。むしろ一番大変なのは、出し分けるためのコンテンツを作り続ける運用の部分です。

ここを軽く見て高機能なMAツールを契約し、使いこなせないまま費用だけ払い続ける。これは本当によく見かける失敗です。広報担当者のための失敗しないCMSの選び方でも触れていますが、ツールは運用できる体制とセットで選ぶべきです。

過度な出し分けや、閉じにくいポップアップで行動を誘導する「ダークパターン」は、短期的にCVRが上がって見えても、ブランドの信頼を長期で削ります。訪問者を欺く設計は避けてください。

内製と外注の切り分けも悩みどころです。ダークモードのCSS調整やトップの記事出し分けくらいなら、社内でも十分に手が届きます。一方で、CRMやMAと連携した本格的なデータ基盤づくりは、設計を間違えると後で作り直しになりやすく、最初だけでもプロと一緒に設計図を引いたほうが結果的に安く済みます。サイトを作った後の更新が止まると価値が落ちる点はVibe codingのサイトが3か月後に詰む前の更新設計でも解説しています。

よくある質問

まとめと次の一歩

2026年のBtoBサイトは、見た目の刷新よりも「訪問者の意思決定をどれだけ助けられるか」で成果が分かれます。ダークモードは読みやすさへの配慮、パーソナライズは相手に合う情報を届ける配慮。どちらも小さく始めて、データを見ながら広げるのが近道です。

ここまで読んで、自社だけで設計図を引くのは難しそうだと感じた方は、まず現状の整理だけでも一緒にやってみませんか。コレットラボのAIで作るサイト制作・内製化の伴走支援なら、どこを自分たちでやり、どこをAIや外部に任せるかの線引きから一緒に考えられます。いきなり契約ではなく、お話を聞かせていただくだけでも大丈夫です。AI業務システム化の詳細はこちらからお気軽にご相談ください。