ランディングページの画像選び方｜CVRを上げる配置・著作権・altの実践ガイド

結論として、LP の画像選びは装飾ではなくコンバージョン設計の一部です。訪問者は文字を読む前に、画像で「信頼できるか」「自分向けか」を判断します。

特にファーストビューのビジュアルは、直帰率と CTA クリック率に直結します。ここで違和感を与えると、その下のコピーは読まれません。

汎用ストック写真の使い回しは、競合 LP と似た印象になり差別化が弱まります。可能ならサービス実物・店舗・チーム・利用シーンのオリジナル写真を優先してください。

初期は無料素材で立ち上げ、後から差し替えられる HTML 構成にしておくのが現実的です。DesignLayer で生成した LP なら、スタジオで画像を差し替えるだけで更新できます。

画像は「1セクション1メッセージ」を補強する道具です。セクションごとに役割を決めてから素材を探すと、選定が速くなります。

ヒーロー：商品・人物・成果が一目で伝わる1枚。情報を詰め込みすぎないでください。特徴セクション：アイコン＋短文、または Before/After の比較写真。

社会的証明：顔が見える顧客写真と導入企業のロゴ一覧。CTA 直前：保証・サポートなど、申し込み前の不安を解く補足ビジュアル。

配置の考え方は「LPのファーストビュー設計ガイド」「信頼要素の載せ方」も参考にしてください。

Unsplash・O-DAN・いらすとや（用途に注意）などには商用利用可能な素材が多くあります。ただし「商用可」でも安心はできません。

確認すべきは4点です。ライセンス表記の要否、クレジットの要否、人物の肖像権、そして商標・ロゴの写り込みです。素材ごとに個別確認してください。

AI 生成画像を使う場合は、利用規約とクオリティの両方を確認します。人物の手や目が不自然な画像は、かえって信頼性を損ねます。

本番公開前に、法務・ブランドガイドと照合するチェックリストを1枚用意しておくと、確認漏れを防げます。

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

テキストを画像に焼き込むのは避けてください。レスポンシブで文字が読めなくなります。HTML の見出し＋背景画像、または画像とテキストの横並びレイアウトが安全です。

DesignLayer のスタジオではプレビュー幅を変えながら確認できるので、公開前にモバイル表示を必ずチェックしてください。

画像最適化の基本は3つです。WebP 化、適切な解像度（ヒーローでも表示幅の2倍程度まで）、そしてファーストビュー以外の lazy load。この3つで LCP が大きく改善します。

alt にはキーワードの詰め込みではなく、画像の内容を簡潔に記述します。「笑顔で商品を使う女性」のように、見えているものをそのまま書けば十分です。

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

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

公開前に差し替えリストを作ってください。最低限、ヒーロー・事例写真・OGP の3点です。デザイン調整と素材調達を並行すると、納期を短縮できます。

画像は LP の資産です。公開して計測した後、A/B テストで差し替えて育てる運用をおすすめします。

プロ撮影の予算がなくても、スマホで十分なシーンは多くあります。店舗・商品・作業風景は、明るい時間帯に撮るだけで実用レベルになります。まず撮って公開し、後からプロ撮影に差し替えてください。

ブリーフに「撮影リスト（5カット）」を書いておくと、撮影の依頼が明確になります。例：外観1・商品アップ2・利用シーン2。

イラストや 3D モックは SaaS 向け LP で有効ですが、実画面のキャプチャと併用しないと抽象度が上がりすぎます。「何ができるツールか」は実画面で見せるのが確実です。

OGP 画像は 1200×630px が標準です。LP のヒーローをそのまま縮小すると文字が読めなくなるため、シェア専用にタイトル入りの1枚を別に作ってください。

X・Facebook・LINE でトリミング位置が異なります。タイトルなどの重要要素は中央に寄せるのが安全です。

og:image・twitter:card などのメタタグは本番実装で設定します。スタジオ編集の段階で OGP のコピー案までブリーフに含めておくと、実装時の漏れが減ります。

画像テストで最初にやるべきは、ヒーロー画像の2パターン比較です。実装コストが低いわりに、CVR への影響が出やすい箇所だからです。

仮説は1つに絞ります。「人物あり vs なし」「商品クローズアップ vs 利用シーン」のように、比較軸を明確にしてください。

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

テスト設計の詳細は「LP A/B テストの進め方」「CVR 改善の実践ガイド」を参照してください。

公開前に次を確認してください。□ ヒーロー画像がターゲットと訴求に合っている □ 全画像に alt がある □ WebP 化とファーストビュー以外の lazy load 済み □ 素材のライセンス・肖像権・商標の写り込みを確認済み。

□ テキストの画像焼き込みがない □ モバイル幅でヒーローの重要要素が切れていない □ OGP 画像（1200×630）を別途用意 □ PageSpeed Insights で LCP を確認。

公開後は2週間でスクロール深度と CVR を確認し、弱いセクションの画像から差し替えます。DesignLayer のスタジオなら、画像差し替えだけの更新を短時間で回せます。

LP の画像選びは、信頼と CVR を左右するコンバージョン設計です。セクションごとに役割を決め、著作権を確認し、WebP と alt で速度と SEO を整えてください。

最初から完璧な素材をそろえる必要はありません。無料素材で公開し、計測しながらオリジナル写真へ差し替える段階的な運用が、速度と品質を両立します。

まずはヒーロー画像1枚の A/B テストから始めてください。勝ちパターンを素材ライブラリに蓄積すれば、次の LP 制作が確実に速くなります。