「gpt-image-2 でLPを作る」という発想は、今までならまず成立しませんでした。AIで生成した画像は文字が崩れ、レイアウトが歪み、結局Photoshopで描き直すしかなかったからです。ところが2026年4月にOpenAIが公開したgpt-image-2は、日本語の文字品質が劇的に向上し、画像生成だけでLPを完成させる運用が実務に乗ってきました。本記事では、株式会社Fyveが実際にクライアント案件で使っている「画像生成だけでLPを構築するワークフロー」を、ChatGPT Plusサブスク内で完結する形で公開します。

非エンジニアの方でもそのまま真似できるよう、Claude CodeやCodexに渡す指示文と、私たちが現場で踏んだ手順を順番に解説していきます。

gpt-image-2 でLPを作るとはどういうことか

これまでLPを作るときは、デザインカンプをFigmaで作り、画像はAdobe StockやAI生成、コーディングはHTML/CSSで実装、という流れが標準でした。私たちFyveでも同じ流れを長く続けてきました。

gpt-image-2 が変えたのは、この「画像」のパートです。具体的には、次の2つの使い方が実務水準に達しました。

• LP全体を1枚の画像として生成する: ファーストビューから下部のCTAまでを1枚絵として生成し、それをそのままLPの素材として使う
• LPの構成パーツを1枚ずつ生成する: ヒーロー画像、アイコン、サービス紹介ビジュアル、お客様の声の写真などをすべてgpt-image-2で生成し、Web上で組み立てる

どちらの場合も、ストック写真やイラスト素材を買い足す必要はありません。文字も画像内に直接生成できるので、見出しコピーやキャッチフレーズを「画像の中に書いた状態」で出力してもらえます。これが2025年までのAI画像生成と決定的に違う点です。

なぜ gpt-image-2 で実現できるようになったのか

2026年4月にOpenAIが公開したgpt-image-2は、日本語を含むCJK文字の描画精度が一気に上がりました。私たちが社内で検証した範囲では、見出し級の太字日本語は2〜3回のリトライ以内に意図したテキストで出てくる水準です。これまでは「AI生成画像のテキストは飾り」と割り切るしかありませんでしたが、その前提が崩れたことで、画像をそのままLP素材として使えるようになりました。

もう1つ実務的に大きいのが、ChatGPT Plusのサブスク内で完結する点です。API課金が発生しないので、納品物の素材として10枚20枚と生成しても、月額20ドルのプラン内に収まります。中小企業向けの制作費でAI活用を提案する際、追加コストがほぼゼロで済むのは強力な営業材料になります。

画像生成だけでLPを作る実務ワークフロー

私たちが現場で踏んでいる手順は、大きく5ステップに分かれます。順番に説明します。

ステップ1: LPの構成を文章で固める

画像生成に入る前に、LPの構成を日本語で書き出します。ファーストビューに何を置くか、サービス紹介を何ブロック並べるか、お客様の声をどう見せるか、CTAをどこに配置するか。この設計をテキストで完結させてから画像生成に進むのが鉄則です。

構成設計はClaude Code（またはCodex）に任せると早いです。たとえば次のように頼みます。

Claude Code への依頼文

「介護施設向けのAI業務効率化サービスのLPを作りたいです。ファーストビュー・課題提起・サービス概要・3つの特長・お客様の声・料金・CTA・FAQの順で、各セクションの見出しコピーと本文を日本語で書き出してください。トーンは中小企業の経営者に響くB2B寄りで、専門用語は控えめにお願いします。」

この指示で、LPの全テキストが先にできあがります。後工程で画像内に入れる文字は、この設計書からそのままコピーすれば済むので、画像生成のリトライ回数が大幅に減ります。

ステップ2: LPを「丸ごと1枚画像」で生成するか「パーツ分け」で作るかを決める

gpt-image-2 でのLP制作には2つの流派があります。案件の性質で使い分けます。

• 丸ごと1枚画像方式: 縦長の1枚絵として全セクションを生成。スピード重視で、デザインの自由度が高い。修正は再生成が中心になるため、確定後の細かい修正には不向き
• パーツ分け方式: ヒーロー画像、特長アイコン、お客様の声の人物画像、CTAボタン背景などを個別に生成し、HTML/CSSで組み立てる。修正が局所的にできる。私たちの主流はこちら

私たちが受託でLPを作るときは、原則パーツ分け方式です。理由はシンプルで、クライアントから「ここの文言だけ直してほしい」「特長の順番を入れ替えたい」という要望が必ず入るからです。1枚絵だと小さい修正でも全体を再生成することになり、結果的に時間が増えます。

一方、提案資料やコンペ用に「とりあえずビジュアルイメージを作って見せたい」場面では、丸ごと1枚画像方式が圧倒的に早いです。30分で5案出して比較する、といった使い方ができます。

ステップ3: gpt-image-2 でパーツを生成する

パーツ分け方式の場合、各セクションのビジュアルを順番に生成します。私たちが使っている指示文の型は次のとおりです。

ChatGPT（gpt-image-2）への依頼文

「介護施設向けAI業務効率化サービスのLPファーストビュー画像を生成してください。横長16:9、左半分に大きな白文字で『現場の負担を、AIで半分に。』と日本語で表示。右半分にiPad画面と笑顔のスタッフのイラスト。背景はダークネイビーの単色。フラットデザインで、清潔感のあるビジネス向けの雰囲気でお願いします。」

ポイントは3つあります。1つ目は、画像内に入れる文字を「鉤括弧」で明示すること。これがないと、似た意味の別フレーズに置き換わることがあります。2つ目は、配置場所（左半分・右下など）を必ず指定すること。3つ目は、背景色を1色で指定すること。グラデーション指定にすると文字が読みにくい仕上がりになりがちです。

同じ要領で、特長セクション用のアイコン、お客様の声用の人物ビジュアル、CTAセクションの背景画像を順番に生成していきます。1枚あたり1〜2分、リトライ込みでも5分程度で意図した画像が手に入ります。

ステップ4: 背景透過とパーツ切り出し

生成した画像をLPに組み込むときは、不要な背景を抜いて使う場面が多くあります。私たちが定番化している処理は次の流れです。

• 背景透過: PhotoshopやCanva、または無料のremove.bgなどで背景を透過させる。フラットデザインのアイコンは比較的きれいに抜ける
• パーツ切り出し: 1枚画像に複数のアイコンが含まれている場合は、Figmaにドラッグして個別に切り出す
• サイズ調整: 最終的なLPの幅（PCで1280px、SPで640px相当）にリサイズしてから配置する

この工程は手作業ですが、1パーツあたり1〜2分で終わります。AI生成のスピードが上がったぶん、こうした後処理の手早さが全体の制作時間を左右します。

ステップ5: HTML/CSSでLPを組み立てる

パーツが揃ったら、最後はHTML/CSSで組み立てます。ここはClaude CodeやCodexに任せると一気に進みます。先に作っておいた構成テキストと、生成したパーツ画像のファイル名を渡して、こう依頼します。

Claude Code への依頼文

「先ほどの構成テキストをもとに、Next.js App RouterでLPを実装してください。各セクションの背景画像とアイコンは public/images/lp/ 配下に保存済みです（hero.png, feature-1.png, feature-2.png, feature-3.png, voice-1.png, cta-bg.png）。デザインはダークネイビー基調、フォントはNoto Sans JP、スマホ表示も考慮してください。」

これだけで、画像を埋め込んだLPの初期実装が出てきます。デザインの微調整はブラウザで確認しながらClaude Codeに追加指示を出すだけで、おおむね半日でクライアントレビューに出せる品質まで到達します。

実際にやってみて分かった3つの実務知見

私たちFyveがこのワークフローを案件で回してきた中で、教科書に載っていない知見がいくつかあります。

知見1: 文字品質は「太字・短文・コントラスト強」で安定する

gpt-image-2 の文字描画は劇的に良くなりましたが、それでも「細字・長文・低コントラスト」の組み合わせはまだ失敗します。LPの見出しコピーは、画像の中に入れる前提なら「太字で20文字以内」を上限にしておくと、リトライ回数が体感で半分以下になります。長い説明文は画像の外（HTML側）に置く、という分業が安全です。

知見2: 「人物の手」は今でも避けたほうが速い

AI画像生成の伝統的な弱点である「指の本数」は、gpt-image-2 でも完全には解消していません。お客様の声セクションで人物を出したい場合、ポートレート（胸から上）で構図を固定し、手や指が画面に入らないように指示するのが鉄則です。これだけで失敗率が大きく下がります。

知見3: ストック素材を完全代替できるのは「業界の中の人」が見ても自然な絵

これは盲点でした。介護施設や建設会社など、業界固有のリアリティが求められる案件では、AI生成の人物・現場画像が「業界の中の人から見ると違和感がある」ケースがあります。ユニフォームの色、現場機材の配置、書類のフォーマットなど、業界の人だけが気づくディテールです。

そういう案件では、AI生成画像はメインビジュアルとアイコンに留め、現場写真は実写を併用する判断をします。クライアントから提供してもらった写真があれば最強です。AI画像生成は便利ですが、業界固有のリアリティはまだ人間の写真に分があります。

制作コストと時間の目安

私たちが実案件で計測している数字を共有します。LP1本（ファーストビュー＋4セクション＋CTA）を画像生成だけで制作した場合、おおむね次の規模感です。

• 画像生成枚数: 約15〜20枚（リトライ含めると30〜40回の生成）
• 画像生成のみの時間: 1.5〜2時間
• 背景透過・パーツ調整: 1時間
• HTML/CSS実装（Claude Code併用）: 3〜4時間
• クライアントレビュー対応（1〜2回転）: 2〜3時間
• 合計: 1〜1.5営業日

従来のストック素材＋Photoshopベースの制作と比べて、素材調達コストはほぼゼロ、制作時間は3〜5割短縮、というのが今の体感値です。ChatGPT Plusサブスク（月額20ドル）の中で完結するので、案件単価に対する原価率も大きく下げられます。

このワークフローが向く案件・向かない案件

向く案件

• 中小企業向けのサービスLP・採用LP・キャンペーンLP
• 提案資料・コンペ用のビジュアル試作
• 業界一般のイメージで成立するBtoB商材
• 納期がタイト（3〜5営業日）で、ストック素材の選定時間が惜しい案件

向かない案件

• 業界固有のリアリティが厳しく問われる案件（医療現場の手技、特殊な機材の操作など）
• ブランドの世界観を厳密に守る必要があるラグジュアリー系
• 実在の人物・店舗を見せたい採用LPや事業紹介

とはいえ、向かない案件でも「アイコンとセクション背景だけはAI生成」というハイブリッド運用は十分に成立します。実写を主役にしつつ、装飾・補助グラフィックをAIに任せるだけでも、制作時間は短縮できます。

関連記事

HP制作LP制作の相場と、AIで制作コストを半分にする方法

AI業務効率化AIとの対話だけでLPが完成する。その仕組みをどう作ったか

HP制作LPファーストビューの作り方｜成約を生む設計の型

まとめ：画像生成だけでLPが組める時代の活用方針

gpt-image-2 の文字品質向上によって、「画像生成だけでLPを作る」という選択肢が現実的になりました。私たちFyveの現場運用では、パーツ分け方式でgpt-image-2を回し、Claude CodeでHTML/CSSを組み立てる流れが標準になっています。

非エンジニアの方が今日から試すなら、まずは無料の構成テキスト作成（Claude CodeまたはChatGPT）と、ChatGPT Plus内のgpt-image-2でファーストビュー1枚を生成するところから始めるのが現実的です。1枚作ってみると、文字品質の進化と、設計テキストを先に固める重要性が体感できます。私たちはこの流れで、LP制作のリードタイムを大きく短縮しながら、クライアントのコストも抑えられる運用に切り替えました。AI画像生成が「実務に乗る道具」になった今、LP制作の標準ワークフロー自体を見直す価値があります。