【朝LIVE】Codex×Claude Design×Claude Codeで作る共感LP

GPTs研究会 LIVE

【朝LIVE】Codex×Claude Design×Claude Codeで作る共感LP

2026年5月11日(月)朝7:00〜 / 出演:ただっち × ひろくん

最新AI情報満載!毎日無料朝LIVE実施中!GPTs研究会では、AIツールの最新活用法を毎朝シェアしています。AI初心者の方も、AI氣道.jp無料メルマガで朝LIVEブログを毎日チェックしてくださいね。

ただっち(多田啓二)
AIMUNIQ代表・AI開花マーケター
ひろくん(田中啓之)
三方よしAI共創コンサルタント

📝 3行でわかるポイント

  1. Codex(ChatGPT)でLP土台 → Claude Designでビジュアル仕上げ → Claude Codeで実装&デプロイの3点リレーで、即興でも30分でLPが作れる時代になった
  2. Codexサブスクは画像生成APIコストを月額固定で内包しているのが強み。要件定義・ブランドカラー・申込フォームのHTMLまで仕様書として再利用できる
  3. 料理で言うと、Codexが「下ごしらえ」、Claude Designが「盛り付け」、Claude Codeが「配膳」。シェフ役のあなたは「何を伝えたいか」の解像度を上げて、AIに使われない側に立ち続けることに集中するだけでいい
配信日 テーマ 出演者
2026年5月11日(月)朝7:00〜 Codex×Claude Design×Claude Codeで作る共感LP(即興LIVE実験) ただっち × ひろくん

🎬 LIVE配信アーカイブはこちら!

1. 即興LIVE開幕 — Codex × Claude Design × Claude Codeの3点リレー

Codex × Claude Design × Claude Code 3点リレー 朝LIVE開幕シーン
LIVE配信シーン 00:00(H2-1)
📺 LIVE 00:00〜のシーン

2026年5月11日(月)朝7:00。今日の朝LIVEは「即興でどこまでできるか」の実験回。動画で確認する(0:00〜)

ただっち

「LPも簡単にできちゃう時代になったんですが、今日は即興でどこまでできるのかという実験ライブ。Codex × Claude Design × Claude Codeで作る共感LPということでお届けしていきます」

今日のチームはレギュラーの月曜コンビ、ただっち(AIMUNIQ代表)とひろくん(三方よしAI共創コンサルタント)。LP制作は本来1〜2ヶ月かかるものだけど、デザインアイデアと「思い」があれば30分で形になる時代になった、と冒頭で確認するところからスタート。

ひろくん

「AIがAIを動かす時代。やりたいことを言いまくる、無茶振りしまくっても本当にできちゃう」

「だいたい嘘つくので、それをやり取っていけば全部突破できる」というのが今のひろくんの感覚。AIは「できない理由」をもっともらしく言ってくることがあるけれど、「本当に手を尽くしてやってますか?」と聞くと「嘘でした」と返ってくることも多い。だからこそ最終的に「これは正しいかどうか」を判断できる側にいないと、AIに使われる側になってしまう、というのが今日の通底テーマ。

2. Codexで土台づくり — 表記&プロフ画像をまとめて生成

Codexで土台づくり GPTs研究会 LP の表記とプロフィール画像をまとめて生成するシーン
LIVE配信シーン 03:20(H2-2)
📺 LIVE 03:20〜のシーン

ここからは実演パート。動画で確認する(3:20〜)

ひろくんはまずCodex(ChatGPT)に「共感されるLPを作って」と素直にお願いするところからスタート。最初は内容がカラッとしていたので「ただっちとひろくんの画像を探してきて」「GPTs研究会の表記で、日曜の5名のメンバー入れて」と具体的に追加していく。

ひろくん

「これが今まで私がCodexでやってた時のやつで。GPTs研究会の表記で、11人がいないけど、うちじゃないけど、日曜の5名だよと。プロフィールも探してきてって言って、画像を全部取ってきてもらう」

ポイントはひとつ。Codexに「やってほしいこと」を具体的に伝えること。AI側はWeb検索もできるので、プロフィール画像も自分で探してきてくれる。ここで雑に「いい感じに」と言うと雑な結果しか返ってこない。「日曜LIVEの5名」「ブランドカラーは◯」「申込フォームのボタン文言は◯」と具体化したぶんだけ、AIの返しの質が上がるよ。

ひろくん

「クロードコードを一人解雇して、OpenAIのプロ版を採用したと。今は画像生成も全部Codexでやってるので、NanoBanana APIやOpenAI GPT Image APIで課金されてたところが、Codexのサブスク内で作れる」

3. Codexサブスクの威力 — 画像API課金を内包する設計

Codexサブスクで画像生成API課金を内包する仕組み
LIVE配信シーン 10:00(H2-3)
📺 LIVE 10:00〜のシーン

動画で確認する(10:00〜)

ここはひろくんが熱く語ったコスト構造の話。Codexのサブスク(月額固定)に画像生成APIコストが内包されているのが大きい、という指摘。

ひろくん

「画像をいっぱい使いますこれも。今作ってもらった画像を貼って、このLPのサイトのデザインを仕上げて、というやり方。これで何ができるかというと、ウェブサイトの正式な仕様書、デザインの仕様書のようなものが全部要件定義できる。ブランドカラーはこの色で、申し込みフォームのHTMLのデザインとかボタンとか、共通の仕様として渡せる」

Codexの内側で「要件定義書」を組み立てておくと、それを次のClaude Designへの渡しバトンとして使える。1回作った設計が次のLPでも、別のメルマガ登録ページでも、共通の仕様書として再利用できる。これは「1コンテンツの工数」じゃなくて「事業全体の固定資産」を作ってる感覚に近い。

料理で言うと

店の「タレ」を一度仕込んでおくと、丼ものでも煮物でも炒め物でも使い回せる、のような話。1料理ごとに毎回出汁を取り直すより、共通の「ブランドの味」を一度作っておく方が、店全体の統一感が出るしスタッフが代わっても味がブレない。

4. Claude Designでビジュアル仕上げ → Hand-off to Claude Code

Claude Designでビジュアル仕上げてClaude Codeにハンドオフするシーン
LIVE配信シーン 13:20(H2-4)
📺 LIVE 13:20〜のシーン

動画で確認する(13:20〜)

Codexで土台ができたら、次はClaude Designでビジュアルを仕上げる工程。ここはAnthropicが2026年4月17日に発表した独立プロダクト「Claude Design」のリサーチプレビュー機能を使ってる。最大2576pxの高解像度画像処理、テキスト・画像・DOCX・PPTX・コードベース入力に対応、Pro/Max契約者は追加課金ゼロ、というのが地味にすごいポイント。

ひろくん

「これをシェアというところに『Hand off to Claude Code』というのがあって。Claude Codeに持っていくと、今度ね、Claude Codeのちゃんの方にコピーしたやつを貼っていく。テストのフォルダにこれで今コピーしたClaude Designで仮に仕上げたものを書き下したやつをコピーして貼ってあげる」

Claude Designの中で「Hand off to Claude Code」というボタンを押すと、デザインがコードとして取り出せる仕組み。それをClaude Codeに渡せば、そのまま実装&デプロイまで一気通貫できる。

ただっち

「あるイメージが、さっきのClaude Designでコピーしたやつがもうコードで出てるって感じなのかな?それをClaude Codeで最終仕上げ、デプロイするための、という感じなの?」

ひろくん

「それを多分Codexに持ってってもできるんじゃないかなと思ってる。Codexにも投げていくから」

Claude Design → Claude Codeが標準ルート。ただし、Codexにも投げられる柔軟性があるので「絶対この順序」というわけじゃないん。

対話ハイライト ─ Claude Design → Claude Code の渡し方

ただっち

「クロードデザインで仕上げたやつをコピーして、クロードコードに貼る、という手順なの?」

ひろくん

「そう。Hand off to Claude Codeボタン押すと、デザインがコードで取り出せる。それをClaude Codeに渡せば、実装&デプロイまで一気通貫」

ただっち

「Codexにも投げられるんだよね?」

ひろくん

「投げられる。絶対この順番、じゃない。柔軟さがいいところ」

5. Claude Codeで実装&デプロイ — GitHub Pages/Vercel/Canvaまで自由

Claude CodeでデプロイしてGitHub Pages・Vercel・Canvaに出すシーン
LIVE配信シーン 16:40(H2-5)
📺 LIVE 16:40〜のシーン

動画で確認する(16:40〜)

ひろくん

「自由にやってもらえばいいんですけど、例えばGitHubの『GitHub Pages』というところにアップロードしちゃえばそれでもいいし、Vercelとか、そういうサーバーにアップロードすればOK。Canvaに持ってってCanvaページにアップロードしてもいいし。HTMLになってるんで、画像もちゃんとアップロードしてもらえば、どこでも自由に」

最終のデプロイ先は「自由」。GitHub Pages・Vercel・Canvaサイト・自社WordPressなど、HTMLが扱える場所ならどこでも置ける。Codexだけで完結したい人なら、Codex内で生成→そのままアップで完成、というルートもアリ。

ひろくん

「最近怖いのは、AIが勝手に動いて急にGeminiのAPI課金が2万円課金されてたのようなこと。API消費ダッシュボードを毎日見ないと事故る」

ここはひろくんの実例。AIが「気を利かせて」勝手に動くと、想定外のAPI課金が発生したり、データが消されたりすることがある。だからAPI課金ダッシュボードは毎日チェックしてる、ということ。「自走力が上がる」のと「監視を外していい」は別物。

料理で言うと

新人スタッフに厨房を任せるとき、レシピは渡すけど「火の元」「冷蔵庫の中身」「食材の在庫」は店長が毎朝チェックするのと同じ仕組み。AIに任せる範囲が広がるほど、ダッシュボードを見る習慣が事業の生命線。

6. パーソナライズLPの近未来とAIに操られない判断軸

パーソナライズLPの近未来とAIに操られない判断軸の議論
LIVE配信シーン 23:20(H2-6)
📺 LIVE 23:20〜のシーン

動画で確認する(23:20〜)

ひろくん

「今これなんか進捗出てきたのが、さっきのClaude Designでやったやつをこの Claude Codeに渡していくと、こうやってデザインとかいろいろ確認をして『じゃあ引き継ぐ』みたいなことをやってる。で、私が『オプトインとステップメールを入れて』『日曜のLIVE登録をしてほしい』とか言ったんで、最終の出口がそうなってる」

パーソナライズLPの近未来として、ひろくんが描いているのは「読者の状態に応じてLPの内容が動的に変わる」設計。日曜のWACAコラボLIVEのページが書き換わったら、メルマガで自動的に通知が飛ぶ、みたいな自動化の組み合わせもCodex+Claude Codeで実装できる時代になってきた。

ひろくん

「AIは何でもできる。でも、何がやりたいか言えないと操れない。解像度を上げるには現場に降りる」

AIに使われない/AIに操られないために必要なのは、技術スキルじゃなくて「私は何を伝えたいか」の解像度。それを上げるには、結局のところ現場に降りる、自分で手を動かす、古典的な原則に立ち返る。料理人がAIで献立を作るときも、自分が一度作って失敗した経験があるかどうかで、AIの出してきたレシピを判断できるかどうかが変わる、同じ構図。

7. Codexの進化と「変態的に突き抜ける」差別化戦略

Codexの進化と差別化戦略 朝LIVEのまとめシーン
LIVE配信シーン 30:00(H2-7)
📺 LIVE 30:00〜のシーン

動画で確認する(30:00〜)

ひろくん

「Codexはめちゃくちゃ導入としてはやりやすいので、まずはCodexで自分の表現したいことを表現してみる。そこから先は、その人の差別化、その人らしさをどう乗せていくかが、これからは『変態的に突き抜けていく』ところが大事になってくる」

導入のハードルはCodexで一気に下がった。だからこそ「みんなが入ってきた後」で残るのは、その人にしかできない突き抜け方。ひろくんはこれを「変態的」と表現してる。万人受けする無難なLPはAIが大量生産するから、そこで競争しても勝てない。むしろ「ここだけは譲れない」「ここまで突き抜けたい」というその人固有の偏りこそが差別化になる、という話。

ただっち

「日曜日だけライブの形式が違いまして、朝7時からAI Web解析協会WACA・若さんとコラボしております。WACAで検索していただいて、AIニューストピックスという私らの顔が入っているものから、まずはお申し込みください」

ひろくん

「お知らせです。今日Claude CodeのAI共創実践会の方で、れんくんとコラボで実際の実践会をやります。Claude Codeの動画編集の会をやりますので、めちゃくちゃ超有料級。れんくんなんだそんなことを無料で教えてくれていいの、ってこれ全部出してくれちゃう」

記事末尾の告知も忘れずに。今日の13:00からは「AI経営術LIVE」(れんくん×ひろくん)でClaude Codeの動画編集回。月曜は朝7:00と13:00の2本立てだから、朝LIVEを見逃した人は13:00の方も。

🎯 AIと愛で、未来をひらく。「あいあいらぼ。」

起業家・経営者のためのAI実践型コミュニティ。AI実践ワークショップ・AIクリエイティブ会・AI目標達成会が月額5,500円で遊び放題!AIMUNIQ(株)主催。

📱 ただっちのFacebook 🌐 あいあいらぼ。

❓ よくある質問

Q. Codex・Claude Design・Claude Codeのどれから始めればいい?
導入の敷居が一番低いのはCodex(ChatGPTのCodex機能)。まずはCodexで「やりたいこと」を言葉にしてLPの土台を作るところからスタートするのがおすすめ。慣れてきたらClaude Designでビジュアル統一、Claude Codeで実装&デプロイ、と段階的に広げていくのが今日のLIVEの推奨ルート。
Q. Claude Designは課金が必要?
2026年4月17日にAnthropicが発表したリサーチプレビュー機能で、Claude Pro/Max/Team/Enterprise契約者は追加課金ゼロで使えるよ。最大2576pxの高解像度画像処理、テキスト・画像・DOCX・PPTX・コードベース入力に対応してる。
Q. AIに丸投げするとAPI課金が膨らむって本当?
本当。今日のLIVEでもひろくんが「GeminiのAPI課金が急に2万円課金されてた」と紹介してた事例があるよ。AIに自走させるほど、API消費ダッシュボード(OpenAI/Anthropic/Google)を毎日チェックする習慣が大事。Codexサブスクのように画像API課金を月額固定で内包してくれるツールは、コスト予測がしやすい点で安心。
Q. AIに操られないために必要なのは何?
「私は何を伝えたいか」の解像度。技術スキルではなく、現場に降りて自分で手を動かした経験の量。経験がない状態でAIに「いい感じに」と頼むと、AIが返してきたものを判断できないので、結局AIに使われる側になっちゃう。

🍱 まとめ — 今日のLIVEのエッセンス

2026年5月11日の朝LIVEは、Codex・Claude Design・Claude Codeの3点リレーで共感LPを30分で作る実験回だったよ。3つのAIに「下ごしらえ → 盛り付け → 配膳」の役割分担をさせて、人間は「私が伝えたいこと」の解像度を上げることに集中する。これが今日のレシピの全体像。

大事なのは「AIに使われる側」じゃなくて「AIを使う側」でい続けること。そのためには、現場に降りて、自分で手を動かして、API課金ダッシュボードを毎日見て、AIが嘘をついてないかを判断できる側に立ち続ける。残るのは「解像度」だけ。

関連記事もチェック:Claude Code動画編集の3層スタック — 外注費ゼロでYouTube毎日投稿ChatGPT画像生成「ヘタウマ崩壊プロンプト」でAI時代の表現力を磨くChatGPT Image 2.0・Codex・AIブラウザ三国志(WACAコラボ)

COLUMN

🌱 ひろくんのコラム — 「変態的に突き抜ける」が差別化になる時代

今日のLIVEでただっちと話してて、私が一番響いたのは「変態的に突き抜けていく」という言葉だった。Codexで誰でもLPが作れるようになると、無難なものは大量生産される。でも、その人にしかない偏り・突き抜け方こそが、AI時代の差別化になる。

これって、私が大腸がんになってから感じてきたことと重なる。完璧な人生履歴より、欠けてる凸凹のまま夢中に生きてる人の方が、なぜか心に届く。AIで武装したぶん、人間が出すべきは「等身大の偏り」なんと感じる。

私の感覚で言うと、誰でも作れる「無難な定食」じゃなくて、「ここだけは譲れない一品」を磨くこと。それが等身大の偏りであり、AI時代の差別化になる。

分身AI.comでは、この「等身大の偏りを言語化する」プロセスを毎日記録してる。一人ひとりの分身AIを育てる試みだから、よかったらそちらも覗いてみてほしい。

ひろくんのコラム 変態的に突き抜けるAI時代の差別化

この記事が参考になったら、AI氣道.jp無料メルマガに登録して、毎日の朝LIVEブログをお届けさせてください。また、AIを使って人生を変えたい方は人生が開花する30日メルマガもおすすめ。自分の強みを知りたい方はあなたの富を生み出す神様タイプ診断もおすすめ。

いろんなAI診断を楽しみたい人は「AI診断フェス」をチェックしてみよう。ドラクエ風に楽しく本格な「ドラゴンビジネス3」も人気。そして多田啓二(ただっち)のホームページはこちらからチェックできるよ。

LINE OPEN CHAT

Claude Code・AIエージェント実践会

2000人突破! インストールから自動化まで、仲間と一緒に実践しよう

LINEオープンチャットに参加する(無料)

パスコード: 1111

🤖 AI生成コンテンツについて

この記事はAIツール(Claude Code)を活用して制作しています。構成・文章生成・画像制作にAIを使用し、最終的な内容の確認・編集・公開判断はひろくん(田中啓之)本人が行っています。「分身AIひろくん」(bunshin-ai.com)とは別のコンテンツです。

上部へスクロール