mcpField
B
brand-archetype-system

brand-archetype-system

github.com/rampstackcoデザイン・UI1.0k270 回インストール1 週間前に更新
リポジトリ

brand-archetype-system について

デザイン作業の出発点となる、技術スタックやツールに依存しないブランド美学のアーキタイプ集です。エージェントやデザインチームに色、書体、レイアウト、トーン、画像の方向性を示し、既定値をそのまま使わず、個別のブリーフに合わせて調整します。

主な機能

  1. 0112種類のコア美学アーキタイプ
  2. 0218種類の業界別応用
  3. 03色と書体のスターター案
  4. 04レイアウト、トーン、画像の指針
  5. 05ブリーフに応じた調整ガイド

活用シーン

  1. 01美学の参考からブランドデザインを開始
  2. 02業界ブリーフに合わせて既定案を調整
  3. 03複数のデザイン案を絞り込む
  4. 04別のアーキタイプでブリーフを検討

インストール

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

$npx skills add https://github.com/rampstackco/claude-skills --skill brand-archetype-system

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

同梱ファイル

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

README.md
references/
00-archetype-system-overview.md
01-how-to-apply-an-archetype.md
references/by-vertical/
01-b2b-saas-developer-tools.md
02-b2b-saas-business-productivity.md
03-b2b-saas-marketing-sales.md
04-b2b-saas-data-analytics.md
05-fintech-consumer.md
06-fintech-enterprise.md
07-dtc-fashion.md
08-dtc-beauty.md
09-dtc-home-lifestyle.md
10-dtc-food-beverage.md
11-consumer-health-wellness.md
12-hospitality-travel.md
13-media-publishing.md
14-edtech.md
15-gaming-entertainment.md
16-marketplace.md
17-crypto-web3.md
18-real-estate-proptech.md
references/core-archetypes/
01-editorial-restrained.md
02-technical-precise.md
03-warm-conversational.md
04-bold-confident.md
05-playful-energetic.md
06-luxe-considered.md
07-clinical-trustworthy.md
08-rugged-utilitarian.md
09-retro-nostalgic.md

詳細

ブランドアーキタイプシステム

ブランドデザインの作業をすぐに始められる、事前に構成された美的アーキタイプのデフォルト設定です。各アーキタイプには、カラーの傾向、フォントの組み合わせ、レイアウトパターン、ボイスのサンプル、イメージの方向性がまとめられており、ひと目でわかる美的な系統を形作ります。技術スタックやツールには依存しません。

これは出発点となるライブラリであり、方法論のライブラリではありません。エージェントは特定のブリーフにアーキタイプのデフォルト設定を適用します。アーキタイプ自体は拠り所を提供するものであり、到達点ではありません。


使用する場面

  • ゼロからデザインするのではなく、出発点を求めている場合
  • 近い方向性でデザインしたいブランドや美的な系統をユーザーが挙げている場合
  • 多くの方向性から一つに、よりすばやく絞り込みたい場合
  • ユーザーが業種に典型的なデフォルト設定を求めている場合(例:コンシューマー向けフィンテック、B2B 開発者向けツール)
  • ブリーフを別のアーキタイプに当てはめた場合の見え方を試したい場合

使用しない場面

  • ユーザーが純粋な方法論のガイダンスを求めている場合(brand-identity を使用)
  • ポジショニングの領域が必要な初期段階のアイデア出しの場合(brand-ideation を使用)
  • 既存ブランドのボイスを定義する場合(brand-voice を使用)
  • 完成したブランドを文書化する場合(brand-style-guide を使用)

他のスキルとの連携方法

このスキルは brand-identity の上流で機能し(ブランドアイデンティティが完成されたシステムへと磨き上げるための出発点となるデフォルト設定を提供)、creative-direction と並行して機能します(アーキタイプは、4つの creative-direction 軸上の位置によって特定できます)。

このスキルを呼び出した場合の一般的な流れ:

  1. ユーザーがブリーフを提供するか、対象となるアーキタイプを指定します
  2. エージェントが最も関連性の高いコアアーキタイプを選ぶか、隣接する2つのアーキタイプを組み合わせます
  3. エージェントがアーキタイプのデフォルト設定をブリーフに合わせて調整します(カラーのトークンを変更し、フォントを業種に適したものに置き換え、ボイスのサンプルをブランドに合わせて書き直します)
  4. エージェントが行った調整を明示します

アーキタイプのデフォルトのカラーパレットを、新しいブランドにそのままコピーするのは失敗につながります。アーキタイプはデザインの選択肢を絞り込み、ブリーフはその範囲内の具体的な方向性を定めます。


フレームワーク:12のコアアーキタイプと18の業種別適用例

references/ には、2層のコンテンツがあります。

コアアーキタイプ(12ファイル)

references/core-archetypes/ にあります。各ファイルは美的な系統を表し、以下を含みます。

  • 美的な概要
  • 4つの creative-direction 軸における位置
  • カラーパレットのスターター(トークン名と選定理由を含む4〜6個の16進数カラー値)
  • フォントの組み合わせのスターター(サイズスケール付きの Google Fonts の組み合わせ)
  • レイアウトと構成のパターン
  • ボイスのサンプル(代表的な5〜10行)
  • コンポーネントパターンの説明(ヒーロー、ボタン、カード、テーブル)
  • イメージの方向性
  • 選ぶべき場面と避けるべき場面
  • 調整のガイダンス
  • クレジット表記を含む代表的なブランド
業種別適用例(18ファイル)

references/by-vertical/ にあります。各ファイルでは、その業種におけるブランドをコアアーキタイプに対応づけ、以下を含みます。

  • 業種の概要
  • 一般的なアーキタイプ
  • ブランドとアーキタイプの対応づけ(業種ごとに5〜10ブランド)
  • 業種固有の調整に関する注記
  • ブランドの成熟に伴う、よく見られるアーキタイプの進化パターン
概要ファイル2つ
  • 00-archetype-system-overview.md:システムの仕組みと分類体系
  • 01-how-to-apply-an-archetype.md:調整の原則と失敗につながるパターン

12 のコアアーキタイプ

#アーキタイプ1 行での要約
01編集的で抑制された低彩度、タイポグラフィ主導、ゆとりのある余白、熟慮された印象
02技術的で精密なモノスペースフォントとグリッドが際立ち、情報密度が高く、システムを思わせる印象
03温かく会話的な人物写真、中程度の彩度、親しみやすいタイポグラフィ、近づきやすい印象
04大胆で自信に満ちた強いコントラスト、大きなディスプレイ書体、高彩度、率直な印象
05遊び心がありエネルギッシュな鮮やかな色、イラスト主導、躍動感があり、キャラクター性を重視
06贅沢で洗練されたセリフ体主導、ゆとりのある間隔、抑制された配色、上質な印象
07臨床的で信頼できる寒色系の配色、サンセリフ体、医療または金融分野を思わせるクリーンな印象
08無骨で実用的なアースカラー、ワークウェアの影響を受けた、実直なタイポグラフィ
09レトロでノスタルジックな時代を特定できる配色とタイポグラフィ、意図的なビンテージ表現
10ミニマルで本質を重視した黒、白、単色のアクセント、サンセリフ体のみ、簡素なデザイン
11鮮やかで高彩度なパレット全体にわたる高彩度、色そのものが個性
12ドキュメンタリー風で率直な写真主導、実在の人物、手を加えすぎない画像

18 の業界別アプリケーション

  • B2B SaaS:開発者向けツール、ビジネス生産性、マーケティングと営業、データと分析
  • フィンテック:コンシューマー、エンタープライズ
  • DTC:ファッション、美容、ホームとライフスタイル、食品と飲料
  • コンシューマーヘルスとウェルネス
  • ホスピタリティと旅行
  • メディアと出版
  • EdTech
  • ゲームとエンターテインメント
  • マーケットプレイス
  • 暗号資産と Web3
  • 不動産と Proptech

商標と帰属表示

アーキタイプはブランド名ではなく、美的系統の名称として定義されています。「Stripe 風」ではなく、「編集的で抑制された」です。ブランドは説明文の中で、「[ブランド]に代表される」「[ブランド]の間でよく見られる」「[ブランド]に特徴的」といった帰属を示す表現を用いて、例として挙げています。

これは説明的かつ指名的なフェアユースの範囲に該当し、ブランドのリニューアルを経ても有効です。ブランドがアイデンティティを変更しても、かつてそのブランドが体現していたアーキタイプの妥当性は損なわれません。


4 つのクリエイティブディレクション軸(参考)

各アーキタイプは、creative-direction スキルで定義された 4 つの軸に沿って位置づけられています。相互参照用の簡単な要約は次のとおりです。

  • トーンのレジスター:プロフェッショナル、会話的、遊び心のある
  • 美的レジスター:抑制的、洗練された、表現豊かな、最大限の
  • オーディエンスとの関係性:権威、仲間、寄り添う存在、パフォーマー
  • 感覚的な志向:機能的、洗練された、没入型、演劇的

各コアアーキタイプのファイルでは、各軸における位置が指定されています。


参考ファイル

  • references/00-archetype-system-overview.md - 2 層システムの全体像、導入パターン、アーキタイプを組み合わせる場合、および繰り返し発生する失敗パターンについて説明します。
  • references/01-how-to-apply-an-archetype.md - 5 ステップの適用プロセス:デザイン空間の特定、調整可能な次元へのブリーフの割り当て、色の調整、タイポグラフィの調整、ボイスサンプルの作成。アーキタイプ間の一貫性チェックも含まれます。

12 のコアアーキタイプファイルは、references 配下の core-archetypes/ サブディレクトリにあり、01(編集的で抑制された)から 12(ドキュメンタリー風で率直な)まで番号が付けられています。18 の業界別アプリケーションファイルは、references 配下の by-vertical/ サブディレクトリにあり、01(B2B SaaS 開発者向けツール)から 18(不動産と Proptech)まで番号が付けられています。美的系統と業界の両方が指定されたブリーフでは、該当するコアアーキタイプファイルと業界別ファイルを一緒に読み込んでください。

コメント