2026.09.15 2026.09.15

AIはLPのファーストビューをどこまで組めるのか。画像20点のカンプを渡して実測してみた

みなと

写真や装飾がぎっしり重なった、キャンペーンLPのファーストビュー。切り出した画像が20点、傾いた帯、そこに文字が乗る——細かい調整が積み重なる部分です。

ほんの数ヶ月前、業務で似たような構成のキービジュアルをAIに実装させたときは、見た目もコードもそのままでは使えず、結局捨てて自分で組み直しました。

前回はお問い合わせフォームという「機能もの」を試しました。今回は「見た目もの」です。カンプを渡して、フロントエンドエンジニアの目で一つずつ見ていきます。

検証の条件

結果の前に、何をどんな条件で試したかを整理します。

AIに渡したのは、実装を依頼するプロンプト1通と、そこで参照するFigmaのカンプ2枚（PC・スマートフォン）だけです。

実際に渡したプロンプトは次のとおりです。

以下のFigmaデザインをもとに、コーディングしてください。

■ Figmaカンプ
PC: （カンプのURL）
SP: （カンプのURL）

【実装範囲】
・ヘッダーとキービジュアル（ファーストビュー）のみの実装をお願いします
・それ以降のセクションは不要です
・ナビゲーションやボタンのリンク先は不要です（遷移先のページがないため）
・スマートフォン表示のハンバーガーメニューは、開閉の動作は実装不要です（ボタンの見た目のみで構いません）

【技術要件】
・純粋なHTML/CSS/JavaScriptで実装（フレームワークは使わない）

よろしくお願いします。

環境は、Claude Code（2.1.218）で Opus 5 を動かし、そこに Figma公式のリモートMCP（2.2.81）を接続。設定ファイル（CLAUDE.md）は置かず、空のディレクトリから生成させました。思考の深さ（エフォート）は初期値の「高」のままです。

カンプについても、前提を2つ。デザインとパーツ分割はAIに任せ、素材の配置とテキストの設置を自分でおこないました。また、レイヤー名はある程度は整理していますが、そこから先の細かい命名や書き出し設定までは手を付けていません。実務で受け取るカンプによくある状態です。

何を作らせたか

架空の音楽フェスのキャンペーンLP、そのファーストビューです。

画像として切り出したパーツが20点。背景写真、切り抜いた人物、装飾文字、バッジ、ギターピック、斜めの帯。その上にHTMLの文字が乗ります。出演者名、日にち、会場情報、ボタン。

要素が細かく分かれていて、しかも重なり合っている。前回のフォームのように、部品を上から順に並べれば済む構造ではありません。

AIはここまで作れた

生成された結果を、カンプと並べます。

わずかな差はありますが、実装として問題になる範囲ではありません。傾いた帯、その上に乗る出演者名の角度、20点の装飾の位置関係——崩れているところが見当たりません。

数ヶ月前に業務で試したときとは、まったく違う結果になりました。

画面幅を変えても構図が崩れません。カンプの幅（1440px）を基準に、全体をそのまま拡大・縮小する作りになっていました。伸縮の方針は指示していないので、カンプ2枚からこの判断に至ったことになります。

この密度のキービジュアルは、実務でも同じやり方で組むところです。要素の位置関係が絶妙なバランスで成り立っているので、画面幅ごとに配置を組み替えるのは現実的ではありません。

カンプとの照合も、AIがやっていた

作業のログを見ると、AIは要素の座標をカンプと照らし合わせるだけでなく、Figmaのレンダリング画像と実装のスクリーンショットを重ねて、差分を色で確認していました（mix-blend-mode: difference）。ぴったり一致していれば、重ねた画像は真っ黒になります。

みなと

これはわりと知られた手法で、私も使います。カンプと実装を見比べるとき、目で追うより確実だからです。

AIが自分で作って、自分で照合する。検品の手法まで、同じところに来ています。

手直しが必要なところ

出力を操作し、コードを読み、画面幅を変えて見ていきました。気になったところを3つ挙げます。

① 画像の合計が4.8MB

書き出された画像20点の合計が4.8MB。うちメインタイトルの画像1点だけで1.8MBあります。

ファーストビューは、訪問者が最初に見る場所です。ここに4.8MBは、許容できる範囲を超えています。

軽い画像形式（WebP）にすれば済みます。手元で変換してみたところ、1.4MBまで下がりました（やや強めの圧縮・画質75）。

② 大見出しと日にちのテキストが選択できない

大見出しの日本語（「サンバースト・フェスティバル ’25」）を選んでコピーしようとしても、文字が選べません。マウスの操作が文字を通り抜けて、下にある斜めの帯や背景をつかんでしまいます。日にちの「2025.8.8」も同じです。

大見出しの日本語と開催日をドラッグしても文字が選択されず、下にある画像が選ばれる

操作を無効にするCSSの指定が、中の文字にまで効いているためです（pointer-events）。文字として出ているのに、選択もコピーもできません。選択した文字の読み上げや翻訳の機能も使えず、使い勝手を落とします。

③ 大見出しとキャッチコピーが、最後に読まれる

アクセシビリティの確認として、読み上げソフト（スクリーンリーダー）で読ませてみると、読まれる順番が画面の見え方と一致していませんでした。ページの主題を示す大見出し（「SUNBURST FESTIVAL ’25」）が、出演者名や会場情報よりあとに読まれます。画面のいちばん上にある大きな言葉——「夏のすべてを、音楽にぶつけろ。」は、さらにその後です。

読み上げの順番は、画面上の位置ではなく、HTMLの並び順で決まります。大見出しとキャッチコピーはHTMLの先頭側に置き、重なり順はCSSで指定すべきところです（z-index）。