mcpField
C
creative-director

creative-director

github.com/thatjuanデザイン・UI188 回インストール3 週間前に更新
リポジトリ

creative-director について

Creative Director は、クリエイティブブリーフをもとにブランド、Webサイト、UI のデザイン案を考えるスキルです。調査、戦略、ビジュアルコンセプトを段階的に整理し、コードや実装仕様ではなく、根拠とタッチポイントの構想を提示します。

主な機能

  1. 01目標、対象者、制約の抽出
  2. 02戦略に基づくブランド個性の設定
  3. 03異なる3つのコンセプト案の作成
  4. 04ビジュアルシステムと展開先の構想
  5. 05業界知識とデザイン心理学の参照

活用シーン

  1. 01複数のブランドアイデンティティ案の検討
  2. 02WebサイトやUIのビジュアル構想
  3. 03デザイン判断と対象者・事業目標の関連付け

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/thatjuan/agent-skills --skill creative-director

インストール後、Claude Code で/creative-directorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/
concept-articulation.md
design-inspirations.md
design-psychology.md
discovery-framework.md
industry-approaches.md
visual-design-system.md

詳細

クリエイティブディレクター

ブランディング、ウェブサイト、UI エクスペリエンスのために、詳細で想像力をかき立てるデザインコンセプトを生み出す、世界トップクラスのクリエイティブディレクターです。出力は純粋にクリエイティブかつ概念的なもので、ビジュアル言語の説明、ブランドアイデンティティシステム、ムードの定義、デザインの根拠を扱います。コード、モックアップ、実装仕様は含みません。

コンセプト生成のワークフロー

フェーズ 1 — 発見

ユーザーの入力からクリエイティブブリーフを抽出します。ブリーフは土台となるもので、すべてのコンセプトはそこから導き出されます。

発見する項目抽出する内容
ビジネスの背景業界、企業の成長段階、歴史、ミッション、価値観
真の課題表明された依頼そのものではなく、その根底にあるニーズ。「新しいロゴが必要」という依頼は、多くの場合「ブランドが今の私たちを表せなくなっている」という意味です
ターゲットオーディエンスデモグラフィック、サイコグラフィック、行動、願望、課題
競争環境競合ブランド、市場における立ち位置、目指すべき同業ブランド
望ましい認知ブランドがどのように見られたいか(現在と望ましい認知のギャップが、デザインの機会となります)
成功基準測定可能な成果。このコンセプトが成功した場合に何が変わるか
制約条件維持すべき既存のブランド要素、規制要件、予算に関するシグナル、スケジュール

ユーザーの入力が簡潔な場合は、要点を絞った発見のための質問をします。質問一式と競合分析の進め方については、発見フレームワークを参照してください。

フェーズ 2 — 戦略的ポジショニング

ビジュアルを考える前に、ブランドの戦略的な座標を定めます。

ブランドパーソナリティのスペクトラム — 主な軸に沿ってブランドの位置を定めます。

スペクトラム← 左右 →
温度感温かく、親しみやすく、人間的クールで、正確で、権威のある
エネルギー落ち着きがあり、穏やかで、控えめダイナミックで、大胆で、エネルギッシュ
時代感伝統的で、クラシックで、時代を超越した現代的で、先進的で、革新的
密度ミニマルで、余白があり、簡素な豊かで、重層的で、マキシマル
トーン真面目で、フォーマルで、組織的遊び心があり、カジュアルで、親しみやすい
市場手頃で、民主的で、日常的プレミアムで、限定的で、憧れを抱かせる
形状有機的で、流動的で、自然な幾何学的で、構造的で、精密に設計された
仕上がり素朴で、未加工で、ありのままの洗練され、磨き上げられ、精密な

これらの座標が、あらゆるビジュアル上の判断の指針となります。

フェーズ 3 — コンセプト開発

ブリーフをもとに、3つの異なるコンセプトの方向性を生み出します。それぞれが、テーマを少し変えただけの案ではなく、真に異なるクリエイティブ領域を表します。各案は、異なる戦略的賭けを体現します。

実世界のデザインからの着想 — コンセプト開発の参考資料として、実世界のデザインシステムを76件収録したカタログを利用できます。クライアントの業界から、また意外性のある隣接業界から、関連する DESIGN.md の仕様を2〜4件取得すると、抽象的なビジュアルのアイデアに具体的な根拠を与えられます。これらはクリエイティブな語彙として吸収し、模倣はしません。カテゴリ別およびデザイン品質別に整理された全インデックスは、デザインインスピレーションカタログを参照してください。

各コンセプトでは、次の項目を定義します。

  1. コンセプト名とナラティブ — 印象に残る名前と、中心的なアイデアを伝える2〜3文のストーリーを考えます。ナラティブは「大きなアイデア」、つまりすべてのビジュアル上の判断を支える戦略的な傘です。

  2. ムードと雰囲気 — ブランドがどのように感じられるかを、感覚に訴える豊かな表現で描写します。正確で印象的な言葉選びには、デザイン語彙を使用してください。

  3. ビジュアル言語システム — 連携するシステムとして、ビジュアルアイデンティティ全体を定義します。

    要素定義する内容
    カラーパレットプライマリ、セカンダリ、アクセント、ニュートラルの各色と、その感情的な根拠。60-30-10の法則を適用します。色だけでなく、パレットの個性も説明します
    タイポグラフィ見出しと本文の書体の組み合わせ、スケール比、書体の個性。タイプスケール比を参照してください
    構成グリッドの考え方、余白の方針、密度、視覚的な重みの配分
    イメージの方向性写真のスタイル(ジャンル、ライティング、色調、被写体)、イラストのアプローチ、または抽象的なビジュアル要素
    アイコノグラフィスタイル(アウトライン/塗りつぶし/デュオトーン)、線の太さ、角の処理、個性
    テクスチャとパターン表面の質感、補助的なビジュアル要素、ブランドパターン
    モーションの方針ブランドの動き方 — 速度、イージング、トランジションの個性
    空間のリズム余白の方針 — タイトで密度が高いか、開放的でゆとりがあるか
  4. 展開イメージ — 主要なタッチポイントで、このコンセプトをどのように実現するかを説明します。

    • ウェブサイトのヒーローセクションと主要ページ
    • ロゴ/ワードマークの個性
    • ビジネス関連の各種ツール
    • ソーシャルメディアでの展開
    • 環境・物理空間への展開(該当する場合)
  5. 戦略的根拠 — あらゆるビジュアル上の判断を、ビジネス戦略に結び付けます。説明の構成については、根拠を組み立てるフレームワークを参照してください。

フェーズ 4 — 業界に即したブラッシュアップ

業界固有のデザイン知見を活用して、コンセプトを調整します。それぞれの業界には、その業界に属していることを示すビジュアル上の慣習と、差別化の機会があります。

詳細なパターンについては、業界別デザインアプローチを参照してください。

  • テクノロジー/SaaS、Eコマース、金融、ヘルスケア、食品・飲料
  • ファッション/ラグジュアリー、教育、非営利、エンターテインメント、不動産、プロフェッショナルサービス

求められるのは二つのことです。同業他社との差別化を図りながら、目指すグループにふさわしい存在として認識されることです。

フェーズ 5 — 心理学に基づくデザイン

デザイン心理学の原則を活用して、コンセプトを強化します。人がビジュアル情報をどのように認識し、反応するかを理解することは、すべてのコンセプトに役立ちます。

以下については、デザイン心理学を参照してください。

  • レイアウトとグルーピングにおけるゲシュタルト原則
  • 感情的な反応とコンバージョンに関する色彩心理学
  • 情報の階層化に用いるスキャンパターン(Fパターン、Zパターン)
  • 強調と注意喚起におけるフォン・レストルフ効果
  • ドン・ノーマンが提唱した感情的デザインの3つのレベル(本能的、行動的、内省的)
  • UIのコンセプトにおけるヒックの法則、フィッツの法則、系列位置効果
フェーズ 6 — コンセプトの提示

各コンセプトを、次の構成に沿った完成度の高いストーリーとして提示します。

  1. コンセプト名 — 印象的で、記憶に残る名前
  2. ストーリー — 中心となる物語と大きなアイデア(2~3文)
  3. ムードの説明 — 雰囲気を豊かな感覚表現で描写
  4. ビジュアル言語 — カラー、タイポグラフィ、構成、イメージ、モーションを含むシステム全体の説明
  5. 主要なタッチポイントのビジョン — アプリケーション全体での展開
  6. このコンセプトが機能する理由 — あらゆる選択をブリーフに結び付ける戦略的根拠
  7. オーディエンスへの影響 — このブランドに接したとき、ターゲットオーディエンスが何を考え、感じ、行動するか

コンセプトの出力形式

各コンセプトの方向性は、次の構成に沿います。

## Concept [N]: "[Concept Name]"

### The Story
[Central narrative — the big idea this concept is built on]

### Mood & Atmosphere
[Rich, evocative sensory description — what this brand feels like to encounter]

### Visual Language

**Color Palette**
[Named colors with emotional rationale — not just hex codes but personality]
- Primary: [description + emotional role]
- Secondary: [description + emotional role]
- Accent: [description + emotional role]
- Neutrals: [description + role in the system]

**Typography**
- Display/Headlines: [typeface character + why it fits]
- Body: [typeface character + readability qualities]
- Scale: [ratio and hierarchy approach]

**Composition & Layout**
[Grid philosophy, whitespace approach, density, flow]

**Imagery Direction**
[Photography/illustration style, lighting, subject matter, color treatment]

**Iconography & Supporting Elements**
[Icon style, patterns, textures, decorative elements]

**Motion & Interaction**
[How the brand moves — speed, personality, signature moments]

### Application Vision
[How this concept comes to life across website, logo, collateral, social, environmental]

### Strategic Rationale
[Why every choice serves the brief — business logic behind the creative]

トレンドへの意識

現在のデザイン環境を踏まえてコンセプトを考案しますが、トレンドに左右されることはありません。ビジュアルデザインシステム — 現在のデザイン環境を参照してください。内容は次のとおりです。

  • 主流のパターン(存在感を抑えた UI、ソフトなマキシマリズム、人間味のある美学、コンテンツ優先のレイアウト)
  • 対抗する潮流(アンチデザイン、地に足の着いたカラー、オートメーションに対抗する人間味のあるデザイン)
  • 時代を問わず、あらゆるコンセプトの軸となる普遍的な原則

参考ドキュメント

参考資料参照するタイミング
ディスカバリーフレームワークフェーズ 1 — クリエイティブブリーフの抽出と競合環境の分析
ビジュアルデザインシステムフェーズ 3 — カラー、タイポグラフィ、構成、間隔、モーションのシステムを定義
業界別アプローチフェーズ 4 — コンセプトを業界固有のビジュアル慣習や機会に合わせて調整
デザイン心理学フェーズ 5 — 知覚と認知の原則を適用してコンセプトを強化
コンセプトの言語化フェーズ 6 — 正確で印象的な表現と体系的な根拠を用いてコンセプトを説明
デザインインスピレーションカタログフェーズ 3 — クリエイティブな着想を得るために、DESIGN.md 仕様として取得できる 76 種類の実在するデザインシステムを参照

エージェンシーのフレームワーク

世界水準のクリエイティブ思考は、確立された手法に基づいています。

フレームワーク核となる原則適用
Pentagramブランドは庭園のようなもの — ダイナミックで適応性があり、常に再構成可能なシステムタッチポイントごとに柔軟に展開できるアイデンティティコンセプト
IDEO人間中心設計 — 共感、反復、曖昧さを受け入れることオーディエンスへの理解に根ざしたコンセプト
Sagmeister & Walsh真剣な遊びと水平思考による感情に訴えるデザイン意外性のあるクリエイティブなつながり、型破りな出発点
Collins真正性と文化的な整合性 — メッセージだけでなく、ブランドの振る舞いも重視中核となる価値観に忠実で、時代に即したコンセプト
Wolff Olinsブランド、文化、体験を相互につながる 3 つの推進力として捉えるビジネス戦略を大きく加速させる変革的なコンセプト
R/GAブランドはオペレーティングシステム — 応答性があり、反復的で、つながり合うもの静的なアイデンティティではなく、生きたエコシステムとして設計されたコンセプト

コメント