誰に、何を、なぜ今届けるかを曖昧にしない。
TOFU LAB / 2026.07.10
AIっぽくないLPをAIで作る
GPT × Codex × Hermes × GPT Images 実演ライブ
opening
今日のゴールは、AIで作ることではない。
AIが作ったものを、人が見られるLPに直すこと。制作スピードより、編集判断を持ち帰ってもらう。
3つの見せ方
3つのLPを、同じ型にしない。
英語はサイト名ではなく、LPの方向性を表す仮ラベル。
同じテンプレにせず、3つの見せ方を比べる。
AIっぽいLP
言っていることは正しい。
でも、誰の記憶にもならない。
- 「最高です」だけで、何が良いのか分からない
- 写真がきれいすぎて、現場の匂いがない
- 人がいない。いても、名前も癖もない
AIっぽくないLP
人、時間、場所、少しの癖。
朝なのか夜なのか。誰と来るのか。何をしている瞬間か。
写真は明るく整えすぎない。手元、席の距離、スタッフの表情を残す。
workflow
AI時代の制作フローは、一本道ではなく分業。
01GPT企画、人物、場面、コピーの初稿
02GPT Images人と情景があるビジュアル
03CodexLPを一気に実装する制作スタッフ
04HermesAIっぽさを疑うレビュアー
05Human最終判断をする編集長
Codex prompt
目的は、AIっぽくない売れるLP。
派手なUI部品や流行演出に寄せない。Codexで3つの別デザインを作り、Hermesで「申し込みたくなるか」を見る。
抽象語、汎用テンプレ、不自然な改行を消す。
焼肉は暗いカウンター、俳優はプロフィール、森はナオミ隊長の秘境ツアー。
価格、場所、流れ、レビュー、FAQ、空き状況、CTA。
this demo
今回は、静的HTMLで作る。
ビルド環境やCMS連携を増やさず、ブラウザでそのまま開けるHTML/CSS/JSにする。技術選定の話は補足に留める。
セミナー中にすぐ開ける。配布しやすい。修正差分も見せやすい。
ビルドやCMS設定で詰まらず、LPの編集判断に時間を使う。
更新運用ならWordPress、複雑UIならReactやHeadlessも候補。
why Hermes
作るAIと、見るAIを分ける。
Codexは制作スタッフとして優秀。だからこそ、最終判断まで同じ流れで済ませず、Hermesに「別の編集席」から疑ってもらう。
作る。早い。指示をコードに落とす。制作スピードを上げる。
見る。疑う。売れるか、AIっぽくないか、直す順番を出す。
expected question
Codexだけでよくない？
作るだけなら、Codexだけでもいい。けれど、売れるLPまで持っていくには「別の目」が必要です。
手を動かす役。画面、HTML、CSS、修正を一気に進める。
ユーザー目線、事業目線、AIっぽさ、検証結果から疑う。
AIの提案を採用するか、捨てるか、最後に決める。
review lens
レビューの問いは、
きれいかではない。
このLPを見て、
申し込みたくなるか。
誰が、どこで、何をしているかが見える。
抽象メリットではなく、来店/応募後の一場面が浮かぶ。
次に押すボタン、読む順番、申し込む理由が明確。
demo 01 / 20:15
ナオミ焼肉
メイン実演。コンセプトは「店主に会いに行く焼肉店」。肉の品質訴求から、人に会いに行く理由へ変える。
copy review
肉の話だけで終わらせない。
BEFORE
最高級和牛と厳選食材を、洗練された空間で。
AFTER
肉はもちろんですが、今日はナオミさんに会いに来ました。
NAOMI
demo 02 / 20:30
俳優ナオミは、
Profileで見せる。
白い余白に大きな言葉を置くと、他のサイトと同じ顔になる。ポートレート、沈黙、出演メモの密度で見せる。
statement余白ではなく、間を演じる。layoutWorks / Profile
art direction review
褒め言葉を削ると、人物が残る。
BEFORE
多彩な表現力で、観る人の心を動かす俳優。
AFTER
セリフのない場面で、なぜか目が行く人。
demo 03 / 20:42
ナオミ隊長が、秘境へ連れていく。
ただ森で遊ぶサイトではなく、ナオミさんがリーダーとして地図とランタンで先導する体験LP。全画面写真と地形で、ついていきたくなる空気を作る。
activity copy review
売るのは、隊長についていく体験。
BEFORE
家族で楽しむ、心に残る特別なナイトイベント。
AFTER
ナオミ隊長の合図で、ランタンの奥へ進む。吊り橋の先に、秘境がある。
Hermes prompt
レビュー依頼は、嫌な見方を指定する。
このLPを見たユーザーが申し込むか、という前提でレビューしてください。信頼できるか、欲しくなるか、迷わず次の行動に進めるか。抽象コピー、情景不足、CTA導線、写真のAIっぽさ、修正優先順位を出してください。
editing checklist
AIっぽさを減らす編集チェック
誰に、何を、なぜ今。
価格、場所、条件。
「最高」より、何が良いか。
匂い、音、明るさ。
自分の甘さを外に出す。
AIに正解は渡さない。
summary
AIは作業者。
Hermesはレビュアー。
人間は編集長。
良いLPを作るのは、AIの性能だけではなく、観察力と編集力です。
Q&A
質問があれば、ここから実演を延長します。
配布物: チェックリスト、画像生成プロンプト、Codexプロンプト、Hermesレビュー用プロンプト。
One more thing / WordPress care
WordPress保守講座LPも、
最後に。
本編の3LPとは別枠。OTO風の黒いプロダクトショーケースを、ナオミさんのWordPress保守講座へ翻訳する。表の成果物一覧には出さず、最後の追加デモとしてだけ見せます。
黒背景、中央プロダクト、チャプター、スペック感。
OTOのロゴ、コピー、ヘッドフォン、同じ構図。
更新不安、持ち帰る手順、料金、申込フォーム。