この記事は途中まで無料で閲覧できます。
「AI画像生成のプロンプト、何を書けばいいかわからない」 「毎回ガチャみたいに試行錯誤している」 こんな声を、本当によく聞きます。 私は13年以上デザイナーとして活動し、Google Imagenのプロンプトガイド監修や、複数のAIツールのアンバサダーを務めてきました。 その中で確信したことがあります。 プロンプトは「呪文」ではなく「設計図」です。 建築家が図面を引くように、デザイナーがプロンプトを設計する。 そこには明確なロジックがあります。 この記事では、私が実務で実際に使っているプロンプトを6カテゴリ・50選に厳選して公開します。 すべてコピペでそのまま使えます。 さらに各プロンプトには「なぜこう書くのか」という設計思想を添えているので、読めば応用力も身につきます。
以下の10選は無料で公開します。 まずはここから試して、AIデザインの可能性を体験してください。
📝 プロンプト（コピペOK）
画像に記載されているプロンプトの内容をマークダウン形式で書き起こしました。
## 1. 企画・テーマ
- 内容：AI × デザインの学習サービス。そのセミナー集客告知バナー。
- コンセプト：信頼感のあるビジネス向けグラフィック。明るさと力強さを兼ね備えたデザイン。
## 2. 画像の仕様
- アスペクト比：16:9
- 表現スタイル：写真合成（フォトバッシュ）とフラットデザインの組み合わせ。
## 3. 構図・レイアウト
- 画面分割：左側の3/5を「テキストエリア（黄色背景）」、右側の2/5を「ビジュアルエリア（写真）」とする。
- 背景の境界線：黄色い背景と写真背景の境界は「斜め」にトリミングする。
- レイヤーと立体感（はみ出し表現）：人物（特に手に持ったノートPC）を、背景の境界線を越えて「左側の黄色い領域」にはみ出すように配置する。
## 4. テキスト・タイポグラフィ
- 配置ルール：「メインコピー」「サブコピー」「開催日時」の全ての要素の左端を完全に揃える（左揃え統一）
- メインコピー：「AI × デザインで／未来を描こう」（2行表記）
- サブコピー：「AI活用と思考法を学ぶ」「実践型セミナー開催中！」
- 開催日時：「2025.12.15 WED／19:00 - 20:00」
## 5. ビジュアル要素
- メイン被写体：20代日本人男性。自信に満ちた表情でノートPCを開いている。オフィスカジュアル。視線はカメラ目線。
- 背景：左側は純粋な黄色（#ffd700）のベタ塗り。右側は綺麗なオフィス空間（ボケている）。
## 6. 全体のトーン＆マナー
- 印象：信頼感、明るい、力強い、シンプル、整然とした美しさ。💡 設計のポイント
📝 プロンプト（コピペOK）
あなたはプロのアートディレクター兼コピーライターです。
以下の「デザイン要素要件」に基づき、ターゲットに刺さる広告クリエイティブの構成案を作成してください。
# ルール
- 過剰な演出、派手な印象は禁止
- 0.2秒で興味引くほど簡潔で視認性が高い
- 本能、感情、理性の順番にアプローチする
- 人の目線は読ませたい文字に向ける（視線誘導を最適化）
- 小さく表示されることを考慮し、文字のジャンプ率は高く設定する
## 【Sランク：最優先（認知・興味）】
- メインビジュアル: {ビジュアル指示}
- キャッチコピー: {ヘッドライン}
- CTA: {ボタンの文言}
## 【Aランク：基盤（印象・可読性）】
- レイアウト / 配色 / フォント / ジャンプ率
## 【Bランク：説得（信頼・納得）】
- ボディコピー / 権威付け / オファー / ロゴマーク
## 【Cランク：演出（世界観・クオリティ）】
- あしらい / 背景 / 余白 / エフェクト / トンマナ💡 設計のポイント
デザイン要素要件の部分に自分の商材情報を入れるだけで、あらゆる広告バナーに対応
✏️ 記入例 — 「AIスクールのウェビナー集客バナー」の場合あなたはプロのアートディレクター兼コピーライターです。
以下の「デザイン要素要件」に基づき、ターゲットに刺さる広告クリエイティブの構成案を作成してください。
# ルール
- 過剰な演出、派手な印象は禁止
- 0.2秒で興味引くほど簡潔で視認性が高い
- 本能、感情、理性の順番にアプローチする
- 人の目線は読ませたい文字に向ける（視線誘導を最適化）
- 小さく表示されることを考慮し、文字のジャンプ率は高く設定する
=== デザイン要素要件 ===
# 1. 基礎情報
- 商材名: AI活用デザインスクール「DESIGN AI LAB」無料ウェビナー
- ターゲット層: 25〜40代のデザイナー・マーケター。AIに興味はあるが何から始めればいいかわからない人
- 広告媒体: X, Twitter（16:9 横長）
# 2. デザイン要素要件（優先度順）
## 【Sランク：最優先（認知・興味）】
- メインビジュアル（アイキャッチ）: ノートPCの画面からAI生成の美しいデザインが浮き出している様子。画面の中から3Dのグラフィック要素が飛び出すような躍動感。
- キャッチコピー: 「デザイナーの仕事が、AIで3倍速くなる。」
- CTA（コール・トゥ・アクション）: 立体的なブルーのボタンで「無料で参加する ＞」
## 【Aランク：基盤（印象・可読性）】
- レイアウト: 左側にテキスト、右側にビジュアルの左右2分割。視線はZ字を意識。
- 配色: メイン: ディープブルー(#1E3A5F)、ベース: ホワイト(#FFFFFF)、アクセント: エレクトリックシアン(#00D4FF)
- フォント: 和文はゴシック体（太め）、数字・英文はDINスタイルで機能的に
- ジャンプ率: キャッチコピーは極端に大きく、説明文は小さくしてメリハリ強め
## 【Bランク：説得（信頼・納得）】
- ボディコピー: AIを使ったデザインの基礎から実践まで、60分で学べるオンラインセミナー。
- 権威付け: 右上に「受講者満足度 98.5%」のバッジを金色で配置
- オファー: キャッチコピーの下に「2/28(金) 20:00〜 参加費0円」と強調
- ロゴマーク: 左下に「DESIGN AI LAB」のロゴを小さく配置
## 【Cランク：演出（世界観・クオリティ）】
- あしらい: AI・テクノロジーを想起させる幾何学的なラインやノードを背景に薄く配置
- 背景: 左側は白ベース、右側はディープブルーのグラデーション
- 余白: 情報を詰め込まず、上下左右に十分な余白を確保
- エフェクト: CTAボタンにドロップシャドウ、ビジュアル部分にほのかなグロー効果
- トンマナ: テック感がありつつも冷たくならない「先進的・信頼・ワクワク」のトーン💬 ポイント:
{}の部分を自分の商材に書き換えるだけ。Sランクから順に埋めていけば、自然にバランスの取れたデザイン要件が完成します。全部埋めなくてもOK — AランクまででもAIは十分に理解してくれます。
📝 プロンプト（コピペOK）
あなたは「0.1秒で指を止めさせる」最適なサムネイル生成プロンプトを作成する専門家です。
記事のタイトル・要約・テーマのいずれかを入力されたら、
以下のプロセスで最適なサムネイルプロンプトを生成してください。
## ステップ1: 記事分析
- メインメッセージ / 感情トリガー / ターゲット層 / キーワード / トーン
## ステップ2: ビジュアルコンセプト
- メインビジュアル / 色彩戦略 / レイアウト / 文字の扱い
## ステップ3: プロンプト構築
- 技術仕様（16:9 / 1:1 / 4:5）
- メインビジュアル + レイアウト構成
- 色彩設計（HEXコード指定）
- タイポグラフィ（配置・サイズ・フォント）
- 視線誘導 + 感情・雰囲気 + 禁止事項
## 感情トリガー別の色彩戦略
- 不安・恐怖系 → 赤、オレンジ、黄色
- 好奇心系 → 紫、青紫、緑青
- 希望・成功系 → 緑、青、水色
- 優越感系 → 黒、金、紺💡 設計のポイント
記事タイトル: 「副業で月5万円を稼ぐ、最もシンプルな方法」
ターゲット: 30代会社員、副業初心者すると、AIが自動で以下のようなサムネイルプロンプトを生成してくれます。
A compelling YouTube thumbnail for "副業で月5万円を稼ぐ、最もシンプルな方法" targeting 30s office workers. 16:9 landscape format.
Layout: Left 2/3 for text overlay, right 1/3 for main visual with slight overlap for depth.
Main visual (right side): A confident 30s Japanese businessman in casual shirt, holding a smartphone with a satisfied smile. Behind him, stylized 5万円 bills (Japanese 50,000 yen notes) floating upward with subtle glow effect, symbolizing income growth. Clean, modern background with soft gradient.
Text hierarchy (left side):
- Main copy in extra large bold font: "月5万円" (electric green #10B981, outlined in white)
- Secondary copy in large font: "副業で稼ぐ" (deep blue #3B82F6)
- Emphasis text in medium font: "最もシンプルな方法" (golden yellow #F59E0B, with subtle shadow)
- Small badge: "初心者OK!" (white text on green background)
Color scheme:
- Primary: Electric green (#10B981) for hope/success
- Secondary: Deep blue (#3B82F6) for trust/curiosity
- Accent: Golden yellow (#F59E0B) for money/value
- Base: Clean white (#FFFFFF) and light gray (#F8F9FA)
Visual effects: Subtle upward arrows around the money, soft drop shadows on text, gentle glow on the smartphone screen showing earnings graph.
Style: Clean, professional yet approachable, high contrast for mobile viewing, optimized for 0.1-second attention grab. Avoid: cluttered design, too many colors, small text, dark/negative imagery.
Emotional tone: Hopeful, achievable, trustworthy, exciting but not overly flashy.💬 ポイント: 自分で色やレイアウトを考える必要がありません。記事タイトルを入れるだけで、AIが感情トリガーの分析 → 最適な色彩 → 完成プロンプトまで全自動で作ってくれます。
📝 プロンプト（コピペOK）
ランディングページ（マーケティング）
テーマ：高級コーヒー豆のサブスクリプション「Daily Roast」
コンバージョン（購入）を目的とした、訴求力の高いWebデザイン案件です。
クライアント: 新興コーヒーロースタリー「Daily Roast」
ターゲット: コーヒーにこだわりのある30〜40代男性。安さよりも「質」と「体験」を重視する。
依頼内容: PCおよびSP版の「ファーストビュー（ヒーローエリア）」と「特徴紹介セクション」のデザイン。
必須機能・要件:
- ヒーローエリア: シズル感のある高画質な写真、心に刺さるキャッチコピー、目立つCTAボタン（「今すぐ始める」）。
- 特徴セクション: 3つの強み（「世界中から厳選」「焙煎したてをお届け」「ポスト投函で便利」）をアイコンとテキストで表現。
デザインの方向性:
キーワード：プレミアム、深み、香り高い、リッチ。
黒やダークブラウンを基調とした、高級感のあるトーン＆マナー。💡 設計のポイント
📝 プロンプト（コピペOK）
「掲載する内容」を図解してください。
- スタイル: ビジネス書、ビジネス雑誌、20~40代向け、知的だけどフルカラーで理解しやすい、輪郭線なし、フラットデザイン
- 画質: 4K高画質
- 「掲載する内容」以外の文字は入れない
=== 掲載する内容 ===
（ここに図解したい内容を入力）💡 設計のポイント
「掲載する内容」を図解してください。
- スタイル: ビジネス書、ビジネス雑誌、20~40代向け、知的だけどフルカラーで理解しやすい、輪郭線なし、フラットデザイン
- 画質: 4K高画質
- 「掲載する内容」以外の文字は入れない
=== 掲載する内容 ===
【SNSマーケティングの基本用語】
認知フェーズ
Impression→表示回数｜投稿がタイムラインに表示された延べ回数
Reach→到達人数｜投稿を実際に見たユニークユーザー数
Engagement→反応｜いいね・リプ・RTなど、見た人が起こしたアクション
興味フェーズ
CTR→クリック率｜表示された回数のうち、リンクをクリックした割合
CTA→行動喚起｜「詳しくはこちら」など、次の行動を促す仕掛け
LP→着地ページ｜クリック後に最初に表示されるWebページ
購入フェーズ
CVR→成約率｜LPに来た人のうち、実際に購入・登録した割合
CPA→獲得単価｜1人の顧客を獲得するためにかかった広告費
LTV→生涯価値｜1人の顧客が生涯にわたって支払う合計金額💬 ポイント:
=== 掲載する内容 ===の後に、図解したい情報を「用語→一言説明」の形式で書くだけ。カテゴリ分けしておくと、AIが自動でグルーピングしてくれます。
📝 プロンプト（コピペOK）
下記のイラストを生成してください。
## スタイルの特徴
### 1. 太く均一な輪郭線（ボールド・ラインワーク）
- 太さが一定の明確な**ダークネイビー（#1A1A2E）**の線で、全要素を囲む
- コミックやステッカーのようなポップで視認性の高い印象
- 黒ではなくダークネイビーにすることで、硬さを抑えつつ洗練された雰囲気を演出
### 2. ベタ塗りと洗練されたカラーパレット
- グラデーションや陰影を一切使用しないフラットな彩色
- **カラーパレット（6色構成）:**
| 役割 | カラー | HEX | 備考 |
|------|--------|-----|------|
| ベースカラー | オフホワイト | `#F5F0EB` | 温かみのある背景色 |
| 輪郭線 | ダークネイビー | `#1A1A2E` | 黒の代替、柔らかさと深みの両立 |
| メインアクセント | ディープマゼンタ | `#C2185B` | 視線を引く鮮やかな主役色 |
| サブアクセント① | テラコッタオレンジ | `#E07A5F` | 暖色の中間トーン、親しみやすさ |
| サブアクセント② | セージグリーン | `#81B29A` | 寒色の差し色、バランスと抜け感 |
| ニュートラル | サンドベージュ | `#D4C5B2` | 肌色・衣服のベースに使用 |
- **配色ルール:** メインアクセントは画面の10〜15%、サブアクセントは各5〜10%、ニュートラルとベースで残りを構成
### 3. 幾何学的なテクスチャとパターン
- ドット（ハーフトーン）→ **ディープマゼンタの小ドット**を背景やオブジェクトに
- 破線（ステッチ風）→ **オフホワイト**の破線で衣服のディテールに
- クロスハッチング → **セージグリーン**の細い線で影の代替表現に
- 衣服や小物に部分的に適用し、パターン同士が隣接しないよう配置
### 4. デフォルメされた身体表現
- 顔: 目は点のみ（ダークネイビー）、口や眉は単純な線
- 手足: 関節の描写を省略、太めの円筒形状
- 誇張されたポーズ: 大股で歩く、物を高く掲げる
- 肌の色は **サンドベージュ（#D4C5B2）** で統一
### 5. メンフィス・デザイン風の装飾
- 幾何学図形: 円、半円、ジグザグ、カプセル型、三角形
- **各図形にパレット内の色をランダムに割り当て**、画面全体に散りばめる
- 図形のサイズに大小のコントラストをつけ、奥行き感を演出
- 一部の図形には **テラコッタオレンジの細い輪郭線のみ（塗りなし）** を混在させ、軽やかさを加える
=== 描くイラスト ===
（ここにイラストの内容を入力）💡 設計のポイント
=== 描くイラスト === の部分に、以下のように書きます：=== 描くイラスト ===
自宅でリモートワークをしている20代の女性。
大きなデスクに座り、ノートPCに向かってタイピングしている。
デスクの上にはコーヒーカップと観葉植物。
背景に大きな窓があり、窓の外に街並みが見える。
女性の頭上には電球のアイコンが浮かんでおり、「ひらめいた」瞬間を表現。
全体に、仕事を楽しんでいるポジティブな雰囲気。💬 ポイント: スタイル指定（輪郭線、ベタ塗り、デフォルメ等）はプロンプト側が担当するので、
描くイラストには「何を描くか」だけを書けばOK。場面・人物・小物・雰囲気を具体的に書くほど、精度が上がります。
📝 プロンプト（コピペOK）
添付した画像の商品を欲しくさせる、映画のワンシーンのようなストーリー性のある写真を作ってください。
# ビジュアルコンセプト
- 映画監督が撮るファッション広告のような芸術性
- Wes Anderson、ソフィア・コッポラ作品のような色彩とフレーミング
# シーン設定
- レトロモダンな書店またはプライベートライブラリー
- 高い本棚、ヴィンテージな梯子、大理石の床
- 大きな窓から差し込む劇的な光と影
# 撮影スタイル
- 映画の35mmフィルムで撮影したような質感
- アナモフィックレンズ風のワイドな画角
- 計算された対称性とバランス
# カラーグレーディング
- ティールアンドオレンジ、またはヴィンテージフィルム調
- 彩度は抑えめで上品に
- グレインとテクスチャで映画的質感を追加
# ライティング
- ドラマティックな自然光（ゴールデンアワー）
- 窓からのライトが空間を斜めに切り取る
- 本棚が作る美しい影のパターン💡 設計のポイント
📝 プロンプト（コピペOK）
あなたは「NotebookLMのスライド生成機能」に特化した世界最高峰のプレゼンテーションデザイナーです。
ユーザーから要望が入力されます。最も美しく論理的なスライドを生成できる専用プロンプトを作成してください。
# 思考プロセス:
1. ユーザー要望の分析 → 最適なトーン＆マナー決定
2. 配色の選定 → 具体的なHEXカラーコード
3. スタイルの定義 → フラット、3D、ミニマル等
4. テンプレートへの充填
# 出力フォーマット:
- 配色: 背景・文字・強調（HEXコード必須）
- フォント: サンセリフ/セリフ/手書き風
- コンテンツ優先順位: ビジュアル → テキスト
- ビジュアル表現の原則
- レイアウト: 配置・余白・視線誘導
- スタイル: 4K、禁止事項含む
- ルール: 表紙 / 本編（1スライド=1メッセージ）💡 設計のポイント
スライド構成とコンテンツ
表紙: タイトル「Google Antigravity」と、サブタイトル「AIエージェントによる開発の再定義」を配置。
コンセプト: 「Agent-first IDE」という核心を説明。AIを単なる助手ではなく、自律的な「共創者」として定義する。
主要機能 1 (Editor View): VS Codeベースの馴染み深い操作性と、インラインコマンドによる直感的なコード生成について。
主要機能 2 (Agent Manager): 複数のAIエージェントを同時並行で指揮する「管制塔」としての役割を解説。
信頼の可視化 (Artifacts): AIの思考プロセスをタスクリストやスクリーンショットで可視化する革新性を強調。
結論: 開発者が「コードを書く」ことから「意図を設計する」ことへシフトする未来像を提示。
ビジュアル表現の原則
レイアウト: コンテンツを中央に寄せすぎず、画面の3分の2を占める大胆な余白（ネガティブスペース）を活用すること。
視覚要素: テキストは箇条書き（3点以内）に絞り、各スライドには「システム構成図」や「エージェントのフロー」を象徴するシンプルなアイコンや幾何学図形を配置すること。
カラー: 背景は #0A0A0A、強調色は #00F2FF を使用し、デジタルデバイスの「発光感」を表現すること。
禁止事項
「魔法」「革新的すぎる」などの抽象的表現、および絵文字の使用を禁止。📝 プロンプト（コピペOK）
「記事」のSNS用の投稿文を「フレームワーク」に沿って作成してください。
# 目的
- 読んだ人が学びを得るとともに、記事を読みたくなる。
## 1. 冒頭：権威×意外性のフック（7~13文字）
- 有名ブランド名/固有名詞 ＋ 圧倒的な実績数値
- 脳の報酬系を刺激し「読まない理由」を消去する
## 2. ギャップ提示：常識への問いかけ
- 一般的な懸念点/業界の固定観念を提示
- 認知的不協和（モヤモヤ）を作り出す
## 3. 核心：技術の転用・戦略の裏側
- A（既存の強み）× B（全く別の市場）
- ドーパミンを放出させる「アハ体験」の提供
## 4. 終盤：社会的証明
- 第三者機関の評価（賞、ランキング、市場規模）
- 保存（ブックマーク）の動機を作る
## 5. 結び：抽象化と自分事化
- 成功の本質を1行で定義
- 読者の環境へ転用を促す問いかけ
# 記事
{宣伝したいコンテンツのURLや要約を貼る}💡 設計のポイント
記事の部分に宣伝したいコンテンツのURLや要約を貼るだけ📝 プロンプト（コピペOK）
以下の要件に基づいて、note記事の完全な構成と本文を作成してください。
# 記事の基本設計
1. ターゲット読者の定義（年齢・職業・悩み）
2. 読了後のベネフィット（読者が得る変化）
3. 検索意図（インテント）の分析
4. 独自の切り口の提案
# タイトル案
- クリックされるタイトル案を3つ提案
# 構成
- H2, H3の詳細な目次を作成
- 読者が迷わず読める論理構成
# 本文執筆ルール
- PREP法（結論・理由・具体例・結論）を使用
- 離脱を防ぐ「リード文」を冒頭に
- 行動を促す「まとめ」を末尾に
# テーマ:
（ここにテーマを入力）💡 設計のポイント
いかがでしたか？ 10選だけでも、かなり実践的に使えるはずです。 有料パートでは、残り40選をすべて公開します。 さらに
特典1：プロンプトカスタマイズガイド
⚠️ ここから先は有料コンテンツです。
📝 プロンプト（コピペOK）
YouTube動画のサムネイル画像（16:9、1280×720px）を生成してください。
# 設計思想
日本のビジネス系YouTubeサムネイルの王道パターンをベースに設計。情報量が多めで、文字サイズの強弱と斜め配置のリズムでダイナミズムを出す日本流のハイインパクトデザイン。
# テーマ
「朝たった10分の習慣で人生が激変した話」
# コピー設計（4テキスト要素・3行構成＋ラベル）
### ① カテゴリラベル（最上段・小）
**「朝のルーティン」**
### ② フックコピー（上段）
**「知らないと一生損する」**
### ③ パワーワード（中段・巨大）
**「朝10分」**
### ④ オチコピー（下段）
**「で、全部変わった。」**
# レイアウト（斜め3行＋右人物）
## 全体の構図
- 画面の左6割：テキストゾーン（4つのテキスト要素すべて）
- 画面の右4割：人物ゾーン
## 各要素の配置
### カテゴリラベル「朝のルーティン」
- 画面左上の角付近に配置
- 水平配置（傾きなし）
- 背面に小さなシグナルレッドの角丸カラーブロック（座布団）を敷き、その上に白文字
### フックコピー「知らないと一生損する」
- 画面左側、上から約4分の1の高さ
- 全体を約5°右上がりに傾斜させ、前のめりの緊張感を出す
- 「一生損」の3文字のみシグナルレッドに色替え。残りの文字は白
### パワーワード「朝10分」
- 画面中央やや左、垂直中央付近
- 全体を約3°右下がりに傾斜
- フックコピーと逆方向の傾きにすることでX字のダイナミックな交差リズムを生む
- 「10」がサムネ内で最大の文字（画面高さの約45%）。「朝」はその半分、「分」は「朝」よりやや小さく「10」の右下に寄せる
- 人物の体が「10」の「0」の右半分に被るレイヤード構造（テキストは人物の背面）
### オチコピー「で、全部変わった。」
- パワーワードの直下、画面左側
- 水平配置（傾きなし）。上の2行が斜めで動的なのに対し、最後の1行を水平で着地させ「結論の確信・安定」を視覚化
- 「全部変わった」の文字の下にサンバーストイエローの太い下線（アンダーライン）を引く。パワーワードの黄色と呼応させて画面の上下に色のブリッジを架ける
## 視線誘導
ラベル（左上）→ フック（左中上・斜め↗）→ パワーワード（中央・斜め↘）→ オチ（左下・水平着地）→ 人物の目（右）
# タイポグラフィ
### カテゴリラベル「朝のルーティン」
- フォント：太めのゴシック体
- サイズ：画面内で最も小さい文字。フックコピーの半分以下
- カラー：ピュアホワイト（#FFFFFF）
- 座布団：シグナルレッド（#E63946）の角丸ブロック、テキストよりひとまわり大きい
### フックコピー「知らないと一生損する」
- フォント：極太角ゴシック
- サイズ：パワーワード「10」の約5分の1。しっかり読めるが主役を食わない大きさ
- カラー：ピュアホワイト（#FFFFFF）。ただし「一生損」の3文字のみシグナルレッド（#E63946）
- 傾き：+5°（右上がり）
- 文字背面に黒の柔らかいぼかし影を敷いて背景から浮かせる
### パワーワード「朝10分」
- フォント：極太角ゴシック
- 「10」のサイズ：画面高さの約45%。サムネ内最大
- 「朝」のサイズ：「10」の約半分
- 「分」のサイズ：「朝」よりやや小さく、「10」の右下に密着
- カラー：サンバーストイエロー（#FFD600）
- 傾き：-3°（わずかに右下がり）
- 立体処理：
- 最背面に大きくぼかした黒い影を落として空間に浮いている感を出す
- 文字の下辺・右辺に沿ってダークアンバー（#B8860B）の同型文字をわずかにずらして重ね、活版印刷のような厚みを表現
- メインテキスト面の上辺にごく薄い白のハイライトラインを入れ、上方からの光の反射を表現
- 人物の背面レイヤーに配置
### オチコピー「で、全部変わった。」
- フォント：極太角ゴシック
- サイズ：フックコピーよりやや小さい。パワーワードの約6分の1
- カラー：ピュアホワイト（#FFFFFF）
- 傾き：0°（水平）
- 「全部変わった」の文字直下にサンバーストイエロー（#FFD600）の太めの下線を引く
- 文字背面にフックコピーと同様の柔らかいぼかし影
# カラーパレット（全6色）
| 役割 | カラー | HEX | 使用箇所 |
|------|--------|-----|----------|
| 背景・暗部 | アビスネイビー | `#080C1A` | 背景グラデ暗側（左下） |
| 背景・明部 | ミッドナイトブルー | `#0F2342` | 背景グラデ明側（右上） |
| パワーワード | サンバーストイエロー | `#FFD600` | 「朝10分」、オチ下線 |
| 警告アクセント | シグナルレッド | `#E63946` | 「一生損」文字色、ラベル座布団 |
| メインテキスト | ピュアホワイト | `#FFFFFF` | フックコピー、オチ、ラベル文字 |
| パワーワード厚み | ダークアンバー | `#B8860B` | 立体処理のディメンションライン |
# 背景
### メイングラデーション
- 左下のアビスネイビーから右上のミッドナイトブルーへの斜め線形グラデーション
- ダーク×ブルー系で男性向けビジネス系サムネの信頼感を演出
### 光のにじみ（2箇所）
- 右上にサンバーストイエローの大きなぼかし光源（非常に薄く、朝日のイメージ）
- 左中にスレートブルー（#4A6FA5）の控えめなぼかし光源（空間の奥行き）
### ノイズテクスチャ
- 極めて微細なモノクロノイズを全面にオーバーレイ。肉眼でほぼ見えない程度の最小量で、デジタルグラデーションの安っぽさを消しフィルム的な質感を加える
# 人物演出
- 30代日本人男性
- 服装：ダークネイビーのジャケット＋白インナー（ビジネス系の信頼感＋清潔感）
- 配置：画面右側、下端に接するバストアップ。画面右端から人物の右肩が少しはみ出す大胆なトリミング
- 表情：真っ直ぐにカメラを見つめる真剣な目＋口角がわずかに上がった自信の微笑。「本気で伝えたいことがある」と思わせる表情
- ポーズ：右手を胸の前で軽く握る（確信・決意のジェスチャー）
- ライティング：右上からの暖色サイドライト。顔の右半分がやや明るく照らされ、左半分が背景のダークネイビーに自然に溶け込むドラマチックな明暗
- 白インナーが暗い背景とのコントラストで自然に浮き上がり、グローや縁取りは不要
- 人物の左肩から頭部がパワーワード「10」の「0」の右半分〜「分」の文字に被るレイヤード構造
# 禁止事項
- テキスト要素は「朝のルーティン」「知らないと一生損する」「朝10分」「で、全部変わった。」の4つのみ。他のテキストは一切入れない
- 集中線、放射状ライン、パーティクル、星、キラキラ、吹き出し、矢印は入れない
- 文字の外側を囲む縁取り線（ストローク）は使わない
- 文字にグラデーション塗りやアウターグローは使わない
- 背景にパターン、イラスト素材、写真素材を入れない
- 右下15%の領域に重要情報を置かない（YouTube UIとの干渉を避けるため）
- パレットの6色以外を装飾に使わない（人物の肌・服は写実的な色でOK）
- デザインの指示テキスト、数値指定、注釈などを画像内に描画しない。画像には上記4つのコピーテキストだけが表示されること
# 出力形式
- アスペクト比：16:9（1280×720px）
- ファイル形式：PNG（高画質）
- 色空間：sRGB💡 設計のポイント
📝 プロンプト（コピペOK）
オンラインウェビナーの告知バナー（16:9）を生成してください。
# 基本情報
- イベント名: 「AIでゼロからデザイン」発売記念解説ウェビナー
- 日時: 2025年10月21日 21:30~22:30
- 登壇者: 「AIでゼロからデザイン」著者 川合卓也
- 参加費: 無料
# レイアウト
- 上部1/3: イベント名（大きく太いゴシック体）
- 中央: 登壇者の写真またはイラスト
- 下部: 日時 + CTAボタン「今すぐ申し込む」
- 左上に主催ロゴ枠
# デザインルール
- 背景: ダークネイビー（#0D1B2A）
- アクセント: エレクトリックブルー（#00B4D8）
- テキスト: 白（#FFFFFF）
- CTAボタン: オレンジ（#FF6B35）、角丸、ドロップシャドウ付き
- 全体にテック感のある幾何学ラインを薄く配置
# 品質
- 4K高画質、プロフェッショナルなイベントデザイン💡 設計のポイント
📝 プロンプト（コピペOK）
企業のプレスリリースに使用するキービジュアル（16:9）を生成してください。
# 要件
- 新サービス/新機能のローンチを伝える公式ビジュアル
- メディアに転載されても恥ずかしくない品質
# レイアウト
- 中央にプロダクトのビジュアル（モックアップ or シンボル）
- 上部にサービス名（英語 + 日本語）
- 下部に一行のタグライン
- 右下に企業ロゴ
# デザインルール
- 背景: 純白（#FFFFFF）or ライトグレー（#F5F5F5）
- メインカラー: 企業のブランドカラー
- フォント: セリフ体（上品さ）+ サンセリフ体（可読性）
- 余白を多く取る（画面の40%以上）
- 装飾は最小限。プロダクトが主役。
# 禁止事項
- 派手なグラデーション、グロー効果
- 3色以上のアクセントカラー
- 余白を埋める装飾
# サービス情報:
## 基本情報
- サービス名（英語）: FlowBoard AI
- サービス名（日本語）: フローボード AI
- 企業名: 株式会社ノヴァテック
- 企業ロゴ: 「N」をモチーフにしたシンプルなシンボルマーク + 社名テキスト
## ブランドカラー
- プライマリ: ディープブルー（#1A56DB）
- セカンダリ: ライトブルー（#E8F0FE）
## タグライン
「会議を、意思決定に変える。」
## プロダクトビジュアル
- ノートPCのモックアップ画面にダッシュボードUIを表示
- ダッシュボードには、議事録の自動要約・アクションアイテムの一覧・進捗グラフが並ぶ
- 画面は明るく清潔感のあるUI（白ベース、ディープブルーのアクセント）
- ノートPCの周囲には何も置かず、プロダクト単体が際立つ構図
## トーン
- 信頼感・先進性・クリーンな印象
- スタートアップの勢いよりも、エンタープライズ向けの堅実さを重視企業のプレスリリースに使用するキービジュアル（16:9）を生成してください。
# 要件
- 新サービス/新機能のローンチを伝える公式ビジュアル
- メディアに転載されても恥ずかしくない品質
# レイアウト
- 中央にプロダクトのビジュアル（モックアップ or シンボル）
- 上部にサービス名（英語 + 日本語）
- 下部に一行のタグライン
- 右下に企業ロゴ
# デザインルール
- 背景: 純白（#FFFFFF）or ライトグレー（#F5F5F5）
- メインカラー: 企業のブランドカラー
- フォント: セリフ体（上品さ）+ サンセリフ体（可読性）
- 余白を多く取る（画面の40%以上）
- 装飾は最小限。プロダクトが主役。
# 禁止事項
- 派手なグラデーション、グロー効果
- 3色以上のアクセントカラー
- 余白を埋める装飾
# サービス情報:
## 基本情報
- サービス名（英語）: PayStream
- サービス名（日本語）: ペイストリーム
- 企業名: ストリームフィナンシャル株式会社
- 企業ロゴ: 水の流れをモチーフにした曲線のシンボルマーク + 社名テキスト
## ブランドカラー
- プライマリ: エメラルドグリーン（#00A878）
- セカンダリ: ダークチャコール（#2D2D2D）
## タグライン
「経費精算を、ゼロ秒に。」
## プロダクトビジュアル
- スマートフォンのモックアップ（iPhone風、正面向き）を中央に配置
- 画面にはレシート読み取り → 自動仕訳完了の画面を表示
- スマートフォンの右斜め後ろに、薄くクレジットカード型のカードビジュアルを重ねる（奥行き演出）
- 背景はライトグレー（#F5F5F5）、影はごく薄いドロップシャドウのみ
## トーン
- スピード感・安心感・モダン
- 金融サービスとしての信頼性と、テック企業としての軽やかさの両立💡 設計のポイント
📝 プロンプト（コピペOK）
SNSで話題にさせるための新商品発表バナー（16:9）を生成してください。
# コンセプト
- 「えっ、何これ？」と思わせるビジュアルインパクト
- シェアしたくなる仕掛けを組み込む
# レイアウト
- 中央: 商品を大胆にクローズアップ（画面の60%を占める）
- 商品の周りに動きのある演出（飛沫、パーティクル、光の粒子）
- 上部に一言コピー（「○○、解禁。」「世界が変わる。」系の短文）
- 下部に発売日 or 「詳しくはプロフィールへ」
# デザインルール
- 背景: ブラック（#000000）で商品を際立たせる
- ライティング: 商品に集中するスポットライト
- テキスト: 白、極太ゴシック体
- 1色だけアクセントカラーを使用（商品のキーカラー）
# 商品情報:
## 基本情報
- 商品名: VELVET GLOW セラムファンデーション
- ブランド名: LUNARIS（ルナリス）
- カテゴリ: ベースメイク（リキッドファンデーション）
- 価格: ¥4,950（税込）
- 発売日: 2026年3月15日（日）
## 商品ビジュアル
- すりガラス質感のスクエアボトル（高さ約12cm）
- キャップはローズゴールドのメタリック仕上げ
- ボトルからテクスチャが一筋垂れている（とろみのある質感を見せる）
- 商品の周囲にファンデーションの飛沫がスローモーションで飛び散っている演出
- 細かなゴールドのパーティクル（ラメ粒子）が商品を取り囲むように漂う
## アクセントカラー
- ローズゴールド（#B76E79）
## コピー
- 上部: 「素肌超え、解禁。」
- 下部: 「2026.3.15 NEW RELEASE」
## トーン・世界観
- 高級感とモード感の共存
- 「塗ってる感ゼロなのに肌がツヤツヤ」という矛盾を一枚で表現
- 漆黒の背景にスポットライトが当たり、ボトルのすりガラスを透過する光が美しく映える💡 設計のポイント
📝 プロンプト（コピペOK）
note記事の見出し画像（1280×670px、16:9）を生成してください。
# 記事情報
- タイトル: 「結局、"仕組み"を作った人が勝つ」── 属人化をやめたら売上が3倍になった話
- カテゴリ: ビジネス
# 全体のデザインコンセプト
- 「余白の美」と「タイポグラフィの力」だけで成立する、デザイナーが作ったような1枚
- 参考トーン: 日経ビジネス、PIVOT、NewsPicks BOOK の表紙デザイン
- 情報量を極限まで削り、残った要素だけが強く刺さる構成
# レイアウト（グリッドシステム準拠）
- 12カラムグリッドを想定し、要素をグリッドに沿って整然と配置
- 左側8カラム（2/3）: タイトルテキストエリア
- 右側4カラム（1/3）: ビジュアルモチーフエリア
- タイトルエリアは画面の上下中央よりやや上（黄金比 1:1.618 の上側分割線付近）に配置
- 左下に著者情報、右下にカテゴリラベル
- 全要素の左端・右端の余白はそれぞれ画面幅の8%（約100px）
# タイポグラフィ（最重要）
## メインタイトル
- 1行目:「結局、"仕組み"を」
- 2行目:「作った人が勝つ」
- フォント: 極太角ゴシック体（Noto Sans JP Black 相当のウェイト900）
- サイズ: 72pt相当（画面高さの約11%）
- 文字色: ホワイト（#FFFFFF）
- 行間: 180%（広くとって呼吸させる）
- 字間（トラッキング）: -20（詰め気味で塊感を出す）
- 「仕組み」の2文字だけアクセントカラー（#4ECDC4）に変更し、視線のフックを作る
## サブタイトル
- テキスト:「── 属人化をやめたら売上が3倍になった話」
- フォント: ミディアムウェイトのゴシック体（Noto Sans JP Medium 相当のウェイト500）
- サイズ: 24pt相当（メインの1/3）
- 文字色: ライトグレー（#8E99A9）
- メインタイトルの下に16pxのスペースを空けて配置
- 「3倍」の部分のみホワイト（#FFFFFF）にして強調
## 著者名（左下）
- テキスト:「田中 陽介｜マネジメントの余白」
- フォント: Noto Sans JP Regular 相当、14pt
- 文字色: ライトグレー（#8E99A9）
- 画面下端から40px、左端から100pxの位置
## カテゴリラベル（右下）
- テキスト:「BUSINESS」
- フォント: 英字サンセリフ、レタースペーシング広め（+200）、12pt、大文字
- 文字色: ライトグレー（#8E99A9）
- 画面下端から40px、右端から100pxの位置
# ビジュアルモチーフ（右側1/3）
- 歯車が3つ噛み合った幾何学的な線画アイコン
- 描画スタイル: モノラインストローク（均一な線幅1.5px）、角は丸めない（シャープ）
- カラー: アクセントカラー（#4ECDC4）、opacity 60%
- 中央の歯車が最も大きく（直径約180px）、上下に小さな歯車（直径約100px）が噛み合う
- 中央の歯車の中心に小さな人のシルエットアイコン（仕組み×人の象徴）
- アイコン全体を画面右側の上下中央に配置
- アイコンの背後に、同じアクセントカラーの極めて薄い円形（opacity 5%、直径300px）を1つ置き、奥行きを演出
# カラーパレット（厳密に3色 + 背景色）
1. 背景: ディープネイビー（#0F1923）── 真っ黒すぎず、深みのあるインクブラック
2. メインテキスト: ホワイト（#FFFFFF）
3. サブテキスト・著者名: ライトグレー（#8E99A9）── 情報の階層を作る
4. アクセント: ティールグリーン（#4ECDC4）── 「仕組み」の文字 + ビジュアルモチーフのみに限定使用
# デザインディテール
- 背景にごく薄いノイズテクスチャを重ねる（opacity 2〜3%、モノクロ、粒子細かめ）。フラットすぎず、紙のような質感を加える
- メインタイトルの下に、アクセントカラー（#4ECDC4）の細い水平線（幅80px、高さ2px）を装飾として配置。サブタイトルとの区切りを兼ねる
- テキストにはドロップシャドウをつけない（クリーンさを優先）
- すべての角は直角（角丸は使わない）。幾何学的な緊張感を維持
# 禁止事項
- 写真素材、リアルな画像、AI生成風の3Dレンダリング
- グラデーション背景
- 4色以上の使用（上記パレット厳守）
- 丸ゴシック・手書き風フォント（カジュアルになりすぎる）
- 影、ベベル、エンボスなどの立体装飾
- テキストの中央揃え（すべて左揃えで統一）
- ビジュアルモチーフを目立たせすぎること（あくまでタイポグラフィが主役）💡 設計のポイント
📝 プロンプト（コピペOK） 下記はLovartやSkyworkを使えば1度に2枚生成してくれます。
Web広告用のクリエイティブバナー（1200×675px、16:9）を、A/Bテスト用に2パターン生成してください。
# 商材情報
- 商品/サービス名: FOCUSMODE（フォーカスモード）
- カテゴリ: タスク管理 × 集中力トラッキング SaaS
- ターゲット: 25〜39歳の会社員・フリーランス。マルチタスクに追われ「今日も何もできなかった」と感じている層
- 訴求ポイント: AIが集中できる時間帯を分析し、タスクを自動で最適配置。導入企業の平均で深い集中時間が1日あたり2.3時間増加
- CTA: 「14日間無料で試す」
- ブランドカラー: インディゴ（#3D5AFE）
- ロゴ: 「F」を時計の針に見立てたシンボルマーク + 「FOCUSMODE」テキスト、白色版
# パターンA（感情訴求型 ── Before/After の空気感で惹きつける）
## ビジュアル
- 画面左半分: 夕方のやわらかい自然光が差し込むデスクで、一人の30代男性が穏やかな表情でノートPCに向かっている写真風イラスト
- デスクは整頓されており、コーヒーが1杯だけ置いてある（余裕のある空気感）
- 画面全体にうっすら暖色のカラーフィルター（色温度高め、#FFF8F0 のオーバーレイ opacity 10%）
## コピー
- メインコピー（画面右上寄り、最大2行）:
「"今日、集中できた"が
毎日になる。」
- フォント: 太ゴシック体（ウェイト800）、36pt相当
- 文字色: ダークチャコール（#1A1A2E）
- メインコピーの下に8pxの余白を空け、サブコピー1行:
「AIがあなたの集中リズムを学習します」
- サブコピー: レギュラーウェイト、16pt相当、ミディアムグレー（#6B7280）
## 配色
- 背景: ウォームホワイト（#FFFDF7）
- テキスト: ダークチャコール（#1A1A2E）+ ミディアムグレー（#6B7280）
- CTAボタン: コーラルオレンジ（#FF6B54）── 暖色系の中でCTAだけ彩度を上げて視線を集める
## CTAボタン
- テキスト: 「14日間無料で試す」白文字（#FFFFFF）、ボールド、14pt相当
- 形状: 角丸長方形（角丸8px）、幅220px × 高さ48px
- 配置: 画面下部中央やや右（右側のコピーエリアと縦軸を揃える）
- ボタン下に極小テキスト（10pt、グレー）: 「クレジットカード不要」
## ロゴ
- 左下に白色版ロゴを小さく配置（高さ20px相当）、opacity 70%で主張しすぎない
# パターンB（数字訴求型 ── 1つの数字で理性に訴える）
## ビジュアル
- 画面右側にFOCUSMODEのダッシュボードUI画面をモックアップ表示（ノートPC、斜め15°アングル）
- ダッシュボード内容: 1週間の集中時間を示す棒グラフ（日ごとに右肩上がり）、今日のタスク最適配置タイムライン、集中スコア「87」の円形ゲージ
- UIカラーはインディゴ（#3D5AFE）をキーカラーにした白ベースの清潔なデザイン
- モックアップは画面右端から少しはみ出す配置（ダイナミックさ + 画面の外にも情報がある印象）
## コピー
- アイキャッチ数字（画面左上、最大級サイズ）:
「+2.3h」
- フォント: 極太ゴシック体（ウェイト900）、80pt相当
- 文字色: インディゴ（#3D5AFE）
- 数字の直下にメインコピー1行:
「1日の"深い集中"が平均2.3時間増加」
- フォント: ミディアムウェイト、20pt相当、ホワイト（#FFFFFF）
- さらに下にサブコピー1行:
「導入企業420社の実績データ」
- フォント: レギュラー、14pt相当、ライトグレー（#94A3B8）
## 配色
- 背景: ダークネイビー（#0B1120）
- テキスト: ホワイト（#FFFFFF）+ ライトグレー（#94A3B8）
- アクセント: インディゴ（#3D5AFE）── 数字とUI内のキーカラーのみ
- CTAボタン: ブライトグリーン（#00E676）── 暗い背景上で最も視認性が高い色
## CTAボタン
- テキスト: 「14日間無料で試す」ダークネイビー文字（#0B1120）、ボールド、14pt相当
- 形状: 角丸長方形（角丸8px）、幅220px × 高さ48px
- 配置: 画面下部左寄り（コピーエリアと縦軸を揃える）
- ボタン下に極小テキスト（10pt、ライトグレー）: 「クレジットカード不要」
## ロゴ
- 左下に白色版ロゴを小さく配置（高さ20px相当）、opacity 80%
# 共通ルール（A/B両パターン厳守）
## テキスト占有率
- テキストの総面積は画面全体の20%以下に厳守（Meta / Google 広告規約対応）
- コピー要素は最大3つまで（アイキャッチ + メインコピー + サブコピー）
## 視線誘導
- Z型動線: アイキャッチ（左上）→ ビジュアル（右）→ CTA（下部）の順に目が流れる設計
## フォント統一
- 日本語: Noto Sans JP 相当の角ゴシック体
- 英字・数字: Inter または DM Sans 相当のジオメトリックサンセリフ
- 全テキスト左揃え（中央揃え禁止）
## 品質
- 全要素がピクセルグリッドに吸着したシャープなレンダリング
- テキストにアンチエイリアスを適用し、低解像度環境でもジャギーを防止
- 書き出し: PNG、sRGB、1200×675px
## 禁止事項
- テキスト占有率20%超過
- 4色以上の同時使用（背景・テキスト・サブテキスト・アクセントの4色以内）
- 過剰な装飾（グロー、ドロップシャドウ、ベベル、パターン背景）
- CTAボタン以外に角丸を使用しない
- 商品と無関係なストック写真素材
- 異なるフォントファミリーの混在（上記指定ファミリーのウェイト違いのみ許可）💡 設計のポイント
📝 プロンプト（コピペOK）
電子書籍またはPDF資料の表紙デザインを生成してください。
# 書籍情報
- タイトル: 「伝え方よりも、聞き方。」
- サブタイトル: 相手が自分から動き出す「問いかけ」の技術
- 著者名: 藤原 悠人（ふじわら ゆうと）
- ジャンル: ビジネス書（マネジメント・コミュニケーション）
# 全体のデザインコンセプト
- 書店のビジネス書棚で平積みされたとき、周囲のゴチャついた表紙群の中で「静かに目に留まる」引き算のデザイン
- 参考トーン: 『イシューからはじめよ』『LISTEN』『エッセンシャル思考』の表紙が持つ、余白と文字の力だけで成立する構成
- サムネイル（Kindleストア一覧サイズ）でもタイトルが一瞬で読める文字サイズと配色
# サイズ・比率
- 縦長 2:3（1600×2400px）
- 書き出し: PNG、sRGB、350dpi相当
# レイアウト（縦方向4分割）
## 上部30%（タイトルエリア）
- タイトル: 「伝え方よりも、聞き方。」
- 2行組み:
- 1行目:「伝え方よりも、」
- 2行目:「聞き方。」（2行目をやや大きく、行末の「。」まで含めて塊として見せる）
- フォント: 極太角ゴシック体（Noto Sans JP Black 相当、ウェイト900）
- サイズ: 1行目 80pt相当 / 2行目 96pt相当（2行目を約1.2倍にしてクライマックス感を出す）
- 文字色: ホワイト（#FFFFFF）
- アクセント: 「聞」の1文字だけシグナルイエロー（#FFD600）に変更 ── 書籍の核心を1文字で暗示する視線のフック
- 行間: 160%
- 字間（トラッキング）: -30（詰め気味で塊感）
- 配置: 左揃え、左端マージン80px、上端マージン100px
## 中央40%（ビジュアルエリア）
- モチーフ: 2つの吹き出しアイコンを幾何学的にデザイン
- 左下に大きな吹き出し（台形型、角丸なし、シャープ）── 「話す側」の象徴、色はダークネイビー背景と同化するやや明るいネイビー（#1E3050）、輪郭線のみ（ストローク2px、#3A5070）
- 右上にやや小さな吹き出し（同形状）── 「聞く側」の象徴、塗りをシグナルイエロー（#FFD600）で施し、唯一の色面として画面の主役にする
- 2つの吹き出しは一部が重なり合い、対話を示唆する構図
- 黄色い吹き出しの中に「？」をホワイトで小さく配置（問いかけの象徴）
- 描画スタイル: フラット、モノライン、装飾なし
- ビジュアル全体を画面の水平中央に配置し、左右に均等な余白を確保
## 下部15%（サブタイトルエリア）
- テキスト: 相手が自分から動き出す「問いかけ」の技術
- フォント: ゴシック体ミディアムウェイト（Noto Sans JP Medium 相当、ウェイト500）
- サイズ: 28pt相当
- 文字色: ライトグレー（#8E99A9）
- 「問いかけ」の部分のみホワイト（#FFFFFF）にして階層を作る
- 配置: 左揃え、左端マージン80px（タイトルと縦軸を揃える）
## 最下部15%（著者名 + 帯エリア）
### 帯デザイン
- 画面最下部に高さ15%の帯を配置
- 帯の背景色: シグナルイエロー（#FFD600）── アクセントカラーと統一し、表紙全体の色彩を引き締める
- 帯の上端に1pxのホワイトライン（帯と本体の境界を品よく区切る）
- 帯内の左側:
- テキスト:「"聞く"だけでチームが変わる ── 3万部突破」
- フォント: 太ゴシック体（ウェイト700）、20pt相当
- 文字色: ディープネイビー（#0A1628）
- 「3万部突破」の部分のみウェイト900に上げて強調
- 帯内の右側:
- 著者名:「藤原 悠人」
- フォント: ミディアムウェイト、18pt相当
- 文字色: ディープネイビー（#0A1628）
- 著者名の上に極小テキスト（12pt、#3A3A3A）:「元Google Japan マネージャー」── 権威性の付与
# カラーパレット（厳密に3色）
1. ディープネイビー（#0A1628）── 背景
2. ホワイト（#FFFFFF）── メインテキスト
3. シグナルイエロー（#FFD600）── アクセント文字「聞」、ビジュアルモチーフ、帯
# デザインディテール
- 背景にごく薄いノイズテクスチャを重ねる（opacity 2%、モノクロ、粒子細かめ）── 印刷物のような質感
- タイトルエリアとビジュアルエリアの間に24pxの余白
- ビジュアルエリアとサブタイトルエリアの間に24pxの余白
- 全テキスト要素の左端を80pxのマージンラインに揃え、縦の軸を通す
- 帯を除く本体部分の右端マージンも80px以上を確保
# 品質要件
- 高解像度（1600×2400px、350dpi相当）
- Kindleストア・Amazonの書影サムネイル（150×225px程度）に縮小してもタイトルの「聞き方。」と黄色のアクセントが判別できること
- 書店の平積み・面陳列で周囲の表紙と並んでも遜色ない品質
# 禁止事項
- 写真素材、リアルな人物画像、AI生成風の3Dレンダリング
- グラデーション背景
- 4色以上の使用
- 丸ゴシック・手書き風・明朝体フォント
- 影、ベベル、エンボス、光彩などの立体装飾
- テキストの中央揃え（帯内テキストも含め全て左揃え）
- ビジュアルモチーフの過度な複雑化（パーツ数は最大5個以内）💡 設計のポイント
📝 プロンプト（コピペOK）
BtoB SaaS製品のダッシュボード画面UIデザインを生成してください。
# プロダクト概要
- サービス名: DealPulse（ディールパルス）
- 用途: B2B営業パイプライン管理 × 売上予測AI
- ターゲットユーザー: SaaS企業の営業マネージャー・VP of Sales（チーム規模10〜50名を管掌）
- 主な課題: パイプラインの数字がスプレッドシートに散在し、週次の売上予測に毎回2時間かかる。リアルタイムで受注確度が可視化されず、期末に数字がブレる
# 画面仕様
- 解像度: 1440×900px（標準的なノートPC表示想定）
- 表示状態: ダッシュボードのホーム画面（ログイン直後に表示されるデフォルトビュー）
- テーマ: ライトモード
- 書き出し: PNG、sRGB
# 全体のデザインコンセプト
- 「開いた瞬間、今月の着地が分かる」── 数字の視認性と情報階層が最優先
- 参考トーン: Linear、Notion、Attio、Salesforce Lightning（のクリーンな部分）のUI品質
- 装飾ゼロ、データが語るUIを徹底
# 画面構成（詳細レイアウト）
## ① 左サイドバー（幅240px、折りたたみ時64px）
### 構造
- 最上部: DealPulseロゴ（シンボルマーク + テキスト）、高さ64px、左右パディング20px
- ロゴ下に1pxのディバイダーライン（#E2E8F0）
- ナビゲーション項目（上から順に）:
1. ダッシュボード（現在のページ ── アクティブ状態）
2. パイプライン
3. 取引一覧
4. 顧客企業
5. レポート
6. AIフォーキャスト
- 各項目: アイコン（20×20px、ストローク系）+ テキスト（14px、ミディアムウェイト）
- 項目間の余白: 4px
- 各項目の高さ: 40px、左右パディング16px、角丸8px
- 下部に固定:
- ディバイダーライン
- 設定（歯車アイコン）
- ユーザー情報: アバター（32px円形）+ 名前「田中 健太」+ 役職「Sales Manager」を2行で小さく表示
### アクティブ状態のスタイル
- 背景: ブランドカラーの極薄tint（#EEF2FF）
- テキスト + アイコン: ブランドカラー（#4F46E5）
- 左端に3px幅のブランドカラー縦バーを表示
### 非アクティブ状態のスタイル
- テキスト: ダークグレー（#475569）
- アイコン: ミディアムグレー（#94A3B8）
- ホバー時: 背景（#F1F5F9）
## ② ヘッダー（高さ64px、サイドバー右側に横いっぱい）
### 左側
- 現在のページ名:「ダッシュボード」（20px、ウェイト700、#0F172A）
- その下に日付コンテキスト:「2026年2月15日（日）── 2月度 残り13日」（13px、#64748B）
### 中央
- 検索バー: 幅360px、高さ40px、角丸8px、背景#F1F5F9、ボーダーなし
- プレースホルダ: 虫眼鏡アイコン +「取引名・企業名・担当者で検索…」（14px、#94A3B8）
### 右側（右端から20pxマージン、各要素間12px）
- 通知ベルアイコン（未読3件を示す赤バッジ付き、バッジ色 #EF4444、バッジ内テキスト白）
- ユーザーアバター（36px円形）── サイドバーと同じ田中健太のアバター
## ③ メインエリア（サイドバー右、ヘッダー下の全領域）
### 全体設定
- 背景: ライトグレー（#F8FAFC）
- 内側パディング: 上24px、左右24px、下24px
- カード間の余白（gap）: 16px
### ③-A 上段: KPIカード4枚（横並び、均等幅）
各カードの共通仕様:
- 背景: ホワイト（#FFFFFF）
- 角丸: 12px
- シャドウ: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)
- 内側パディング: 24px
- 高さ: 120px
#### カード1: 今月パイプライン総額
- ラベル:「パイプライン総額」（13px、ミディアムウェイト、#64748B）
- 数値:「¥284.5M」（32px、ウェイト700、#0F172A、tabular figures）
- 前期比:「↑ 12.3% vs 先月」（13px、グリーン #10B981、上向き矢印アイコン付き）
- ミニグラフ: 右下に幅80px × 高さ32pxのスパークライン（過去6ヶ月推移、ブランドカラー #4F46E5、線幅1.5px、エリア塗り opacity 10%）
#### カード2: 受注見込み（AI予測）
- ラベル:「AI受注予測（今月）」（13px、#64748B）
- 数値:「¥142.8M」（32px、ウェイト700、#0F172A）
- 信頼度:「信頼度 87%」（13px、ブランドカラー #4F46E5、盾アイコン付き）
- ミニグラフ: 過去6ヶ月の予測vs実績の小さなバー比較（幅80px × 高さ32px）
#### カード3: 今月受注件数
- ラベル:「受注件数」（13px、#64748B）
- 数値:「23件」（32px、ウェイト700、#0F172A）
- 前期比:「↑ 4件 vs 先月」（13px、グリーン #10B981）
- ミニグラフ: 過去6ヶ月の棒グラフ（幅80px × 高さ32px、ブランドカラー、当月のみ濃く他は opacity 30%）
#### カード4: 平均リードタイム
- ラベル:「平均リードタイム」（13px、#64748B）
- 数値:「18.2日」（32px、ウェイト700、#0F172A）
- 前期比:「↓ 3.1日短縮」（13px、グリーン #10B981、下向き矢印 ── 短縮は良い方向なのでグリーン）
- ミニグラフ: 過去6ヶ月の折れ線（右肩下がりの改善傾向、幅80px × 高さ32px）
### ③-B 中段左: 折れ線グラフ（横幅60%）
- カードタイトル:「月次パイプライン推移」（16px、ウェイト600、#0F172A）
- タイトル右にドロップダウン:「過去12ヶ月 ▼」（セレクトUI、13px）
- グラフエリア: 幅いっぱい × 高さ280px
- X軸: 2025年3月〜2026年2月（月ラベル、13px、#94A3B8）
- Y軸: 金額（¥0M〜¥350M、50M刻み、13px、#94A3B8）
- グリッドライン: 水平のみ、#F1F5F9、破線
- 折れ線1（パイプライン総額）: ブランドカラー（#4F46E5）、線幅2px、データポイントに4pxの丸ドット、線下にエリア塗り（ブランドカラー opacity 8%）
- 折れ線2（受注額）: ティールグリーン（#14B8A6）、線幅2px、破線スタイル
- 凡例: グラフ右上に「● パイプライン総額 ● 受注額」（色丸8px + テキスト13px）
- ツールチップ表示例（2026年1月のドット上に）: 白背景のフローティングカード、角丸8px、シャドウ付き、中に「2026年1月 / パイプライン ¥253.2M / 受注 ¥128.5M」
### ③-C 中段右: ドーナツチャート（横幅40%）
- カードタイトル:「パイプライン ステージ分布」（16px、ウェイト600、#0F172A）
- グラフエリア: 高さ280px（折れ線グラフと高さを揃える）
- ドーナツ: 外径180px、内径100px、ストローク間に2pxの白ギャップ
- 中央テキスト:「¥284.5M」（20px、ウェイト700、#0F172A）+ その下に「全ステージ合計」（12px、#94A3B8）
- セグメント（5つ、12時の位置から時計回り）:
1. 初回商談（#4F46E5 ブランドカラー、28%）
2. 提案済み（#7C3AED パープル、22%）
3. 見積提出（#14B8A6 ティール、20%）
4. 最終交渉（#F59E0B アンバー、18%）
5. 口頭内諾（#10B981 グリーン、12%）
- 凡例: ドーナツ右横に縦並びで表示、各行に色丸（10px）+ ステージ名（13px、#475569）+ 金額（13px、#0F172A、ウェイト600）+ パーセンテージ（13px、#94A3B8）
### ③-D 下段: データテーブル（横幅100%）
- カードタイトル:「直近の取引更新」（16px、ウェイト600、#0F172A）
- タイトル右に「すべて表示 →」リンク（13px、ブランドカラー #4F46E5）
- テーブルヘッダー: 背景#F8FAFC、テキスト12px大文字レタースペーシング広め、ウェイト600、#64748B
- カラム構成:
1. 取引名（左揃え、14px、ウェイト500、#0F172A、ホバーでブランドカラーに変化）
2. 顧客企業（14px、#475569）
3. 担当者（アバター20px + 名前14px）
4. 金額（右揃え、14px、ウェイト600、tabular figures、#0F172A）
5. ステージ（ピル型バッジ、角丸full、各ステージ対応色のtint背景 + 濃い文字、12px）
6. AI受注確度（プログレスバー幅60px + パーセンテージ、バー色はブランドカラー）
7. 次回アクション予定日（14px、#475569、3日以内は赤文字 #EF4444）
- 表示行数: 5行
- サンプルデータ（上から）:
1. 「クラウド基盤リプレイス案件」/ 株式会社テクノア / 鈴木 翔太 / ¥42.0M / 最終交渉（アンバーバッジ）/ 92% / 2026-02-17（赤文字）
2. 「全社SFA導入プロジェクト」/ グロースパートナーズ株式会社 / 佐藤 美咲 / ¥28.5M / 提案済み（パープルバッジ）/ 67% / 2026-02-20
3. 「マーケ部門分析ツール」/ 株式会社メディアブリッジ / 田村 健一 / ¥15.2M / 見積提出（ティールバッジ）/ 78% / 2026-02-19
4. 「人事評価システム更改」/ サンライズホールディングス / 中村 あかり / ¥22.8M / 初回商談（ブランドカラーバッジ）/ 34% / 2026-02-25
5. 「EC基盤マイクロサービス化」/ 株式会社コマースラボ / 山田 大輔 / ¥38.0M / 口頭内諾（グリーンバッジ）/ 95% / 2026-02-16（赤文字）
- 行の高さ: 56px
- 行間ボーダー: 1px、#F1F5F9
- ホバー行: 背景 #F8FAFC → #F1F5F9 に変化
# カラーパレット
## ベースカラー
- 背景: #F8FAFC
- カード背景: #FFFFFF
- ボーダー / ディバイダー: #E2E8F0
- テキスト（プライマリ）: #0F172A
- テキスト（セカンダリ）: #475569
- テキスト（ターシャリ）: #94A3B8
## ブランド・アクセントカラー
- ブランドカラー: インディゴ（#4F46E5）── ナビゲーションアクティブ、グラフ主系列、CTAボタン、リンクに限定使用
- ブランドtint: #EEF2FF（アクティブ項目の背景、バッジの薄い背景）
## セマンティックカラー
- ポジティブ（前期比改善、受注確度高）: #10B981
- ネガティブ（前期比悪化、期限迫り）: #EF4444
- 警告: #F59E0B
- 情報: #3B82F6
## チャート専用カラー（ドーナツ・凡例）
- #4F46E5 / #7C3AED / #14B8A6 / #F59E0B / #10B981
# タイポグラフィ
- フォントファミリー: Inter（英数字・UI）、Noto Sans JP（和文）
- 数値表示: tabular figures（等幅数字、金額やパーセンテージの桁が揃う）
- サイズスケール: 12px / 13px / 14px / 16px / 20px / 32px の6段階のみ使用
- ウェイト: 400（Regular）/ 500（Medium）/ 600（SemiBold）/ 700（Bold）の4段階
# コンポーネント共通仕様
- カード角丸: 12px
- カードシャドウ: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)
- ボタン角丸: 8px
- バッジ角丸: full（pill型）
- カード間ギャップ: 16px
- カード内パディング: 24px
- アイコンサイズ: 20×20px（ナビ、テーブル内）、16×16px（インライン）
- アイコンスタイル: ストローク系（Lucide Icons / Phosphor Icons 相当）、線幅1.5px
# 禁止事項
- ダークモードとの混在（ライトモード統一）
- グラデーション背景やカード背景
- 5色以上のチャートカラー
- 影の多重適用やぼかし過多のシャドウ
- 装飾用のイラスト・3Dオブジェクト・背景パターン
- 丸ゴシック・手書き風フォント
- テーブルの縦罫線（横罫線のみ許可）
- データのない空白エリア（全セルにサンプルデータを入れること）💡 設計のポイント
📝 プロンプト（コピペOK）
スマートフォンアプリのUI画面を3画面セットで生成してください。3画面を横並びに並べたプレゼンテーション形式で、各画面の間隔は40px、背景はライトグレー（#F0F0F0）とします。
# アプリ概要
- アプリ名: muji time（ムジタイム）
- カテゴリ: マインドフルネス瞑想 × 睡眠改善
- コンセプト: 「何もしない時間を、いちばん贅沢にする」── 呼吸・瞑想・睡眠導入を音声ガイドでサポートするウェルネスアプリ
- ターゲット: 25〜40歳の働く男女。日中のストレスが高く、夜はスマホを触り続けて寝落ちする生活を変えたい層。UIの美しさやブランドの世界観を重視するデザインリテラシーの高いユーザー
- 利用シーン: 朝の通勤前5分、昼休みのリフレッシュ、就寝前のベッドの中
# デバイス仕様
- 端末: iPhone 15 Pro（393×852pt、3x Retina）
- OS: iOS 17準拠（Dynamic Island、SafeArea、ステータスバーの高さ59pt考慮）
- 書き出し: 3画面横並びの1枚画像、PNG、sRGB
# 共通デザインシステム
## カラーパレット（4色 + グレー階層、厳密に5色以内）
1. ブランドカラー: ディープインディゴ（#2D2B55）── 夜空・静寂の象徴、ヘッダーアクセント・アクティブタブ・主要ボタンに使用
2. アクセント: ソフトラベンダー（#A78BFA）── 進捗リング・ハイライト・再生中インジケーターに限定使用
3. 背景: オフホワイト（#FAFAF8）── 画面背景
4. カード背景: ホワイト（#FFFFFF）
5. テキスト: チャコール（#1E1E2E）
### グレー階層（上記5色の範囲内で運用）
- セカンダリテキスト: #6B7280
- ターシャリテキスト / プレースホルダ: #9CA3AF
- ディバイダー / ボーダー: #E5E7EB
- 非アクティブタブアイコン: #9CA3AF
## タイポグラフィ（SF Pro準拠）
- Large Title: 34pt、ウェイト700
- Title 2: 22pt、ウェイト700
- Title 3: 20pt、ウェイト600
- Headline: 17pt、ウェイト600
- Body: 17pt、ウェイト400
- Subheadline: 15pt、ウェイト400
- Caption 1: 12pt、ウェイト400
- Caption 2: 11pt、ウェイト400
- 数値表示（タイマー等）: SF Mono、tabular figures
## コンポーネント共通仕様
- カード角丸: 16px
- カードシャドウ: 0 2px 8px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.02)
- ボタン角丸: 24px（pill型）
- ボタン高さ: 56pt（プライマリ）、44pt（セカンダリ）
- カード間ギャップ: 12px
- 画面左右マージン: 20px
- アイコン: SF Symbols準拠、ストロークスタイル、24×24pt
## 下部タブバー（全画面共通）
- 高さ: 83pt（SafeArea含む）
- 背景: ホワイト（#FFFFFF）、上端に1pxのディバイダー（#E5E7EB）
- ブラー: background-blur 20px（半透明ガラス効果、opacity 95%）
- タブ数: 4つ（5アイコン以内ルール厳守）
1. ホーム（house.fill アイコン）
2. 見つける（magnifyingglass アイコン）
3. 記録（chart.bar.fill アイコン）
4. マイページ（person.fill アイコン）
- アクティブタブ: アイコン + ラベル共にディープインディゴ（#2D2B55）、アイコンはfilled
- 非アクティブタブ: アイコン + ラベル共にグレー（#9CA3AF）、アイコンはoutline
- ラベル: 10pt、ウェイト500
# 画面1: ホーム画面（タブ「ホーム」がアクティブ）
## ステータスバー + Dynamic Island
- iOS標準のステータスバー表示（時刻、電波、Wi-Fi、バッテリー）
- Dynamic Island: デフォルトのコンパクト表示
## ヘッダー（SafeArea下、スクロール固定なし）
- 左上: 挨拶テキスト
- 1行目:「おかえりなさい、」（15pt、ウェイト400、#6B7280）
- 2行目:「美咲さん」（34pt、Large Title、ウェイト700、#1E1E2E）
- 右上: 通知ベルアイコン（24pt、#1E1E2E）+ 未読ドット（8px、ソフトラベンダー #A78BFA）
## 今日のサマリーカード（ヘッダー下16px）
- 横幅100%（左右マージン20px）、高さ100pt
- 背景: ディープインディゴ（#2D2B55）のグラデーション（左下 #2D2B55 → 右上 #3D3B6E、ごく微細なグラデーション）
- 角丸: 16px
- 内容（横並び3カラム、均等分割）:
- 左:「瞑想」アイコン + 「3日連続」（ホワイト、15pt）
- 中央:「合計時間」+「1h 42m」（ホワイト、20pt、ウェイト700）
- 右: 週間達成率のミニリングゲージ（直径48pt、ソフトラベンダーのストローク、進捗71%表示、中央に「71%」ホワイト12pt）
## おすすめセッション（カード型横スクロール）
- セクションタイトル:「今のあなたにおすすめ」（20pt、Title 3、ウェイト600、#1E1E2E）
- 右端に「すべて見る」（15pt、#A78BFA）
- カード仕様（横スクロール、3枚表示、左マージン20px起点、カード間12px）:
- 各カード幅: 200pt、高さ: 240pt
- 上部60%: アブストラクトなグラデーションビジュアル（各セッションのムードに合わせた抽象的な色面 ── 瞑想=藍色の波紋、呼吸=淡い円の拡縮イメージ、睡眠=深紫のぼんやりした光）、角丸上部のみ16px
- 下部40%: ホワイト背景、パディング12px
- セッション名:「深い呼吸の5分間」（15pt、ウェイト600、#1E1E2E）
- 時間 + カテゴリ:「5分 · 呼吸法」（13pt、#6B7280）
- 右下に再生ボタンアイコン（円形32pt、背景 #2D2B55、三角形ホワイト）
- カード全体角丸: 16px、シャドウ適用
## 最近のセッション（縦リスト）
- セクションタイトル:「最近のセッション」（20pt、Title 3、ウェイト600）
- リスト形式（カード型、縦並び、間隔8px）、2〜3件表示:
- 各行: 高さ72pt、白カード、角丸16px
- 左: 48pt角丸12pxのサムネイル（セッションのムードカラー塗り + 小さなアイコン）
- 中央:
- セッション名（15pt、ウェイト600、#1E1E2E）
- 「昨日 · 10分 · 瞑想」（13pt、#6B7280）
- 右: 再生アイコン（#9CA3AF）
- サンプルデータ:
1. 「夜の静寂瞑想」/ 昨日 · 10分 · 瞑想
2. 「朝のマインドフル呼吸」/ 2日前 · 5分 · 呼吸法
# 画面2: 詳細画面（セッション詳細 ── 「深い呼吸の5分間」をタップした状態）
## 画面遷移の想定
- ホーム画面のカードからシームレスなhero animationで遷移。カード上部のビジュアルが画面上部に拡大する動きを想定したレイアウト
## 上部ビジュアル（画面上部40%）
- ホームのカードビジュアルが画面幅に拡張された、アブストラクトなグラデーション背景（藍色 #2D2B55 → インディゴブルー #4338CA、柔らかい円形の光が中央にぼんやり浮かぶ）
- 左上に戻るボタン:「chevron.left」アイコン、ホワイト、円形背景（白 opacity 15%、ブラー効果）
- 右上にお気に入りボタン:「heart」アウトラインアイコン、ホワイト、同様の円形背景
- ビジュアル下端は24pxの角丸で本文エリアに被さる（カード型に下のコンテンツが上にオーバーラップする処理）
## コンテンツエリア（画面下部60%、白背景、上端角丸24px）
### セッション情報（上部パディング24px）
- タイトル:「深い呼吸の5分間」（22pt、Title 2、ウェイト700、#1E1E2E）
- タグ横並び（タイトル下8px）:
- ピル型バッジ3つ、間隔8px
- 「呼吸法」（背景 #EEF2FF、テキスト #2D2B55、12pt）
- 「5分」（背景 #F3F4F6、テキスト #6B7280）
- 「初心者向け」（背景 #F3F4F6、テキスト #6B7280）
- 評価:「★ 4.8（2,340件）」（15pt、#6B7280、星はソフトラベンダー #A78BFA）
### 説明文（タグ下16px）
- テキスト（17pt、Body、ウェイト400、#1E1E2E、行間160%）:
「腹式呼吸をベースに、吸う・止める・吐くのリズムを音声ガイドに合わせて行います。自律神経を整え、わずか5分で頭のモヤが晴れる感覚を体験してください。」
- 2行目以降は折りたたみ:「続きを読む」（15pt、#A78BFA）
### ガイド担当（説明文下20px）
- 横並び: アバター（44pt円形）+ 名前「瞑想ガイド：高橋 あゆみ」（15pt、ウェイト600）+ 「認定インストラクター」（13pt、#6B7280）
### セッションの流れ（ガイド下20px）
- セクションタイトル:「セッションの流れ」（17pt、Headline、ウェイト600）
- タイムラインUI（縦のライン + ドット）:
1. 0:00 – 導入（30秒）「姿勢を整え、目を閉じます」
2. 0:30 – 腹式呼吸（3分）「4秒吸って、4秒止めて、6秒吐く」
3. 3:30 – クールダウン（1分）「自然な呼吸に戻ります」
4. 4:30 – 振り返り（30秒）「今の心地よさを感じてください」
- 各ステップ: ドット（8pt、#A78BFA）+ 縦ライン（2px、#E5E7EB）+ テキスト（15pt）
### 再生ボタン（画面下部固定、タブバーの上）
- SafeAreaの上に固定フッター（高さ80pt、白背景、上端シャドウ 0 -2px 8px rgba(0,0,0,0.04)）
- ボタン: 横幅（左右マージン20px）いっぱい、高さ56pt、角丸24px（pill型）
- 背景: ディープインディゴ（#2D2B55）
- テキスト:「セッションを始める」（17pt、ウェイト600、ホワイト）
- 左にplay.fill アイコン（ホワイト）
# 画面3: プロフィール画面（タブ「マイページ」がアクティブ）
## ヘッダー（スクロール領域内、固定なし）
- 中央:「マイページ」（17pt、Headline、ウェイト600、#1E1E2E）
- 右上: 歯車アイコン（gearshape、24pt、#1E1E2E）
## プロフィールカード（ヘッダー下16px）
- 横幅100%、白カード、角丸16px、パディング24px
- 中央揃え:
- アバター: 80pt円形、薄いボーダー（2px、#E5E7EB）、女性のイラストアバター
- 名前:「佐藤 美咲」（20pt、ウェイト700、#1E1E2E）
- 利用開始:「2025年9月から利用中」（13pt、#6B7280）
## 統計カード（プロフィール下12px）
- 横幅100%、白カード、角丸16px
- 内部を3等分（縦のディバイダー1px #E5E7EB で区切り）
- 各セル中央揃え、パディング20px:
1. 「累計セッション」/「127回」（22pt、ウェイト700、#2D2B55）
2. 「合計時間」/「18h 35m」（22pt、ウェイト700、#2D2B55）
3. 「連続日数」/「12日」（22pt、ウェイト700、#2D2B55）
- ラベルは12pt、#6B7280、数値の上に配置
## 週間アクティビティ（統計カード下12px）
- 白カード、角丸16px、パディング20px
- タイトル:「今週のアクティビティ」（17pt、Headline、ウェイト600）
- 7日間の棒グラフ（月〜日、各棒の幅28pt、角丸上部8px、間隔8px）
- 月: 10min（#A78BFA）
- 火: 15min（#A78BFA）
- 水: 0min（#E5E7EB、未実施）
- 木: 20min（#A78BFA）
- 金: 5min（#A78BFA）
- 土: 25min（#A78BFA、最長 = 100%の高さ）
- 日: 今日、まだ未実施（#E5E7EB、破線ボーダー）
- X軸ラベル: 曜日（12pt、#6B7280）、今日（日）のみブランドカラー（#2D2B55、ウェイト600）
## メニューリスト（アクティビティ下12px）
- 白カード、角丸16px
- リスト項目（各行56pt、左にアイコン、右にchevron.right、行間ディバイダー1px #E5E7EB）:
1. bell アイコン +「通知設定」
2. moon.fill アイコン +「おやすみリマインダー」
3. heart.fill アイコン +「お気に入りセッション」
4. square.and.arrow.up アイコン +「友達に紹介する」
5. questionmark.circle アイコン +「ヘルプ・お問い合わせ」
- アイコン: 20pt、#6B7280
- テキスト: 17pt、#1E1E2E
- chevron: 14pt、#9CA3AF
# 禁止事項
- ハンバーガーメニュー（下部タブバーで完結）
- 5色以上の使用（上記パレット厳守）
- テキストの詰め込み（各画面の情報密度は「一目で目的が分かる」レベルに抑える）
- ダークモードとの混在
- リアルな写真素材（ビジュアルは全てアブストラクト・グラデーション・イラストで統一）
- Android風のUI要素（マテリアルデザインのFAB、トップのAppBar等）
- 角丸の不統一（カード16px、ボタン24px、アバター円形を厳守）💡 設計のポイント
📝 プロンプト（コピペOK）
美容サロンのランディングページデザイン（PC版ファーストビュー、1440×900px）を生成してください。
# サロン情報
- サロン名: fleur（フルール）
- 英字表記: fleur beauty salon
- 業種: トータルビューティーサロン（ヘア・ネイル・アイラッシュ・フェイシャルエステを一店舗で提供）
- 所在地: 東京・表参道（表参道駅 B2出口 徒歩3分）
- ターゲット: 25〜34歳の働く女性。美容感度は高いが、いつも通っているサロンにどこか物足りなさを感じている。「雑誌に載るような仕上がり」を期待しつつも、リラックスできる空間を求めている
- 訴求: 初回限定 全メニュー40%OFF（カウンセリング無料）
- 電話番号: 03-6455-XXXX
- 営業時間: 10:00–21:00（最終受付20:00）
# 全体のデザインコンセプト
- 「上品さ」と「親しみやすさ」の両立 ── 銀座のグランドサロンほど堅くなく、原宿のカジュアルサロンほど軽くない、表参道らしい「心地よい洗練」
- 初回来店を検討中のユーザーが感じる「高級サロンは敷居が高い」という心理的ハードルを、柔らかいトーンと透明感のあるデザインで下げる
- 参考トーン: SHIRO、THREE、ReFa のブランドサイトが持つ余白と透明感
# 画面仕様
- 解像度: 1440×900px（PCブラウザのファーストビュー、スクロールなしで見える領域）
- 書き出し: PNG、sRGB
# レイアウト構成
## ① 背景画像（全幅・全高）
- サロン内観のイメージ写真（AI生成のフォトリアル）:
- 白を基調とした広々としたサロン空間、天井が高い
- 左奥に大きな窓があり、柔らかい自然光が差し込んでいる
- 窓辺にはグリーンの観葉植物（オリーブの木）が1本
- 中景にスタイリングチェア1脚（アイボリーレザー × ローズゴールド脚）が見える
- 手前はぼかし（被写界深度 f/1.8相当のボケ感）で空間の奥行きを演出
- 全体の色温度: やや暖色寄り（日光のぬくもり）
- 写真の上にオーバーレイ:
- 左半分: 白（#FFFFFF）opacity 65% → 右半分: 白（#FFFFFF）opacity 25% の横方向グラデーションオーバーレイ
- 左側のテキストエリアの可読性を確保しつつ、右側はサロン内観の雰囲気を残す
## ② ヘッダーナビゲーション（画面最上部、高さ80px）
### 左側: サロンロゴ
- ロゴ: 「fleur」の筆記体ロゴタイプ（細めのスクリプト体、エレガントだが読みやすい）
- カラー: チャコールグレー（#333333）
- ロゴの下に極小テキスト:「beauty salon」（8pt、レタースペーシング+300、大文字、#999999）
- 配置: 左端から80pxマージン、垂直中央
### 中央: グローバルナビゲーション
- 項目（横並び、間隔40px）:
1. メニュー・料金
2. スタイリスト
3. サロン紹介
4. アクセス
5. よくある質問
- フォント: 13pt、レタースペーシング+100、ウェイト400、チャコールグレー（#333333）
- ホバー時: ピンクゴールド（#B76E79）に変化、下に2pxのアンダーライン
### 右側: 電話番号 + 予約ボタン
- 電話アイコン（16px）+ 「03-6455-XXXX」（14pt、ウェイト500、#333333）
- その右に予約ボタン:
- テキスト:「WEB予約」
- フォント: 13pt、ウェイト600、ホワイト
- 背景: ピンクゴールド（#B76E79）
- 角丸: 24px（pill型）、幅120px × 高さ40px
- 配置: 右端から80pxマージン
## ③ メインコンテンツエリア（画面左側50%、垂直中央配置）
### 配置の基本
- 左端マージン: 120px（ヘッダーロゴよりやや内側、余白の呼吸を意識）
- 垂直位置: 画面の上下中央よりやや上（黄金比の上側分割線）
- 全テキスト左揃え
### キャッチコピー
- 1行目:「自分史上、最高の」（36pt、セリフ体 ── Noto Serif JP Light 相当、ウェイト300、チャコールグレー #333333）
- 2行目:「"わたし"に出会う場所。」（42pt、セリフ体、ウェイト500、チャコールグレー #333333）
- 「わたし」の2文字のみピンクゴールド（#B76E79）に変更 ── 視線のフックかつ「自分自身」を大切にするサロンの姿勢を表現
- 行間: 180%
- 2行のテキストブロックの左端に、ピンクゴールドの細い縦ライン（幅2px、高さ80px、テキストブロックと同じ高さ）をアクセントとして配置（左端から-20pxの位置）
### サブコピー（キャッチコピー下20px）
- テキスト:「表参道の隠れ家サロンで、髪もネイルもまつげも。あなただけの"キレイ"をトータルでお仕立てします。」
- フォント: 15pt、ウェイト400、ミディアムグレー（#666666）
- 行間: 180%
- 最大幅: 420px（長くなりすぎない折り返し）
### 初回限定オファー（サブコピー下32px）
- オファーボックス:
- 背景: アイボリー（#FFFFF0）、ボーダー 1px ピンクゴールド（#B76E79）opacity 30%、角丸12px
- 内側パディング: 24px 32px
- 幅: 400px
- 内容:
- 上段ラベル:「FIRST VISIT SPECIAL」（11pt、大文字、レタースペーシング+300、ピンクゴールド #B76E79、ウェイト600）
- 中段（ラベル下8px）:
- 「全メニュー」（20pt、ウェイト400、#333333）
- 「40%OFF」（36pt、ウェイト700、ローズ #FF007F）── 数字を最も大きく、唯一のローズ色で強烈に目を引く
- 下段（中段下4px）:「カウンセリング無料 · 当日施術OK」（13pt、#666666）
### CTAボタン（オファーボックス下24px）
- テキスト:「無料カウンセリングを予約する」
- フォント: 16pt、ウェイト600、ホワイト（#FFFFFF）
- 背景: ローズ（#FF007F）── ページ内でCTAのみに使う唯一のアクセントカラー
- 角丸: 28px（pill型）
- サイズ: 幅320px × 高さ56px
- シャドウ: 0 4px 16px rgba(255,0,127,0.20)（ボタンのブランドカラーに合わせた色付きシャドウで浮遊感）
- ボタン内左にカレンダーアイコン（16px、ホワイト）
- ホバー時想定: 背景が #E60072 にやや暗くなり、シャドウが広がる
### 信頼性バッジ（CTAボタン下16px）
- 横並び3つ、間隔16px、各アイテム:
1. 星アイコン +「Google 4.9（384件）」
2. リボンアイコン +「HOT PEPPER Beauty 表参道エリア1位」
3. 盾アイコン +「当日キャンセル無料」
- フォント: 12pt、#999999
- アイコン: 14px、#B76E79
## ④ 右側ビジュアル補助（画面右側50%）
- 背景画像のサロン内観がそのまま見える領域（オーバーレイが薄いため空間の美しさが伝わる）
- 右下（CTAより下、タブバーがないPC版なので画面右下角から60px内側）に小さなフローティング要素:
- 円形のバッジ（直径80px、ピンクゴールド #B76E79 背景、ホワイト文字）
- 中央に「初回\n40%OFF」（14pt / 20pt、ウェイト700）
- 微妙に傾き（-5°）をつけてスタンプ風に
- シャドウ: 0 4px 12px rgba(0,0,0,0.10)
# カラーパレット（4色厳守）
1. ピンクゴールド（#B76E79）── メインカラー。ロゴアクセント、ナビホバー、縦ライン、オファーラベル、フローティングバッジ
2. アイボリー（#FFFFF0）── オファーボックス背景
3. チャコールグレー（#333333）── テキストプライマリ
4. ローズ（#FF007F）── CTAボタンと「40%OFF」の数字のみに限定使用（ページ全体で2箇所だけ）
### グレー階層（チャコールグレーの明度違いとして運用、追加色としてカウントしない）
- #666666: サブコピー
- #999999: キャプション、バッジテキスト
- #CCCCCC: ディバイダー（必要な場合のみ）
# タイポグラフィ
- キャッチコピー: Noto Serif JP（セリフ体）── 上品さ、物語性
- その他すべてのUI要素: Noto Sans JP（サンセリフ体）── 可読性、モダンさ
- 英字・数字: Inter または Poppins 相当のジオメトリックサンセリフ
- 数値（料金・パーセンテージ）: tabular figures
# デザインディテール
- 背景画像のオーバーレイは左→右のグラデーション（左が濃く右が薄い）にすることで、左側テキストの可読性と右側の空間美を両立させる
- キャッチコピー左の縦ラインは、日本の美容雑誌の見出し装飾を意識した上品なアクセント
- オファーボックスのボーダーは opacity 30% にすることで「囲い」の主張を抑え、上品さを維持
- CTAボタンの色付きシャドウは、ローズ色をぼかすことでボタンが「光っている」ような印象を与え、クリック率向上を狙う
- フローティングの円形バッジは、スクロールしても追従するスティッキー要素を想定（画像生成では固定位置で表現）
# 禁止事項
- 5色以上の使用（上記パレット厳守、グレー階層は明度違いのみ）
- 派手なグラデーション背景（オーバーレイの白グラデーションは機能目的なので許可）
- 影の多重適用、グロー効果、光彩
- 丸ゴシック・手書き風フォント（カジュアルになりすぎる）
- 人物の正面顔写真（施術中の後ろ姿・手元は許可。顔が映ると「この人みたいになれるか不安」という心理障壁が生まれるため）
- 情報の詰め込み（ファーストビューの目的は「雰囲気を伝え、CTAを押させる」の一点）
- テキストの中央揃え（全要素左揃えで視線の流れを統一）
- ストック写真感のある不自然なライティングやポーズ💡 設計のポイント
📝 プロンプト（コピペOK）
ピラティス/ヨガスタジオのランディングページ（PC版、幅1440px、縦スクロール全セクション通し）を1枚の縦長画像として生成してください。
# スタジオ情報
- スタジオ名: sou（ソウ）
- 英字表記: sou pilates & yoga
- コンセプト: 「心と体の調和 ── 呼吸ひとつで、自分に還る。」
- 業態: 少人数制マシンピラティス（リフォーマー）+ ハタヨガ / リストラティブヨガ（最大5名/クラス）
- 所在地: 東京・神楽坂（神楽坂駅 1番出口 徒歩3分、牛込神楽坂駅 A3出口 徒歩5分）
- 電話番号: 03-5225-XXXX
- 営業時間: 7:00–21:00（最終クラス20:00〜）
- ターゲット: 32〜45歳の女性。デスクワークによる慢性的な肩こり・腰痛を抱え、ジムの激しい運動より「整える」系のボディケアを求めている。美容と健康を両立したい。スタジオの空間美や世界観も選ぶ基準になる層
- 訴求: 体験レッスン0円（通常¥5,500）+ 当日入会で入会金¥11,000無料
# 全体のデザインコンセプト
- 「深呼吸したくなるWebページ」── スクロールするたびに余白と静けさを感じ、読み終えたときに体験予約を自然に押したくなる設計
- 参考トーン: Aesop、中川政七商店、BAUM のブランドサイトが持つ「和の余白 × 洋のミニマル」
- 写真は全て自然光・暖色トーン、モデルの表情は穏やかで力みがない
# 画面仕様
- 幅: 1440px固定
- 高さ: 全セクション通しの縦長1枚画像（約5600px想定）
- コンテンツ最大幅: 1080px（左右マージン各180px）
- 書き出し: PNG、sRGB
# カラーパレット（4色 + グレー階層）
1. セージグリーン（#B2BEB5）── メインカラー。見出しアクセント、ボタン背景、アイコン、ライン装飾
2. オフホワイト（#FAF9F6）── ページ背景、カード背景
3. ウッドブラウン（#8B7355）── サブカラー。写真キャプション、セクション番号、インストラクター名
4. チャコール（#2C2C2C）── テキストプライマリ
### グレー階層
- セカンダリテキスト: #6B6B6B
- ターシャリテキスト: #9A9A9A
- ディバイダー: #E8E6E1
- セクション背景（交互）: #FAF9F6（オフホワイト）と #FFFFFF（純白）を交互に使い、セクションの区切りを色面で表現
# タイポグラフィ
- 見出し（H1〜H2）: Noto Serif JP Light（ウェイト300）── 細く繊細なセリフ体で「和の静けさ」を表現
- 小見出し（H3〜H4）: Noto Serif JP Regular（ウェイト400）
- 本文・UI要素: Noto Sans JP Regular / Medium（ウェイト400 / 500）
- 英字・数字: Cormorant Garamond（見出し）、Inter（本文・UI）
- 行間: 見出し 170%、本文 200%（呼吸を感じる広さ）
- サイズスケール: 11px / 13px / 15px / 18px / 24px / 32px / 48px
# 共通コンポーネント仕様
- カード角丸: 20px
- ボタン角丸: 20px
- 写真角丸: 20px
- シャドウ: 0 4px 20px rgba(0,0,0,0.04)（カード・写真にごく薄く）
- セクション間の余白: 120px
- テキストブロック最大幅: 640px（長文の可読性確保）
# セクション1: ヒーローセクション（高さ900px）
## 背景
- 全幅の写真: 朝の自然光が大きな窓から差し込む、白木とモルタルを基調としたスタジオ空間
- 画面左寄りに、リフォーマー（ピラティスマシン）の上でスパインストレッチのポーズをとる30代後半の日本人女性（後ろ姿〜横顔、穏やかな表情、無理のないフォーム）
- ウェアはアースカラー（くすみグリーンのブラトップ + ベージュのレギンス）
- 窓の外にはぼんやりと緑が見える（植栽のボケ）
- 床は明るいオーク無垢材、壁は白漆喰
- 色温度: やや暖色（朝日のぬくもり）、全体的にハイキーで明るい
- オーバーレイ: 右側40%に白（#FAF9F6）opacity 80% → 左側は opacity 0% の横方向グラデーション（テキストエリアの可読性確保）
## ヘッダーナビゲーション（ヒーロー内に重ねて配置、高さ80px）
- 背景: 透明（ヒーロー画像の上に直接配置）
- 左: ロゴ「sou」（Cormorant Garamond Light、28pt、チャコール #2C2C2C）、その下に「pilates & yoga」（9pt、レタースペーシング+400、大文字、#9A9A9A）
- 中央: ナビ項目（横並び、間隔36px）
1. souについて
2. レッスン
3. インストラクター
4. スケジュール
5. アクセス
- ナビフォント: Noto Sans JP、13pt、ウェイト400、チャコール
- 右: 「体験予約（¥0）」ボタン ── セージグリーン背景、ホワイト文字、角丸20px、幅160px × 高さ44px、13pt ウェイト600
## メインコピー（画面右寄り、垂直中央、オーバーレイの白い領域内）
- 配置: 右端から180pxマージン、右揃えではなく左揃え（テキストブロックの左端が画面中央付近）
- 英字アクセント（コピー上部、16px上）:
- 「BREATHE. ALIGN. RETURN.」（13pt、Cormorant Garamond、レタースペーシング+500、大文字、セージグリーン #B2BEB5）
- キャッチコピー:
- 1行目:「呼吸ひとつで、」（40pt、Noto Serif JP Light、ウェイト300、#2C2C2C）
- 2行目:「自分に還る。」（48pt、Noto Serif JP Regular、ウェイト400、#2C2C2C）
- 行間: 170%
- サブコピー（キャッチ下20px）:
- 「神楽坂の路地裏に佇む、定員5名の小さなスタジオ。」（15pt、Noto Sans JP、ウェイト400、#6B6B6B）
- 「マシンピラティスとヨガで、心と体を静かに整えます。」（15pt、同上）
- 行間: 200%
- CTA（サブコピー下32px）:
- ボタン:「体験レッスンを予約する（¥0）」
- セージグリーン（#B2BEB5）背景、ホワイト文字、角丸20px
- 幅280px × 高さ56px、16pt、ウェイト600
- シャドウ: 0 4px 16px rgba(178,190,181,0.30)（色付きシャドウ）
- ボタン下に:「通常¥5,500 → 今だけ0円」（12pt、ウッドブラウン #8B7355）
## スクロール誘導（画面最下部中央）
- 下向きの細い矢印アイコン（chevron.down、1px ストローク、#9A9A9A）
- その下に「scroll」（10pt、レタースペーシング+300、#9A9A9A）
# セクション2: 3つの特徴（背景 #FFFFFF）
## セクションヘッダー
- 英字ラベル:「WHY sou」（13pt、Cormorant Garamond、レタースペーシング+500、大文字、セージグリーン #B2BEB5）
- 見出し:「souが選ばれる、3つの理由。」（32pt、Noto Serif JP Light、ウェイト300、#2C2C2C）
- セージグリーンの細い水平ライン（幅40px、高さ1px）をラベルと見出しの間に配置
- ヘッダー全体は中央揃え
## 3カラムレイアウト（ヘッダー下80px、横並び均等3分割、カラム間40px）
### 特徴1: 定員5名の少人数制
- アイコン: 人が5人並んだピクトグラム（中央の1人がやや大きい）、モノライン、セージグリーン、48×48px
- アイコン下に横ライン（セージグリーン、幅24px、1px、アイコン下16px）
- タイトル:「定員5名の少人数制」（18pt、Noto Serif JP、ウェイト400、#2C2C2C）
- 説明（タイトル下12px）:「一人ひとりの体の癖を見極め、的確にアジャストします。大人数では得られない"自分だけの1時間"を。」（15pt、Noto Sans JP、ウェイト400、#6B6B6B、行間200%、最大幅280px）
### 特徴2: 神楽坂駅 徒歩3分
- アイコン: ピンマーク + 点線の道、モノライン、セージグリーン、48×48px
- タイトル:「神楽坂駅 徒歩3分」
- 説明:「仕事帰りでも、朝活でも。駅から石畳の路地を3分歩けば、日常から切り離された空間が待っています。」
### 特徴3: 国際資格保有のプロ講師
- アイコン: メダル + 星のシンプルな線画、セージグリーン、48×48px
- タイトル:「国際資格保有のプロ講師」
- 説明:「全インストラクターがPMA認定 or 全米ヨガアライアンスRYT500を保有。解剖学に基づいた安全な指導をお約束します。」
### カード仕様（各特徴を包むカード）
- 背景: オフホワイト（#FAF9F6）
- 角丸: 20px
- パディング: 40px 32px
- シャドウ: なし（背景色の差だけで浮かせる）
- テキスト中央揃え
# セクション3: レッスンスケジュール（背景 #FAF9F6）
## セクションヘッダー（中央揃え）
- 英字ラベル:「SCHEDULE」（13pt、Cormorant Garamond、レタースペーシング+500、セージグリーン）
- 見出し:「あなたのペースで、通える。」（32pt、Noto Serif JP Light、#2C2C2C）
- サブテキスト:「朝7時〜夜21時。ライフスタイルに合わせて選べる週35クラス。」（15pt、#6B6B6B）
## スケジュール表（ヘッダー下60px、最大幅1080px、中央配置）
- テーブル形式: 横軸 = 曜日（月〜日）、縦軸 = 時間帯（朝 7:00–9:00 / 午前 10:00–12:00 / 午後 13:00–15:00 / 夕方 16:00–18:00 / 夜 19:00–21:00）
- セルサイズ: 各セル約140px × 72px
- セルの角丸: 12px
- 背景色:
- ピラティスクラス: セージグリーン opacity 15%（#B2BEB5 の薄いtint）
- ヨガクラス: ウッドブラウン opacity 10%（#8B7355 の薄いtint）
- 空きコマ: 白（#FFFFFF）
- セル内テキスト:
- クラス名（13pt、ウェイト500、#2C2C2C）例:「リフォーマー入門」「ハタヨガ」「リストラティブヨガ」
- 時刻（11pt、#9A9A9A）例:「7:00–8:00」
- 残枠バッジ（11pt、角丸full、セージグリーン背景 + 白文字）例:「残2席」、満席の場合は（#E8E6E1 背景 + #9A9A9A 文字）「満席」
- 曜日ヘッダー: 15pt、ウェイト600、#2C2C2C、背景なし
- 時間帯ラベル（左端列）: 13pt、#9A9A9A、縦中央
### サンプルデータ
| | 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|---|
| 朝 | リフォーマー入門 7:00 残2 | ─ | 朝ヨガフロー 7:30 残3 | リフォーマー入門 7:00 残1 | ─ | モーニングピラティス 8:00 残2 | リストラティブヨガ 8:00 満席 |
| 午前 | ハタヨガ 10:00 残4 | リフォーマー中級 10:30 残2 | ハタヨガ 10:00 残3 | リフォーマー入門 10:30 残3 | ハタヨガ 10:00 残5 | リフォーマー全レベル 10:00 満席 | ハタヨガ 10:30 残2 |
| 午後 | ─ | リストラティブヨガ 14:00 残4 | リフォーマー入門 13:30 残2 | ─ | リストラティブヨガ 14:00 残3 | リフォーマー中級 13:00 残1 | ─ |
| 夕方 | リフォーマー中級 17:00 残3 | ─ | ─ | リフォーマー中級 17:00 残2 | ─ | ハタヨガ 16:00 残4 | ─ |
| 夜 | ハタヨガ 19:30 残2 | リフォーマー入門 19:00 残1 | ハタヨガ 19:30 残3 | リストラティブヨガ 20:00 残4 | リフォーマー入門 19:00 残2 | ─ | ─ |
## 凡例（テーブル下16px、中央揃え）
- 丸ドット（10px、セージグリーン opacity 40%）+「ピラティス」、丸ドット（10px、ウッドブラウン opacity 30%）+「ヨガ」（13pt、#6B6B6B、間隔24px）
# セクション4: インストラクター紹介（背景 #FFFFFF）
## セクションヘッダー（中央揃え）
- 英字ラベル:「INSTRUCTORS」
- 見出し:「体を知り尽くした、3人の専門家。」（32pt）
## 3カラムレイアウト（ヘッダー下60px、均等3分割、カラム間40px）
### インストラクター1
- 写真: 円形（直径200px）、オーク材の壁を背景にした穏やかな笑顔のポートレート、自然光、暖色トーン
- 写真のボーダー: 3px、セージグリーン opacity 30%
- 名前（写真下16px）:「長谷川 理沙」（18pt、Noto Serif JP、ウェイト400、ウッドブラウン #8B7355）
- 英字名:「Risa Hasegawa」（11pt、Cormorant Garamond、レタースペーシング+200、#9A9A9A）
- 資格バッジ（名前下8px）: ピル型、セージグリーン opacity 15% 背景 + セージグリーン文字、11pt
- 「PMA-CPT」「PHI Pilates」
- プロフィール（資格下12px）:「元理学療法士。8年間のリハビリ臨床経験を活かし、体の不調に寄り添うピラティスを指導。一人ひとりの骨格に合わせたアジャストに定評あり。」（14pt、#6B6B6B、行間190%、最大幅280px、中央揃え）
### インストラクター2
- 名前:「中村 彩乃」/ Ayano Nakamura
- 資格:「RYT500」「リストラティブヨガ認定」
- プロフィール:「インド・リシケシュでの1年間の修行を経て指導歴12年。"がんばらないヨガ"をモットーに、呼吸と脱力の心地よさを伝えます。」
### インストラクター3
- 名前:「藤井 奈央」/ Nao Fujii
- 資格:「BASI Pilates」「RYT200」
- プロフィール:「元バレエダンサー。ピラティスとヨガの両方を指導できる数少ない講師。美しい姿勢づくりとしなやかな体幹を追求します。」
# セクション5: 体験者の声（背景 #FAF9F6）
## セクションヘッダー（中央揃え）
- 英字ラベル:「VOICE」
- 見出し:「はじめての方の、リアルな感想。」（32pt）
## 3カラムレイアウト（カード型、均等3分割、カラム間24px）
### 各カード共通仕様
- 背景: ホワイト（#FFFFFF）
- 角丸: 20px
- パディング: 32px
- シャドウ: 0 4px 20px rgba(0,0,0,0.04)
- 上部に大きな引用符「"」（Cormorant Garamond、48pt、セージグリーン opacity 30%）
### 声1
- 星評価: ★★★★★（5つ、セージグリーン塗り、各14px）
- コメント:「デスクワークで首と肩がガチガチだったのですが、体験の60分で"体ってこんなに軽くなるんだ"と衝撃でした。少人数なので先生がずっと見てくれて安心。」（15pt、#2C2C2C、行間200%）
- 投稿者（コメント下16px）:「M.T さん（34歳・会社員）── リフォーマー入門を体験」（13pt、#9A9A9A）
### 声2
- 星評価: ★★★★★
- コメント:「運動が大の苦手な私でも、リストラティブヨガなら"寝てるだけ"で心がほどけていく感覚。翌朝の目覚めが全然違いました。通い始めて3ヶ月、肌荒れまで改善。」
- 投稿者:「A.K さん（38歳・フリーランス）── リストラティブヨガを体験」
### 声3
- 星評価: ★★★★☆（4つ塗り + 1つ outline）
- コメント:「他のスタジオで物足りなさを感じていましたが、souは解剖学ベースの説明が丁寧で、"なぜこの動きをするのか"が腑に落ちます。体の変化を理屈で納得できるのが嬉しい。」
- 投稿者:「Y.S さん（41歳・経営者）── リフォーマー中級を体験」
# セクション6: CTAセクション（背景: セージグリーン #B2BEB5 のベタ塗り、高さ480px）
## レイアウト（全要素中央揃え、垂直中央配置）
### 英字アクセント
- 「YOUR FIRST STEP」（13pt、Cormorant Garamond、レタースペーシング+500、大文字、ホワイト opacity 60%）
### メインコピー（英字下16px）
- 「まずは一度、深呼吸しに来ませんか。」（36pt、Noto Serif JP Light、ウェイト300、ホワイト #FFFFFF）
### オファー情報（コピー下24px）
- 横並び2要素、間隔32px、各要素中央:
- 左:「体験レッスン」ラベル（13pt、ホワイト opacity 70%）+ 「¥0」（48pt、Cormorant Garamond、ウェイト700、ホワイト）+ 取り消し線付き「通常 ¥5,500」（15pt、ホワイト opacity 50%）
- 右:「当日入会で」ラベル（13pt、ホワイト opacity 70%）+ 「入会金 ¥0」（48pt、Cormorant Garamond、ウェイト700、ホワイト）+ 取り消し線付き「通常 ¥11,000」（15pt、ホワイト opacity 50%）
- 2要素の間に縦の細いライン（1px、ホワイト opacity 30%、高さ60px）
### CTAボタン（オファー下32px）
- テキスト:「無料体験を予約する」
- フォント: 17pt、ウェイト600、セージグリーン（#B2BEB5）── 背景と逆転
- 背景: ホワイト（#FFFFFF）
- 角丸: 20px
- サイズ: 幅300px × 高さ60px
- シャドウ: 0 4px 20px rgba(0,0,0,0.10)
- ボタン内左にカレンダーアイコン（16px、セージグリーン）
### 補足（ボタン下12px）
- 「所要時間60分 · ウェア無料レンタル · 当日キャンセルOK」（13pt、ホワイト opacity 70%、中央揃え）
# フッター（背景 #2C2C2C、高さ240px）
## レイアウト（3カラム、最大幅1080px、中央配置）
### 左カラム
- ロゴ「sou」（Cormorant Garamond Light、24pt、ホワイト）
- 「pilates & yoga」（9pt、#9A9A9A）
- 住所（ロゴ下16px）:「〒162-0825 東京都新宿区神楽坂3-XX-X 神楽坂ビル2F」（12pt、#9A9A9A）
- 電話:「03-5225-XXXX」（12pt、#9A9A9A）
- 営業時間:「7:00–21:00（不定休）」（12pt、#9A9A9A）
### 中央カラム
- ナビリンク（縦並び、行間200%、13pt、#9A9A9A）:
- souについて / レッスン / インストラクター / スケジュール / アクセス / よくある質問 / プライバシーポリシー
### 右カラム
- SNSアイコン横並び（Instagram、LINE、各24px、#9A9A9A、間隔16px）
- その下に:「@sou_pilates_yoga」（12pt、#9A9A9A）
## コピーライト（フッター最下部、中央揃え、ディバイダー上1px #3A3A3A）
- 「© 2026 sou pilates & yoga. All rights reserved.」（11pt、#6B6B6B）
# 禁止事項
- 5色以上の使用（上記パレット厳守）
- 派手なグラデーション、グロー効果、ネオン
- 角張ったデザイン（全要素角丸20px以上で柔らかさを維持）
- 人物の正面ポートレート以外の過度な露出（ウェア姿は許可するが、過度にボディラインを強調しない）
- ストック写真感のある不自然な笑顔やポーズ
- テキストの詰め込み（各セクション1メッセージ、余白を呼吸として扱う）
- ハンバーガーメニュー（PC版のため全ナビを展開表示）
- 黒背景（フッター以外）── 重たさを排除し、全体を軽やかに保つ
- 中央揃えと左揃えの混在（セクションヘッダーは中央揃え、本文ブロックは左揃え、この2ルールのみ）💡 設計のポイント
📝 プロンプト（コピペOK）
オンライン学習プラットフォーム（LMS）のコース詳細ページUI画面を生成してください。
# プラットフォーム概要
- プラットフォーム名: Because（ビコーズ）
- タグライン: 「学ぶ理由が、見つかる場所」
- 対象: 25〜45歳の社会人。キャリアアップ・職種転換・副業スキル習得を目指す層
- 参考UI: Udemy のコース詳細ページ構造 × Notion のクリーンなタイポグラフィ × Linear の情報密度コントロール
# 画面仕様
- 解像度: 1440×2800px（PC版コース詳細ページ、縦スクロール通し1枚画像）
- コンテンツ最大幅: 1120px（左右マージン各160px）
- メインエリア: 左カラム740px + 右サイドバー340px + カラム間ガップ40px
- 書き出し: PNG、sRGB
# カラーパレット（4色 + グレー階層）
1. ブランドブルー（#2563EB）── CTAボタン、アクティブタブ、進捗バー、リンク
2. ブランドブルー薄tint（#EFF6FF）── アクティブタブ背景、バッジ背景、ホバー行
3. ホワイト（#FFFFFF）── ページ背景、カード背景
4. アンバー（#F59E0B）── 星評価、セール価格の強調
### グレー階層
- テキストプライマリ: #111827
- テキストセカンダリ: #4B5563
- テキストターシャリ: #9CA3AF
- ボーダー: #E5E7EB
- 背景サブ: #F9FAFB
### セマンティックカラー（パレット外だが機能用途のみ）
- 取り消し線旧価格: #9CA3AF
- セール赤: #DC2626（価格のみに限定使用）
- 完了チェック: #10B981
# タイポグラフィ
- フォントファミリー: Inter（英数字）、Noto Sans JP（和文）
- サイズスケール: 11px / 12px / 13px / 14px / 16px / 20px / 24px / 32px
- ウェイト: 400（Regular）/ 500（Medium）/ 600（SemiBold）/ 700（Bold）
- 数値: tabular figures
- 行間: 見出し 140%、本文 180%
# コンポーネント共通仕様
- カード角丸: 12px
- ボタン角丸: 8px（CTA）、6px（セカンダリ）
- カードシャドウ: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)
- ボーダー: 1px solid #E5E7EB
- アイコン: Lucide Icons 相当、ストロークスタイル、1.5px線幅
# グローバルヘッダー（高さ64px、全幅、白背景、下ボーダー1px #E5E7EB、固定）
## 左側（左端40px）
- ロゴ:「Because」（Inter Bold、20pt、#111827）+ ドット部分をブランドブルーに着色
- ロゴ右にセパレータ縦線（1px、#E5E7EB、高さ24px）
- カテゴリドロップダウン:「カテゴリ ▾」（14pt、#4B5563）
## 中央
- 検索バー: 幅480px、高さ40px、角丸8px、背景 #F9FAFB、ボーダー1px #E5E7EB
- プレースホルダ: 虫眼鏡アイコン +「スキル・講座名・講師名で検索」（14pt、#9CA3AF）
## 右側（右端40px）
- 「マイ学習」（14pt、#4B5563、book.open アイコン付き）
- お気に入りアイコン（heart、#4B5563）
- カートアイコン（shopping-cart、#4B5563、バッジ「2」ブランドブルー背景白文字）
- ユーザーアバター（32px円形）+ 名前「田中さん ▾」（14pt、#111827）
# ヒーローエリア（ヘッダー直下、背景 #111827、全幅、高さ360px）
## コンテンツ（最大幅1120px、中央配置、白テキスト）
### 左側テキスト（幅600px、垂直中央）
- パンくずリスト:「ホーム ＞ デザイン ＞ UI/UXデザイン」（12pt、#9CA3AF、リンク部分ホワイト opacity 70%）
- コースタイトル（パンくず下12px）:
- 「実務で使えるUI/UXデザイン完全マスター」（28pt、ウェイト700、ホワイト）
- 2行目:「── Figma実践 × デザインシステム構築」（20pt、ウェイト400、ホワイト opacity 80%）
- 講師情報（タイトル下16px）:
- 講師アバター（28px円形）+「佐々木 健太」（14pt、ホワイト、ウェイト500）+「UI/UXデザイナー・元メルカリ」（14pt、ホワイト opacity 60%）
- メタ情報（講師下12px、横並び、セパレータ「·」区切り）:
- 星:「★ 4.8」（アンバー #F59E0B）+「（1,247件の評価）」（ホワイト opacity 60%）
- 「6,830人が受講」（ホワイト opacity 60%）
- 「最終更新: 2026年1月」（ホワイト opacity 60%）
- バッジ横並び（メタ下12px）:
- 「ベストセラー」（ピル型、アンバー #F59E0B 背景、#111827 文字、11pt ウェイト600）
- 「2026年2月 最新版」（ピル型、ブランドブルー #2563EB 背景、ホワイト文字、11pt）
### 右側プレビュー（幅480px）
- 動画サムネイル: 16:9（480×270px）、角丸12px
- サムネイル画像: Figmaの画面が映ったモニターを背景に、UI要素が浮遊しているイメージ（ブランドブルーのアクセント）
- 中央に再生ボタン: 円形64px、白背景 opacity 90%、ブランドブルーの三角形
- 再生ボタン下に:「プレビューを再生（2:30）」（12pt、ホワイト、テキストシャドウ付き）
- 左下にバッジ:「無料プレビュー」（11pt、白背景 opacity 80%、角丸4px）
# メインコンテンツ（ヒーロー下、背景ホワイト、上パディング40px）
## 2カラムレイアウト（最大幅1120px、中央配置）
## 左カラム（幅740px）
### タブナビゲーション（上部固定風）
- タブ4つ横並び:
1. **概要**（アクティブ ── ブランドブルー文字 #2563EB、下線2px ブランドブルー）
2. カリキュラム（#4B5563）
3. レビュー（#4B5563）+「1,247」小さなカウンター
4. Q&A（#4B5563）+「89」小さなカウンター
- タブフォント: 15pt、ウェイト500
- タブ間余白: 32px
- 下ボーダー: 1px #E5E7EB（全幅）
### 「概要」タブ内容（アクティブ表示中）
#### このコースで学べること（タブ下32px）
- セクションタイトル:「このコースで学べること」（20pt、ウェイト700、#111827）
- 2カラムのチェックリスト（カラム間24px、各項目にチェックアイコン ✓ ブランドブルー + テキスト14pt #4B5563）:
- 左カラム:
1. ✓ UI/UXの基礎理論とデザイン原則
2. ✓ Figmaを使ったワイヤーフレーム → 高忠実度デザイン
3. ✓ デザインシステムの設計と運用方法
4. ✓ ユーザーリサーチとペルソナ設計の実践
- 右カラム:
5. ✓ レスポンシブデザインの設計パターン
6. ✓ プロトタイピングとユーザーテストの進め方
7. ✓ デザイナーとエンジニアの連携フロー
8. ✓ ポートフォリオに使える実践プロジェクト3本
- リスト全体を囲むボーダー（1px #E5E7EB、角丸12px、パディング24px）
#### コース説明（学べること下40px）
- セクションタイトル:「コース説明」（20pt、ウェイト700）
- 本文（14pt、#4B5563、行間180%、最大幅680px）:
- 「"見た目がキレイ"だけでは足りない。ユーザーが"迷わず使える"デザインを作れるようになる ── それがこのコースのゴールです。」
- 「メルカリ・SmartHRなど複数のプロダクトでUI/UXを手がけてきた講師が、実務の現場で培ったプロセスとFigmaのテクニックを体系的にお伝えします。」
- 「全12セクション・72レッスン・合計18時間。各レッスンの後には実践ワークがあり、手を動かしながらスキルを定着させます。」
- 「続きを読む ▾」（14pt、ブランドブルー #2563EB、テキスト下に展開を想定）
#### 対象者（説明下40px）
- セクションタイトル:「こんな方におすすめ」（20pt、ウェイト700）
- リスト（各項目に「→」矢印アイコン #2563EB + テキスト14pt #4B5563、行間200%）:
1. → Webデザインの基礎は知っているが、UI/UXを体系的に学んだことがない方
2. → Figmaの使い方は分かるが、「正しい設計プロセス」に自信がない方
3. → エンジニアからデザイナーにキャリアチェンジしたい方
4. → ポートフォリオに載せる実践プロジェクトが欲しい方
#### 前提条件
- 「Figmaの基本操作（フレーム作成、テキスト入力、オートレイアウト）ができる方」（14pt、#9CA3AF、info アイコン付き）
### 「カリキュラム」タブ内容（概要の下に続けて表示。実際にはタブ切替で排他表示だが、画像ではスクロール下に並べて見せる）
#### カリキュラムヘッダー
- 「カリキュラム」（20pt、ウェイト700）
- 右寄り:「全12セクション · 72レッスン · 合計18時間15分」（13pt、#9CA3AF）
- 「すべて展開 | すべて折りたたみ」テキストリンク（13pt、ブランドブルー）
#### セクション一覧（アコーディオン形式、ボーダー1px #E5E7EB、角丸12px）
##### セクション1（展開状態）
- ヘッダー行: クリッカブル、高さ56px、背景 #F9FAFB、パディング16px
- 左: 展開アイコン（chevron-down、#4B5563）+「セクション1: UI/UXデザインの基礎理論」（15pt、ウェイト600、#111827）
- 右:「6レッスン · 1時間32分」（13pt、#9CA3AF）
- レッスン一覧（展開された内容、白背景）:
1. ✅ 完了チェック（#10B981 塗りの円形チェックマーク）+「1-1. UI と UX の違いを正しく理解する」+ play-circle アイコン +「12:30」（右端）
2. ✅「1-2. ユーザー中心設計（UCD）のプロセス」+「15:20」
3. ✅「1-3. 良いUIの10原則（ニールセンのヒューリスティクス）」+「18:45」
4. ☐ 未完了（空の円形、#E5E7EB ボーダーのみ）+「1-4. 情報アーキテクチャの基礎」+「14:10」
5. ☐「1-5. ビジュアルヒエラルキーとタイポグラフィ」+「12:55」+ 🔒 ロックアイコン（プレビュー不可を示す、#9CA3AF）
6. ☐「1-6. 【実践ワーク】既存アプリのUI分析レポート」+ file-text アイコン +「課題」
- 各レッスン行: 高さ48px、左パディング48px（チェック32px + 余白16px）、ホバー背景 #F9FAFB
- 行間ディバイダー: 1px #F3F4F6
##### セクション2（折りたたみ状態）
- ヘッダーのみ表示: chevron-right アイコン +「セクション2: Figma基礎 × 実践セットアップ」+「8レッスン · 2時間10分」
##### セクション3（折りたたみ）
- 「セクション3: ユーザーリサーチ ── インタビューからペルソナまで」+「5レッスン · 1時間25分」
##### セクション4（折りたたみ）
- 「セクション4: ワイヤーフレーム設計の技法」+「6レッスン · 1時間40分」
##### セクション5（折りたたみ）
- 「セクション5: デザインシステム構築 入門→実践」+「7レッスン · 2時間5分」
（セクション6〜12は「他7セクションを表示 ▾」の折りたたみリンクで省略）
### レビューセクション（カリキュラム下に続けて配置）
#### レビューヘッダー
- 「受講者レビュー」（20pt、ウェイト700）
#### レビューサマリー（横並び）
- 左: 大きな数字「4.8」（48pt、ウェイト700、#111827）+ 星5つ表示（アンバー #F59E0B、各16px）+ 「1,247件の評価」（13pt、#9CA3AF）
- 右: 評価分布バー（5行、5星〜1星）
- 各行:「★5」（13pt）+ プログレスバー（幅200px、高さ8px、角丸full、背景 #E5E7EB、塗り アンバー #F59E0B）+ パーセンテージ
- ★5: 72% / ★4: 19% / ★3: 6% / ★2: 2% / ★1: 1%
#### レビューカード3件
##### レビュー1
- ユーザー:アバター（36px）+「Y.M」（14pt、ウェイト600）+ 星5つ（アンバー、各12px）+「3週間前」（12pt、#9CA3AF）
- コメント:「Figmaの操作を教えるだけの講座と違い、"なぜそうデザインするのか"の思考プロセスまで丁寧に解説されていて、実務にすぐ活かせました。セクション5のデザインシステム構築は圧巻。」（14pt、#4B5563、行間180%）
- 「役に立った（34）」テキストリンク（13pt、#9CA3AF、thumbs-up アイコン）
##### レビュー2
- 「K.T」+ 星5つ +「1ヶ月前」
- 「全くの未経験からのスタートでしたが、ワークが充実していて"作りながら学ぶ"ことで挫折せずに完走できました。講師への質問にも丁寧に回答してもらえて感謝です。」
- 「役に立った（21）」
##### レビュー3
- 「A.S」+ 星4つ +「2ヶ月前」
- 「内容は非常に充実。一点だけ、後半のデザインシステムのパートはもう少し中級者向けの前提知識があった方が理解しやすいと感じました。でも全体の満足度はとても高いです。」
- 「役に立った（15）」
- 「レビューをもっと見る（1,247件）▾」テキストリンク（ブランドブルー）
## 右サイドバー（幅340px、スティッキー、上端からメインコンテンツと同じ高さで開始）
### 価格カード（白背景、ボーダー1px #E5E7EB、角丸12px、シャドウ、パディング24px）
#### 価格表示
- 取り消し線の旧価格:「¥24,800」（16pt、#9CA3AF、取り消し線付き）
- 割引価格:「¥3,600」（32pt、ウェイト700、セール赤 #DC2626）
- 割引率バッジ:「85% OFF」（ピル型、#DC2626 背景、ホワイト文字、11pt ウェイト600）
- 残り時間:「⏱ セール終了まで あと 2日 14時間」（13pt、#DC2626、clock アイコン付き）
#### CTAボタン（価格下20px）
- プライマリ:「今すぐ受講する」
- 幅100%（292px）、高さ52px、角丸8px
- 背景: ブランドブルー（#2563EB）、ホワイト文字、16pt ウェイト600
- シャドウ: 0 2px 8px rgba(37,99,235,0.25)
- セカンダリ（プライマリ下8px）:「カートに追加」
- 幅100%、高さ44px、角丸6px
- 背景: ホワイト、ボーダー1px #E5E7EB、テキスト #111827、14pt ウェイト500
- お気に入りボタン（セカンダリ下8px）:
- 幅100%、高さ44px、角丸6px
- 背景: ホワイト、ボーダー1px #E5E7EB
- heart アウトラインアイコン + 「お気に入りに追加」（14pt、#4B5563）
#### 保証テキスト（ボタン下16px、中央揃え）
- 「30日間 返金保証」（13pt、#9CA3AF、shield-check アイコン付き）
#### ディバイダー（1px #E5E7EB、上下16pxマージン）
#### コース概要（リスト形式、各行アイコン + テキスト、行間200%）
- 🎬「18時間15分のオンデマンド動画」（14pt、#4B5563）
- 📋「72レッスン」
- 📁「ダウンロード可能なFigmaテンプレート 12点」
- 📱「スマホ・タブレット対応」
- 🏆「修了証明書」
- ♾️「無期限アクセス」
- 各行左: アイコン（16px、#9CA3AF）、行高さ36px
#### ディバイダー
#### シェアボタン（横並び中央）
- 「このコースを共有:」（12pt、#9CA3AF）
- アイコン横並び: X（旧Twitter）、Facebook、LINE、リンクコピー（各20px、#9CA3AF、間隔12px）
### 講師カード（価格カード下16px、同じスタイル）
- 講師アバター（56px円形）
- 名前:「佐々木 健太」（16pt、ウェイト600、#111827）
- 肩書:「UI/UXデザイナー」（13pt、#4B5563）
- ミニ統計（横並び、13pt、#9CA3AF）:
- 星4.8 / 受講者12,400人 / コース4本
- 「講師プロフィールを見る →」（13pt、ブランドブルー）
# 禁止事項
- 5色以上のアクセントカラー（セマンティックカラーは機能用途のみ許可）
- グラデーション背景やカード背景
- 角丸の不統一（カード12px、ボタン大8px、ボタン小6px、バッジfull を厳守）
- ハンバーガーメニュー（PC版のためナビ展開）
- 装飾的なイラスト・3Dオブジェクト・背景パターン
- ダークモードの混在（ヒーローエリアのダーク背景は機能的な使用として許可）
- 丸ゴシック・手書き風フォント
- テーブルの縦罫線
- データのない空セル💡 設計のポイント
📝 プロンプト（コピペOK）
あなたはWebデザインの専門家です。
以下の情報に基づいて、Webサイトの完全なデザインシステムを作成してください。
# クライアント情報
- 企業名: PORQUE（ポルケ）
- 業種: D2Cスキンケアブランド（クリーンビューティー）
- ブランドのトーン: 「科学的な誠実さ × 自然由来のやさしさ」── 医療論文を読む真剣さと、朝の窓辺でスキンケアする穏やかさが同居するイメージ。決してキラキラした美容ブランドではなく、"成分と根拠で選ぶ大人の女性"に響く知性と透明感
- ターゲット: 28〜42歳の女性。化粧品の成分表示を自分で読む習慣があり、「なんとなく良さそう」ではなく「なぜ効くのか」を知りたい層。情報感度が高く、Aesop・BAUM・Drunk Elephantを日常的に使っている
- 参考サイト:
- Aesop（aesop.com）── 余白・タイポグラフィの力だけで世界観を伝える
- Glossier（glossier.com）── D2Cスキンケアのコマース導線設計
- Ordinary（theordinary.com）── 成分訴求のUI、科学的な信頼感の表現
- サイト種別: ECサイト（Shopifyベース想定）── 商品一覧、商品詳細、成分解説ページ、ブランドストーリー、カートを含む
# 1. カラーパレット
## プライマリカラー
- Sand（サンド）: #C2B8A3
- 用途: ブランドの象徴色。ヒーローセクション背景、CTAボタン背景、セクション背景（交互配色）、アイコン塗り
- 意図: 砂漠の砂・生成り布・素肌の色に通じる、温かみのあるニュートラル。自然由来を無言で伝える
## セカンダリカラー
- Sage（セージ）: #8A9A82
- 用途: セカンダリボタン、成分タグバッジ、チャートのアクセント、フッターアイコン
- 意図: 植物・ハーブ・自然科学を連想させるグリーン。Sand との組み合わせで「自然 × 知性」を表現
## アクセントカラー
- Terracotta（テラコッタ）: #C67C5B
- 用途: セールバッジ、カート内の注意表示、限定品ラベル、ホバー時のリンク色
- 意図: ページ内で最小限に使うことで視線を強制誘導。温かみのある警告色
## 背景色
- Ivory（アイボリー）: #FAF8F5 ── ページ全体の背景、カード背景
- Warm White（ウォームホワイト）: #FFFFFF ── ヘッダー、モーダル、フォーム入力フィールド
- Linen（リネン）: #F0EDE7 ── セクション交互背景、テーブル偶数行
## テキスト色
- Ink（インク）: #1A1A1A ── 見出し、プライマリテキスト
- Charcoal（チャコール）: #4A4A4A ── 本文テキスト
- Stone（ストーン）: #8C8C8C ── キャプション、プレースホルダ、補足テキスト
- Mist（ミスト）: #B5B5B5 ── 無効状態テキスト、ディバイダー
## リンク色
- デフォルト: #1A1A1A（テキストと同色、下線で識別）
- ホバー: Terracotta #C67C5B（色変化 + 下線がSandに変わる）
- 訪問済み: #6B6B6B
- フォーカス: 2px solid #8A9A82（アクセシビリティ対応のフォーカスリング）
## セマンティックカラー（機能用途のみ）
- Success: #5B8C5A ── 完了、在庫あり
- Warning: #D4A34A ── 残りわずか、入力注意
- Error: #C45B5B ── エラー、在庫切れ
- Info: #5B7FA6 ── ツールチップ、成分解説リンク
## カラー使用比率ルール
- Ivory / Warm White（背景）: 70%
- Sand / Linen（セクション背景・装飾）: 15%
- Ink / Charcoal（テキスト）: 10%
- Sage / Terracotta（アクセント）: 5%以内
# 2. タイポグラフィ
## フォントファミリー
### 見出し用（Display / Heading）
- 欧文: Cormorant Garamond（Google Fonts、セリフ体）
- 理由: 知性・上品さ・クラシカルな信頼感。コスメの成分名（ラテン語由来）との親和性が高い
- 和文: Noto Serif JP
- 理由: Cormorant との字幅バランスが良く、細いウェイトで「呼吸のある」見出しを実現
### 本文用（Body / UI）
- 欧文: Inter（Google Fonts、サンセリフ体）
- 理由: 小さなサイズでの可読性、tabular figuresによる価格表示の整列
- 和文: Noto Sans JP
- 理由: UI要素・本文の可読性最優先。Noto Serif との混植でコントラストを生む
### 特殊用途
- 成分名・学名表示: Cormorant Garamond Italic（英文成分名を美しく強調）
- 価格表示: Inter tabular figures（桁揃え必須）
## サイズスケール（Major Third: 1.250比率ベース）
### PC（1440px幅基準）
- H1（Hero Heading）: Cormorant Garamond Light 300 / Noto Serif JP Light 300
- サイズ: 56px
- 行間: 130%
- 字間: -0.02em
- 用途: ヒーローセクションのメインコピーのみ
- H2（Section Heading）: Cormorant Garamond Regular 400 / Noto Serif JP Regular 400
- サイズ: 36px
- 行間: 140%
- 字間: -0.01em
- 用途: セクション見出し
- H3（Subsection Heading）: Noto Sans JP Medium 500
- サイズ: 24px
- 行間: 150%
- 字間: 0em
- 用途: カードタイトル、サイドバー見出し
- H4（Card Title / Label）: Noto Sans JP SemiBold 600
- サイズ: 18px
- 行間: 150%
- 用途: 商品名、フォームラベル
- Body Large: Noto Sans JP Regular 400
- サイズ: 17px
- 行間: 190%
- 用途: リード文、商品説明の第1段落
- Body: Noto Sans JP Regular 400
- サイズ: 15px
- 行間: 190%
- 最大幅: 680px（可読性を保つ折り返し幅）
- 用途: 本文全般
- Caption: Noto Sans JP Regular 400
- サイズ: 13px
- 行間: 170%
- 用途: 補足テキスト、成分注釈、日付
- Overline: Inter Medium 500 / Noto Sans JP Medium 500
- サイズ: 11px
- 行間: 150%
- 字間: +0.12em（レタースペーシング広め）
- テキスト変形: 大文字（英字の場合）
- 用途: セクションラベル（「INGREDIENTS」「NEW ARRIVAL」等）
### タブレット（768px幅）
- H1: 44px / H2: 30px / H3: 22px / Body: 15px（変更なし）
### スマホ（375px幅）
- H1: 36px / H2: 26px / H3: 20px / Body: 15px（変更なし、行間を200%に拡大）
# 3. ボタンスタイル
## 共通仕様
- フォント: Noto Sans JP Medium 500 / Inter Medium 500
- テキストサイズ: 15px
- 字間: +0.04em
- 高さ: Large 56px / Medium 48px / Small 40px
- パディング: 左右 32px（Large）、24px（Medium）、16px（Small）
- 角丸: 0px（直角 ── ブランドのシャープさ・誠実さを表現。丸みは「かわいさ」に寄りすぎるため不採用）
- トランジション: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1)
- フォーカスリング: 2px solid #8A9A82、offset 2px
### プライマリボタン
- デフォルト:
- 背景: Sand #C2B8A3
- テキスト: Ink #1A1A1A
- ボーダー: なし
- ホバー:
- 背景: #B5A892（Sandを10%暗く）
- テキスト: #1A1A1A
- transform: translateY(-1px)
- シャドウ: 0 4px 12px rgba(0,0,0,0.08)
- アクティブ（押下中）:
- 背景: #A89B85（さらに暗く）
- transform: translateY(0)
- シャドウ: なし
- 無効:
- 背景: #E8E4DE
- テキスト: #B5B5B5
- cursor: not-allowed
- 用途: カートに追加、購入手続き、メインCTA
### セカンダリボタン
- デフォルト:
- 背景: 透明
- テキスト: Ink #1A1A1A
- ボーダー: 1px solid #1A1A1A
- ホバー:
- 背景: #1A1A1A
- テキスト: #FFFFFF
- アクティブ:
- 背景: #333333
- テキスト: #FFFFFF
- 無効:
- ボーダー: 1px solid #B5B5B5
- テキスト: #B5B5B5
- 用途: 詳細を見る、フィルター適用、セカンダリアクション
### ゴーストボタン（テキストリンク型）
- デフォルト:
- 背景: 透明
- テキスト: #1A1A1A
- 下線: 1px solid #C2B8A3（Sand色の下線）
- ボーダー: なし
- パディング: 0（テキストのみ）
- ホバー:
- テキスト: Terracotta #C67C5B
- 下線: 1px solid #C67C5B
- 用途: 「もっと見る」「成分を詳しく見る」「すべての商品→」
### アイコンボタン（円形）
- サイズ: 48px × 48px（タッチターゲット確保）
- 背景: 透明
- アイコン: 24px、#1A1A1A
- ホバー: 背景 #F0EDE7（Linen）、アイコン色変化なし
- 用途: お気に入り（ハート）、シェア、カート
# 4. コンポーネント
## ヘッダー（全ページ共通、スティッキー）
- 高さ: 72px（PC）/ 60px（SP）
- 背景: Warm White #FFFFFF、opacity 97%、backdrop-blur 16px
- 下ボーダー: スクロール後のみ 1px solid #E8E4DE を表示（スクロール0ではボーダーなし）
- 左: ロゴ「PORQUE」（Cormorant Garamond Medium、20pt、#1A1A1A、字間+0.15em）
- ロゴ下に「CLEAN SKINCARE」（8pt、Overlineスタイル、#8C8C8C）はPC版のみ表示
- 中央: ナビゲーション（PC版のみ表示）
- 項目:「商品一覧」「成分へのこだわり」「ブランドストーリー」「読みもの」
- フォント: 13pt、Noto Sans JP Regular、#4A4A4A、字間+0.04em
- ホバー: テキスト #1A1A1A + 下に2pxのSandカラーライン（アニメーションで伸びる）
- 項目間: 36px
- 右: アイコン横並び（各48pxタッチ領域、アイコン20px、#1A1A1A、間隔8px）
- 検索（search）、お気に入り（heart、バッジなし）、カート（shopping-bag、アイテム数バッジ Sand背景 + Ink文字）
- SP版: 左にハンバーガーではなく「MENU」テキストボタン（13pt、#1A1A1A）、タップで全画面オーバーレイメニュー展開
## フッター
- 背景: #1A1A1A
- 上パディング: 80px、下パディング: 40px
- レイアウト: 4カラム（PC）→ 2カラム（タブレット）→ 1カラム（SP、アコーディオン）
### フッターカラム1（ブランド情報）
- ロゴ「PORQUE」（Cormorant Garamond、18pt、#FAF8F5）
- ブランドコピー:「成分と根拠で、肌と対話する。」（13pt、#8C8C8C、Noto Serif JP）
- SNSアイコン横並び: Instagram、X、LINE（各20px、#8C8C8C、ホバーで #FAF8F5）
### フッターカラム2（ショップ）
- 見出し:「SHOP」（Overlineスタイル、11pt、#8C8C8C）
- リンク:「全商品」「スキンケア」「ベースメイク」「限定セット」「ギフト」（各14pt、#B5B5B5、ホバーで #FAF8F5）
### フッターカラム3（ブランド）
- 見出し:「ABOUT」
- リンク:「成分へのこだわり」「ブランドストーリー」「サステナビリティ」「読みもの」
### フッターカラム4（サポート）
- 見出し:「SUPPORT」
- リンク:「よくある質問」「お問い合わせ」「返品・交換」「特定商取引法」「プライバシーポリシー」
### フッター最下部
- ディバイダー: 1px solid #333333
- コピーライト:「© 2026 PORQUE Inc. All rights reserved.」（11pt、#8C8C8C）
- 右にペイメントアイコン: Visa、Mastercard、AMEX、Apple Pay、Google Pay（各高さ20px、#8C8C8C）
## カード（商品カード）
- 幅: グリッドに準拠（PC 4カラム、タブレット 2カラム、SP 1カラム）
- 角丸: 0px（ブランドのシャープさ統一）
- 背景: Ivory #FAF8F5
- ボーダー: なし
- シャドウ: なし（フラットな面の連なりで構成）
- ホバー: 画像が scale(1.03)、0.4s ease-out
### カード構造
- 画像エリア: アスペクト比 3:4、overflow hidden
- 商品写真: 白背景 or リネン背景に商品単体、自然光、柔らかいシャドウ
- バッジ（左上）: 「NEW」Sand背景 + Ink文字 / 「SOLD OUT」#E8E4DE背景 + #8C8C8C文字 / 「限定」Terracotta背景 + 白文字
- テキストエリア: パディング 16px 0
- Overline:「SERUM」「MOISTURIZER」等のカテゴリ（11pt、Stone #8C8C8C）
- 商品名:「ビタミンC 導入美容液」（16pt、Noto Sans JP Medium、#1A1A1A）
- 英語名:「Vitamin C Brightening Serum」（12pt、Cormorant Garamond Italic、#8C8C8C）
- 容量:「30ml」（13pt、#8C8C8C）
- 価格:「¥4,950」（16pt、Inter Medium、tabular figures、#1A1A1A）
- セール時: 旧価格に取り消し線 + 新価格を Terracotta で表示
- 星評価:「★★★★☆ 4.3（128）」（12pt、星は #C67C5B、テキストは #8C8C8C）
## フォーム
### テキスト入力フィールド
- 高さ: 48px
- 背景: #FFFFFF
- ボーダー: 1px solid #D4D0C8（Sand系の薄いグレー）
- 角丸: 0px
- フォント: 15pt、Noto Sans JP Regular、#1A1A1A
- プレースホルダ: 15pt、#B5B5B5
- ラベル: フィールド上部に配置、13pt、Noto Sans JP Medium、#4A4A4A
- フォーカス:
- ボーダー: 1px solid #1A1A1A
- アウトライン: 2px solid #8A9A82（Sage）、offset 2px
- エラー:
- ボーダー: 1px solid #C45B5B
- エラーテキスト: 12pt、#C45B5B、フィールド下部に alert-circle アイコン付き
- 成功:
- ボーダー: 1px solid #5B8C5A
- 右端に check-circle アイコン（#5B8C5A）
### セレクトボックス
- テキスト入力と同じスタイル
- 右端に chevron-down アイコン（#8C8C8C）
### チェックボックス / ラジオ
- サイズ: 20px × 20px
- ボーダー: 1px solid #D4D0C8
- チェック時: 背景 #1A1A1A、チェックマーク白
- ラベル: 左に8pxマージン、15pt
## CTAセクション（ページ中盤・下部に配置する大型CTA）
- 背景: Sand #C2B8A3
- 高さ: 400px（PC）/ 320px（SP）
- 全幅表示
- コンテンツ中央揃え:
- Overline:「TRIAL SET」（11pt、#4A4A4A）
- 見出し:「まずは5日間、試してみませんか。」（36pt、Noto Serif JP Light、#1A1A1A）
- サブテキスト:「人気3製品のトライアルセット ¥1,980（送料無料）」（15pt、#4A4A4A）
- ボタン: プライマリボタン（背景 #1A1A1A、テキスト #FAF8F5 ── Sand背景上では反転配色）
- ボタンテキスト:「トライアルセットを見る」
- ボタン下:「合わなければ30日以内 全額返金」（13pt、#4A4A4A、shield アイコン付き）
# 5. レスポンシブルール
## ブレイクポイント
- Desktop Large: 1440px〜（デザインの基準幅）
- Desktop: 1024px〜1439px
- Tablet: 768px〜1023px
- Mobile: 375px〜767px（デザインの最小基準幅: 375px）
## グリッドシステム
- Desktop Large: 12カラム、ガター24px、左右マージン各80px、最大コンテンツ幅1280px
- Desktop: 12カラム、ガター24px、左右マージン各40px
- Tablet: 8カラム、ガター16px、左右マージン各32px
- Mobile: 4カラム、ガター16px、左右マージン各20px
## レイアウト変化ルール
### 商品グリッド
- Desktop: 4カラム（各商品カード25%）
- Tablet: 2カラム（各50%）
- Mobile: 1カラム（100%、ただし画像とテキストを横並びにしてコンパクトに）
### ヘッダー
- Desktop: ロゴ（左）+ ナビ（中央）+ アイコン群（右）
- Tablet: ロゴ（左）+ アイコン群（右）+ 「MENU」テキストボタン（左端）
- Mobile: ロゴ（中央）+ ハンバーガーではなく「MENU」（左）+ カートアイコン（右）のみ
- メニュー展開時: 全画面オーバーレイ（背景 #FAF8F5、opacity 100%）、ナビ項目を縦並びで中央揃え、各項目 Cormorant Garamond 28pt
### フッター
- Desktop: 4カラム横並び
- Tablet: 2カラム × 2行
- Mobile: 1カラム縦積み、各セクションはアコーディオン折りたたみ（タイトルのみ表示、タップで展開）
### テキスト
- 本文の最大幅は全ブレイクポイントで680pxを超えない
- H1: 56px → 44px（Tablet）→ 36px（Mobile）
- H2: 36px → 30px → 26px
- Body: 15pxは全ブレイクポイントで固定（モバイルでは行間を200%に拡大）
### タッチターゲット
- Mobile / Tablet: 全タップ可能要素の最小サイズ 48px × 48px
- ボタン間の最小マージン: 8px
### 画像
- 商品画像: Desktop 3:4 → Mobile 1:1（正方形にクロップ、モバイルフィードの一覧性を優先）
- ヒーロー画像: Desktop 16:9 → Mobile 4:5（縦長にクロップ、ファーストビューの画面占有率を最大化）
- 全画像: WebP配信、srcsetで2x Retina対応、loading="lazy"（ファーストビュー以外）
### パフォーマンスルール
- フォント読み込み: Cormorant Garamond + Noto Serif JP は H1・H2 にのみ使用するため font-display: swap + preload
- Inter + Noto Sans JP は本文・UI用として最優先読み込み
- 画像: Largest Contentful Paint を 2.5秒以内に抑えるため、ヒーロー画像は fetchpriority="high"
# 追加指針
## アクセシビリティ
- WCAG 2.1 AA準拠
- テキストコントラスト比: 通常テキスト 4.5:1以上、大テキスト 3:1以上
- フォーカス状態は全インタラクティブ要素で視認可能（Sage #8A9A82 のフォーカスリング）
- スクリーンリーダー対応: 全画像に alt テキスト、装飾画像は aria-hidden="true"
- キーボードナビゲーション: Tab順序の論理的な設計
## アニメーション・モーション
- 基本イージング: cubic-bezier(0.25, 0.1, 0.25, 1)
- デュレーション: ホバー 0.25s / 展開 0.35s / ページ遷移 0.4s
- prefers-reduced-motion: reduce ── 全アニメーションを無効化
- スクロールアニメーション: fade-in + translateY(16px) を各セクションに適用、トリガーはビューポート進入時💡 設計のポイント
📝 プロンプト（コピペOK）
以下のWebデザインコンポーネントを5パターン生成してください。
# コンポーネントの種類
料金表（Pricing Table）
# 前提情報
- サービス: TeamFlow（チームフロー）── 中小企業向けプロジェクト管理SaaS
- プラン構成:
- Free: ¥0/月、3プロジェクト、5ユーザー、基本タスク管理、1GBストレージ
- Standard: ¥1,480/月（年払い¥980/月）、無制限プロジェクト、25ユーザー、ガントチャート、タイムトラッキング、10GBストレージ、メールサポート ── 最も人気
- Business: ¥3,980/月（年払い¥2,980/月）、全Standard機能、無制限ユーザー、カスタムフィールド、API連携、50GBストレージ、優先サポート、SSO
- Enterprise: 要問い合わせ、全Business機能、専用環境、SLA 99.9%、カスタム開発、専任CSM
- CTA: Free→「無料で始める」、Standard→「14日間無料体験」、Business→「14日間無料体験」、Enterprise→「お問い合わせ」
# 出力ルール
- 各パターンに名前をつける（例: パターンA「ミニマル型」）
- HTML + CSS のコード付き（コピーして即ブラウザ表示可能な単一HTMLファイル）
- レスポンシブ対応（PC: 1440px → タブレット: 768px → SP: 375px）
- ダークモード対応版も含める（prefers-color-scheme: dark）
- 各パターン独立した1ファイルで完結
# デザイン制約
- メインカラー: #2563EB（ブランドブルー）を基準に統一
- カラーパレット:
- Primary: #2563EB
- Primary Light: #EFF6FF
- Primary Dark: #1E40AF
- Text Primary: #111827
- Text Secondary: #6B7280
- Border: #E5E7EB
- Background: #FFFFFF
- Background Sub: #F9FAFB
- Success（人気バッジ）: #059669
- ダークモード Background: #0F172A
- ダークモード Card: #1E293B
- ダークモード Text: #F1F5F9
- ダークモード Border: #334155
- フォント: Inter（Google Fonts、400/500/600/700）
- アニメーション: スクロールトリガーの Intersection Observer による fade-in + translateY(24px) のみ。duration 0.6s、ease cubic-bezier(0.25, 0.1, 0.25, 1)、各カードに0.1sずつ stagger delay
- 画像部分はプレースホルダー（aspect-ratio + 背景色で確保）
- 年払い/月払いの切替トグルを全パターンに実装（トグルスイッチUI）
- 「最も人気」バッジは Standard プランに常時表示
- 全プランの機能リストはチェックマーク（✓）/ ×マーク付き
- チェックマーク色: #059669、×マーク色: #D1D5DB
# パターンA「ミニマル型」（余白重視）
## デザイン方針
- 余白を最大限に取り、カード間のガターを40pxに広げる
- カードにボーダーもシャドウもなし、背景色の差異のみで区切る（Free/Business: #F9FAFB、Standard: #FFFFFF ボーダー1px #2563EB）
- 機能リストは最小限（各プラン5項目まで）、詳細は「全機能を比較→」テキストリンクで別ページへ
- 価格の数字を 48px / Inter Bold にして圧倒的に大きく、他の情報は 14px 以下に抑える
- CTAボタンはゴーストスタイル（Standard のみ Primary 塗りつぶし）
- セクションタイトル:「シンプルに、選べる。」（Noto Serif JP Light 相当、ただしHTMLではInterのまま）
## HTML/CSS 実装要件
- カードレイアウト: CSS Grid、grid-template-columns: repeat(4, 1fr)
- タブレット: repeat(2, 1fr)、SP: 1fr
- カード角丸: 0px（ミニマルの極致、直角）
- カード内パディング: 48px 32px
- Standard カードに上部2pxのPrimaryカラーライン
- 年/月トグル: カード群の上部中央に配置、ピル型背景(#F9FAFB)の中にスライドする丸型トグル
- スクロールアニメーション: 各カード stagger 0.1s
# パターンB「インパクト型」（大きなビジュアル重視）
## デザイン方針
- Standard プランを中央に配置し、他のカードより縦方向に 40px 大きく（scale ではなく実際のパディング増）
- Standard カード背景を Primary #2563EB 塗りつぶし、テキスト全て白に反転
- Standard カードの上部に大きな「MOST POPULAR」バッジ（カード上端からはみ出す -16px 配置）
- Free / Business カード背景は白、Enterprise カードは #111827（ダーク）で「特別感」
- 各カードの上部にプランを象徴するアイコンプレースホルダ（aspect-ratio: 1/1、64px、円形、背景色 Primary Light）
- 価格表示の下に「月額換算 ¥XXX/日」の小さなテキストで割安感を演出
- CTAボタンは全プラン大型（高さ56px）、Standard は白背景 + Primary テキスト（反転）
## HTML/CSS 実装要件
- レイアウト: Flexbox、align-items: flex-end で Standard カードだけ上に突出
- Standard カード: min-height: 640px、他: min-height: 600px
- カード角丸: 16px
- シャドウ: Standard のみ 0 20px 60px rgba(37,99,235,0.15)
- Enterprise カードのCTA:「お問い合わせ」ボタンは白ゴーストスタイル
- SP: 横スクロール(scroll-snap)でカード切替、Standard が初期表示
# パターンC「データ重視型」（数字や実績を前面に）
## デザイン方針
- セクション上部に実績数値を3つ横並び表示:「導入企業 2,400社+」「平均コスト削減 34%」「継続率 97.8%」── 料金を見る前に信頼を積む
- 各プランカードの価格下に「このプランの平均ROI: ○○%」をデータバッジとして表示
- 機能リストを数値化できるものは全て数値化:「プロジェクト数: 3」「ユーザー数: 25」「ストレージ: 10GB」── チェックリストではなくスペックテーブル形式
- カード下部に小さな棒グラフ風のビジュアル（CSS疑似要素で実装）── 各プランのコスパを可視化（1ユーザーあたり月額を棒の長さに反映）
- Standard カードに「コスパ最高」バッジ（1ユーザーあたり¥39/日を強調）
## HTML/CSS 実装要件
- 実績セクション: Flexbox 横並び3カラム、各数値は CSS counter-animation（Intersection Observer トリガーでカウントアップ、JS実装）
- カード内スペックテーブル: 2カラム（項目名 | 値）、行間ディバイダー 1px dashed #E5E7EB
- 棒グラフ: 各カード下部に高さ 8px の横棒、幅をパーセンテージで表現、角丸 full、Primary カラーのグラデーション
- カード角丸: 12px
- Standard カード: ボーダー 2px solid #2563EB + 左上にリボン型「コスパ最高」バッジ（CSS三角形で実装）
# パターンD「ストーリー型」（ステップで構成）
## デザイン方針
- 料金表を「あなたの成長に合わせて」というストーリーラインで横に流す
- 各プランを「ステップ」として提示:
- Step 1: Free「まずは試す」
- Step 2: Standard「チームで本格運用」
- Step 3: Business「組織に最適化」
- Step 4: Enterprise「経営基盤に」
- カード間を矢印（→）のラインで接続（CSS border + 疑似要素で実装）、プラン間の進化を視覚化
- 各カードの上部にステップ番号（01 / 02 / 03 / 04）を大きなグレーテキスト（64px、#E5E7EB）で表示し、その上にプラン名を重ねる
- カード内に「こんなチームにおすすめ」1行テキストを追加:
- Free:「個人〜3人のサイドプロジェクトに」
- Standard:「5〜25人の成長チームに」
- Business:「複数部門を横断管理するチームに」
- Enterprise:「セキュリティ要件の厳しい大企業に」
## HTML/CSS 実装要件
- レイアウト: CSS Grid 横並び4カラム、カード間に矢印コネクター（::after 疑似要素、ボーダー右 + 三角形）
- SP: 縦積み、矢印は下向きに変更（::after をborder-bottomに切替）
- ステップ番号: position absolute、top -20px、left 16px、z-index 0、テキスト #E5E7EB、font-size 64px、font-weight 700
- カード角丸: 20px（柔らかいステップ進行感）
- Standard カード: 背景にPrimary Light #EFF6FF のグラデーション（上から下へ opacity 100% → 0%）
- スクロールアニメーション: 左から右へ順に stagger 0.15s（ステップの進行を演出）
# パターンE「インタラクティブ型」（ホバーや動きで魅せる）
## デザイン方針
- デフォルト状態: 全カードが均一サイズ、機能リストは折りたたまれて「主要機能3つ + もっと見る」のみ表示
- ホバー時: カードが translateY(-8px) + シャドウ拡大 + 機能リストが max-height アニメーションで全展開（CSS transition、JSなしで実装可能な範囲）
- Standard カードはデフォルトでやや浮いた状態（translateY(-4px) + シャドウ付き）、ホバーでさらに浮く
- 価格の数字が表示領域に入った瞬間に「0→実際の価格」にカウントアップするアニメーション（JS Intersection Observer + requestAnimationFrame）
- 年/月トグル切替時に、価格の数字が flip アニメーション（CSS perspective + rotateX で上から下にめくれる）で切り替わる
- CTAボタンホバー時: 背景色が左から右へ sweep するアニメーション（::before 疑似要素 + width 0→100%）
- カードのボーダーが、ホバー時に1辺ずつ順にPrimaryカラーに染まるアニメーション（border-image + linear-gradient のトランジション）
## HTML/CSS 実装要件
- 機能リスト展開: max-height: 0 → max-height: 500px（overflow hidden + transition 0.4s ease）、「もっと見る ▾」テキストをクリックでトグル、展開後「閉じる ▴」に変化（minimal JS）
- 価格カウントアップ: Intersection Observer でビューポート進入時トリガー、duration 1.2s、ease-out
- フリップアニメーション: CSS perspective(600px) + rotateX(-90deg → 0deg)、duration 0.4s
- CTAスウィープ: ::before 疑似要素、position absolute、background Primary、width transition 0.35s
- カード角丸: 12px
- SP: ホバーインタラクションは無効化（タッチデバイス対応）、代わりにタップでカード展開のトグル動作に切替
- prefers-reduced-motion: reduce 時 ── 全アニメーション無効、即時表示
# 全パターン共通コード要件
## HTMLベース構造
- <!DOCTYPE html>、lang="ja"
- <head> に meta charset、viewport、Google Fonts（Inter 400/500/600/700）の <link>
- 全スタイルは <style> タグ内に記述（外部CSS不要の単一ファイル）
- 全JSは </body> 直前の <script> タグ内に記述
## ダークモード
- @media (prefers-color-scheme: dark) でカラー変数を上書き
- CSS Custom Properties（:root に --color-bg、--color-card、--color-text 等を定義）で切替
- ダークモード時の Primary カラーは明度を上げた #60A5FA に変更（暗い背景での視認性確保）
- カードシャドウはダークモード時に rgba(0,0,0,0.3) に変更
## アクセシビリティ
- 全インタラクティブ要素に :focus-visible スタイル（2px solid #2563EB、offset 2px）
- トグルスイッチに role="switch"、aria-checked 属性
- 価格変更時に aria-live="polite" で読み上げ対応
- 機能リストの ✓ / × に aria-label（「利用可能」「利用不可」）
## 年/月トグル共通仕様
- トグル幅: 240px、高さ: 44px、角丸: 22px（pill型）
- 背景: --color-bg-sub
- アクティブ側: 白背景スライダー（角丸20px）、シャドウ 0 1px 3px rgba(0,0,0,0.1)
- 「年払い」側にバッジ:「2ヶ月分お得」（11px、Success #059669 背景、白文字、角丸full）
- スライドアニメーション: 0.3s ease
## 各パターンのファイル命名
- pattern-a-minimal.html
- pattern-b-impact.html
- pattern-c-data.html
- pattern-d-story.html
- pattern-e-interactive.html💡 設計のポイント
📝 プロンプト（コピペOK）
X（Twitter）のアルゴリズムの仕組みを解説する図解画像を生成してください。
# テーマ
- Xのアルゴリズムがどのように投稿を評価・拡散するかを可視化
# 掲載内容
【投稿の評価フロー】
ステップ1: 投稿
→ フォロワーの10%にテスト表示
ステップ2: 初期反応（30分以内）
→ いいね: +1pt / RT: +20pt / リプ: +1pt / ブクマ: +15pt
ステップ3: エンゲージメント率を判定
→ 高い → おすすめフィードに拡散
→ 低い → 表示が停止
ステップ4: バイラル拡散
→ フォロワー外のタイムラインに表示
# デザインルール
- スタイル: フラットデザイン、4K高画質
- 背景: ダークネイビー（#15202B）※X風
- アクセント: Xブルー（#1D9BF0）
- フロー: 左から右 or 上から下の視覚的な流れ
- 各ステップをカード化し、矢印で接続
- 「掲載する内容」以外の文字は入れない💡 設計のポイント
📝 プロンプト（コピペOK）
「AI × 人間のハイブリッドデザインワークフロー」を図解してください。
- スタイル: ビジネス書風、フラットデザイン、フルカラー、4K高画質
- 「掲載する内容」以外の文字は入れない
=== 掲載する内容 ===
【AIハイブリッドデザイン 5ステップ】
STEP 1: 設計（人間）
課題定義 → ターゲット分析 → コンセプト設計
💡 AIにはできない「問い」を立てる
STEP 2: 生成（AI）
プロンプト入力 → 画像/UI/資料を大量生成
⚡ 10秒で100案を出す
STEP 3: 選別（人間）
AI出力を評価 → 最適案を選定
👁 「良いデザイン」を見抜く審美眼
STEP 4: 仕上げ（人間 + AI）
Figma/Canva で微調整 → AI で再生成
🔧 人間の意図を最終形に反映
STEP 5: 検証（人間）
ターゲットの反応を確認 → 改善
📊 数字で判断し、次のサイクルへ💡 設計のポイント
📝 プロンプト（コピペOK）
「NotebookLMでスライドを生成する手順」を図解してください。
- スタイル: ステップバイステップのインフォグラフィック、フラットデザイン、4K高画質
- 配色: Google風（Blue #4285F4, Red #EA4335, Yellow #FBBC04, Green #34A853）
- 「掲載する内容」以外の文字は入れない
=== 掲載する内容 ===
【NotebookLMスライド生成ガイド】
① ソースを追加
PDF / Webサイト / YouTube / テキスト → NotebookLMにアップロード
② プロンプトを入力
「このソースからスライドを作成してください」+ スタイル指示
③ Studioパネルで生成
「スライド」を選択 → 数秒で完成
④ カスタマイズ
配色変更 / フォント変更 / レイアウト調整
⑤ エクスポート
Googleスライド or PDF で出力💡 設計のポイント
📝 プロンプト（コピペOK）
AIを全く知らない主婦でもわかるステップ図解を生成してください。
- スタイル: やさしい、親しみやすい、手書き風のイラスト要素を含む
- 対象: 40代主婦、スマホしか持っていない、ITリテラシー低め
- 画質: 4K高画質
- 配色: パステルカラー（ミントグリーン、ラベンダー、ピーチ）
- 「掲載する内容」以外の文字は入れない
=== 掲載する内容 ===
{ここに図解したい手順を入力}✏️ 記入例 — 「ChatGPTの始め方」
=== 掲載する内容 ===
【ChatGPTの始め方 3ステップ】
STEP 1: アプリをダウンロード
App Store で「ChatGPT」と検索 → インストール
STEP 2: アカウントを作る
メールアドレスを入力 → パスワードを設定
STEP 3: 話しかけてみる
「今日の夕飯のメニューを考えて」と入力するだけ！💡 設計のポイント
📝 プロンプト（コピペOK） ※今回は私の書籍の画像を使用しました。
添付した商品画像を使い、ギフトシーンの商品写真を生成してください。
# シーン設定
- テーマ: 大切な人へのプレゼント
- 場所: 上品なリビングルーム or ラッピングテーブル
- 時間帯: 温かみのある午後の自然光
# 構図
- 商品を中央に配置（画面の40%を占める）
- 周囲にギフト演出（リボン、ラッピングペーパー、カード、花）
- 背景にボケたインテリア（奥行き感）
# スタイル
- 商業写真クオリティ（Amazonの商品ページ以上）
- ライティング: ソフトな自然光 + レフ板で影を柔らかく
- 色温度: やや暖色（5500K〜6000K）
- テクスチャ: 素材感がリアルに伝わる解像度
# カラーグレーディング
- 暖かみがあるがやりすぎない上品なトーン
- 彩度はやや抑えめ（商品の色が正確に伝わる範囲）💡 設計のポイント
📝 プロンプト（コピペOK） ※今回は私のトートバッグ（架空）の画像を使用しました。
添付した商品画像を「実際の生活の中で使われているシーン」の写真として生成してください。
# ルール
- 商品が「使われている瞬間」を撮影するイメージ
- モデル（人物）が自然に商品を使用している
- 「広告」ではなく「日常の1コマ」に見えること
# シーン設定
- 場所: {自宅キッチン / カフェ / オフィス / 公園}
- 時間帯: {朝の光 / 午後の柔らかい光 / 夕暮れ}
- モデル: {20代日本人女性 / 30代日本人男性 等}
# 撮影スタイル
- カメラ: 50mm f/1.8 で撮影したような自然なボケ感
- 構図: 三分割法、商品が自然と視線に入る配置
- カラー: ライフスタイル誌のようなナチュラルなトーン
- 品質: 4K、雑誌掲載レベル💡 設計のポイント
📝 プロンプト（コピペOK）
添付した商品を含む「フラットレイ（真上アングル）」写真を生成してください。
# 構図ルール
- 真上（90度）から撮影
- 商品を中央やや左に配置
- 周囲に関連する小物をバランスよく配置
- 全体で「正方形（1:1）」に収まる構図
# 小物アイテム（商品ジャンルに合わせて選択）
- テック系: キーボード、コーヒー、眼鏡、ノート、ペン
- 美容系: 花びら、コットン、タオル、ドライフラワー
- 食品系: 食器、ナプキン、カトラリー、ハーブ
# デザインルール
- 背景: 単色（大理石調 / ウッド / リネン生地）
- 配置: 対角線の法則で小物を配置（左上と右下にグルーピング）
- ライティング: 均一な自然光（影は薄く、方向は右上から）
- 品質: 4K、ECサイト掲載レベル
# 商品情報:
{商品名と特徴を入力}💡 設計のポイント
📝 プロンプト（コピペOK） ※テーマ例：「AIは使わん！」と宣言していた会社の部長が、AIが入っているアプリをいつの間にか知らずに使ってしまい、それを部下の女性に指摘されて恥ずかしがる話
以下の内容で4コマ漫画を生成してください。
# スタイル
- 日本の4コマ漫画形式（縦4段）
- デフォルメされたキャラクター（2頭身〜3頭身）
- 太い輪郭線、ベタ塗り、シンプルな背景
- モノクロ + 1色のアクセントカラー（{色を指定}）
# キャラクター
- 主人公: {例: メガネをかけた会社員、20代女性デザイナー}
- 表情パターン: 困惑 → 発見 → 実践 → 笑顔（起承転結）
# 構成
- 1コマ目（起）: {困っている状況}
- 2コマ目（承）: {AIを知る or 解決策を発見}
- 3コマ目（転）: {AIを使ってみた結果}
- 4コマ目（結）: {オチ or 感動}
# ルール
- 各コマにセリフを入れる（吹き出し）
- セリフは1コマあたり20文字以内
- 4K高画質
# テーマ:
{ここにテーマを入力}💡 設計のポイント
📝 プロンプト（コピペOK）
以下のスタイルでスライドを生成してください。
# スタイル: ウォームモダニズム
- 温かみのあるモダンなデザイン
- レトロとモダンの融合
# 配色
- 背景: テラコッタベージュ（#E8D5C4）
- 文字: ダークブラウン（#3C2415）
- 強調: バーントオレンジ（#CC5500）
# フォント
- 見出し: セリフ体（太め、存在感のある）
- 本文: サンセリフ体（読みやすさ重視）
# レイアウトルール
- 1スライド = 1メッセージ
- 大きなカラーブロックで領域を分割
- 写真を使用する場合はデュオトーン処理
- 数字は見出しの3倍サイズ
- 余白を贅沢に取る（40%以上）
# 禁止事項
- グラデーション、影、3D効果
- 箇条書きの5項目以上の羅列
- クリップアート風のイラスト
# スライドの内容:
## スライド1 — 表紙
**タイトル:** 「山と焙煎 — 地方発クラフトコーヒーの挑戦」** サブタイトル:** 長野県松本市から届ける、標高1,000mの一杯
**発表者:** 山岳珈琲株式会社 代表 藤村 陽介** 日付:** 2026年2月
## スライド2 — 問題提起
**見出し:** 地方の喫茶文化が、静かに消えている** 本文:** 長野県内の個人経営カフェは過去10年で32%減少。一方で「本物の味」を求める消費者は増え続けている。このギャップに、私たちの機会がある。
## スライド3 — 数字で見る市場
**大きな数字:** 4,800億円** 補足:** 国内スペシャルティコーヒー市場の推定規模（2025年）。年平均成長率8.2%で拡大中。
## スライド4 — 私たちのビジョン
**見出し:** 「標高が、味になる」** 本文:** 冷涼な空気の中でじっくり焙煎することで生まれる、澄んだ甘さ。松本という土地そのものをブランドの核にする。
## スライド5 — 事業モデル
**見出し:** 3つの柱で届ける
**項目:**
1. **直営ロースタリー** — 松本市内の蔵をリノベーションした体験型店舗
2. **サブスクリプション** — 毎月届く「標高別」焙煎セット（月額2,480円〜）
3. **法人卸** — 地元ホテル・旅館への高品質豆の供給
## スライド6 — 競合との差別化
**見出し:** なぜ私たちが選ばれるのか** 本文:** 大手チェーンは「均一な味」、都市部ロースターは「トレンド」で勝負する。私たちは「場所の記憶に残る味」で勝負する。生産地ではなく"焙煎地"のテロワールという新しい概念を提案。
## スライド7 — ターゲット顧客
**見出し:** 届けたい相手** 本文:** 30〜50代、年収600万円以上、旅と食に投資を惜しまない層。平日はサブスクで自宅に届き、休日は松本のロースタリーを訪れる——そんな二拠点的コーヒー体験を設計する。
## スライド8 — 収支計画（3年サマリー）
**大きな数字:** 黒字化 → 18ヶ月目
**補足テーブル（簡易）:**
- 初年度売上: 3,200万円 / 営業利益: ▲480万円
- 2年目売上: 7,500万円 / 営業利益: 620万円
- 3年目売上: 1億2,000万円 / 営業利益: 2,150万円
## スライド9 — 資金調達
**大きな数字:** 4,500万円** 本文:** 今回調達したい金額。内訳は、蔵リノベーション費用2,000万円、焙煎機導入1,200万円、ブランディング・マーケティング800万円、運転資金500万円。
## スライド10 — ロードマップ
**見出し:** ここから18ヶ月の道筋
**タイムライン:**
- **2026年 春** — 蔵リノベーション着工・焙煎機発注
- **2026年 秋** — ロースタリーグランドオープン／サブスク開始
- **2027年 春** — 法人卸チャネル本格稼働
- **2027年 夏** — 月間サブスク会員1,000名突破を目指す
## スライド11 — チーム紹介
**見出し:** この挑戦を率いるメンバー** 本文:** 代表・藤村陽介（元大手飲料メーカーの商品開発15年）、焙煎責任者・大塚 恵（SCA認定Qグレーダー、国際品評会審査員歴）、クリエイティブ・ディレクター・宮下 翠（地方ブランディング専門、受賞歴多数）。少数精鋭で、意思決定を速く。
## スライド12 — クロージング
**見出し:** 一杯のコーヒーが、地方の景色を変える** 本文:** 松本の空気ごと届けるコーヒーを、一緒に育てませんか。
**連絡先:** info@sangaku-coffee.jp / 0263-XX-XXXX💡 設計のポイント
📝 プロンプト（コピペOK）
以下のスタイルでスライドを生成してください。
# スタイル: ナチュラルオーガニック
- 自然の素材感を活かした、地に足のついたデザイン
# 配色
- 背景: リネンホワイト（#FAF0E6）
- 文字: フォレストグリーン（#228B22）
- 強調: ゴールデンイエロー（#DAA520）
- サブ: セージ（#BCB88A）
# フォント
- 見出し: 細めのセリフ体（上品）
- 本文: ライトウェイトのサンセリフ
# デザイン要素
- テクスチャ: 紙、リネン、ウッドの質感を背景に薄く
- アイコン: 手描き風のラインアイコン
- 区切り線: 植物のツタ or リーフモチーフ
- 写真: 自然光、暖かいトーン
# スライドの内容:
## スライド1 — 表紙
**タイトル:** 「土に還る美しさ — botanical journey」** サブタイトル:** 瀬戸内の薬草から生まれた、新オーガニックスキンケアライン
**ブランド名:** 凪草（なぎくさ）** 日付:** 2026年 春夏コレクション発表会
## スライド2 — ブランドの原点
**見出し:** すべては、祖母の台所から始まった** 本文:** 創業者・三島 鈴の祖母は、瀬戸内の小さな島でヨモギやドクダミを摘み、自家製の化粧水をつくっていた。「肌に塗るものは、食べられるものだけ」。その言葉が、凪草のすべての処方の出発点になっている。
## スライド3 — 市場背景
**大きな数字:** 1兆2,000億円** 補足:** 国内オーガニック・ナチュラルコスメ市場の2025年推計。過去5年で市場規模は約1.6倍に。消費者の意識は「成分の透明性」と「環境負荷の低さ」へ明確にシフトしている。
## スライド4 — 私たちが感じている課題
**見出し:** "オーガニック"が、記号になっていないか** 本文:** 棚に並ぶ「自然派」の文字。しかしその多くは、合成成分にほんの少し植物エキスを添えただけのもの。本当に土地と植物に向き合ったプロダクトは、まだ驚くほど少ない。
## スライド5 — 凪草のフィロソフィー
**見出し:** 3つの約束
**項目:**
1. **島の薬草、島の水** — 原料の85%以上を瀬戸内諸島で栽培・採取した植物と湧水で構成
2. **全成分15以下** — 一つひとつの処方を極限まで削ぎ落とし、肌が本当に必要なものだけを届ける
3. **土に還るパッケージ** — 容器はすべて竹パルプ・再生ガラス。インクも植物由来
## スライド6 — 新商品ライン紹介
**見出し:** 「朝凪」シリーズ — 全4アイテム
**本文:**
- **朝凪 クリアウォッシュ**（洗顔料）— ヤマモモ果実エキス × 海塩。くすみを穏やかに洗い流す
- **朝凪 ハーバルミスト**（化粧水）— ドクダミ蒸留水 × ユズセラミド。一吹きで肌の深部まで潤す
- **朝凪 ボタニカルセラム**（美容液）— ツバキ種子油 × ヨモギ発酵エキス。日中の揺らぎ肌を守る
- **朝凪 リペアバーム**（保湿クリーム）— ミツロウ × ビワ葉エキス。夜の修復時間に寄り添う
## スライド7 — 成分のストーリー（写真メイン）
**見出し:** 畑から処方室まで、すべてが見える** 写真指定:** 瀬戸内の段々畑でヨモギを手摘みするスタッフの自然光写真
**キャプション:** 毎年5月、島の農家と一緒に薬草を収穫する。朝露が残る早朝に摘んだ葉だけが、凪草の原料になる。
## スライド8 — 効果実感データ
**大きな数字:** 92%** 補足:** モニター試験（n=120、4週間使用）で「肌のキメが整った」と回答した割合。そのほか「肌荒れが減った」87%、「香りに癒された」95%。合成香料ゼロでありながら、使用体験の満足度が極めて高い結果に。
## スライド9 — サステナビリティへの取り組み
**見出し:** 美しくなることが、島を守ることになる** 本文:** 売上の3%を「瀬戸内薬草保全基金」に拠出し、耕作放棄地を薬草畑として再生する活動を支援。2027年までに5島・計2ヘクタールの畑を復活させることが目標。パッケージの竹パルプは地元の放置竹林から調達し、里山整備にも貢献している。
## スライド10 — 販売チャネル戦略
**見出し:** 届け方も、自然体で
**項目:**
1. **自社EC + 定期便** — ブランド世界観を直接届けるメインチャネル。定期便は初回30%OFF
2. **セレクトショップ卸** — 全国のオーガニック系セレクトショップ約40店舗と提携予定
3. **島のアトリエ直売** — 瀬戸内の工房を月2回開放。畑見学つきの購入体験を提供
## スライド11 — 今後のスケジュール
**見出し:** 「朝凪」シリーズ ローンチまでの道のり
**タイムライン:**
- **2026年3月** — 美容メディア・インフルエンサー向け先行体験会（尾道にて）
- **2026年4月** — 自社ECにて先行予約開始／定期便会員募集
- **2026年5月** — 一般発売開始（EC + セレクトショップ同時展開）
- **2026年夏** — 島のアトリエ一般公開スタート
## スライド12 — 価格一覧
**見出し:** 手に取りやすい、誠実な価格で** 本文:** クリアウォッシュ 2,860円（税込）/ ハーバルミスト 3,300円 / ボタニカルセラム 4,950円 / リペアバーム 3,740円。4点セット定期便は月額 12,800円（通常より約14%お得）。
## スライド13 — チーム
**見出し:** 島と植物を知り尽くしたメンバー** 本文:** 代表・三島 鈴（元大手化粧品メーカー研究員、10年間の処方開発経験を経て独立）。農園責任者・大野 拓真（瀬戸内で薬草栽培を行う3代目農家）。プロダクトデザイナー・永井 紗也（サステナブルパッケージ専門、グッドデザイン賞受賞歴）。
## スライド14 — クロージング
**見出し:** 島の朝凪のような、静かな美しさを** 本文:** 瀬戸内の風と光を閉じ込めた一滴を、あなたの毎日に届けたい。お取り扱い・お問い合わせはお気軽にどうぞ。
**連絡先:** hello@nagikusa.jp / www.nagikusa.jp** 写真指定:** 早朝の瀬戸内海、穏やかな水面に光が差す風景（デュオトーン不要、自然光のまま暖かいトーンで）💡 設計のポイント
📝 プロンプト（コピペOK）
以下のスタイルでスライドを生成してください。
# スタイル: ポップビビッド
- エネルギッシュ、楽しい、記憶に残るデザイン
- ドーパミンカラーで脳を刺激
# 配色
- 背景: ピュアホワイト（#FFFFFF）
- メイン: エレクトリックパープル（#8B00FF）
- サブ: ネオンピンク（#FF6EC7）
- アクセント: シアン（#00FFFF）
# フォント
- 見出し: 極太ゴシック体（画面の15%以上を占める大きさ）
- 本文: ミディアムウェイトのサンセリフ
# デザインルール
- 大胆な色面構成（画面の50%以上をカラーブロックで埋める）
- テキストにカラーハイライト（マーカー風）
- 1スライドに1つ、動きを感じる要素（斜め配置 or はみ出し）
- 図形: 丸、半円、波線をランダムに配置
- 写真は切り抜き + 影なしで配置
# スライドの内容:
## スライド1 — 表紙
**タイトル:** 「ペラペラ、ぶっ壊す。」** サブタイトル:** しゃべれなくても会話が成立する、新感覚AI語学アプリ "BABB（バブ）"
**ロゴ:** BABBのロゴを画面中央にドーンと配置（はみ出すくらい大きく）** 補足:** 2026年夏 ローンチ予定
## スライド2 — 問題提起
**見出し:** 語学アプリ、続いてる？** 本文:** ダウンロード数は過去最高を更新し続けている。なのに、3ヶ月後の継続率はたった4%。原因はシンプルで、「一人で黙々」がつまらないから。ドリル型の反復はもう限界に来ている。
**ハイライト指定:** 「たった4%」をネオンピンクのマーカーで強調** 動きの要素:** 「4%」の数字を画面右下から斜めに大きくはみ出させる
## スライド3 — インサイト
**見出し:** Z世代の本音** 本文:** 私たちが500人に聞いた結果はこうだった。「教科書っぽいのムリ」「推しの言葉をそのまま理解したい」「外国人の友達がほしいだけ」。彼らが求めているのは"勉強"ではなく"つながり"。
**ハイライト指定:** 「"つながり"」をシアンのマーカーで強調** 動きの要素:** 3つの本音をふきだし風に斜め配置
## スライド4 — BABBとは
**見出し:** しゃべって、笑って、気づいたら話せてる** 本文:** BABBは、AIキャラクターとリアルタイムで"雑談"する語学アプリ。文法ドリルは一切なし。推しのアイドル風、映画の登場人物風、バイト先の先輩風——好きなキャラを選んで、ただ好きなことを話すだけ。会話ログがそのまま自分だけの教材になる。
**動きの要素:** スマホ画面のモックアップを斜め15度に傾けて配置
## スライド5 — 機能ハイライト①
**見出し:** AIキャラ、120体以上** 本文:** K-POPアイドル風、NYのコーヒーショップ店員風、パリの美大生風など、多彩なキャラクターをAIが演じる。キャラごとに語彙・スラング・話すスピードが違うから、飽きない。自分だけのオリジナルキャラも作成可能。
**ハイライト指定:** 「120体以上」をエレクトリックパープルのマーカーで強調** 動きの要素:** キャラクターのアイコンを画面外から半分はみ出す形で4〜5体並べる
## スライド6 — 機能ハイライト②
**見出し:** 「ツッコミAI」が間違いを楽しくする** 本文:** 従来アプリの赤字の訂正は心が折れる。BABBでは、会話中の間違いにキャラがボケやツッコミで返してくれる。笑いながら正しい表現を覚えるから、記憶定着率が従来比2.4倍（自社調べ）。
**ハイライト指定:** 「2.4倍」をネオンピンクのマーカーで強調** 動きの要素:** チャットのふきだしサンプルを波線で囲んで斜め配置
## スライド7 — 機能ハイライト③
**見出し:** 推し活がそのまま勉強になる** 本文:** 好きなアーティストの歌詞・推しの配信・SNS投稿をBABBに取り込むと、その中の単語やフレーズで会話レッスンが自動生成される。「勉強してる感ゼロ」を本気で実現した機能。
**動きの要素:** 音符や星の図形を画面四隅にランダム配置
## スライド8 — 対応言語
**見出し:** まず5言語でスタート** 本文:** 英語・韓国語・中国語（簡体）・スペイン語・フランス語。ユーザー投票で次の追加言語を決定する仕組みにし、コミュニティとの共創を重視。2027年末までに15言語への拡大を目指す。
**動きの要素:** 5言語を丸いバッジ型にして、波線の上にリズミカルに配置
## スライド9 — ビジネスモデル
**見出し:** フリーミアム × コミュニティ課金** 本文:** 基本の雑談（1日3会話）は完全無料。プレミアムプラン（月額980円）で会話し放題＋キャラ全開放＋会話ログAI分析。さらに「推し活パック」（月額480円の追加オプション）でコンテンツ取り込み機能を解放。
**ハイライト指定:** 「完全無料」をシアンのマーカーで強調
## スライド10 — 市場規模
**大きな数字:** 270億ドル** 補足:** グローバル語学学習アプリ市場の2026年予測。年間成長率18.5%の急成長セグメント。中でもAI会話型はまだ全体の7%にすぎず、参入余地は巨大。
**動きの要素:** 「270」の数字を画面の半分以上を占めるサイズで斜めに配置
## スライド11 — 競合比較
**見出し:** BABBは"ここ"にいる** 本文:** ポジショニングマップで示す。横軸「ドリル型 ↔ 会話型」、縦軸「真面目 ↔ エンタメ」。大手A社はドリル型×真面目、B社は会話型×真面目。BABBは「会話型×エンタメ」の象限にポジションを取る。この象限にはまだ強力なプレイヤーがいない。
**動きの要素:** マップ全体を5度ほど傾けて配置し、BABBの位置に大きな丸を配置
## スライド12 — 初期トラクション
**大きな数字:** 28,000人** 補足:** クローズドβ（3ヶ月間）での事前登録者数。SNS経由のオーガニック流入が91%を占め、広告費ほぼゼロで達成。TikTokでの紹介動画は累計再生480万回を突破。
**ハイライト指定:** 「広告費ほぼゼロ」をネオンピンクのマーカーで強調
## スライド13 — 資金調達
**見出し:** シリーズAで3億円を調達したい** 本文:** 用途の内訳は、AIモデル強化・キャラクター開発に1.2億円、マーケティング（TikTok・Instagram中心）に8,000万円、エンジニア採用（5名）に6,000万円、運転資金に4,000万円。
**動きの要素:** 「3億円」をシアンの半円ブロックの上にドカンと配置
## スライド14 — ロードマップ
**見出し:** ここからの12ヶ月
**タイムライン:**
- **2026年 春** — シリーズAクローズ／開発チーム拡大
- **2026年 夏** — 正式ローンチ（iOS / Android同時）、初月10万DL目標
- **2026年 秋** — 推し活パック実装／韓国語コンテンツ大幅拡充
- **2027年 冬** — MAU50万人突破／対応言語10言語に拡大** 動きの要素:** タイムラインを左下から右上への斜め階段状にレイアウト
## スライド15 — チーム
**見出し:** このチーム、ちょっとヤバい** 本文:** CEO・安藤ルカ（24歳、帰国子女 × 元VTuber事務所プロデューサー。"推し活×語学"の着想はここから）。CTO・パク・ジュンホ（元大手テック企業AIリサーチャー、会話AI論文の被引用数国内トップクラス）。CDO・佐々木ニナ（元ゲーム会社UIデザイナー、App Store「Today」3回選出の実績）。
**動きの要素:** 3人の切り抜き写真を三角形に配置し、一人だけ少しはみ出させる
## スライド16 — クロージング
**見出し:** 言語の壁、ぶっ壊そう。** 本文:** BABBがあれば、世界中の誰とでもしゃべれる自分になれる。一緒にこの革命を起こしてくれる仲間と投資家を探しています。
**連絡先:** hello@babb-app.com / @babb_app（各種SNS）** 動きの要素:** 見出しテキストを画面いっぱいに斜め配置、文字の一部が画面外にはみ出す💡 設計のポイント
📝 プロンプト（コピペOK）
以下のスタイルでスライドを生成してください。
# スタイル: カラフルポップ
- Google / Notion / Slack のような親しみやすいSaaS風デザイン
# 配色（マルチカラー）
- 背景: ライトグレー（#F5F5F5）or ホワイト
- カラー1: コーラル（#FF6B6B）
- カラー2: ブルー（#4ECDC4）
- カラー3: イエロー（#FFE66D）
- カラー4: パープル（#A28DFF）
- テキスト: ダークグレー（#2D3436）
# ルール
- 各スライドでカラーの主役を変える（順番にローテーション）
- カード型UIで情報を整理（角丸16px）
- アイコン: シンプルなラインアイコン（2px線）
- イラスト: Notion風のミニマルなキャラクター or オブジェクト
- グラフは各カラーを使い分けて視覚的に区別
# スライドの内容:
## スライド1 — 表紙
**主役カラー:** パープル（#A28DFF）** タイトル:** まるっとバックオフィス "Comado（コマド）"
**サブタイトル:** 経理・労務・総務をひとつの窓に。中小企業のための、やさしい業務プラットフォーム。** イラスト指定:** Notion風のミニマルキャラクターがノートPCに向かって手を振っている
**補足:** シリーズA 投資家向けピッチ / 2026年2月
## スライド2 — 課題提起
**主役カラー:** コーラル（#FF6B6B）** 見出し:** 中小企業のバックオフィス、いまこうなっている
**カード型UIで3枚並列:**
- **カード①「ツールだらけ」** — 会計ソフト、勤怠アプリ、チャット、Excel…。従業員30名以下の企業が平均で使っている業務ツールは7.3個。ログインだけで朝が終わる。
- **カード②「属人化」** — 経理のことは経理担当しか知らない。その人が休んだ瞬間、請求書が止まる。引き継ぎ資料は存在しない。
- **カード③「月末パニック」** — 給与計算、請求書発行、経費精算の締め切りが毎月同時に押し寄せ、月末の3日間だけ全員が残業する異常な風景。** アイコン指定:** カード①＝パズルピース、カード②＝人物シルエット、カード③＝カレンダーに炎
## スライド3 — 市場データ
**主役カラー:** ブルー（#4ECDC4）** 見出し:** 見過ごされてきた巨大マーケット
**大きな数字:** 国内中小企業 357万社** 本文:** 従業員100名以下の企業は日本の全企業の99.7%を占める。しかしバックオフィスSaaSの導入率はわずか18%。大手向けERPは高すぎて導入できず、無料ツールの組み合わせで耐えている。この「SaaSの空白地帯」に私たちは挑む。
**グラフ指定:** 円グラフ — 導入済み18%（ブルー）/ 未導入82%（ライトグレー）
## スライド4 — プロダクト概要
**主役カラー:** イエロー（#FFE66D）** 見出し:** Comadoは「小窓」から始まる
**本文:** Comado（＝小窓）は、経理・労務・総務の日常業務をひとつのダッシュボードに集約するクラウドサービス。「今日やるべきこと」が毎朝小窓のように画面にポップアップし、クリックするだけでそのまま処理が完了する。複数ツールを行き来する生活は、もう終わり。** イラスト指定:** ダッシュボード画面のモックアップ。小窓風のカードが3つ並んでいるイメージ
## スライド5 — 主要機能①
**主役カラー:** コーラル（#FF6B6B）** 見出し:** 経理モジュール
**カード型UIで3枚並列:**
- **カード①「AI仕訳」** — レシートを撮影するだけで勘定科目を自動判定。精度94%、手修正は平均月5件以下に。
- **カード②「請求書ワンクリック」** — 取引先マスタと連動し、毎月の請求書を自動生成。PDFとメール送付までComadoが完了。
- **カード③「リアルタイムPL」** — 月末を待たなくても、今日時点の損益がいつでも確認できる。経営判断のスピードが変わる。** アイコン指定:** カード①＝カメラ、カード②＝紙飛行機、カード③＝棒グラフ
## スライド6 — 主要機能②
**主役カラー:** ブルー（#4ECDC4）** 見出し:** 労務モジュール
**カード型UIで3枚並列:**
- **カード①「ワンタップ勤怠」** — スマホのGPSまたはSlack連携で出退勤を自動記録。打刻忘れにはやさしくリマインド。
- **カード②「給与自動計算」** — 勤怠データ × 社保 × 税率を自動連携し、毎月の給与明細をゼロ手作業で生成。
- **カード③「入退社まるごと」** — 雇用契約書の電子署名から社保届出書類のテンプレ出力まで。新入社員の手続きが30分で完了。** アイコン指定:** カード①＝時計、カード②＝コイン、カード③＝握手
## スライド7 — 主要機能③
**主役カラー:** イエロー（#FFE66D）** 見出し:** 総務モジュール
**カード型UIで3枚並列:**
- **カード①「備品管理」** — 社内の備品をQRコードで管理。「あのプロジェクター今どこ？」が3秒で解決。
- **カード②「届出テンプレ」** — 住所変更届、慶弔申請、有給申請など、よく使う届出フォーマット50種をプリセット。
- **カード③「社内FAQ bot」** — 「年末調整っていつまで？」のような社内問い合わせにAIが自動応答。総務への質問を70%削減。** アイコン指定:** カード①＝ボックス、カード②＝クリップボード、カード③＝ロボット
## スライド8 — プロダクトデモ（スクリーンショット）
**主役カラー:** パープル（#A28DFF）** 見出し:** 「今日のやることリスト」がすべてを変える
**画面モック指定:** Comadoのダッシュボード画面を大きく表示。画面左に「今日のタスク」カードが3枚（「A社への請求書を確認→送付」「今月入社の佐藤さんの社保届出」「備品発注の承認」）、右にリアルタイムPLのミニグラフ。** キャプション:** 朝Comadoを開くだけで、今日やるべきバックオフィス業務がすべてわかる。各タスクはカードをクリックするだけで処理が完了する。
## スライド9 — 連携エコシステム
**主役カラー:** コーラル（#FF6B6B）** 見出し:** いま使っているツール、そのまま活かせる
**本文:** Comadoは既存の業務ツールを置き換えるのではなく、つなぐことを重視している。会計ソフト（freee / マネーフォワード）、チャット（Slack / Chatwork）、ストレージ（Google Drive / Dropbox）と標準連携。APIも公開しており、独自のワークフロー構築も可能。** イラスト指定:** Comadoのロゴを中心に、各連携サービスのアイコンが線でつながっている図
**カード型UI:** 連携サービスのロゴを角丸カードに入れて6つ並べる
## スライド10 — 料金プラン
**主役カラー:** ブルー（#4ECDC4）** 見出し:** シンプルに、従業員数だけで決まる
**カード型UIで3枚並列:**
- **カード①「スターター」** — 月額9,800円（税込）/ 10名まで / 経理＋労務の基本機能 / メールサポート
- **カード②「スタンダード」（人気バッジ付き）** — 月額24,800円（税込）/ 30名まで / 全モジュール利用可 / チャットサポート / API連携
- **カード③「プロ」** — 月額49,800円（税込）/ 100名まで / 全モジュール＋専任カスタマーサクセス / SLA保証 / カスタムワークフロー** 補足:** すべてのプランで初月無料。年間契約なら2ヶ月分お得。
## スライド11 — トラクション
**主役カラー:** イエロー（#FFE66D）** 見出し:** ローンチ8ヶ月で急成長中
**カード型UIで4枚（各カラーを1枚ずつ使用）:**
- **カード①（コーラル）** — 導入企業数 **620社**
- **カード②（ブルー）** — MRR（月次定期収益） **1,480万円**
- **カード③（イエロー）** — 月次成長率 **+22%**（過去6ヶ月平均） - **カード④（パープル）** — NPS **+67**
**グラフ指定:** MRRの推移を棒グラフで表示（8ヶ月分、各月のバーに4色をローテーション使用）
## スライド12 — 顧客の声
**主役カラー:** パープル（#A28DFF）** 見出し:** 使っている人の声
**カード型UIで2枚:**
- **カード①** — 「経理担当がパートさん1名だけのウチでも、Comadoのおかげで月末の残業がゼロになりました。AI仕訳の精度には正直驚いています。」 — 株式会社ヤマシタ工芸（製造業・従業員14名）代表 山下さん
- **カード②** — 「Slackと勤怠が連動するのが最高。エンジニアたちが誰も打刻を忘れなくなった。給与計算日に何もしなくていい感動を知ってしまった。」 — 合同会社ノードワークス（IT・従業員8名）COO 李さん** イラスト指定:** 各カードの横にNotio風ミニマルキャラクターの顔アイコン
## スライド13 — 競合ポジショニング
**主役カラー:** コーラル（#FF6B6B）** 見出し:** なぜ既存のツールでは足りないのか
**本文:** ポジショニングマップで整理する。横軸「単機能 ↔ 統合型」、縦軸「大企業向け ↔ 中小企業向け」。大手ERP（SAP / Oracle）は統合型×大企業向け。freee・マネーフォワードは単機能（会計特化）×中小企業向け。SmartHRは単機能（労務特化）×中小企業向け。Comadoは「統合型 × 中小企業向け」のポジション。この象限で使いやすさとコストを両立しているプレイヤーはまだいない。** グラフ指定:** 2軸のポジショニングマップ。各プロダクトを4色の丸で表示、Comadoはパープルで最も大きく表示
## スライド14 — ビジネスモデルの強み
**主役カラー:** ブルー（#4ECDC4）** 見出し:** "モジュール追加"で自然にアップセル
**本文:** 多くの企業はまず経理モジュールだけで導入を始める。月末の請求書作業が劇的に楽になると、次は「労務もComadoでやりたい」という声が自然に上がる。実際に導入3ヶ月以内のモジュール追加率は58%。1社あたりの平均ARPAはローンチ時から6ヶ月で1.7倍に成長している。解約率（チャーン）は月次1.2%と、SMB向けSaaSとしては極めて低い水準。** グラフ指定:** 横棒グラフ — 導入時の平均モジュール数（1.2）→ 6ヶ月後（2.6）。コーラルとブルーで色分け
## スライド15 — 資金調達
**主役カラー:** イエロー（#FFE66D）** 見出し:** シリーズAで5億円を調達したい
**カード型UIで4枚:**
- **カード①（コーラル）「プロダクト開発」** — 2.0億円 / AI仕訳精度の向上、総務モジュールv2開発、モバイルアプリ刷新
- **カード②（ブルー）「セールス&マーケ」** — 1.5億円 / インサイドセールスチーム構築、税理士・社労士パートナーネットワーク拡大
- **カード③（イエロー）「カスタマーサクセス」** — 0.8億円 / オンボーディング体制強化、ヘルプセンター・動画教材の拡充
- **カード④（パープル）「採用・組織」** — 0.7億円 / エンジニア10名・CS5名・営業5名の採用
## スライド16 — ロードマップ
**主役カラー:** パープル（#A28DFF）** 見出し:** ここから18ヶ月の計画
**タイムラインをカード型UIで横並び:**
- **2026年 Q2（コーラル）** — シリーズAクローズ。モバイルアプリv2リリース。導入企業1,000社突破
- **2026年 Q3（ブルー）** — 税理士パートナー100事務所提携。AI仕訳精度97%達成
- **2026年 Q4（イエロー）** — 年末調整ワンクリック機能リリース。MRR 4,000万円到達
- **2027年 Q3（パープル）** — 導入企業3,000社。シリーズB準備開始。アジア展開の調査着手
## スライド17 — チーム
**主役カラー:** コーラル（#FF6B6B）** 見出し:** バックオフィスを知り尽くしたチーム
**カード型UIで4枚（各カラー1枚ずつ）:**
- **カード①（コーラル）CEO 中村 陽太** — 元freee事業開発マネージャー。中小企業1,000社以上の業務課題をヒアリングしてきた現場主義の起業家。
- **カード②（ブルー）CTO 金 ソヨン** — 元メルカリSREリード。大規模マルチテナントSaaSの設計に精通。インフラからAIまで一貫して見られる技術リーダー。
- **カード③（イエロー）CPO 本田 あかり** — 元SmartHRプロダクトデザイナー。「非IT人材が迷わず使えるUI」の設計において国内屈指の実績。
- **カード④（パープル）VP of Sales 大西 拓也** — 元Sansan法人営業部長。SMBセールスの型化とインサイドセールス組織の立ち上げを得意とする。** イラスト指定:** 各カードにNotion風ミニマルキャラクターの全身イラスト
## スライド18 — クロージング
**主役カラー:** 全4色を均等に使用** 見出し:** バックオフィスを、もっと軽く、もっと楽しく。
**本文:** 中小企業の「裏方仕事」をComadoがまるごと引き受ける。経営者も、担当者も、本来やりたい仕事に集中できる世界をつくりたい。一緒にこの市場を切り拓いてくれるパートナーを探しています。** 連絡先:** hello@comado.jp / comado.jp
**イラスト指定:** Notion風ミニマルキャラクター4体が手をつないでいるイラスト。各キャラクターがコーラル・ブルー・イエロー・パープルの服を着ている💡 設計のポイント
📝 プロンプト（コピペOK）
以下のスタイルでスライドを生成してください。
# スタイル: フラットデザイン（ストリクト）
- 一切の装飾を排除した、最もピュアなフラットデザイン
# 配色
- 背景: 純白（#FFFFFF）
- 文字: ブラック（#000000）
- 強調: ブランドカラー1色のみ（#0055FF）
# フォント
- 見出し: サンセリフ体（Bold / 大きく）
- 本文: サンセリフ体（Regular / 読みやすく）
# 厳格なルール
- 影、グラデーション、テクスチャ: 完全禁止
- 使用色: 白 + 黒 + ブランドカラー1色 = 3色のみ
- アイコン: モノクロのラインアイコン（1px線）
- 写真: 使用しない（代替はフラットイラスト or 図形のみ）
- 余白: 画面の50%以上をスペースにする
- テキスト量: 1スライド50文字以内
# スライドの内容:
## スライド1 — 表紙
**見出し:** LegalLens** 本文:** 契約書AIレビュー
**図形:** ブランドカラーの細い水平線1本のみ
## スライド2 — 課題
**見出し:** 契約書レビュー、1件平均42分。** 図形:** ブランドカラーの円1つ（時計を抽象化）
## スライド3 — 課題の規模
**見出し（大きな数字）:** 年間3,800時間** 本文:** 法務2名体制の企業の契約レビュー総工数
**アイコン:** モノクロの時計アイコン
## スライド4 — 解決策
**見出し:** AIが読む。人が判断する。** 図形:** 左にブラックの四角（AI）、右にブランドカラーの丸（人）、中央に細い矢印
## スライド5 — プロダクト
**見出し:** PDFを入れる。リスクが出る。** 図形:** 左にブラックの長方形（PDF）→ 中央にブランドカラーの四角（LegalLens）→ 右にブラックのチェックリスト型図形
## スライド6 — 処理速度
**見出し（大きな数字）:** 90秒** 本文:** 50ページの契約書を完全レビュー
**図形:** ブランドカラーの細い水平バー（プログレスバー風）
## スライド7 — 精度
**見出し（大きな数字）:** 97.3%** 本文:** リスク条項の検出精度
**図形:** ブランドカラーの円弧（ほぼ完全な円）
## スライド8 — 対応範囲
**見出し:** NDA / 業務委託 / 売買 / 賃貸借 / M&A** 本文:** 主要5類型に対応
**図形:** 同サイズの正方形5つを等間隔に横並び（うち1つだけブランドカラー）
## スライド9 — 仕組み
**見出し:** 3ステップ** 本文:** アップロード → AI解析 → レポート出力
**図形:** 3つの丸を水平に並べ、細い線で接続。丸の中に「1」「2」「3」
## スライド10 — 差別化
**見出し:** 日本法に特化。汎用AIではない。** 図形:** ブランドカラーの正方形1つ（LegalLens）とブラックの正方形3つ（汎用AI）を対比配置
## スライド11 — 市場
**見出し（大きな数字）:** 820億円** 本文:** 国内リーガルテック市場 2026年予測
**図形:** ブランドカラーの縦棒1本（市場規模を抽象表現）
## スライド12 — ターゲット
**見出し:** 法務1〜3名の成長企業** 本文:** 国内対象企業 約12万社
**アイコン:** モノクロのビルアイコン
## スライド13 — 料金
**見出し:** 月額5万円から** 本文:** 従量課金なし。レビュー件数無制限。
**図形:** ブランドカラーの水平線で区切った上下2エリア（プラン名と価格を分離）
## スライド14 — トラクション
**見出し（大きな数字）:** 導入 210社** 本文:** ローンチ6ヶ月。MRR 1,400万円。
**図形:** 右肩上がりの折れ線をブランドカラーの直線3本で抽象表現
## スライド15 — 顧客の声
**見出し:** 「法務の残業が月40時間減った」** 本文:** 導入企業 管理部長
**図形:** ブランドカラーの引用符（" "）を大きく配置
## スライド16 — 資金調達
**見出し（大きな数字）:** 3億円** 本文:** シリーズA調達目標
**図形:** ブランドカラーの正方形1つ（大きく、画面下部に配置）
## スライド17 — 資金使途
**見出し:** 開発 60% / 営業 25% / 採用 15%** 図形:** ブランドカラー・ブラック・ライトグレー（白黒の中間としてではなく、白の代替）の3分割バー ※3色ルールの範囲内で濃淡を活用
## スライド18 — ロードマップ
**見出し:** 2026→2027** 本文:** Q2 英文契約対応 / Q4 API公開 / 翌Q2 ASEAN展開
**図形:** 水平の細い線上にブランドカラーの丸3つ（マイルストーン）
## スライド19 — チーム
**見出し:** 法務 × AI × プロダクト** 本文:** 元大手法律事務所 / 元AIスタートアップCTO / 元SaaSデザイナー
**アイコン:** モノクロの人物アイコン3つを等間隔配置
## スライド20 — クロージング
**見出し:** 契約書を、経営のボトルネックにしない。** 本文:** hello@legallens.jp
**図形:** ブランドカラーの細い水平線1本（表紙と呼応）💡 設計のポイント
📝 プロンプト（コピペOK）
以下のスタイルでスライドを生成してください。
# スタイル: モノトーンシンプル（ダークモード）
- 高級感とプロフェッショナリズムを追求したダークテーマ
# 配色
- 背景: ディープブラック（#0A0A0A）
- テキスト: オフホワイト（#E0E0E0）
- 強調: ピュアホワイト（#FFFFFF）
- 区分線: ダークグレー（#333333）
# フォント
- 見出し: 細めのサンセリフ体（Light or Thin、大きく）
- 本文: Regular ウェイトのサンセリフ
- 数字: Extra Bold（見出しの2倍サイズ）
# デザインルール
- モノクロ写真のみ使用（カラー写真はモノクロ変換）
- テキストは白の濃淡（#FFFFFF / #E0E0E0 / #AAAAAA）で階層表現
- 区切り: 極細の水平線（0.5px、#333333）
- 背景にグレインノイズ（3%）を薄く追加
- 余白は贅沢に取る
# スライドの内容:
## スライド1 — 表紙
**見出し（#FFFFFF / Light / 大きく）:** KUON CAPITAL** サブタイトル（#AAAAAA）:** Private Asset Management
**本文（#AAAAAA）:** Confidential — Investor Presentation 2026** 写真指定:** なし。テキストのみ。画面下部に極細の水平線1本。
## スライド2 — フィロソフィー
**見出し（#FFFFFF）:** 資産は、静かに育てる。** 本文（#E0E0E0）:** 短期の熱狂ではなく、世代を超える時間軸で資産を設計する。それが久遠キャピタルの思想の根幹にある。
**写真指定:** 画面右半分に、霧の中に佇む一本の古木のモノクロ写真
## スライド3 — 会社概要
**見出し（#FFFFFF）:** Overview
**テキスト階層:**
- 社名（#FFFFFF）: 久遠キャピタル株式会社 / KUON CAPITAL Inc.
- 設立（#E0E0E0）: 2019年
- 所在地（#E0E0E0）: 東京都千代田区丸の内
- 代表（#E0E0E0）: 黒田 慎一郎
- 金融商品取引業者（#AAAAAA）: 関東財務局長（金商）第XXXX号
**レイアウト:** 各項目を極細の水平線で区切り、縦に静かに並べる
## スライド4 — 数字で見る実績
**レイアウト:** 3つの数字を横並び。数字はExtra Bold・見出しの2倍サイズ。
- **数字①（#FFFFFF）:** 2,400億円 **ラベル（#AAAAAA）:** 運用資産残高（AUM）
- **数字②（#FFFFFF）:** 14.2% **ラベル（#AAAAAA）:** 過去5年の年平均リターン（税引前）
- **数字③（#FFFFFF）:** 127家 **ラベル（#AAAAAA）:** ご契約ファミリー数** 区切り:** 各数字の間に縦の極細線（#333333）
## スライド5 — 対象とするクライアント
**見出し（#FFFFFF）:** 私たちのクライアント** 本文（#E0E0E0）:** 金融資産5億円以上の個人・ファミリー、事業売却後の創業者、次世代への資産承継を見据える経営者。少数のクライアントと深く長く向き合うため、年間の新規受け入れは最大10家に限定している。
**写真指定:** 画面左端に、モノクロのオーダースーツの袖口のクローズアップ（手元のみ）
## スライド6 — 投資哲学
**見出し（#FFFFFF）:** Investment Philosophy** 本文（#E0E0E0）:** 3つの原則で運用する。
**テキスト階層（各項目を水平線で区切り）:**
- **原則①（#FFFFFF）:** 分散ではなく、集中と確信 **補足（#AAAAAA）:** 深く理解した資産にのみ投資する。形式的な分散は行わない。
- **原則②（#FFFFFF）:** 流動性よりも時間を味方に **補足（#AAAAAA）:** 5年以上のロックアップを厭わない。時間が最大のエッジになる。
- **原則③（#FFFFFF）:** 手数料ではなく成果に連動 **補足（#AAAAAA）:** 固定報酬は最小限。成功報酬型で利害を一致させる。
## スライド7 — アセットアロケーション
**見出し（#FFFFFF）:** Asset Allocation Model** 本文（#E0E0E0）:** 代表的なポートフォリオ構成
**テキスト階層（棒グラフ的にテキスト＋水平バーで表現）:**
- **国内未公開株式（#FFFFFF）:** 30% — バー（#FFFFFF）
- **海外不動産（#E0E0E0）:** 25% — バー（#E0E0E0）
- **グローバル債券（#AAAAAA）:** 20% — バー（#AAAAAA）
- **公開株式（#AAAAAA）:** 15% — バー（#666666）
- **オルタナティブ（#AAAAAA）:** 10% — バー（#444444）** 補足（#AAAAAA）:** クライアントの目的・年齢・流動性要件に応じて個別設計
## スライド8 — 未公開株式の実績
**見出し（#FFFFFF）:** Private Equity — Track Record** 数字（Extra Bold / 大きく）:** IRR 22.6%
**本文（#E0E0E0）:** 2019年以降の未公開株式投資のグロスIRR。投資先は国内テクノロジー企業を中心に累計18社。うち4社がIPO、2社がM&Aによるエグジットを達成。損失案件はゼロ。** 区切り:** 数字と本文の間に極細の水平線
## スライド9 — 海外不動産の実績
**見出し（#FFFFFF）:** Global Real Estate** 数字（Extra Bold / 大きく）:** 年平均 9.8%
**本文（#E0E0E0）:** ロンドン・シンガポール・メルボルンの3都市でプライムロケーションのレジデンシャル物件に投資。為替ヘッジ後・諸経費控除後のネットリターン。現地パートナーとの共同投資により、個人では通常アクセスできない物件に参入。** 写真指定:** 画面下部3分の1に、モノクロの都市スカイライン（ロンドン）
## スライド10 — 資産承継
**見出し（#FFFFFF）:** Wealth Succession** 本文（#E0E0E0）:** 運用だけでは完結しない。久遠キャピタルは、資産承継の設計まで一気通貫で伴走する。家族信託の組成、海外法人を活用したストラクチャー、次世代への金融教育プログラム。各領域の専門家と連携し、世代を超える資産の器をつくる。
**写真指定:** 画面右上にモノクロの万年筆と書類の一部
## スライド11 — サービス体系
**見出し（#FFFFFF）:** Service Structure
**テキスト階層（3段、水平線で区切り）:**
- **Tier 1（#FFFFFF）:** 投資一任運用 **（#AAAAAA）** 資産全体のポートフォリオ設計・実行・モニタリング
- **Tier 2（#FFFFFF）:** ファミリーオフィス機能 **（#AAAAAA）** 税務・法務・保険の専門家ネットワーク、不動産管理、事務代行
- **Tier 3（#FFFFFF）:** 次世代プログラム **（#AAAAAA）** 後継者向けの金融リテラシー教育、海外研修、メンタリング
## スライド12 — 報酬体系
**見出し（#FFFFFF）:** Fee Structure
**テキスト階層:**
- **管理報酬（#FFFFFF）:** AUMの0.5%/年 **（#AAAAAA）** 業界平均の約半分に設定
- **成功報酬（#FFFFFF）:** ハードルレート5%超過分の20% **（#AAAAAA）** 成果が出なければ、追加報酬は発生しない
- **その他（#AAAAAA）:** 契約時の初期費用なし。四半期ごとの透明なレポーティング** 区切り:** 各項目を極細の水平線で区切り
## スライド13 — 運用チーム
**見出し（#FFFFFF）:** Team
**テキスト階層（4名、水平線で区切り）:**
- **黒田 慎一郎（#FFFFFF）** CEO & CIO **（#AAAAAA）** 元ゴールドマン・サックスPB部門MD。20年間で累計8,000億円超の富裕層資産を助言
- **ヴィクトリア・チェン（#FFFFFF）** Head of PE **（#AAAAAA）** 元カーライル・グループ東京。テクノロジーセクター投資に15年の経験
- **小林 暁（#FFFFFF）** Head of Real Estate **（#AAAAAA）** 元CBRE投資顧問。アジア太平洋地域のクロスボーダー不動産投資を専門
- **藤原 理紗（#FFFFFF）** Head of Wealth Planning **（#AAAAAA）** 元PwC税理士法人パートナー。国際税務・資産承継ストラクチャーの第一人者** 写真指定:** なし。テキストのみで構成し、余白を贅沢に確保
## スライド14 — クライアントの声
**見出し（#FFFFFF）:** Client Voice** 引用（#E0E0E0 / イタリック）:** 「売却後の数十億をどうすべきか途方に暮れていた。久遠キャピタルは運用だけでなく、子どもたちの教育まで一緒に考えてくれた。もう5年になるが、一度も不安を感じたことがない。」
**属性（#AAAAAA）:** — IT企業創業者 / 50代 / AUM 30億円** 区切り:** 引用の上下に極細の水平線
## スライド15 — 情報管理
**見出し（#FFFFFF）:** Confidentiality** 本文（#E0E0E0）:** クライアントの存在そのものが機密。社内でも担当チーム以外はクライアント情報にアクセスできない完全分離体制を敷いている。物理的なセキュリティルームでの面談、暗号化通信、年2回の第三者セキュリティ監査。資産を守る前に、情報を守る。
**写真指定:** なし。テキストと余白のみ
## スライド16 — 次のステップ
**見出し（#FFFFFF）:** Next Step
**テキスト階層（3段、水平線で区切り）:**
- **Step 1（#FFFFFF）:** 初回面談（90分） **（#AAAAAA）** 資産状況・ご家族の構成・将来のビジョンをお伺いする
- **Step 2（#FFFFFF）:** ご提案（2週間以内） **（#AAAAAA）** オーダーメイドの運用方針書をお届けする
- **Step 3（#FFFFFF）:** 運用開始 **（#AAAAAA）** ご納得いただけた場合のみ、契約を締結する。急かすことは決してない
## スライド17 — クロージング
**見出し（#FFFFFF / Light / 大きく）:** 資産とは、未来への手紙である。** 本文（#AAAAAA）:** KUON CAPITAL — Private Asset Management
**連絡先（#AAAAAA）:** contact@kuon-capital.jp / 完全紹介制** 写真指定:** 画面全体に極薄のグレインノイズのみ。テキストと余白で静かに閉じる💡 設計のポイント
📝 プロンプト（コピペOK）
以下の企業ブランドガイドラインに完全に準拠したスライドを生成してください。
# ブランド情報
- 企業名: KENTAS株式会社（ケンタス）
- プライマリカラー: #1A3C5E（ディープネイビー）
- セカンダリカラー: #6B9AC4（スカイブルー）
- アクセントカラー: #E8A838（アンバーイエロー）
- フォント指定: 見出し — Noto Sans JP Bold / 本文 — Noto Sans JP Regular
- ロゴ配置ルール: 全スライド共通・右下固定（高さ24px相当、余白16px確保）
# スライドルール
- 表紙: 企業ロゴ + プレゼンタイトル + 日付 + 登壇者名
- 中扉: セクションタイトル（プライマリカラー背景）
- 本編: 白背景 + カラーはアクセントのみ使用
- 最終: まとめ + 連絡先 + QRコード枠
# デザイン制約
- ロゴの改変禁止（カラー・比率の変更不可）
- ブランドカラー以外の色を使用しない
- 写真フィルター: ブランドカラーのデュオトーン or モノクロ
- グラフ・チャートもブランドカラーの濃淡で構成
# スライドの内容:
## スライド1 — 表紙
**タイプ:** 表紙** プレゼンタイトル:** 建設現場を、データでつなぐ。— KENTAS 現場DXプラットフォーム事業説明会
**日付:** 2026年2月** 登壇者名:** KENTAS株式会社 代表取締役CEO 土屋 健一郎
**ロゴ:** 右下固定** 背景:** プライマリカラー（#1A3C5E）ベタ塗り。タイトルとサブ情報は白抜き
## スライド2 — 中扉「会社概要」
**タイプ:** 中扉** セクションタイトル:** 01 — 会社概要
**背景:** プライマリカラー（#1A3C5E）全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド3 — 会社概要
**タイプ:** 本編（白背景）** 見出し:** KENTASについて
**本文:**
KENTAS株式会社は2021年に創業した建設テックスタートアップ。建設現場の施工管理・安全管理・進捗共有をひとつのプラットフォームに統合するクラウドサービス「KENTAS Cloud」を開発・提供している。本社は東京都港区。従業員数62名（2026年1月時点）。2024年にシリーズAで8億円を調達済み。
**アクセントカラー使用箇所:** 「KENTAS Cloud」のテキストをアンバーイエロー（#E8A838）で表示** ロゴ:** 右下固定
## スライド4 — ミッション
**タイプ:** 本編（白背景）** 見出し:** ミッション
**本文:** 「現場の知恵を、産業の資産にする。」建設業界には熟練の職人が数十年かけて蓄積した暗黙知がある。しかしその知恵は個人の頭の中に留まり、引き継がれることなく失われていく。KENTASは、現場から生まれるすべてのデータを構造化し、業界全体が活用できる共有資産に変えることを目指す。** アクセントカラー使用箇所:** ミッションステートメントの引用符をアンバーイエローで表示
**ロゴ:** 右下固定
## スライド5 — 中扉「市場環境」
**タイプ:** 中扉** セクションタイトル:** 02 — 市場環境
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド6 — 建設業界の構造課題
**タイプ:** 本編（白背景）** 見出し:** 建設業界が直面する3つの構造課題
**本文:**
第一に、深刻な人手不足。建設技能者は2025年時点で約305万人だが、2035年には約216万人まで減少すると予測されている。第二に、生産性の停滞。建設業の労働生産性は過去20年間でほぼ横ばいであり、製造業との差は開く一方である。第三に、2024年問題。時間外労働の上限規制が建設業にも適用され、「これまでと同じ人数・同じ時間」では現場が回らなくなった。
**アクセントカラー使用箇所:** 各課題の番号（第一、第二、第三）の先頭にアンバーイエローのドットを配置** ロゴ:** 右下固定
## スライド7 — 市場規模
**タイプ:** 本編（白背景）** 見出し:** 建設テック市場の成長
**大きな数字:** 1兆2,000億円** 本文:** 国内建設テック市場の2027年予測（矢野経済研究所推計）。2022年比で約2.3倍。中でも「施工管理クラウド」領域は年平均成長率28%と最も高い伸びを示しており、KENTASが主戦場とするセグメントと一致する。
**グラフ指定:** 2022年→2027年の市場規模推移を棒グラフで表示。棒はプライマリカラー（#1A3C5E）の濃淡4段階で年次を区別。2027年の棒のみアンバーイエロー（#E8A838）で強調** ロゴ:** 右下固定
## スライド8 — 中扉「プロダクト」
**タイプ:** 中扉** セクションタイトル:** 03 — プロダクト
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド9 — KENTAS Cloudとは
**タイプ:** 本編（白背景）** 見出し:** KENTAS Cloud — 現場をひとつにするプラットフォーム
**本文:** KENTAS Cloudは、建設現場の施工管理・安全管理・進捗共有・書類管理を一元化するクラウドサービス。現場監督はスマートフォン1台で写真記録・日報作成・図面確認・関係者への共有がすべて完結する。PCが苦手なベテラン職人でも使えるよう、UIは徹底的にシンプルに設計した。** 写真指定:** 画面右側にスマートフォンを操作する現場監督の写真（ディープネイビー × スカイブルーのデュオトーン処理）
**アクセントカラー使用箇所:** 「KENTAS Cloud」のテキストをアンバーイエローで表示** ロゴ:** 右下固定
## スライド10 — 主要機能
**タイプ:** 本編（白背景）** 見出し:** 主要機能
**本文（4つの機能を段落形式で）:**
「写真台帳AI」は、現場で撮影した写真にAIが自動で工種・部位タグを付与し、台帳として自動整理する機能。1現場あたり月平均3,000枚の写真が、手作業ゼロで管理される。「リアルタイム工程表」は、ガントチャートをクラウド上で共同編集できる機能。変更が入った瞬間に全関係者へ自動通知が飛び、最新の工程が常に全員に共有される。「安全パトロール記録」は、巡回時の指摘事項をスマホで写真付き記録し、是正完了まで自動追跡する機能。紙の安全日誌は不要になる。「ダッシュボード」は、複数現場の進捗率・コスト消化率・安全指摘件数を一画面で俯瞰する経営層向け機能。
**アクセントカラー使用箇所:** 各機能名をアンバーイエローで表示** ロゴ:** 右下固定
## スライド11 — プロダクトデモ画面
**タイプ:** 本編（白背景）** 見出し:** ダッシュボード画面
**画面モック指定:** KENTAS Cloudのダッシュボード画面を中央に大きく配置。左カラムに現場一覧（5現場分）、中央に選択中の現場の工程進捗率（円グラフ：プライマリカラーの濃淡）、右カラムに本日の安全指摘件数（アンバーイエローで数字を強調）。全体のUIカラーはブランドカラーの濃淡のみで構成。** ロゴ:** 右下固定
## スライド12 — 中扉「導入実績」
**タイプ:** 中扉** セクションタイトル:** 04 — 導入実績
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド13 — トラクション
**タイプ:** 本編（白背景）** 見出し:** 導入実績
**大きな数字:** 580現場** 本文:** 2026年1月時点の累計導入現場数。ゼネコン上位30社のうち12社が試験導入または本採用済み。月次導入現場数は前年同月比で3.2倍のペースで成長中。直近のネットリテンション率（NRR）は142%。一度使った企業が、別の現場・別の支店へ横展開する好循環が生まれている。
**グラフ指定:** 月次導入現場数の推移を折れ線グラフで12ヶ月分表示。線はセカンダリカラー（#6B9AC4）、直近月のドットのみアンバーイエロー** ロゴ:** 右下固定
## スライド14 — 導入事例
**タイプ:** 本編（白背景）** 見出し:** 導入事例 — 大和建設株式会社（仮名）
**本文:** 大和建設は従業員1,200名のゼネコン中堅。都内のオフィスビル新築工事（地上18階・工期24ヶ月）でKENTAS Cloudを導入。導入前は1日あたり平均2.5時間を写真整理と日報作成に費やしていたが、導入後は35分に短縮。工程の遅延も、リアルタイム共有によって早期に検知できるようになり、当該現場では竣工予定を2週間前倒しで達成した。** アクセントカラー使用箇所:** 「2.5時間→35分」「2週間前倒し」をアンバーイエローで表示
**写真指定:** 画面左端に建設中のオフィスビルのモノクロ写真（縦長トリミング）** ロゴ:** 右下固定
## スライド15 — 顧客の声
**タイプ:** 本編（白背景）** 見出し:** 現場の声
**引用:** 「正直、最初は『また新しいツールか』と思った。でも使い始めたら、若手だけじゃなく50代のベテランまで全員が毎日開くようになった。写真台帳を手で作っていた時代にはもう戻れない。」** 属性:** 大和建設株式会社 東京支店 工事課長 前田 剛志氏
**アクセントカラー使用箇所:** 引用符をアンバーイエローで大きく表示** ロゴ:** 右下固定
## スライド16 — 中扉「ビジネスモデル」
**タイプ:** 中扉** セクションタイトル:** 05 — ビジネスモデル
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド17 — 収益モデル
**タイプ:** 本編（白背景）** 見出し:** 収益モデル
**本文:** KENTAS Cloudは「現場単位の月額課金」モデルを採用。1現場あたり月額38,000円（スタンダードプラン）で、現場に関わるユーザー数は無制限。現場が増えれば売上が自然に積み上がるストック型の構造。大手ゼネコンは常時50〜200の現場を同時進行しているため、1社あたりの年間契約額は2,000万円〜9,000万円のレンジになる。エンタープライズプラン（月額80,000円/現場）では、API連携・カスタムダッシュボード・専任CSが追加される。** アクセントカラー使用箇所:** 金額をアンバーイエローで表示
**ロゴ:** 右下固定
## スライド18 — ユニットエコノミクス
**タイプ:** 本編（白背景）** 見出し:** ユニットエコノミクス
**大きな数字:** LTV / CAC = 11.4x** 本文:** 1現場の平均契約期間は14ヶ月、月額単価38,000円、粗利率82%。LTVは約43万円。一方、CAC（現場獲得コスト）は約3.8万円。既存顧客の横展開が主な獲得チャネルであるため、CACが極めて低い構造になっている。
**グラフ指定:** LTVとCACの比較を横棒グラフで表示。LTVバーはプライマリカラー、CACバーはセカンダリカラー（短い棒で対比を明示）** ロゴ:** 右下固定
## スライド19 — 中扉「競合環境」
**タイプ:** 中扉** セクションタイトル:** 06 — 競合環境
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド20 — 競合比較
**タイプ:** 本編（白背景）** 見出し:** 競合ポジショニング
**本文:** 国内の建設テック市場には複数のプレイヤーが存在する。A社は写真管理に特化し現場普及率が高いが、工程管理や安全管理の機能がなく「写真だけのツール」に留まっている。B社は大手向けERPとの連携に強いが、導入に6ヶ月以上かかり中小ゼネコンには敷居が高い。C社は安全管理領域で先行するが、施工管理との統合がなく現場では別ツールとの併用が必要。KENTASは「施工管理・安全管理・進捗共有の統合」と「即日導入できるシンプルさ」を両立する唯一のポジションにいる。** グラフ指定:** 2軸マップ（横軸「単機能 ↔ 統合型」、縦軸「導入に時間がかかる ↔ 即日導入」）。各社をプライマリカラーの濃淡の丸で配置し、KENTASのみアンバーイエローの丸で表示
**ロゴ:** 右下固定
## スライド21 — 中扉「成長戦略」
**タイプ:** 中扉** セクションタイトル:** 07 — 成長戦略
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド22 — 成長戦略
**タイプ:** 本編（白背景）** 見出し:** 3段階の成長戦略
**本文:**
フェーズ1（現在〜2026年末）は「ゼネコン上位50社の攻略」。大手ゼネコンの試験導入を本採用に転換し、複数支店への横展開を加速する。営業体制をインサイドセールス中心に再構築し、1人あたりの担当現場数を3倍に引き上げる。フェーズ2（2027年）は「サブコン・専門工事会社への展開」。ゼネコンが導入すると、その現場に入るサブコンにも自然とKENTAS Cloudが広がる。この「現場ネットワーク効果」を意図的に設計し、TAMを一気に拡大する。フェーズ3（2028年〜）は「データプラットフォームへの進化」。数千現場から蓄積されたデータを匿名化・構造化し、工期予測AI・コスト最適化エンジン・安全リスク予測モデルとして提供する。SaaSからデータビジネスへの転換がこのフェーズの核になる。
**アクセントカラー使用箇所:** 各フェーズ番号をアンバーイエローで表示** ロゴ:** 右下固定
## スライド23 — 中扉「財務計画」
**タイプ:** 中扉** セクションタイトル:** 08 — 財務計画
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド24 — 収支計画
**タイプ:** 本編（白背景）** 見出し:** 収支計画サマリー
**本文:**
2026年度はARR（年間定期収益）4.2億円、営業利益▲1.8億円を見込む。成長投資を優先するため赤字が継続するが、粗利率82%の高収益構造により、売上拡大がそのまま利益に転換する。2027年度はARR 12億円、営業利益1.5億円で黒字化を達成する計画。2028年度はARR 28億円、営業利益8億円を目標とし、データプラットフォーム収益が全体の15%を占め始める想定。
**グラフ指定:** 3年分のARR推移を棒グラフ、営業利益を折れ線グラフで重ねて表示。棒はプライマリカラーの濃淡、折れ線はアンバーイエロー。黒字転換ポイントに水平の破線を配置** ロゴ:** 右下固定
## スライド25 — 資金調達
**タイプ:** 本編（白背景）** 見出し:** シリーズB 資金調達
**大きな数字:** 15億円** 本文:** 今回のラウンドでの調達目標額。用途は、プロダクト開発（AI機能強化・モバイルv3）に5億円、セールス・マーケティング（営業チーム30名体制への拡大、パートナー開拓）に4.5億円、カスタマーサクセス（オンボーディングチーム強化、ラーニングコンテンツ制作）に2.5億円、データ基盤構築（匿名化エンジン・分析基盤・AI学習環境）に2億円、運転資金に1億円。
**アクセントカラー使用箇所:** 「15億円」をアンバーイエローで表示** ロゴ:** 右下固定
## スライド26 — 中扉「チーム」
**タイプ:** 中扉** セクションタイトル:** 09 — チーム
**背景:** プライマリカラー全面** テキスト:** 白抜き
**ロゴ:** 右下固定（白バージョン）
## スライド27 — 経営チーム
**タイプ:** 本編（白背景）** 見出し:** 経営チーム
**本文:**
CEO 土屋 健一郎。元鹿島建設のICT推進部門長。20年間の現場経験と全社DX戦略の立案を経て、2021年にKENTASを創業。建設現場のペインを自らの皮膚感覚で知る経営者。CTO 林 美玲。元Google Japan ソフトウェアエンジニア。大規模分散システムとモバイルアプリ開発に精通。2022年にジョインし、KENTAS Cloudのアーキテクチャをゼロから設計。VP of Sales 岩田 大輔。元コマツ（建機メーカー）の法人営業統括。建設業界のキーパーソンとの人脈が厚く、導入企業の半数以上は岩田のネットワーク経由で獲得。VP of Product 鄭 ハナ。元リクルートのプロダクトマネージャー。建設業界未経験ながら、入社後に自ら現場に通い詰め、現場監督が「これなら使える」と言うUI設計を実現。
**写真指定:** 4名のヘッドショットをモノクロで横並び配置（各写真の下に名前と役職）** ロゴ:** 右下固定
## スライド28 — 最終スライド
**タイプ:** 最終（まとめ + 連絡先 + QRコード枠）** 見出し:** 建設現場を、データでつなぐ。
**まとめ（3行）:**
建設業界の人手不足・生産性停滞・2024年問題に対し、KENTAS Cloudは現場業務の統合プラットフォームとして解決策を提供する。580現場の導入実績とNRR 142%の実績が、プロダクトマーケットフィットを証明している。シリーズBの15億円で、ゼネコン上位50社の攻略とデータプラットフォームへの進化を加速する。
**連絡先:**
- 担当: CEO 土屋 健一郎
- メール: kenichiro.tsuchiya@kentas.co.jp
- 電話: 03-XXXX-XXXX
- ウェブ: https://kentas.co.jp
**QRコード枠:** 右下にQRコード配置用の正方形枠（80×80px、セカンダリカラーの細枠線）。枠の下に「会社紹介資料 ダウンロード」のラベル** ロゴ:** 右下固定（QRコード枠の左隣に配置）💡 設計のポイント
📝 プロンプト（コピペOK）
あなたはXの運用戦略コンサルタントです。
以下の情報に基づいて、1週間分のX投稿企画書を作成してください。
# アカウント情報
- アカウント名: {アカウント名}
- 発信テーマ: {AI×デザイン / マーケティング / 副業 等}
- ターゲット: {ターゲット層}
- 目的: {フォロワー増加 / 認知拡大 / 商品販売}
# 出力フォーマット（1週間 = 7日分）
各日に以下を出力:
- 投稿時間: {最適な時間帯}
- カテゴリー: {教育 / 共感 / 権威 / CTA}
- テーマ: {その日のテーマ}
- 投稿文（140文字版 + リプ追加版）
- 添付画像の指示
# 投稿設計の基本ルール
- 月曜: 週の始まり → モチベーション系
- 火〜木: 教育コンテンツ（ノウハウ、ツール紹介）
- 金曜: まとめ or 総集編（保存されやすい）
- 土曜: 共感 or ストーリー（個人の体験）
- 日曜: 告知 or CTA（イベント、記事誘導）
# 成功法則の適用
- 文字数: 150〜200文字が最適
- 【】を冒頭に使用
- 改行を多用し読みやすく
- 具体的な数字を含める💡 設計のポイント
📝 プロンプト（コピペOK）
以下のイベント情報に基づいて、Xでの告知投稿を4パターン作成してください。
# イベント情報
- イベント名: {イベント名}
- 日時: {日時}
- 参加費: {無料 or 金額}
- 申込URL: {URL}
- 登壇者: {名前・肩書き}
- ベネフィット: {参加者が得られること}
# 4パターンの構成
1. 情報型: 5W1Hを簡潔にまとめた告知
2. ベネフィット型: 「参加するとこうなれる」を訴求
3. 権威型: 登壇者の実績・肩書きを前面に
4. 緊急型: 残席わずか・期間限定を訴求
# 共通ルール
- 150〜200文字
- 改行を入れて読みやすく
- 具体的な数字を含める
- CTAを末尾に入れる（「申込はリプから👇」等）
- ハッシュタグは2個以内💡 設計のポイント
📝 プロンプト（コピペOK）
以下の記事を読み、内容の要約 + 記事誘導の5投稿スレッドを作成してください。
# 記事情報
- タイトル: {記事タイトル}
- URL: {記事URL}
- 記事の要約（300文字程度）: {要約}
- ターゲット読者: {ターゲット}
# 5投稿スレッドの構成
1. フック: 衝撃的な事実 or 問いかけ（最もRT/いいねされやすい投稿）
2. 問題提起: 読者が「自分ごと」にできる悩みや疑問
3. 解決策のチラ見せ: 記事内の最も価値ある1ポイントだけ公開
4. 社会的証明: 記事への反応、データ、実績
5. CTA: 記事リンク + 「続きは記事で👇」
# ルール
- 1投稿は150〜200文字
- スレッドの1投稿目だけで価値を感じさせる
- 記事の「すべて」は書かない（続きを読みたくさせる）
- 各投稿は単独で読んでも理解できる構成💡 設計のポイント
📝 プロンプト（コピペOK）
以下の商品/サービス情報に基づいて、読者の購買意欲を高めるセールスレターを作成してください。
# 商品/サービス情報
- 名前: {商品名}
- 価格: {価格}
- ターゲット: {ターゲット層}
- 主要ベネフィット: {TOP3}
- 差別化ポイント: {競合との違い}
# セールスレターの構成（PASONAの法則）
1. Problem（問題）: ターゲットが抱えている具体的な悩みを描写
2. Affinity（親近感）: 「自分も同じ悩みを持っていた」と共感
3. Solution（解決策）: この商品がなぜ解決できるのかを論理的に説明
4. Offer（提案）: 具体的な提案内容（価格、特典、保証）
5. Narrowing（絞り込み）: 「今だけ」「限定○名」で即行動を促す
6. Action（行動）: 明確なCTAで次のステップを指示
# トーンルール
- 煽りすぎない。事実と数字で説得する
- 読者を馬鹿にしない。対等なトーンで語りかける
- 「買わせる」のではなく「選んでもらう」スタンス💡 設計のポイント
📝 プロンプト（コピペOK）
以下のAIツールについて、初心者でもわかる解説記事（2,000文字）を作成してください。
# ツール情報
- ツール名: {ツール名}
- URL: {公式サイト}
- カテゴリ: {画像生成 / 文章生成 / 動画生成 / コーディング}
- 料金: {無料 / 有料（月額）}
# 記事構成
1. リード文: このツールを一言でいうと？（30文字以内のキャッチ）
2. こんな人におすすめ: ターゲット3パターン
3. 主要機能: TOP5を表形式で（機能名 | できること | 評価★）
4. 実際に使ってみた: 使用手順をスクリーンショット指示付きで解説
5. メリット・デメリット: 各3個（率直に）
6. 他ツールとの比較: 2〜3個のツールと表で比較
7. まとめ: 一言結論 + CTA（ツールへのリンク）
# 文体ルール
- 「です・ます」調
- 専門用語は使わない（使う場合は必ず括弧内に説明）
- 12歳でも理解できるシンプルさ💡 設計のポイント
📝 プロンプト（コピペOK）
X（Twitter）で使えるリプライ定型文を5カテゴリ × 3パターン = 15個作成してください。
# カテゴリ
1. 感謝（いいね/RTしてくれた人へ）
2. 共感（同じ意見の投稿への反応）
3. 質問回答（フォロワーからの質問への返答テンプレ）
4. 関係構築（初めてのやり取りの人への返答）
5. 誘導（自分のコンテンツへの自然な導線）
# ルール
- 1リプ = 50〜100文字（短くコンパクト）
- 定型でありながら「bot感」を出さない
- 相手の投稿内容に触れるスペース「{ }」を残す
- 🔧 印象操作: 「この人、いい人だな」と思われるトーン
# アカウント情報
- 発信テーマ: {テーマ}
- ペルソナ: {優しい先生タイプ / 頼れる兄貴タイプ / 同志タイプ}💡 設計のポイント
📝 プロンプト（コピペOK）
以下の情報に基づいて、企業向けAI研修サービスの企画書を作成してください。
# 研修概要
- 研修名: {研修名}
- 対象: {部門・役職・スキルレベル}
- 時間: {2時間 / 半日 / 2日間}
- 形式: {オンライン / オフライン / ハイブリッド}
# 出力フォーマット
1. 研修のゴール: 受講後に何ができるようになるか（3つ）
2. カリキュラム: 時間配分付きの詳細構成
3. ワークショップ内容: 実践演習の具体的な内容
4. 使用ツール: 研修で使用するAIツール一覧
5. 受講者の声（想定）: 期待される反応
6. 料金プラン: 3段階（ライト/スタンダード/プレミアム）
7. 講師プロフィール案: 説得力のある肩書き構成
# ルール
- 「AIが仕事を奪う」ではなく「AIで仕事が進化する」ポジティブトーン
- フレームワークの知識は不要。すぐに手を動かせる内容
- 成果物を持ち帰れる設計（研修中に1つ完成させる）💡 設計のポイント
📝 プロンプト（コピペOK）
添付した画像を分析し、この画像を再現するための生成AIプロンプトを作成してください。
# 分析してほしい要素
1. 構図・レイアウト（何がどこに配置されているか）
2. 配色（使用されている色のHEXコード推定）
3. フォント（使用されている書体の種類推定）
4. スタイル（フラット / 写真 / イラスト / 3D 等）
5. 雰囲気・トーン（高級 / カジュアル / テック 等）
6. テキスト内容（画像内の文字を書き起こし）
# 出力フォーマット
- 画像分析レポート（上記6要素）
- 再現用プロンプト（すぐに生成AIに入力できる完成形）
- カスタマイズポイント（色やコピーを変更するための変数化）
# ルール
- プロンプトは日本語で出力
- HEXコードは必ず含める
- 「こう書くとこう再現される」のロジックを解説💡 設計のポイント
📝 プロンプト（コピペOK）
以下の情報に基づいて、女性向けクリエイティブスクールのサービス企画書を作成してください。
# スクール概要
- スクール名: {スクール名}
- コンセプト: 「{キャッチフレーズ}」
- ターゲット: 20〜30代女性、未経験からクリエイティブスキルを身につけたい
- 参考: SHElikes、Fammスクール
# 出力内容
1. ブランドコンセプト: 一言で伝わるビジョン
2. コースラインナップ: 5〜8コース（各コースの概要、期間、成果物）
3. 料金体系: 月額制 + 入会金（3段階）
4. カリキュラム詳細: 人気コース1つ分の全8回分の内容
5. 差別化ポイント: 競合との3つの違い
6. マーケティング戦略: Instagram × 体験会の集客フロー
7. ビジュアルブランディング: ロゴ・配色・フォントの方向性
# ルール
- 「スキルを売る」のではなく「新しい自分に出会える場所」を売る
- すべてのコピーはポジティブで、自己肯定感を高めるトーン
- フリーランスとして独立できるレベルのスキル到達を目標に設計💡 設計のポイント
📝 プロンプト（コピペOK）
以下の記事/テキストを、指定された形式に変換してください。
# 変換元
{ここに元の記事・テキストを貼り付け}
# 変換先（以下から選択）
1. X投稿（150文字要約 + スレッド3投稿）
2. note記事（2,000文字にリライト + 見出し構成）
3. プレゼン台本（5分間のスクリプト）
4. 社内報告書（箇条書き + データ表）
5. メルマガ（タイトル + リード + 本文 + CTA）
# 共通ルール
- 元の情報の正確性を保つ
- 冗長な部分はカットし、本質だけ残す
- 変換先の媒体に最適な文体とフォーマットに合わせる
- 各変換に「なぜこう書き換えたか」のコメント付き💡 設計のポイント
📝 プロンプト（コピペOK）
以下のテーマで、統一されたスタイルのフラットベクターイラストを10個セットで生成してください。
# テーマ
{ビジネス / 教育 / テクノロジー / ライフスタイル / 医療 / 食品}
# スタイル定義
- ベクターイラスト（フラットデザイン）
- 輪郭線: なし（色面のみで構成）
- 人物: デフォルメ（4〜5頭身）、表情はシンプル
- パレット: 最大5色（HEXコードで指定）
- メイン: {#HEX}
- サブ: {#HEX}
- アクセント: {#HEX}
- ニュートラル: {#HEX}
- 背景: {#HEX}
# 10個のイラストテーマ
1. {シーン1の説明}
2. {シーン2の説明}
3. {シーン3の説明}
...（最大10個）
# ルール
- 全イラストで色・スタイル・頭身を厳密に統一
- 背景は単色ベタ塗り or 透過
- 1つのイラストに3人以上の人物を入れない
- アイソメトリック視点は使用しない（正面 or やや斜め45度）
- 4K高画質、SVG変換可能な解像度💡 設計のポイント
AIは指示がなければ自由に解釈します。 「やらないこと」を明示することで、意図しない要素が減ります。 例
「青」と書くと10種類の青が出てきます。
#003366 と書けば1種類しか出ません。
「Wes Anderson風」「ビジネス雑誌風」「Apple風」のように、既存の世界観を名指しするのが最も効率的です。AIはこれらの参照データを豊富に持っています。
プロンプトの本質は「AIへの設計図」です。 この50選は、私が13年のデザイナー経験とAIの実務活用から生まれた「実戦の武器」です。 コピペで使うだけでも十分ですが、解説を読んで「なぜこう書くのか」を理解すれば、自分だけのプロンプトを設計できるようになります。 あなたのAIデザインの旅が、ここから始まることを願っています。