ChatGPTとCodexだけで架空カフェLPを作って公開してみた
「AIを使えばLP（ランディングページ）が作れる」と聞いて、試してみたいと感じている方は多いのではないでしょうか。
ただ、いきなりChatGPTやCodexにHTMLやCSSを書かせても、思ったような雰囲気にならず、なんだか普通のWebページになってしまう…ということがよくあります。
そこで今回は、架空のカフェ「mellow Cafe」を題材に、ブランドガイドづくりからデザイン案、画像生成、Codexでのサイト構築、そして公開まで、ひととおりの流れを試してみました。
やってみて一番感じたのは、最初にブランド名・コンセプト・ターゲットを決めておくと、AIへの指示がぐっと安定するということです。この記事では、ChatGPTとCodexで架空カフェのLPを作った流れを、実際の制作過程とともに紹介していきますね。
Codexは、OpenAIが提供するAIコーディングツールです。やりたいことを言葉で伝えると、コードを書いたりファイルを直したりしてくれます。HTMLやCSSの知識がなくても、指示を出すだけでWebサイトやアプリのもとになるコードをAIに作ってもらえるのが便利なところです。
この記事でわかること
- ChatGPTとCodexでLPを作るときの全体の流れ
- ブランドガイドを先に作るとAIの指示が安定する理由
- 画像とフォルダの整理のしかた（初心者がつまずくところ）
- Codexに渡す指示書の作り方と、公開までの手順
それでは、実際の制作過程をのぞいていきましょう。
ChatGPTとCodexで作ったLPの完成イメージ
まずは、今回でき上がったLPからお見せします。先に完成形を見てもらった方が、このあとの流れがイメージしやすいと思っています。
今回作ったのは、架空カフェ「mellow Cafe」の夏限定メニューLPです。白桃ミルクティーパフェを主役に、やわらかくて上品な雰囲気を目指しました。
公開URLはこちらです → https://ai-blog-labo.com/mellow-cafe-summer/
細かく見るとまだ改善できる部分はありますが、AIと相談しながら作ったLPとしては、かなり雰囲気のある仕上がりになりました。
まずブランドガイドを作成する
結論からいうと、ここが一番大事な工程でした。いきなり「カフェのLPを作って」と頼むより、先にブランドガイドを作っておく方が、デザインの方向性がブレにくくなります。
今回は、ChatGPTと相談しながら、架空のカフェ「mellow Cafe」を想定しました。決めたのは、次のような項目です。
- ブランド名／コンセプト／ターゲット
- 世界観・雰囲気
- 色味（カラーパレット）
- 写真や装飾の方向性
- LPで伝えたい感情
ブランド名とテーマが決まったら、次にブランドガイド画像を作成します。
プロンプトは、こんな感じです。｛｝内のブランド名、コンセプト、ターゲットのところを変更して使います。
実際にできた画像から細かく修正するか、プロンプトをもう少し精度があがるように書き足して使います。
PROMPT — ブランドガイド作成
> A premium luxury brand identity guideline presentation as a wide Figma showcase board, aspect ratio 16:9. Brand: "{Brand Name}", Concept: "{Brand Concept}", Target: "{Target Audience}". Modern Japanese high-end editorial design on a crisp white background with generous whitespace. One realistic modern smartphone mockup centered perfectly, surrounded by beautifully organized design modules with elegant Japanese typography, an automatically generated luxury color palette, and conceptual imagery.
>
こうして「軸」を先に決めておくと、このあと画像を作るときも、実装をお願いするときも、毎回ゼロから説明し直さずに済みます。ブランドガイドは、AIと自分の共通言語のようなものだと感じました。1つあれば、SNSやWebサイト構築、LP制作と幅広く使いまわしできますね。
ブランドガイドをもとにLPデザイン案を作る
次にLPのデザイン案をChatGPTで作成します。
Codexにそのまま「いい感じに作って」と頼めば、たしかに動くページはでき上がります。でも、世界観や余白、写真の見せ方が、どうしても弱くなりがちなんですよね。
そこで今回は、実装の前に、ChatGPTの画像生成でLPの完成イメージ画像を先に作りました。完成イメージがあると、あとでCodexに「この画像に近い雰囲気で実装して」と伝えやすくなります。
デザイン案の段階で、ヒーローの見せ方・メニューカードの配置・余白感・写真のトーン・装飾の量まで確認できます。実装に進む前に方向性をそろえておくと、あとの修正がぐっと減らせると思います。
夏限定メニューの企画を決める
まずはLPの企画を固めます。
- キャンペーン名
- 期間
- 夏限定メニューの内容
- 誰向けか
- LPでいちばん伝えたいこと
- 予約・来店・Instagram誘導などの目的
今回は夏の期間限定メニューのLPを作ることにしました。
- 白桃ミルクティーパフェ
- レモンミントクリームソーダ
- ピスタチオレアチーズタルト
企画が決まれば、先ほど作成したブランドガイドをチャット欄に添付してLPのモックアップを作成してもらいます。
主役は、白桃ミルクティーパフェにしました。完成イメージの画像が大事なので、ヒーロー画像やテキスト配置のイメージなど細かく何度も微調整してもらいました。
イメージ画像をCodexに渡してサイトとして再現してもらうので気に入るまでこのモックアップ画像は何度も修正しました。
必要な画像を生成してフォルダに整理する
完成モックアップに使われている画像を一枚ずつ分解して作ります。
最初から個別画像を作るのではなく、先に完成イメージを作ってから、そこに使われているパフェ画像や背景素材、アイコンなどを一枚ずつ生成しました。
ChatGPTのThinkingモードをつかっているので、必要な画像を一気に生成してくれます。
LPに必要な画像を生成したら、フォルダにまとめておきます。私はどこに使う画像なのかわかるように名前の変更をしておきました。Codexに指示してリネームしてもらってもいいと思います。
画像名を日本語にしないことです。英数字とハイフンで整理しておくと、Codexに指示するときも画像名が伝わりやすく、リンク切れのようなミスが減ります。
Codexに渡す指示書をChatGPTで作る
ここが今回の山場かもしれません。Codexには、いきなり「いい感じに作って」と頼むのではなく、先にChatGPTで制作指示書を作ってから渡します。
指示書に書いておいたのは、画像の使い道・フォルダ構成・PC版とスマホ版のヒーローの違い・デザイン上の注意点などです。ここまで言葉にしておくと、仕上がりがかなり安定したように感じました。
チャット欄に画像一式のフォルダと完成イメージ画像、スマホ版のヒーロー画像のイメージ画像を添付して実行！
⚠️ 画像パスは間違えやすいポイント 画像は assets/images/ の中に入っているか、ファイル名が指示書とぴったり一致しているかを、先に確認しておくのがおすすめです。ここがズレると、実装後に画像だけ表示されない…ということが起こりやすいです。
Codexに渡す実装のプロンプト（めっちゃ長いです！）
mellow Cafe 夏限定メニューLPを制作してください。
添付画像「LPdesign.png」を完成イメージとして、できるだけ近い構成・余白感・色味・雰囲気でHTML/CSSに落とし込んでください。
特に、PC版LP全体は「LPdesign.png」を最優先で参照してください。
スマホ版ヒーローは、添付した「hero-summer-menu-sp-image.png」のようなテキスト配置・見え方を参考にしてください。
LPdesign.png と hero-summer-menu-sp-image.png は制作参考用です。
ページ内には表示しないでください。
# フォルダ構成
以下の構成で制作してください。
mellow-cafe-summer-lp/
├─ index.html
├─ css/
│ └─ style.css
├─ js/
│ └─ script.js
└─ assets/
└─ images/
├─ LPdesign.png
├─ hero-summer-menu-sp-image.png
├─ logo.png
├─ hero-summer-menu-pc.png
├─ hero-summer-menu-sp.png
├─ menu-peach-parfait.png
├─ menu-lemon-mint-soda.png
├─ menu-pistachio-tart.png
├─ mood-cafe-interior.png
├─ mood-cafe-space.png
├─ mood-dessert-duo.png
├─ mood-tea-time.png
├─ motif-flower-set.png
└─ motif-flower.png
# 使用画像
## 参考画像
assets/images/LPdesign.png
PC版LP全体の完成イメージです。
レイアウト、余白、色味、セクション構成、写真の見せ方、カードの雰囲気はこの画像を最優先で参考にしてください。
ただし、ページ内には表示しないでください。
assets/images/hero-summer-menu-sp-image.png
スマホ版ファーストビューの完成イメージです。
スマホ版ヒーローのテキスト位置、ロゴ位置、期間限定ボックス、CTAボタン、パフェの見え方はこの画像を参考にしてください。
ただし、ページ内には表示しないでください。
## 実際に使用する画像
assets/images/logo.png
ヘッダーとフッターのロゴに使用してください。
assets/images/hero-summer-menu-pc.png
PC版ファーストビュー用画像として使用してください。
assets/images/hero-summer-menu-sp.png
スマホ版ファーストビュー用画像として使用してください。
assets/images/menu-peach-parfait.png
白桃ミルクティーパフェの商品詳細画像として使用してください。
ヒーロー画像とは違うアングルの画像として扱ってください。
assets/images/menu-lemon-mint-soda.png
レモンミントクリームソーダの商品画像として使用してください。
assets/images/menu-pistachio-tart.png
ピスタチオレアチーズタルトの商品画像として使用してください。
assets/images/mood-cafe-interior.png
店内の雰囲気画像として使用してください。
assets/images/mood-cafe-space.png
店内・空間イメージ画像として使用してください。
assets/images/mood-dessert-duo.png
パフェとドリンクが並んだ雰囲気画像として使用してください。
assets/images/mood-tea-time.png
紅茶とタルトの雰囲気画像として使用してください。
assets/images/motif-flower-set.png
装飾用のアイコン・花モチーフ素材として使用してください。
assets/images/motif-flower.png
背景や余白に控えめに配置する花モチーフとして使用してください。
# LP全体のデザイン方針
LPdesign.png の印象を大きく崩さないでください。
デザインの方向性は以下です。
- 白桃ミルクティーパフェを主役にする
- 淡いクリーム、白桃、コーラル、ブラウン系でまとめる
- 上品で余白のあるカフェLPにする
- 写真は明るく、自然光が入るやさしい雰囲気にする
- 「夏のやさしいごほうび」「行きたくなるカフェの空気感」を出す
- 花モチーフは控えめに使う
- 文字、写真、装飾が競合しないようにする
- 角丸はやや控えめにする
- 影は強くしすぎず、薄く自然にする
- ボタンはコーラル系の単色を基本にする
- hover演出は派手にせず、透明度変化程度にする
- 強いグラデーション、強い影、派手なアニメーション、ポップすぎる装飾は避ける
# 実装条件
- HTML / CSS / JavaScript の静的LPとして制作してください
- JavaScriptは必要最低限で構いません
- レスポンシブ対応必須です
- スマホ表示を重視してください
- 画像には適切な alt を設定してください
- 画像パスは assets/images/画像名 で統一してください
- CSSは css/style.css に記述してください
- JSは js/script.js に記述してください
- 全体幅は広げすぎず、上品な余白を保ってください
- 文字は読みやすく、詰め込みすぎないでください
- 写真の角丸・カードの角丸は LPdesign.png に近づけてください
- LPdesign.png と hero-summer-menu-sp-image.png はページ内に表示しないでください
# セクション構成
## 1. ファーストビュー
PC版は LPdesign.png の上部を参考にしてください。
PCでは以下の要素を配置してください。
- ロゴ
- 大きなキャッチコピー
- サブコピー
- 説明文
- 期間限定ボックス
- CTAボタン
- 白桃パフェの大きな写真
PC版では hero-summer-menu-pc.png を使用してください。
左側にテキスト、右側に白桃パフェが大きく見える構成にしてください。
ただし、画像とテキストが完全に分断されすぎないように、LPdesign.pngのような一体感を意識してください。
## 2. スマホ版ファーストビュー
スマホ版ヒーローは、PC版を単純に縦積みにしないでください。
hero-summer-menu-sp-image.png を完成イメージとして、モバイル専用のレイアウトにしてください。
スマホ版では hero-summer-menu-sp.png を使用してください。
スマホ版ヒーローの配置ルール：
- ロゴは上部中央に配置する
- メインコピーは左寄せで、上部〜中部に大きく配置する
- サブコピー「夏のご褒美メニュー」はメインコピーの下に配置する
- 説明文はサブコピーの下に左寄せで配置する
- 期間限定ボックスは左下寄りに配置する
- 白桃パフェ画像は右下を中心に大きく見せる
- CTAボタン「メニューを予約する」は画面下部に大きく横長で配置する
スマホ版ヒーローの見た目ルール：
- スマホ版は1枚の完成されたポスターのように見せる
- パフェは小さくしすぎず、画面下半分の主役として見せる
- 文字は画像に埋もれないよう、十分なコントラストを確保する
- 余白を広めに取り、窮屈にしない
- CTAボタンは親指で押しやすいサイズにする
- 高さ不足で要素が詰まらないよう、十分な縦余白を取る
- 必要に応じてスマホ版では改行位置、フォントサイズ、余白を個別調整する
- PC版とSP版でヒーローのレイアウトは別物として扱ってよい
スマホ版ヒーローは、添付した hero-summer-menu-sp-image.png を最優先で参照し、テキスト位置・パフェの見え方・期間限定ボックス・CTAボタンの配置をできるだけ忠実に再現してください。
# ファーストビューの文言
メインコピー：
今日くらい、
甘やかしていい。
サブコピー：
夏のご褒美メニュー
補助コピー：
私にごほうび、夏のしあわせ。
説明文：
みずみずしい白桃に、やさしい
ミルクティーのハーモニー。
そっと心をゆるめる、
甘やかな夏のときめきを
お届けします。
期間表示：
期間限定
7.1 tue – 8.31 sun
CTAボタン：
メニューを予約する
# 3. コンセプト・特徴セクション
LPdesign.png の特徴紹介部分を参考にしてください。
見出し：
夏のやさしいごほうびを、mellow Cafeで。
4つの特徴を横並びで配置してください。
スマホでは2列または縦並びにしてください。
特徴1：
旬の白桃を使用
みずみずしい白桃を贅沢に味わえます。
特徴2：
やさしい甘さ
素材の味をいかしたやさしい味わい。
特徴3：
ごほうび映えスイーツ
見た目のかわいらしさも楽しめます。
特徴4：
夏限定メニュー
この季節だけの特別なメニューです。
アイコンは motif-flower-set.png から雰囲気に合うものを使ってください。
ただし、アイコンや花モチーフを使いすぎないでください。
# 4. メイン商品セクション
白桃ミルクティーパフェを一番大きく紹介してください。
LPdesign.png の大きな商品紹介カードを参考にしてください。
画像：
assets/images/menu-peach-parfait.png
タイトル：
白桃ミルクティーパフェ
リード文：
夏の主役は、白桃のパフェ。
説明文：
旬の白桃をまるごとパフェの中に。
ミルクティーのやさしいクリーム、
香ばしいグラノーラと、
やさしくとろける口どけを詰め込みました。
内容：
・白桃コンポート
・ミルクティークリーム
・紅茶ジュレ
・グラノーラ
・白桃ソース
価格：
¥1,450（税込）
注意点：
menu-peach-parfait.png は、ヒーロー画像とは違うアングルの商品詳細画像として使用してください。
同じ写真が続いているように見えないようにしてください。
# 5. サブ商品セクション
LPdesign.png のように、2つの商品を横並びカードで紹介してください。
スマホでは縦並びにしてください。
## レモンミントクリームソーダ
画像：
assets/images/menu-lemon-mint-soda.png
タイトル：
レモンミント
クリームソーダ
説明文：
爽やかなレモンミントに、
バニラアイスののった
すっきりクリームソーダ。
価格：
¥820（税込）
## ピスタチオレアチーズタルト
画像：
assets/images/menu-pistachio-tart.png
タイトル：
ピスタチオ
レアチーズタルト
説明文：
濃厚なピスタチオのなめらかな
レアチーズタルトに、
香ばしいナッツをトッピング。
価格：
¥780（税込）
# 6. 雰囲気カードセクション
LPdesign.png 下部の小さなカード群を参考に、4枚程度のカードを配置してください。
使用画像：
assets/images/mood-dessert-duo.png
assets/images/mood-cafe-interior.png
assets/images/mood-cafe-space.png
assets/images/mood-tea-time.png
カード文言：
ごほうび時間にぴったり。
ときめくスイーツをどうぞ。
やさしい光が差し込む店内で、
ゆったりくつろげる空間。
紅茶やコーヒーにもこだわり。
香りまで、心に残ります。
紅茶と一緒に、心あたたまる午後。
日常をちょっと特別に。
# 7. 下部CTAセクション
LPdesign.png の下部CTAを参考にしてください。
見出し：
わたしを甘やかす、ごほうび時間を。
ボタン：
メニューを予約する
店舗情報を見る
# 8. フッター
ロゴを配置し、短いコピーを入れてください。
コピー：
今日くらい、甘やかしていい。
あなたのご褒美時間が、ここからはじまる。mellow Cafe.
SNSアイコンは文字または簡易アイコンで構いません。
# 装飾について
motif-flower.png と motif-flower-set.png を使用してください。
ルール：
- 花モチーフは背景や余白に控えめに配置する
- 主役の商品写真を邪魔しない
- セクションごとに装飾を入れすぎない
- 余白を優先する
- LPdesign.png のように、淡く軽く入れる程度にする
# 特に守ってほしい優先順位
1. LPdesign.pngに近い全体構成
2. hero-summer-menu-sp-image.pngに近いスマホ版ヒーロー
3. 白桃パフェが主役に見えること
4. 上品で余白のある雰囲気
5. スマホで美しく見えること
6. 花モチーフを控えめに使うこと
以上の条件で、まずは index.html、css/style.css、js/script.js を制作してください。今回のヒーロー画像が左側に余白をとってテキスト配置するものにしたので、モバイル表示では別のヒーロー画像を使うように指定しました。完成イメージもチャット欄に添付して追加指示しています。
Codexで作る前に確認したこと
初めてCodexを使うときは、いきなり実装に入る前に確認しておくと安心なことがあります。私自身、最初に「どこのフォルダを触っているのか」がわからず、少し戸惑いました。
具体的に確認したのは、次のような点です。
- Codexがどのフォルダを編集対象にしているか
- プロジェクトフォルダの場所
- 画像が正しい場所（assets/images/）に入っているか
- 画像パスが指示書と合っているか
💡 指示書にファイル構成を指示しました。後から修正したいときに、わかりやすいためです。
# フォルダ構成
以下の構成で制作してください。
mellow-cafe-summer-lp/
├─ index.html
├─ css/
│ └─ style.css
├─ js/
│ └─ script.js
└─ assets/
└─ images/
実装しながら修正したポイント
今回の指示書で大まかなところは完成イメージ通りにできあがってきました。
Codexの右側の画面で完成形を確認できます。右上のところに注釈ボタンがあるのでそちらをクリックして修正してほしい箇所にコメントを入れると修正してくれます。チャット欄に記載してもOKです。
htmlファイルをブラウザでも確認しながら、細かなところを修正していきます。
主に直したのは、こんなところです。
- ヒーロー画像の見え方（少し普通のWebデザインっぽかった）
- スマホ版ヒーローのテキスト配置
- 商品カードは画像の高さ調整が必要だった
- 画像とテキストの境目にグラデーションのマスクを追加
- アイコン画像と期間限定ラベルを個別に用意
- モチーフやアイコンは透過画像を用意しておいた方がよい
AIで作る記事や制作物は、「簡単にできました!」だけだと、どこか薄くなってしまう気がしています。むしろ、こうした試行錯誤こそが、後から見返したときに役に立つ記録になると感じました。
サーバーにアップして公開する
最後に、でき上がったLPフォルダをサーバーにアップして公開しました。
今回は、Xserverでデモ用のサブドメイン demo.ai-blog-labo.com を作成し、その中に mellow-cafe-summer-lp というフォルダを置いています。
公開URLは、次のようになりました。URL — 公開先
https://demo.ai-blog-labo.com/mellow-cafe-summer-lp/
サブドメインを使った理由は、本体のブログとは分けて、実験用のLPやデモサイトを置きたかったからです。
たとえば、今回のような架空サイト制作やポートフォリオ用ページは、メインブログの中に直接置くより、demo用のサブドメインにまとめておく方が管理しやすいと感じました。
今回は、Xserverに用意されているファイルマネージャーからアップロードしました。
FTPソフトなどを別で用意しなくても、ブラウザ上でフォルダを作成したり、HTML・CSS・画像ファイルをアップロードできるので、手間なく公開できました。
このとき、念のため確認したのは次の3点です。
- index.html がフォルダの直下にあること
- css / js / assets の階層を崩していないこと
- 画像だけアップし忘れていないこと
特に index.html がフォルダ直下にないと、URLを開いてもページが表示されません。
また、画像ファイルの場所が変わると、ロゴやメニュー画像だけ表示されないことがあります。アップロード後は、PC表示とスマホ表示の両方で、画像がきちんと読み込まれているか確認しておくと安心です。
ファイルマネージャー上では、public_html の中にサブドメイン用の demo フォルダがあり、その中に今回のLPフォルダ mellow-cafe-summer-lp を配置しました。mellow-cafe-summer-lpフォルダの直下にindex.htmlが入っている状態です。
このように配置すると、URLは https://demo.ai-blog-labo.com/mellow-cafe-summer-lp/ になります。
HTMLサイトやLPを公開する場所を用意したい方へ
今回のLPは、Xserverのサブドメインとファイルマネージャーを使って公開しました。
ChatGPTとCodexでLPを作って感じたこと
ひととおり作ってみて、良かったことと、気になったことの両方がありました。正直なところを並べておきますね。
良かったこと
- コーディング知識ゼロでもサイトは作れる
- デザイン案から実装まで一気通貫で試せる
- 画像生成と組み合わせるとサイトが作りやすい
- デモサイトづくりやポートフォリオづくりに向いている
気になったこと
- 指示が曖昧だとデザインが崩れる
- 画像名やパスの整理が大事
- スマホ表示は細かく確認が必要、画面サイズを変更して✓する
- 一発完成ではなく修正前提
総じて、AIに丸投げするというより、相談しながら一緒に作っていく感覚に近かったです。Codexにどういう指示をすれば自分の思い描いた通りのサイトになるのか相談して、Codex側に指示を渡す。その結果をまたChatGPT側に返して問題点を相談する。そんな繰り返しで出来上がります。
LPの制作は、ChatGPTやCodexの使い方を練習する題材としても、かなり相性が良いと感じました。
まずは一つ作ってみる。
今日の小さな実験が、いちばんの近道ですね。
まとめ
今回は、ChatGPTとCodexを使って、架空カフェ「mellow Cafe」の夏限定メニューLPを作る流れを紹介しました。
この記事の要点
- 最初にブランドガイドを作ると、方向性がブレにくい
- LPデザイン案を先に作ると、Codexへの指示が出しやすい
- 画像名とフォルダ構成を整理しておくと、実装がスムーズ
- Codexには具体的な指示書を渡す方が、仕上がりが安定する
- スマホ表示や画像パスは、最後に必ず確認する
AIに全部おまかせ、ではなく、自分の中のイメージを言葉にして一緒に育てていく。そんな作り方が、いまの私にはしっくりきています。
うまくいかなかった工程も含めて、また実験の記録を残していきますね。
