# Codex実演用プロンプト 当日はこの会話の文脈がない **別セッション** で行う前提。 Codexには「3つのLPを作って」ではなく、**デザイン方針・内容・構造・NG・検証まで全部渡す**。 今回の主目的は、React Bitsのような派手なUI/演出部品を見せることではない。 **3つの別々のデザインをCodexで作り、Hermesで「売れるLPか」「AIっぽくないLPか」をレビューして磨くこと**を軸にする。 ## 依頼の考え方 - 3LPを同じテンプレートの色違いにしない。 - LPごとに、世界観・情報設計・CTA・カード形状・写真の見せ方・余白を変える。 - 見た目だけでなく、価格、場所、流れ、レビュー、FAQ、空き状況、CTAなど、申し込み/問い合わせに必要な判断材料を入れる。 - 日本語見出しは巨大にしすぎず、不自然な改行を避ける。 - 派手なアニメーションライブラリや流行UIを主役にしない。大前提は「AIっぽくない」「売れる」こと。 - 画面上に `仮` / `placeholder` / `XX` / `PROVISIONAL` / `GA4` / `UTM` など制作裏側の言葉を出さない。 - 実装後に、変更ファイル・確認URL・簡易検証結果を報告させる。 ## 当日用: 1発完成狙いプロンプト ```text あなたはシニアLPデザイナー兼フロントエンドエンジニアです。 このリポジトリ内で、セミナー用デモとして3つの静的LPを制作してください。 目的: 「AIっぽくないLPをAIで作る」というセミナーで見せるために、 同じテンプレートの色違いではなく、3つそれぞれが完全に別ブランドに見える、売れるLPを作ってください。 React Bitsのような派手なUI/演出部品を見せることは今回の目的ではありません。 大前提は、AIっぽく見えないこと、そしてユーザーが申し込み/問い合わせしたくなることです。 作るLP: 1. 焼肉店LP 2. 俳優・タレント公式LP 3. 夜の森のアドベンチャー体験LP 共通ルール: - 3つを同じテンプレートにしない。 - 色だけ変えるのは禁止。 - 各LPで、構成、余白、見出しサイズ、CTA、カード形状、写真の見せ方、セクションリズムを変える。 - 日本語の見出しは大きくしすぎない。変な改行を避ける。 - 「最高です」だけで逃げない。何が、いつ、どこで、誰にとって良いのかを書く。 - 申し込み・問い合わせに必要な判断材料を入れる。 - 派手なアニメーションや流行UIを主役にしない。使う場合も可読性・CTA・判断材料を邪魔しない最小限に留める。 - 画面上に「仮」「placeholder」「XX」「PROVISIONAL」「GA4」「UTM」などの制作裏側の言葉を出さない。 - ただしコード上では、仮データ部分に data-provisional="true" のような印を残してよい。 - 既存ファイルがある場合は、まず構造を確認してから最小限の変更で改善する。 - 不要な大規模リファクタはしない。 LPごとの方針: --- ## 1. 焼肉店LP コンセプト: 高級すぎる焼肉店ではなく、「煙」「カウンター」「店主に会いに行く」感じ。 暗め、温かい、カウンター越しのライブ感。派手な肉写真だけでなく、誰かと行きたくなる余韻を作る。 デザイン: - Dark Counter（暗いカウンター席の焼肉店） - charcoal / ember / smoke / cream - 大きすぎない明朝見出し - 角丸すぎないカード - 炭火、煙、会話、帰り道の余韻 - CTAは「席を相談する」「今週の入りやすい時間を見る」のように自然にする 必要セクション: - Hero - 店のコンセプト - おすすめの食べ方・コース - 初回来店の頼み方 - 店主/スタッフの温度感 - 口コミ - アクセス - 今週の入りやすい時間 - FAQ - 予約/問い合わせCTA コピー方針: - 「厳選和牛」だけでなく、「また会いたい人と行く」「煙の向こうで話がほどける」ような情景にする。 - 住所や空席情報は仮でも、画面上では自然な店舗案内として見せる。 - MAP PLACEHOLDER や XX-XX は表示しない。 --- ## 2. 俳優・タレント公式LP コンセプト: 派手な芸能人サイトではなく、宣材・出演実績・場面メモを見せる編集者向けの公式プロフィール。 キャスティング担当が「この人を起用できるか」を判断できるページにする。 デザイン: - Actor Profile（宣材プロフィール） - off-white / black / thin rules / monochrome portrait - 余白多め - 高級ファッション誌や宣材資料に近い - 焼肉LPとは全く違う情報設計にする - 大きすぎる日本語コピーで映画ポスター風にしすぎない 必要セクション: - Hero / 名前 / 肩書き - Profile - 出演実績 - CM / ドラマ / 舞台などの仮実績 - Scene notes（出演メモ） - 写真・宣材ダウンロード導線のような表現 - レビュー/推薦コメント - スケジュール感 - 問い合わせCTA コピー方針: - 「唯一無二の存在感」みたいな抽象語を避ける。 - どんな役柄に合うか、声・表情・佇まいを具体的に書く。 - 仕事を依頼する人が判断できる内容にする。 --- ## 3. 夜の森のアドベンチャー体験LP コンセプト: 家族向けの夜の森アクティビティ。 ただの自然体験ではなく、ナオミさんがリーダー/隊長として参加者を秘境へ誘う体験として見せる。 「楽しそう」ではなく「誰についていき、どこへ進み、何を越える体験か」が見えるコピーにする。 例: ナオミ隊長の合図で、ランタンの奥へ進む。吊り橋の先に、秘境がある。 デザイン: - Forest Activity（夜の森の体験） - dusk gradient / lantern yellow / aqua / deep green - 他2つより明るく、冒険感と安心感を両立 - 丸みのあるカードは使ってよいが、子どもっぽくしすぎない - 写真や背景は夜・森・ライト・足元・ルート感に加え、ナオミさんが先導してくれるリーダー感を意識する 必要セクション: - Hero - 体験の流れ - 参加できる年齢/持ち物/安全性 - コース紹介 - 開催時間 - 空き状況 - アクセス - 参加者レビュー - FAQ - 予約CTA コピー方針: - 「最高の思い出」ではなく、夜の森の音、ライト、親子の距離、帰り道の会話などを描く。 - 安全性、所要時間、服装、雨天対応など、申し込み前に必要な判断材料を入れる。 --- 実装要件: - HTML/CSS/JSは既存構成に合わせる。 - 既存の assets や lps 構成を確認してから編集する。 - CSSは共通化しすぎず、各LPの個性が出るクラスを設計する。 - 各LPへのリンクがある一覧ページまたはスライドがある場合、リンク切れがないようにする。 - CTAは見た目だけでなく、該当セクションへ遷移するようにする。 - JSを追加/変更する場合は構文チェックする。 - レスポンシブで横スクロールが出ないようにする。 納品前チェック: - 3つのLPが見た目・構造・内容で明確に違うこと。 - 各LPに申し込み判断材料があること。 - 画面上に仮データ感が出ていないこと。 - 日本語見出しが不自然に改行されていないこと。 - CTA導線があること。 - ローカル参照切れがないこと。 - 変更内容と確認URLを最後に報告すること。 まず既存ファイルを確認し、必要なファイルだけを編集してください。 実装後、簡易検証を行い、結果を報告してください。 ``` ## さらに安定させる2段階依頼 一発で崩れたら、次は2段階に分ける。 ### 1. 設計だけ依頼 ```text まだ実装しないでください。 3つのLPについて、デザイン方針・ターゲット・セクション構成・CTA・必要な判断材料・NG表現を設計してください。 3つが同じテンプレートにならないように、情報設計から変えてください。 ``` ### 2. 実装を依頼 ```text 上で決めた設計に従って、既存ファイルを編集して3つのLPを実装してください。 必要なHTML/CSS/JSを変更し、確認URLと検証結果を最後に報告してください。 ```