製造業の購買担当者がWebサイトにアクセスすると、洗練されたSaaSのダッシュボードのヒーロー画像が表示されます。フィンテックの見込み客がアクセスしても、同じ画像が表示されます。どちらも自分のために作られたページだとは感じず、数秒で去っていきます。問題はランディングページに画像がないことではありません。相手が誰で何を必要としているかにかかわらず、全員に同じ画像を見せていることです。
ランディングページの画像は、たいていページをデザインした人が一度選び、その後はすべての訪問者に表示されます。複数の業界や購買担当者の役割を抱える B2B サイトでは、ほとんどの訪問者が他人の世界の写真を見ることになります。メイン画像を訪問者の業界、役職、段階に合わせるのは、新しいコピーが不要なため比較的安価なパーソナライゼーションの1つですが、画像が具体的な何かを伝えている場合にしか効果はありません。この記事では、各画像タイプの役割、動画が重さに見合う場面、ビジュアルをセグメントに対応付ける方法、そして効果を左右するパフォーマンスとアクセシビリティの詳細を解説します。
B2Bで汎用的なランディングページ画像が失敗する理由
画像は通常、訪問者の目が最初に留まる要素であり、見出しが読まれる前に第一印象を形作ります。一般的な画像自体が大きな害になることはあまりありません。損失は、訪問者に見覚えのあるものを見せる機会を逃すことです。
複数のバイヤーペルソナを持つB2B企業にとって、1種類の画像セットは構造的な不利を生みます。プラットフォームを評価するエンジニアリング担当VPと、同じく評価するCMOでは、ビジュアルに期待するものが異なります。一方は技術アーキテクチャ、連携、データフローを見たがり、もう一方はダッシュボード、キャンペーン指標、ROIのグラフに反応します。両者が同じ汎用的なオフィス写真を見れば、どちらもスクロールを続けたくなる関連性のシグナルを得られません。訪問者を連れてきた広告についても同様です。ディスプレイ広告のクリエイティブをページと一貫させる方法は、レスポンシブディスプレイ広告を使うべきときのガイドで解説しています。
ガラス張りのオフィスで握手する人々のストック写真は、よくある悪い例です。一目でストック写真だとわかるため何の価値も加えず、製品のスクリーンショットや実際の顧客、ワークフローの図を置けたはずのスペースを奪います。ランディングページのビジュアルで1つだけテストするなら、本物の画像（自社製品、顧客、チーム）とストック写真を比較しましょう。
ビジュアルを訪問者セグメントに合わせる
画像をパーソナライズする狙いは、到着してから「これは自分向けだ」と感じるまでの時間を短くすることです。実践的な方法は、すでに追跡しているセグメントに画像のバリアントを対応付けることです。訪問者識別で企業の業界、規模、地域を検出しているなら、同じデータでページに表示する画像を決められます。
セグメントと画像を対応付ける方法：
業界に合わせたビジュアル。製造業の訪問者には工場の現場を、金融サービスにはトレーディングデスクを、医療には病院のワークフローを見せます。販売する製品は同じでも、ビジュアルの文脈を訪問者の日常に合わせて変えるのです。
役職に応じたビジュアル。技術系のバイヤーはアーキテクチャ図、コードスニペット、連携フローに反応します。ビジネス系のバイヤーはダッシュボード、グラフ、成果指標に反応します。ビジュアルの言語をバイヤーの専門性に合わせることで、相手の視点を理解していることが伝わります。
段階に応じたビジュアル。初回訪問者には、何をしている会社かが伝わる大まかなメリットのイラストが効果的です。すでに製品コンテンツを読んだ再訪者には、詳細なスクリーンショット、比較表、顧客の実績のほうが響きます。
企業規模。エンタープライズの訪問者は、規模感、セキュリティ認証、複数チームのワークフローを示す画像に反応する傾向があります。小規模企業は、スピード、シンプルさ、すぐに得られる成果を示す画像に共感します。
画像の種類と、それぞれが最も効果を発揮する場面
ランディングページでは、ビジュアル要素によって果たす役割が異なります。その違いを理解することで、何をパーソナライズし、何を固定するかを意図的に選べるようになります。
ヒーロー画像は第一印象を決め、価値提案全体の枠組みを作ります。ページ内で最も価値のあるスペースを占めます。プロダクトが使われている様子を、できれば訪問者になじみのあるデータや環境で見せるヒーロー画像は、抽象的なグラフィックよりも多くを伝えます。パーソナライズされたページでは、ページに着地した全員の目に入るため、ヒーローは最初に出し分けるのに適した要素です。
製品のスクリーンショットは販売するものの具体的な証拠になりますが、使い方を誤るとページが雑然とした印象になります。訪問者のユースケースに最も関連する機能を強調した注釈付きのスクリーンショット1枚の方が、注釈なしの複数枚よりも効果的です。セグメンテーションのデータから訪問者が分析を重視しているとわかれば、分析ダッシュボードを見せましょう。連携を重視しているなら、連携パネルを見せます。
イラストやオリジナルのグラフィックは、複雑な内容をわかりやすくするのに優れています。抽象的なワークフローや複数ステップのプロセスを説明する場合、オリジナルのイラストなら、文章では何段落も必要な内容を数秒で伝えられます。訪問者の技術的な理解度に応じて説明を変える必要があるパーソナライズページでは特に有効です。デザインとコピーを一緒に計画できるよう、各セクションに必要なビジュアルをランディングページのコピーブリーフに記載しておきましょう。
社会的証明の画像には、顧客ロゴ、チーム写真、導入事例のサムネイルなどがあります。訪問者の業界や企業規模帯のロゴを表示することでパーソナライズできます。中堅SaaS企業にとっては、親近感を持てないFortune 500のロゴよりも、同じ中堅SaaS企業のロゴのほうが安心感を与えます。B2Bランディングページの事例では、ページの種類ごとにどの実績要素を前面に出すべきかを紹介しています。
背景画像は、注意を奪うことなく雰囲気を作ります。控えめなグラデーションや幾何学模様は、気を散らさずに奥行きを加えるため、写真の背景より効果的なことがよくあります。役割は関連性を伝えることではなく支えることなので、パーソナライズが必要になることはめったにありません。
ランディングページの動画：設置する価値があるとき
動画は、ページの重さの面でも、求める注意の面でも、追加できる中で最も重いビジュアルです。私たちの考えでは、ランディングページの動画は、スクリーンショットでは答えられない1つの疑問に答えるべきです。たいていは「実際に誰かが使うとどう見えるのか？」という疑問です。見出しをBGM付きで繰り返すだけの動画なら、適切に選んだスクリーンショットのほうが早く同じ役割を果たします。ランディングページ以外の動画については、B2B動画マーケティングガイドをご覧ください。
B2Bのページで動画が効果を発揮しやすい場面：
- デモページとサインアップページの製品ウォークスルー。主要なワークフローを60〜90秒で見せれば、訪問者は商談を予約する前に自分に合うかを判断できます。カーソルはゆっくり動かし、再生されるサイズでもUIが読めるようにしましょう。
- 検討後期のページに顧客の声を。顧客が自分の言葉で課題を語る動画は、ロゴでは示せない証拠になります。別の動画ギャラリーではなく、それが裏付ける主張のすぐ横に置きましょう。
- ウェビナーとイベントのページ。30秒の登壇者クリップで、そのセッションに時間を割く価値があることを示します。イベント後は録画に差し替えます。
逆に、たいてい効果がない場面もあります。見出しの背後で自動再生されるループ背景（コピーと競合し、読み込み時間もかかる）や、重要な情報を得る唯一の手段としての動画です（多くの B2B の訪問者は職場で音声をオフにして閲覧しています）。
ページを遅くせずに動画を追加する
- ポスター画像を使い、クリック時にプレーヤーを読み込む。YouTubeやVimeoの埋め込みをそのまま使うと、誰も再生ボタンを押す前にスクリプトが読み込まれます。GoogleのLighthouseのドキュメントでは、サードパーティの埋め込みをファサードの背後で遅延読み込みすること、つまり操作されたときに本物のプレーヤーに切り替わる静的なプレビューを使うことを推奨しています。
- ファーストビューより下の埋め込みは遅延読み込みする。web.devのiframe遅延読み込みガイドで説明されているとおり、iframeに
loading="lazy"を追加すると、画面外のプレーヤーの読み込みが後回しになります。 - すべてに字幕を付けます。字幕は音声オフで視聴する人に役立ち、音声付きの収録済み動画ではアクセシビリティ要件でもあります。
- 動画がなくてもCTAが見えるようにする。フォームやボタンが、誰かが最後まで動画を見ることを前提にしてはいけません。
動画が役立っているかを測定する
GA4の拡張計測機能は、JS APIサポートが有効な埋め込みYouTube動画について、video_start、video_progress、video_completeイベントを記録します。再生回数より重要な数字が2つあります。再生率（再生数 ÷ ページ訪問者数）と、再生した訪問者としなかった訪問者のコンバージョン率です。後者には注意が必要です。再生ボタンを押す訪問者はもともとエンゲージメントが高いため、視聴者のコンバージョン率が高くても、動画がその原因だとは証明できません。公平な検証方法は、動画ありとなしのページをA/Bテストし、視聴時間ではなくコンバージョンで判断することです。
動画もパーソナライズに向いています。製造業の訪問者とソフトウェア業の訪問者に、2種類のデモデータで収録した同じウォークスルーを見せることができます。台本さえできていれば、思ったほどコストはかかりません。
パーソナライズしたページの視覚的な階層
画像は、訪問者がページをどう見ていくかを左右します。テキストの多いページでは、人は上部を横に、次に左側を縦に流し読みする傾向があります（F型パターン）。情報の少ないページでは、視線は左上から右上へ、そして下へとジグザグに動くことがよくあります。こうした視線の動きを念頭に画像を配置しましょう。
パーソナライズしたヒーロー画像は、視線が最初に止まるF字の上部に配置しましょう。補助的なビジュアルは縦方向の視線の流れに沿って配置します。人物の視線や図中の矢印など、方向を示す要素を画像に使う場合は、CTAから離れる方向ではなく、CTAに向けましょう。
サイズが階層を作ります。大きな画像は重要性を示します。ターゲットアカウントの訪問者に特定の成果や機能に注目してほしいなら、その画像をページの主役のビジュアルにしましょう。顧客ロゴや補足のスクリーンショットなどの副次的な画像は小さく保ち、競合させずに補強させます。
メイン画像には余白を与えましょう。周囲にスペースのある、セグメントに合った明快な画像1枚は、窮屈に並んで注目を奪い合う3枚よりも速く伝わります。しかも維持するバリエーションは3つではなく1つで済みます。
ランディングページの画像をパーソナライズするための段階的なワークフロー
画像のパーソナライゼーションを導入するのに、サイト全体を作り直す必要はありません。小さく始めて拡大していける実践的なワークフローを紹介します。
ステップ1:有望な訪問者が多いセグメントを選ぶ。アナリティクスや訪問者特定ツールからデータを取り出します。有望なトラフィックの大部分を占めるのは、どの業種、企業規模、役職でしょうか。測定できるだけの規模があり、画像を変えることに本当に意味があるほど違いのはっきりしたセグメントから始めましょう。
ステップ2：現在のランディングページの画像を点検します。最もトラフィックの多いランディングページの画像をすべて書き出します。それぞれについて、3つのセグメントすべてに等しく響くかを問いましょう。答えがイエスなら、それは強力な万人向けの画像か、誰にも響かない汎用的な画像のどちらかです。セグメント別のバリアントで関連性を高められそうな画像にフラグを付けます。
ステップ3:対象の枠ごとに2〜3の画像バリエーションを作る。全面的なリデザインは不要です。ヒーロー画像なら、同じレイアウトで背景画像、製品のスクリーンショット、ユースケースのイラストを変えた3つのバージョンを用意するといった形です。構図とCTAの配置は揃え、ページ構造ではなく画像の内容をテストするようにしましょう。
ステップ4：セグメント別の表示ルールを設定する。パーソナライゼーションプラットフォームで、各バリエーションを対象セグメントに割り当てます。どのセグメントにも当てはまらない訪問者向けのデフォルトも定義しましょう。各セグメントのテストアカウントでプレビューし、適切な訪問者に適切な画像が表示されることを確認します。
ステップ5：計測と改善を繰り返す。全体だけでなく、セグメント別にコンバージョン率を追跡しましょう。製造業の訪問者のコンバージョンを高めるヒーロー画像が、SaaSの訪問者には逆効果になることもあります。各セグメント内でA/Bテストを実施し、画像の変更による影響を他のページ要素から切り分けましょう。テスト開始前にサンプルサイズを決め（方法はA/Bテストのサンプルサイズガイドで解説しています）、最低でも丸2週間実施し、ダッシュボードの数字が良く見えても早期に打ち切らないでください。
技術的なパフォーマンス：速度と画質
遅れて表示されるパーソナライズされたヒーローは、時間どおりに表示される汎用的なヒーローよりも悪い結果になります。ヒーロー画像はLargest Contentful Paint（LCP）の要素であることが多いため、そのサイズと読み込み順序がページの体感速度を左右します。
最新のフォーマットを使いましょう。Googleのドキュメントによると、WebPの非可逆画像は同等のJPEGより25〜34%小さく、WebPの可逆画像はPNGより26%小さくなります。AVIFはさらに圧縮できることが多いです。<picture>要素を使い、JPEGをフォールバックにしてAVIFまたはWebPを配信してください。
他社のサイズ上限を真似するのではなく、自社ページの予算を決めましょう。PageSpeed Insights のモバイルプロファイルでヒーローのファイルサイズと LCP を確認し、デフォルトより明らかに重いパターンはバグとして扱います。
srcset属性を使ったレスポンシブ画像を使用しましょう。モバイルの訪問者に幅2000pxの画像を配信すると、帯域幅が無駄になり描画も遅れます。ビューポートの幅に応じて、ブラウザに適切なサイズの画像を選ばせます。パーソナライズされたページでは、画像のバリエーションごとにレスポンシブ用のサイズ一式が必要になりますが、ビルドツールで自動化できます。
ヒーロー画像は遅延読み込みしないでください。ファーストビューにあるため、遅延読み込みすると表示が遅れます。代わりにfetchpriority="high"を指定し、遅延読み込みはページ下部の画像だけに使いましょう。セグメント別バリアントでは、サーバー側またはエッジでバリアントを決定し、最初からHTMLに正しい画像を含めるのが最もすっきりした構成です。クライアント側で差し替える場合は、読み込み時にレイアウトがずれないよう画像のサイズを確保しておきます。
すべての画像バリエーションのアクセシビリティ
パーソナライズした画像パターンにはそれぞれ専用の代替テキストが必要です。製造業のワークフローを示すヒーロー画像には、どのパターンにも当てはまる汎用的な代替テキストではなく、その場面を説明する代替テキストを付けましょう。スクリーンリーダーはページ上の内容を読み上げるので、代替テキストはそのセグメントの晴眼の訪問者が実際に見ているものと一致させるべきです。
良い代替テキストは、画像の内容を簡潔に説明しつつ、周囲の文脈と関連づけます。100文字以内に収めましょう。装飾用の画像（背景、スペーサー）は、スクリーンリーダーが読み飛ばすようにalt属性を空にします。リンク付きの画像のような機能を持つ画像には、リンク先を説明する代替テキストが必要です。
画像の読み込みに失敗すると代替テキストが表示されるため、代替テキストは通信の遅い環境の晴眼者にとってもフォールバックとして機能します。パーソナライズした画像のバリアントがある場合、各バリアントに共通のプレースホルダーではなく、固有のわかりやすい代替テキストが必要な理由がここにもあります。
パーソナライズしたビジュアルのよくある失敗
画像のパーソナライゼーションに初めて取り組むチームは、パーソナライズしすぎる傾向があります。訪問者のセグメントに応じてページ上のすべての画像を差し替えると、保守の負担が増え、本当に重要な変更の効果が薄まります。パーソナライズは効果の最も大きい1〜2か所の画像枠（通常はヒーローと主要なソーシャルプルーフのセクション）に絞り、それ以外は一貫させましょう。
もう1つよくある間違いは、セグメントデータを使って、押し付けがましく感じられる推測をすることです。訪問者が名乗る前にその企業のロゴを表示するのは一線を越えています。その業種に関連する画像を見せるのは役に立ちます。その企業のオフィスビルを見せるのは不安を与えます。違いは、文脈に沿った関連性か、監視かという点にあります。
3つ目の落とし穴は、一度に多くのバリアントをテストしすぎることです。4つのセグメントに3つの画像枠、それぞれ2つほどのバリアントがあるだけで、組み合わせは数十通りになり、B2Bのトラフィックでテストできる量をはるかに超えます。各セグメント内で一度に1つの変数をテストし、統計的有意性を待ち、変更ごとに確信を得てから次の変更を重ねましょう。
より広範なB2Bランディングページ最適化の計画を進めているチームにとって、画像のパーソナライゼーションは、コピーのパーソナライゼーションより新しいコンテンツが少なくて済むため、早い段階の施策として妥当です。ただし、セグメント固有の本物のビジュアルがあることが前提です。業界ごとに違うストックフォトしか用意できないなら、その時間はコピーに使いましょう。
どこから始めるか
最もトラフィックの多いランディングページを開き、1つの問いを持ってヒーロー画像を見てください。最大のセグメントからの訪問者が、そこに自分たちの仕事を見いだせるでしょうか？そうでなければ、彼らが共感できるプロダクトのスクリーンショットや顧客の画像に差し替え、現在の画像とテストしましょう。実際の画像がストック画像に勝って初めて、セグメントごとのバリアントを作る価値が生まれます。ルールを自分で組まずにそうしたバリアントを配信したい場合、Markettailorは訪問者識別データを画像を含むページ上のコンテンツと連携させます。
