ランディングページの画像選び方｜素材・配置・著作権の実践ガイド

訪問者は文字を読む前に画像で「信頼できるか」「自分向けか」を判断します。特にファーストビューのビジュアルは、直帰率と CTA クリック率に直結するため、素材選びはデザインの装飾ではなくコンバージョン設計の一部です。

汎用ストック写真の使い回しは、競合 LP と似た印象になり差別化が弱まります。可能ならサービス実物・店舗・チーム・利用シーンのオリジナル写真を優先し、後から差し替え可能な HTML 構成にしておくと、初期は無料素材でも立ち上げやすくなります。

ヒーロー：商品・人物・成果が一目で伝わる 1 枚。情報を詰め込みすぎない。特徴：アイコン＋短文、または Before/After。社会的証明：顔が見える顧客写真、ロゴ一覧。CTA 前：不安を解く補足ビジュアル（保証・サポート）。

1 セクション 1 メッセージを画像で補強する考え方が有効です。「LPのファーストビュー設計ガイド」「信頼要素の載せ方」も参考にしてください。

Unsplash・O-DAN・いらすとや（用途注意）などは商用利用可能なものが多いですが、ライセンス表記・クレジット・人物の肖像権・商標の写り込みは個別に確認が必要です。

AI 生成画像は利用規約とクオリティを確認し、人物が不自然な場合は信頼性を損ねます。本番公開前に法務・ブランドガイドと照合するチェックリストを用意してください。

画像の上下に十分な余白を取ると、テキストの可読性が上がります。モバイルでは横幅 100%・縦長ヒーロー・重要要素を中央に配置し、親指スクロールで CTA まで迷わない導線にします。

テキストを画像に焼き込むと、レスポンシブで読めなくなるため、HTML の見出し＋背景画像または横並びレイアウトが安全です。DesignLayer のスタジオではプレビュー幅を変えながら確認できます。

WebP 化、適切な解像度（ヒーローでも表示幅の 2 倍程度）、lazy load（ファーストビュー以外）は LCP 改善の基本です。alt にはキーワードの詰め込みではなく、画像の内容を簡潔に記述します。

ファイル名も landing-page-hero-product.webp のように意味のある命名にし、SEO とアクセシビリティの両方に配慮します。「スマホ向け LP 最適化の完全ガイド」で速度チェックリストを確認してください。

DesignLayer で生成したたたき台ではプレースホルダー画像が入ることがあります。ブリーフに「写真の雰囲気（明るい／プロ／カジュアル）」を書いておくと初期案のトーンが安定します。

公開前に差し替えリスト（ヒーロー・事例・OGP）を作成し、デザイン・撮影・素材調達を並行すると納期が短縮されます。画像は LP の資産——計測後に A/B テストで差し替える運用もおすすめです。

自社撮影が難しい場合は、スマホでも十分なシーン（店舗・商品・作業風景）を確保し、後からプロ撮影に差し替えます。ブリーフに「撮影リスト（5 カット）」を書いておくと依頼が明確になります。

イラスト・3D モックは SaaS 向け LP で有効ですが、実画面キャプチャと併用しないと抽象度が上がりすぎることがあります。

OGP 用画像（1200×630）はヒーローとは別に設計し、SNS シェア時にタイトルが読めるコントラストを確保してください。

ヒーロー画像だけを 2 パターン比較するテストは、実装コストに対して効果が出やすいです。人物あり／なし、商品クローズアップ／利用シーンなど、仮説を 1 つに絞ります。

計測期間は最低 2 週間、流入が一定ある状態で実施します。勝ちパターンはブリーフと素材ライブラリに記録し、次の LP から再利用します。

「LP A/B テストの進め方」「CVR 改善の実践ガイド」と組み合わせると、画像以外の要素と切り分けて学習できます。

OGP 画像は 1200×630px が一般的です。LP ヒーローをそのまま縮小すると文字が読めなくなるため、シェア専用にタイトル入りの 1 枚を用意します。

X・Facebook・LINE でトリミング位置が異なるため、重要要素は中央に寄せます。

メタタグ（og:image・twitter:card）は本番実装で設定します。たたき台段階で OGP のコピー案までブリーフに含めておくと漏れが減ります。

□ タイトル・メタディスクリプションに「LP 画像」関連キーワード □ H1 は 1 つ □ スマホで CTA が押しやすい □ フォーム・リンクが動作 □ プライバシー・特商法リンク □ OGP 設定 □ 表示速度（PageSpeed）確認

□ 広告文・検索クエリとヒーローのメッセージが一致 □ 画像に alt あり □ 誇大・根拠なき数値がない □ 計測タグ（GA4・広告）が発火

チェック完了後に公開し、2 週間でスクロール深度・CVR を確認します。問題があれば DesignLayer でたたき台を更新し、1 仮説 1 変更で再テストしてください。

週次：流入・CVR・フォーム完了率。月次：Search Console のクエリ・CTR、ヒートマップのスクロール・クリック。四半期：構成の追加・削除。

改善は「データ → 仮説 1 文 → ブリーフ更新 → たたき台 → 社内承認 → 本番」の順。一度に複数変更しないことが、学習の質を保ちます。

勝ちパターン（コピー・構成・画像）は社内 Wiki に蓄積し、次の LP 制作時間を短縮します。

タイトルタグにメインキーワードを含め 32 文字前後、メタディスクリプションは 120 文字程度で CTR を意識します。H1 は 1 つ、H2 で章立てし、見出しだけ読んでも内容が伝わる構成にします。

内部リンクで関連ガイド（構成テンプレート・モバイル最適化・計測・CVR 改善）へ誘導し、Search Console で四半期ごとにクエリと CTR を確認します。

DesignLayer でたたき台を作り、本番で Core Web Vitals・構造化データ（FAQ）・法務表記を整える流れが、SEO と CV の両立に向いています。

LP 画像は信頼と CVR を左右します。セクションごとに役割を決め、速度と alt を整え、計測後に A/B テストで差し替えましょう。

DesignLayer のブリーフとスタジオでたたき台を早く作り、本番では計測・法務・Core Web Vitals を整えて公開してください。関連ガイドへ内部リンクし、Search Console で四半期ごとに見直す運用がおすすめです。

まずは 1 本、2 週間で数値を取り、次の改版に活かす——小さく始めて改善を続けることが、SEO と CV の両方で成果につながります。

ランディングページの画像選び方は単発で終わらせず、四半期ごとの更新で検索順位と CVR を維持します。社内ではブリーフ・たたき台・計測結果を 1 フォルダにまとめ、次の担当者が同じ品質で改善できる状態をつくりましょう。

ランディングページの画像選び方の改善では、2週間ごとに CVR とスクロール深度を確認し、1つずつ仮説検証してください。

リニューアル時は旧ページの Search Console データをブリーフに貼り付け、優先して直すセクションを決めます。