LPはいきなりコードから作るな — 一枚の「広告ポスター」から始めるAIデザインワークフロー
自分のブログのLP(https://muhenkou.net)を、AIを使って大幅に作り直した。
使ったのは、画像生成のGPT-image2と、レイアウト実装のClaude design（Fable 5）。この2つを組み合わせたワークフローで、テンプレート感のない、世界観のあるLPを一日で形にできた。
ただ、最初に言っておきたいのは、このやり方の肝は「どのAIを使うか」ではないということだ。
肝は順番にある。いきなりAIにコードを書かせない。先に、LPの世界観を一枚の「広告ポスター」として完成させてしまう。
著者プロフィール
経営コンサルタントの国家資格：中小企業診断士かつ現役技術者の小林隼人です。生成AIを活用して創業や中小企業経営の支援をしております。
詳しいプロフィールはこちら
お問い合わせはこちらから！
なぜ、いきなり作らせるとダメなのか
AIにLPを作らせた経験がある人なら、覚えがあると思う。
「士業向けのLPを作って」と頼むと、それらしいものは一瞬で出てくる。紺色のヘッダー、左に白文字のキャッチコピー、右に人物写真、3カラムのサービス紹介。整ってはいる。だが、どこかで見たことのある画面だ。
これは、AIの能力の問題ではない。「何を作るべきか」の解像度が低いまま実装に入っていることが問題だ。世界観が言葉でしか定義されていないから、AIは平均的な「LPらしいLP」に収束する。
人間のデザイナーに依頼するときも同じことが起きる。だからプロの現場では、コーディングの前にキービジュアルやデザインカンプを固める。AIとの仕事でも、この順番は変わらない。
そこで今回は、次の3段階で進めた。
- ビジュアル設計：GPT-image2で「広告ポスター」を一枚作り込む
- 素材の分離と修正：ポスターをHP素材に分解する
- レイアウト実装：Claude designでワイヤーフレーム→実装
Step 1：GPT-image2で「広告ポスター」を作り込む
まず、LPの核となる世界観を、一枚の高品質な静止画として作る。ここではChatGPT（GPT-image2）を使った。
ポイントは、「LPのファーストビューを作って」と頼まないこと。それをやると、結局テンプレっぽい画面が返ってくる。目指すのは「高予算のエディトリアル広告ポスター」だ。ファッション広告、カルチャー誌の特集扉、都市型キャンペーンビジュアル——そういう文脈のプロンプトを組む。
プロンプトのベースは、Xで見つけた @mmmiyama_D さんのものを使わせてもらった。効いていると感じたのは、次の3点だ。
- 日本語タイポグラフィをロゴとして設計させる。「白文字のベタ打ち禁止」「文字そのものをビジュアルの主役にする」と明示する。巨大なアウトライン文字、極太のロゴ風タイポといった具体的な技法まで指定する。
- 「絶対に避ける失敗」を列挙する。暗い室内オフィス、左右分割の無難な構図、情報商材バナー風。やってほしいことだけでなく、やりがちな失敗を先回りして潰す。
- 「違和感」を要求する。奇抜さではなく、視線が一瞬止まるズレ、重なり、色の衝突。「きれいな広告」ではなく「なんか気になる」を目標に据える。
このプロンプトに、自分のSNS投稿やブログのスクリーンショットを添えて渡すと、内容・ターゲット・配色を読み取ったうえで、ポスターとして再構成してくれる。
今回の場合、青空の屋上を歩く人物に「技術と経営で、あなたの挑戦を加速する」というコピーが重なり、紺×黄色の配色でまとまった一枚が出てきた。この時点で、LPの世界観——配色、フォントの空気感、写真のトーン——はほぼ確定している。
Step 2：ポスターをHP素材に分解する
ただし、生成されたポスターはそのままでは使えない。2つの加工が必要だった。
人物の修正。 AIが生成する人物は、当然ながら自分ではない別人になる。そこで自分の肖像写真を渡して、顔を差し替える修正をかけた。LPは「誰がやっているか」を伝えるページなので、ここは省略できない。
背景と要素の抽出。 ポスターは文字と写真が一体化した一枚絵なので、そのままヒーロー画像には使いづらい。文字の乗っていない背景だけを抽出させ、人物写真、背景、装飾要素を別々の素材として書き出した。テキストは後でHTMLとして実装するからだ。
一枚のポスターを「完成品」ではなく「デザインの設計図＋素材集」として扱う。これがこの工程の考え方だ。
Step 3：Claude designでワイヤーフレーム→実装
素材が揃ったら、Claude design（Fable 5）でLPに組み上げる。
ここにも順番のコツがある。いきなり完成形を作らせない。 最初から本実装に入ると、トークンが嵩むうえに、大枠の構成に不満が出たときの手戻りが大きい。
そこで、まずワイヤーフレームモードで骨格だけを作らせた。セクション構成と配置だけのラフを3案出してもらい、この段階で「お悩み→選ばれる理由→プロフィール→問い合わせ」という流れや、各セクションの見せ方を細かく修正する。線画のラフなら、修正のやり取りも軽い。
骨格が確定したら、Step 2で用意した素材——ヒーロー画像、背景、肖像写真——を個別に渡して、本実装に入る。ポスター由来の配色（紺×黄色）とタイポグラフィの空気感を、そのままコードに翻訳してもらうイメージだ。
モデルの使い分けでトークンを節約する
もう一つ、実務的なコツがある。全工程を最上位モデルでやらないことだ。
大枠の設計や複雑なレイアウト実装はFable 5に任せる。一方で、テキストの差し替えや細かい装飾の調整は、Sonnet 5やHaikuといった軽量モデルで十分こなせる。作業の難易度に応じてモデルを切り替えるだけで、コストはかなり抑えられる。
納品形式まで作らせる
最終的に、3種類のHTMLを出力させた。
- 単体で開けるプレビュー用HTML（画像埋め込み済み）
- WordPressの固定ページに貼り付ける用のHTML
- 既存のContact Form 7に合わせてフォームの見た目を調整したスタイル
「作って終わり」ではなく、実際の公開環境（WordPress）にそのまま持っていける形まで落とし込む。ここまでやって、ようやくワークフローが完結する。
まとめ：AIに丸投げせず、職人としてディレクションする
今回のワークフローを一言でまとめると、こうなる。
- ビジュアルの核を、極めて高い解像度の「静止画（ポスター）」として先に作る。
- その世界観を、素材に分解し、段階的に「レイアウト（コード）」へ翻訳していく。
「LPを作って」と一言で丸投げすれば、平均的なLPが返ってくる。そうではなく、世界観の設計、素材の分解、骨格の確定、実装——と工程を分け、各工程で人間が判断を入れる。AIは各工程の実行速度を劇的に上げてくれるが、工程の設計と品質の判断は、依然として人間の仕事だ。
これはLP制作に限った話ではない。生成AIを実務で使うときの型は、結局いつも同じところに行き着く。丸投げではなく、ディレクションである。
コメント