ChatGPTだけでブランドシステムとLPたたき台が出てきた〜。

Xで44万インプになった記事を、Substackでもご紹介！

▼X記事をサブスタ用に加筆修正しました。ぜひぜひ。

---

Claudeって、３千円プランだと一瞬で終わりますよね😭

MAX１００ドル（１万６千円くらい）プランでさえ、Claude Designで少し重いページを作ると、1回で15%くらい消費⋯⋯。

わたしも最初、１日で全部使い切っちゃったんですよね。（遠い目）
※Claude Designリリース当時の話。

そこをChatGPT Images 2.0の画像生成をChatGPT Plus（月３千円円くらい）だけで完結させてみたら、デザインシステムからLP叩き台まで普通に出てきました！

Claude Codeも、デザインの専門知識もナシでいけますよ！

例えばデザインシステムなら⋯⋯

手順は簡単３ステップ。

👇

STEP１
ChatGPT Images 2.0でデザインシステムを作る

STEP２
その画像を元にLP画像を作ってもらう

STEP３
さらにその画像をCodexに貼って、LPの叩き台を作ってもらう
（あとは注釈で調整するだけ）

以下で解説しますので、ぜひお試しください😊

────

まずSTEP1から。

と、その前に。
「デザインシステムって何？」ってなりますよね。

色・フォント・余白・写真のトーンをひとまとめにした「ブランドの設計書」みたいなものです。

「このブランドはこういう世界観でいきます」という1枚。
これを最初に作っておくと、あとのLP制作（というか、それ以外も）が爆速になります。

ChatGPT Images 2.0はここがすごくて、ただきれいな画像を出すだけじゃなくて、Web検索で情報を集めてから「考えて」生成してくれるんですよね。

業種・雰囲気・ターゲットを入れるだけで、1枚でまとまったブランドキットが出てきます。

ChatGPTの画像生成をオン！
プロンプトコピペ！

で、例えば、こんな感じ。

Create a premium design system board for a fictional Japanese web design studio based on this theme

[THEME] ここに「遊び心のあるPOPなデザイン、ミヤマ クリエイティブ」みたいにテーマを入れてください。

One large smartphone mockup must be placed at the exact center as the main visual.
Arrange desktop UI and design system modules around the phone.
Include hero section, palette, typography, cards, buttons, inputs, icons, chips, and footer.
Make it a polished Figma showcase board with rounded panels, clean spacing, elegant whitespace, modern Japanese taste, and readable Japanese labels.
Do not make it a numbered spec sheet or plain grid.

Aspect ratio 4:5

この見せ方、ポイントは、

中央にスマホ画面をドン！と置くところ。

カラーとフォントが並ぶだけのブランドキットって、クライアントさんに見せてもパッと伝わらないことがあるんですよね。

スマホ画面が真ん中にあると「このアプリを開いたらこういう世界観か」って、パッと分かってもらいやすい。

接触率の高いスマホをメインに持ってくることで、説明しなくてもビジュアルで直感的に伝わります。

商談の時の１枚におすすめです〜😊

　

STEP2でデザインとLP画像を。

その後、必要なら色とか微調整します。

普通に追加指示すると、ジピさまは画像出してくれます。

で、デザインが決まったら、

このイメージでLPを作成してください。
ファーストビューから始まり、最初から最後まですべての画像を作ってください。
モバイルの想定で作ってください。まとめて全部出してください。

みたいに指示します。

わたしはこれで一気に出ましたが、出なかったら「もっと出して」みたいに追加指示してください。

　

STEP3はCodexでLPを作ります。

Codexというのは、ChatGPT PlusでそのままつかえるAIコーディングツールです。

非エンジニアでも動かせます。

ちゃっとの左の柱のここの⋯⋯

アプリはここからDLできますよ👇

＞Codex｜https://openai.com/ja-JP/codex/

　

で！

STEP1で作ったデザインシステム画像を貼りつけて、「このイメージでLPを作りたい」と伝えるだけです。

まず構成案を出してもらって、OKしたらHTMLを作ってもらう流れですね。

コードが読めなくても、Codexには注釈モードがあります。

あと、Claudeと違ってチャット欄でそのまま画像生成できますよ！

「マスコットを画像生成して」「ここのボタンを変えて」と普通の言葉で指示すれば直してもらえて便利〜。

あと、Claude Designと比べて制限がゆるいので、３千円でも（割と）ガンガン使えるのがポイントですね！

※個人の体感＆Claude Designとの比較ですが。

　

────

　

もっとくわしい作り方のコツ・上記より安定性の高いプロンプト各種・スライド生成や、実際の画面を使った動画解説は、以下のnoteにまとめています。

もっと知りたいなーという方は、以下リンクから覗いてみてください😊

　

👇動画付き完全版はこちら。

https://note.com/mmmiyama/n/n71a4dba6a608