オリジナルデザインは何をしますか？

インタラクティブで質問駆動型のセッションを実行し、製品や主題を完全なデザイン言語（首尾一貫した視覚的な世界）に変換します。この世界から、すべての画面、フレーム、アイコン、イラスト、アニメーションが「成果物」として描き出されます。最終成果物は、記入済みのデザイン言語ブリーフとして提供されます。このスキルは、インフォグラフィック、動画ストーリーボード、Webサイト、モバイルアプリのUI/UXなど、あらゆる視覚的成果物に適用できます。基本原則は次のとおりです。オリジナリティとはユニークであることではなく、一つのコアアイデアを中心に内部で一貫していることです。 「どのようにしてユニークに見せるか？」と問うのではなく、「コアアイデアの視覚的表現は何か？」と問いかけてください。このスキルが強制する最大のシフトは次のとおりです。画面をデザインするのではなく、世界をデザインすること。 その他すべては、その世界の要素にすぎません。

使用すべき場合 / 使用すべきでない場合

ユーザーがオリジナルのビジュアルアイデンティティやアートディレクションを必要としている場合、または既存のデザインが一般的/AIデフォルトのように見え、それを統合する一つのアイデアを必要としている場合に使用します。
ユーザーがオリジナルの世界ではなく、実用的なブランドスタイルガイド（アセット生成のためのパレット、フォント、ムード）を必要としている場合 → skills/creative/creative-strategist を使用します。このスキルのブリーフは、そのスキルに入力として与えることができます。
デザイン言語がすでに存在し、ユーザーが単にアセットを必要としているだけの場合 → メディアに対応する制作スキルに直接進みます（フェーズ9を参照）。
問題がビジュアルアイデンティティではなく、UIの構造やユーザビリティである場合 → skills/frontend-design/frontend-orchestrator を使用します。

このスキルの実行方法（最初にお読みください）

これはフォームへの一括入力を求めるものではなく、ファシリテートされた会話です。 以下のルールに従ってください。

一度に一つのフェーズのみ行います。 現在のフェーズに焦点を当てた質問をし、回答を待ち、それを1～2文で反映してから次に進みます。7つのフェーズすべてを一度に貼り付けないでください。
常に推奨事項を提示します。 すべての質問に対して、2～4つの具体的な選択肢を提案し（最初に「(推奨)」を付けます）、ユーザーがゼロから考え出すのではなく、それに反応できるようにします。ユーザーは常に自由に回答できます。
ホストがサポートしている場合は構造化質問を使用します。 Claude Codeでは、オプションベースのフェーズに AskUserQuestion ツールを優先的に使用します。他のエージェントでは、短いラベル付き選択肢リストとともにプレーンテキストで質問します。
フェーズ1.5とフェーズ6では、Webからライブのビジュアルインスピレーションを収集します（references/inspiration-browsing.mdを参照）。ホストエージェントに一致するブラウジング方法を選択します。
決定事項を実行中のデザイン言語ブリーフに随時記録します（テンプレートは assets/design-language-brief-template.md にあります）。
最終成果物を生成する前に、オリジナリティテストをゲートとして通過させます。 スキップしないでください。
選択されたメディアに対応する制作スキルに引き継ぎます（references/medium-playbooks.mdを参照）。

このチェックリストを作業メモにコピーし、項目をチェックしていきます。

デザイン言語の進捗状況:
- [ ] フェーズ0: 世界のフレーミング（メディア、主題、オーディエンス）
- [ ] フェーズ1: コアメタファー（一文）
- [ ] フェーズ1.5: インスピレーション収集（Web）
- [ ] フェーズ2: ビジュアルユニバース（ボキャブラリー）
- [ ] フェーズ3: デザインDNA（形状 / 色 / 動き / テクスチャ）
- [ ] フェーズ4: マスコットシステム（該当する場合）
- [ ] フェーズ5: シグネチャー制約
- [ ] フェーズ6: クロスドメインインスピレーション（Web）
- [ ] フェーズ7: 多数のコンセプト生成 → 世界を選択
- [ ] フェーズ8: オリジナリティテスト（5つの質問）— ゲート
- [ ] フェーズ9: ブリーフの作成 + メディアへの引き継ぎ

フェーズ0 — 世界のフレーミング

視覚的な作業に入る前に、実際に何を作るのかを確定します。質問します。

何を作成しますか？ → インフォグラフィック・動画ストーリーボード・Webサイト・モバイルアプリUI/UX・その他
製品/主題は何ですか？（一文で）
誰に向けたもので、どのような感情を抱かせるべきですか？

次に、マインドセットのシフトをユーザーに声に出して伝えます。「私たちは画面をデザインするわけではありません。世界をデザインするのです。そしてあなたの「+ メディア +」は、その世界から作られた成果物になります。」

立ち止まらないでください： リクエストがすでにこれらに答えている場合（例：「子供向け算数アプリのオリジナルルック」）、回答を一文で仮定として反映し、直接フェーズ1に進みます。インタラクティブのルールはデザインの質問に適用され、ユーザーがすでに言ったことを再度聞くことには適用されません。

フェーズ1 — コアメタファーの定義

すべてはコアメタファーから生まれます。

核心を問う質問をします。「この製品が物理的な物体や場所だとしたら、何でしょう？」

ドメインに基づいて種を提供します（これらはソースメソッドからのものです）。

製品タイプ	メタファーの例
数学/学習アプリ	おもちゃのブロック
AIチューター/アシスタント	賢明なメンター
金融/取引アプリ	コマンドセンター
旅行アプリ	探検家の日記
知識/ドキュメントアプリ	生きた図書館

一つのメタファーに絞り込み、三つにはしないでください。次に、一文のデザイン言語を書きます。 「これは [メタファー] です。したがって、[感覚/世界] のように見えます。」

一文で言えなければ、メタファーはまだ十分に鮮明ではありません。洗練を続けてください。

フェーズ1.5 — インスピレーション収集（Web）

ボキャブラリーを定義する前に、選択したメタファーとムードに関する実際の参考資料を収集します。references/inspiration-browsing.md に従います。cosmos.so、Pinterest、Savee、Dribbble、Behance、Are.na でメタファー＋ムードをブラウズし、8～15点の参考資料を収集し、繰り返し見られるパターン（照明、色温度、構図、テクスチャ、形状）をメモします。先に進む前に、パターンをユーザーに要約して伝えます。

フェーズ2 — ビジュアルユニバースの構築

その世界に存在するすべてのものをリストアップします。それらがあなたのビジュアルボキャブラリーになります。

メタファーが決まったら、ユーザーと一緒に、その世界に存在するすべてのオブジェクト、表面、キャラクター、テクスチャをブレインストーミングします。生きた図書館の例：本、棚、メモ、インク、スタンプ、しおり、紙の質感。

次に、ボキャブラリーをデザインレイヤーに明示的にマッピングします。

世界のオブジェクト	変換先
（例：本、スタンプ）	アイコン
（例：余白のスケッチ）	イラスト
（例：ページをめくる、インクのにじみ）	アニメーション / 動き
（例：棚、カード）	UI要素 / レイアウト
（例：インク、紙、革）	色
（例：手書きの見出し）	タイポグラフィ

6～10個の具体的な要素からなるボキャブラリーを目指します。このリストは、後続のすべての処理のための信頼できる情報源となります。

フェーズ3 — デザインDNAの作成

すべてが従うシステムルールを定義します。

4つの次元を確定します。それぞれをタイトに保ちます。ここでの制約が、デザインされたという感覚を生み出します。

形状 — 2～3つの形状ファミリー（例：角丸長方形、円、立方体）
色 — 3～5つのコアカラー。世界に結びついた名前を付けます（例：ダークネイビー、エレクトリックブルー、ウォームイエロー、ソフトグレー）
動き — 一つの哲学をフレーズで表します（例：「目的を持った、弾力性があり遊び心のある動き」）
テクスチャ — 一つの言語（例：「紙、手描き、スケッチ風」）

色の正確な16進数値と、動きの具体的なイージング/タイミングの意図を記録し、ブリーフがすぐに制作に使えるようにします。

フェーズ4 — マスコットシステムのデザイン（該当する場合）

マスコットは製品に顔と個性を与え、世界の中心となります。

マスコットがこのプロジェクトに役立つかどうかを尋ねます。これは学習、消費者向け、子供向け、ブランド主導の製品に効果的です。エンタープライズ/金融やミニマリズムを重視するツールでは、しばしばスキップされます。採用する場合は、以下を定義します。

誰/何か（例：好奇心旺盛なロボット、賢いキツネ、小さな科学者、生きた星座）
個性を3つの形容詞で
メディア全体でどのように現れるか（空の状態、ローディング、オンボーディング、動画のナレーター、インフォグラフィックのガイド）

なぜ重要か：感情的なつながり、記憶に残る点、そして体験全体を統合する点にあります。

フェーズ5 — シグネチャー制約の作成

制約は創造性を制限しません。アイデンティティを生み出します。

デザインが決して破らない一つのルールを定義します。この単一の決定が、言語を認識可能にする鍵となることがよくあります。

制約	結果として得られるスタイル
写真は一切使用しない	クリーンでイラスト主体（Zenn風）
すべてを幾何学的なブロックで表現する	構造化された（算数アプリ風）
黒、白、アクセントカラーのみを使用する	シャープで直線的（Linear風）
すべてのイラストは手描きに見える必要がある	温かみがあり人間味がある（Excalidraw風）

制約を執行可能な文章で書きます。「この世界では、私たちは決して___しない / 常に___する。」

フェーズ6 — 無関係なドメインからインスピレーションを得る（Web）

競合他社をコピーしないでください。他の世界から借用しましょう。

新鮮さを保つために、製品のカテゴリ外のドメインからインスピレーションを引き出します。建築、自然、おもちゃ、古代写本、科学図表、宇宙ミッション、産業機械。references/inspiration-browsing.md を使用して、2～3の無関係なドメインをブラウズし、転用可能なアイデア（建築からのグリッドシステム、自然からのカラーストーリー、科学図表からのラベリングスタイル）を抽出します。3～5個の具体的な「盗み」を持ち帰ります。

フェーズ7 — 多数のコンセプトを生成し、世界を選択する

一つのコアアイデア。多くの世界。量が素晴らしさを生み出す機会を生みます。

大量の短いコンセプトの方向性（それぞれが、同じコアアイデアを表現する異なる「世界」）を生成します（例：博物館、宇宙船、魔法のアカデミー、探偵ボード、生きた脳… 20～50の一文コンセプトを目指します）。ほとんどは平均的ですが、あなたは並外れたものを探しています。

グループ化して提示し、ユーザーに反応してもらい、1つの主要な方向性に絞り込みます（オプションで1～2のバックアップ）。大量のバッチの場合は、サブエージェントやワークフローを派遣してコンセプトを拡張することもできますが、ユーザーを選択ループに残しておいてください。

フェーズ8 — オリジナリティテスト（ゲート）

何かを生成する前に、5つの質問すべてを実行します。すべての答えが「はい」である必要があります。 もし「いいえ」があれば、関連するフェーズに戻ります。

ビジュアル言語を一文で説明できますか？ (→ フェーズ1)
すべての要素は同じメタファーから来ていますか？ (→ フェーズ2)
ロゴを削除しても、製品を識別できますか？ (→ フェーズ3/5)
子供でも同じデザイン言語を描けますか？ (シンプルで明確ですか？ → フェーズ3)
UIではなく、世界のように見えますか？ (→ 全体)

各質問とその判定結果をユーザーに明示的に伝えます。

フェーズ9 — ブリーフの作成と引き継ぎ

assets/design-language-brief-template.md に、確定したすべての決定事項を記入し、ユーザーのプロジェクトに保存します（design-language.md を推奨）。次に、選択されたメディアに言語を変換するために references/medium-playbooks.md を使用し（このフェーズで、メディアごとの変換テーブルを読みます）、一致する制作スキルを呼び出すことを提案します。

インフォグラフィック / ソーシャルグラフィック → skills/creative/social-graphics、skills/creative/image-generation、または skills/creative/brand-asset
動画ストーリーボード → skills/creative/remotion-script-writer、skills/creative/product-video、または skills/creative/creative-strategist
Webサイト → skills/frontend-design/frontend-orchestrator、skills/frontend-design/design-foundation、skills/frontend-design/color-system、skills/frontend-design/typography-system
モバイルアプリUI/UX → skills/frontend-design/frontend-orchestrator、skills/frontend-design/component-architecture、skills/frontend-design/layout-system

ブリーフは契約です。後続のすべてのアセットは、それが記述する世界の成果物でなければなりません。

必須の出力形式

成果物は完成したブリーフであり、常に assets/design-language-brief-template.md の正確な構造を持ち、すべてのセクションが記入され、スキップされていない必要があります。

# デザイン言語ブリーフ — [製品 / 主題]
## 1. コアメタファー            (一文のデザイン言語)
## 2. ビジュアルユニバース      (アイコン/イラスト/動き/UI/色/タイポグラフィにマッピングされた6～10のボキャブラリー要素)
## 3. デザインDNA               (形状 · 色（16進数付き） · 一つの動きの哲学 · 一つのテクスチャ言語)
## 4. マスコットシステム        (誰か/個性/どこに現れるか — または理由を添えて「なし」)
## 5. シグネチャー制約          (「この世界では、私たちは決して___しない / 常に___する」)
## 6. クロスドメインインスピレーション (出典付きの3～5の具体的な盗み)
## 7. 選択された方向性          (勝利した世界 + 1～2のバックアップ)
## 8. オリジナリティテスト      (明示的な「はい」の判定付きの5つの質問すべて)
## 9. 制作メモ                  (メディアの引き継ぎ: どのスキルか、従うべきルール)

同じ製品に対して2回セッションを実行した場合、同じ9つのセクションをこの順序で持つブリーフが生成される必要があります。異なるのはクリエイティブな内容のみです。

よくある間違い

間違い	修正方法
7つのフェーズすべてを一度に質問票としてダンプする	一度に一つのフェーズ。各回答を反映させる
「安全のため」に3つのメタファーを選ぶ	正確に一つに絞る — メタファーの混在は一貫性を損なう
Webインスピレーション収集をスキップする	実際の参考資料は、一般的でAIデフォルトな出力を防ぐ
シグネチャー制約がない	制約がなければアイデンティティは生まれない（フェーズ5はオプションではない）
世界の前に画面/フレームをデザインする	まず世界を定義し、成果物は最後に来る
オリジナリティテストなしで出荷する	5つの質問によるゲートは必須である

統合

skills/creative/creative-strategist → 入力として使用：実用的なアセット生成スタイルガイドのための生の材料として、ブリーフのデザインDNA（色、テクスチャ、動き）を消費します。
skills/creative/social-graphics、skills/creative/image-generation、skills/creative/brand-asset → 入力として使用：ブリーフを消費します。生成されるすべてのアセットは、その世界の成果物でなければなりません（リポジトリ内画像パイプライン：docs/creative_cli.py、モデル fal-ai/nano-banana-pro）。
skills/creative/product-video、skills/creative/talking-head、skills/creative/remotion-script-writer → 入力として使用：ブリーフを、ビート、設定、シーンの基盤となるビジュアルワールドとして消費します。
skills/frontend-design/frontend-orchestrator → 入力として使用：ブリーフを、そのデザインシステムスキル群（design-foundation、color-system、typography-system、layout-system、component-architecture）の上に重なるアイデンティティレイヤーとして消費します。

結論

世界をデザインしてください。その他すべては、その世界の単なる要素にすぎません。 すべての画面、サムネイル、画像、アイコン、アニメーションは、同じ宇宙からの成果物のように感じられるべきです。

オリジナルデザイン