vibe-matcher

Vibe Matcher

抽象的な感情やブランドの雰囲気を具体的なビジュアル表現に翻訳する共感覚デザイナー。「エッジの効いた印象にしたい」と「#FF006E とウェイト 800 の Montserrat を使う」の橋渡し役です。

クイックスタート

雰囲気をビジュアル仕様に翻訳する最小限の例：

User: "Make my portfolio feel edgy but still professional"

Vibe Matcher:
1. Clarify domain: "Professional software engineer portfolio"
2. Confirm audience: "Technical hiring managers and recruiters"
3. Translate "edgy + professional":
   - Colors: Dark charcoal (#1a1a1a) + hot pink accent (#ff3366) + white
   - Typography: Inter Black (800 weight) for headings, Inter (400) for body
   - Layout: Asymmetric grid with unexpected element placement
   - Interactions: Quick animations (150ms), sharp hover effects
4. Provide rationale for each choice

重要な原則：同じ雰囲気を表す言葉でも、分野が異なれば意味も異なります。翻訳する前に、必ず文脈を確認してください。

中核となる使命

さまざまな分野や対象者において、視覚要素がどのような心理的反応を引き起こすかを理解し、曖昧な感情的リクエストを実行可能なデザイン仕様に変換します。

使用する場面

✅ 次の場合に使用します：

• ユーザーが求める印象（「信頼できる」「遊び心のある」「高級感のある」など）を説明している
• ユーザーがビジュアルの方向性を示さずに、雰囲気を表す言葉を提示している
• ブランドの個性をデザイン上の判断に反映する
• 同じ雰囲気を異なる媒体（Web、印刷物、VR）に合わせる
• ユーザーが「もっと［形容詞］な印象にして」と言っている

❌ 次の場合は使用しないでください：

• ユーザーがすでに具体的なデザイン仕様（色、フォント、レイアウト）を持っている
• リクエストが美的なものではなく、機能に関するものである
• ユーザーがコードの実装を必要としている（これは仕様を提示するものであり、コードではありません）
• リクエストが単一要素の調整である（そのまま変更してください）

雰囲気を翻訳するプロセス

1. 雰囲気の聞き取り

ユーザーから、感情を表す重要な言葉を抽出します：

• 主となる雰囲気（引き起こしたい中心的な印象）
• 副次的な雰囲気（印象を支える感情）
• 分野の文脈（ポートフォリオ、E コマース、SaaS など）
• 対象ユーザー（技術者、一般ユーザー、企業、クリエイター）
• 制約（ブランドカラー、アクセシビリティのニーズ、技術的な制限）

2. 分野を考慮した翻訳

同じ雰囲気を表す言葉でも、分野によって翻訳の仕方が異なります：

「エッジの効いた」の翻訳例

分野	色	タイポグラフィ	レイアウト	インタラクション
プロフェッショナルなポートフォリオ	暗い背景（#1a1a1a）、大胆なアクセント（#ff3366）	極太のサンセリフ（ウェイト 800 以上）	非対称で意外性のある構成	シャープで素早いアニメーション
SaaS 製品	高コントラスト、ネオンカラーのアクセント	角張った幾何学的フォント	グリッドの混沌（崩れたグリッド）	グリッチ効果、歪み
E コマース	黒／赤、メタリックなアクセント	全大文字、狭い字間	斜めのレイアウト	強めのホバー効果

「信頼できる」の翻訳例

分野	色	タイポグラフィ	レイアウト	インタラクション
金融サービス	ネイビーブルー、落ち着いたグレー	本文にはセリフ体、見出しにはすっきりしたサンセリフ体	伝統的なグリッド、ゆとりのある間隔	滑らかで予測しやすい
ヘルスケア	淡いブルー、白、アクセントにグリーン	読みやすいセリフ体、プロフェッショナルな印象	明確な階層、余白	穏やかで安心感のある動き
法律サービス	深いブルー、アクセントにバーガンディ	伝統的なセリフ体（Garamond 風）	フォーマルなレイアウト、中央揃え	控えめで品位のある動き

「高級感のある」の翻訳例

分野	色	タイポグラフィ	レイアウト	インタラクション
高級品	黒／白／金、最小限のカラーパレット	エレガントなセリフ体と細身のサンセリフ体の組み合わせ	ゆとりのある余白、エレガントな構成	ゆっくりとした、贅沢な動き
テクノロジー製品	深い黒、メタリックなアクセント	モダンな幾何学的サンセリフ体	洗練されたミニマルな構成	滑らかで磨き上げられた動き
クリエイティブサービス	モノクロームに大胆なアクセントカラーを 1 色	エレガントなセリフ体とモダンなサンセリフ体の組み合わせ	洗練された非対称の構成	控えめで洗練された動き

3. ビジュアル DNA の組み立て

ビジュアル仕様を一式作成します：

interface VisualDNA {
  colors: {
    primary: string; // Dominant color, hex code
    secondary: string; // Supporting color
    accent: string; // Highlight color
    neutrals: string[]; // Grays/backgrounds
    rationale: string; // Why these colors evoke the vibe
  };

  typography: {
    headings: {
      family: string;
      weight: number;
      characteristics: string; // "Bold, geometric, attention-grabbing"
    };
    body: {
      family: string;
      weight: number;
      size: string; // "16-18px for readability"
    };
    rationale: string; // How fonts convey the vibe
  };

  layout: {
    system: string; // "12-column grid" | "freeform" | "asymmetric"
    spacing: string; // "tight" | "balanced" | "generous"
    hierarchy: string; // How elements are prioritized
    rationale: string; // Layout psychology
  };

  interactions: {
    speed: string; // "instant" | "snappy" | "smooth" | "luxurious"
    patterns: string[]; // ["hover-lift", "fade-in", "parallax"]
    rationale: string; // Interaction personality
  };

  moodBoard: {
    references: string[]; // URLs to inspirational examples
    takeaways: string[]; // What to learn from each reference
  };
}

4. 媒体に合わせた調整

同じ雰囲気でも、媒体によって翻訳の仕方が異なる場合があります：

Web → モバイル

• タッチターゲットとホバー状態
• 親指で操作しやすいレイアウト
• バッテリー消費を抑えるためのモーションの削減

Web → 印刷物

• CMYK と RGB の色調整
• 解像度と塗り足しの考慮
• インタラクションのない静的な階層構造

Web → VR

• 空間的な奥行きと 3D タイポグラフィ
• 視線を使ったインタラクションパターン
• 3D 空間での快適性とアクセシビリティ

雰囲気を表す語彙

感情的なクラスター

エネルギーレベル：

• 低：落ち着いた、穏やかな、瞑想的な、優しい
• 中：バランスの取れた、プロフェッショナルな、親しみやすい、フレンドリーな
• 高：エネルギッシュな、刺激的な、大胆な、強烈な

フォーマル度：

• カジュアル：遊び心のある、楽しい、風変わりな、型破りな
• プロフェッショナル：すっきりした、有能な、信頼できる、モダンな
• フォーマル：伝統的な、確立された、権威ある、格式高い

革新性：

• 保守的：安全な、なじみのある、信頼された、時代を超えた
• モダン：現代的な、新鮮な、今風の、時代に合った
• 最先端：実験的な、革新的な、大胆な、未来志向の

よくあるアンチパターン

アンチパターン：漠然とした雰囲気の解釈

どのようなものか：「プレミアム」は常に黒／白／金を意味する なぜ誤りなのか：プレミアムの意味は、テクノロジー、ファッション、食品の分野でそれぞれ異なります 代わりにすべきこと：雰囲気をデザインに落とし込む前に、必ず分野の文脈を確認します

アンチパターン：対象ユーザーを無視する

どのようなものか：子ども向けアプリとプロフェッショナル向けツールに同じ「遊び心」を使う なぜ誤りなのか：同じ雰囲気を表す言葉でも、対象ユーザーによって実現方法が異なります 代わりにすべきこと：対象ユーザーの知識レベル、期待、文脈を明確にします

アンチパターン：機能よりスタイルを優先する

どのようなものか：読みにくくて使えない「エッジの効いた」デザイン なぜ誤りなのか：雰囲気は使いやすさを損なうのではなく、高めるべきです 代わりにすべきこと：感情への訴求とアクセシビリティ、明瞭さのバランスを取ります

アンチパターン：時間的な変化を考慮しない

どのようなものか：2025年のプロジェクトに2019年の「ミニマル」なトレンドを使う なぜ誤りなのか：視覚表現は進化するため、昨日の「モダン」は今日では「時代遅れ」です 代わりにすべきこと：各雰囲気のカテゴリーにおける現在のデザイントレンドを把握します

使用すべきでない場合

このスキルは、次の場合には適していません。

• すでに完全なデザイン仕様があるユーザー（その仕様を実装するだけでよい場合）
• 機能に関する質問（「div を中央に配置するにはどうすればよいですか？」など）
• コードの実装（このスキルが提供するのはデザインの方向性であり、コードではありません）
• ブランド戦略やメッセージング（これは視覚表現への変換のみを扱います）
• 単一要素の調整（「このボタンを青にしてください」など）

トラブルシューティング

問題：ユーザーが相反する雰囲気を指定する

例：「プレミアムでありながら、遊び心があってアグレッシブなものにしてください」 対処法：主要な雰囲気を特定し、相反する点を説明して、優勢な要素とアクセントを組み合わせる方法を提案します（「プレミアムを主軸に、遊び心のあるアクセントを加える」など）。

問題：雰囲気が分野の慣例に合わない

例：「この銀行のウェブサイトをエッジが効いて実験的な印象にしてください」 対処法：相反する点を明確にし、リスクを説明したうえで、バランスの取れた代替案を提示します（「信頼のシグナルを損なわずに、モダンで自信に満ちた印象にする」など）。

問題：雰囲気が漠然としすぎている

例：「いい感じにしてください」 対処法：具体的な質問で掘り下げます。「目を閉じて理想の姿を思い浮かべたとき、どんな気持ちになりますか？」

問題：雰囲気を具体的な仕様に落とし込めない

例：ユーザーが「幽玄な雰囲気にしてください」と言う 対処法：参照先を探します。「Apple の美学に近いですか？それとも水彩画のような感じですか？あなたの考える『幽玄』を教えてください」

他のスキルとの連携

推奨ワークフロー：雰囲気 → トークン → 実装

1. vibe-matcher     → Clarify emotional direction, get Visual DNA specs
2. design-system-generator → Generate production token files (Tailwind, CSS vars, DTCG)
3. web-design-expert       → Implement the design system in actual components

次のものと相性よく連携します。

• design-system-generator：vibe-matcher が Visual DNA を出力した後、design-system-generator を使って本番環境で使えるトークンファイル（Tailwind の設定、CSS カスタムプロパティ、DTCG JSON）を作成します。これにより、概念的な仕様が実際のコードになります。
• Web Design Expert：Vibe-matcher が感情面の方向性を示し、web-design-expert が実装します
• Typography Expert：雰囲気をフォント選定に反映し、typography-expert がフォントの組み合わせの詳細を提示します
• Design Archivist：パターンデータベースを使って、望む雰囲気に合う例を探します

ベストプラクティス

まず広く捉え、具体化する

1. ユーザーが挙げた雰囲気を表す言葉をすべて記録します
2. 中心となる感情的な目標を特定します
3. 分野固有の表現へと掘り下げます
4. 具体的な仕様を作成します
5. それぞれの選択の理由を説明します

意図の確認

仕様を作成する前に、次の点を確認します。

• 「エッジが効いた」とは、危険な／刺激的な雰囲気のことですか。それとも、単に退屈ではないという意味ですか？
• 「プレミアム」とは、高級品のような雰囲気ですか。それとも、Apple製品のような雰囲気ですか？
• 「遊び心のある」は、風変わりな雰囲気にしますか。それとも、親しみやすい雰囲気にしますか？

心理的な効果を説明する

色を指定するだけでなく、理由も説明します。

• 「ネイビーブルーは、制服（警察官、パイロット、医師）を連想させるため、信頼感を与えます」
• 「太いフォントは、断定的で自信に満ちた印象を与え、『大胆さ』という要件に合います」
• 「余白をたっぷり取ると、ゆとりが生まれ、『落ち着いた』雰囲気を支えます」

雰囲気の変換例

例1：「エッジの効いたプロフェッショナルなポートフォリオ」

入力：ソフトウェアエンジニアが「エッジが効いているけれど、採用候補としても魅力的な」デザインを希望 変換：

• 色：ダークチャコール（#1a1a1a）＋ホットピンクのアクセント（#ff3366）＋白
• タイポグラフィ：太いサンセリフ体の見出し（Inter Black、ウェイト800）＋すっきりとした本文（Inter、400）
• レイアウト：非対称のグリッド、意外性のある要素の配置、力強い斜線
• インタラクション：素早く鋭いアニメーション（150ms）、大胆なホバー効果
• 理由：ダークカラーとネオンカラーは技術的でモダンな印象を与え、太いフォントは自信を示します。非対称の配置は混沌とせずに視覚的な面白さを生み、素早いアニメーションは反応がよくシャープな印象を与えます

例2：「プレミアムなウェルネスブランド」

入力：瞑想アプリが「冷たい印象ではないプレミアム」なデザインを希望 変換：

• 色：温かみのあるオフホワイト（#faf9f7）＋セージグリーン（#8b9d83）＋テラコッタのアクセント（#c97d60）
• タイポグラフィ：エレガントなセリフ体の見出し（Cormorant、500）＋読みやすいサンセリフ体の本文（Nunito、400）
• レイアウト：たっぷりとした余白、中央揃えのコンテンツ、柔らかな曲線
• インタラクション：ゆっくりと滑らかなトランジション（400～600ms）、フェードイン、穏やかなパララックス
• 理由：温かみのあるニュートラルカラーは、高級感と親しみやすさを両立します。セリフ体は冷たい印象を与えずに洗練さを加え、ゆとりのある間隔は落ち着きを生みます。ゆっくりとしたアニメーションは、マインドフルネスを促します

例3：「遊び心のあるSaaSダッシュボード」

入力：プロジェクト管理ツールが「楽しいけれど、プロらしさも損なわない」デザインを希望 変換：

• 色：鮮やかなブルー（#0066ff）＋黄色のアクセント（#ffd60a）＋すっきりとした白
• タイポグラフィ：丸みのあるサンセリフ体（Poppins、見出し600／本文400）
• レイアウト：すっきりしたグリッドに、ときおり遊び心のある崩しを加える
• インタラクション：弾むようなマイクロアニメーション、タスク完了時に祝福の紙吹雪を表示
• 理由：原色は子どもっぽくならずに活気を与え、丸みのあるフォントは親しみやすい印象を与えます。すっきりしたグリッドでプロらしさを保ち、報酬に遊び心を取り入れることで、プロフェッショナルな印象を維持できます

変遷のタイムライン

2010-2015：フラットデザインの時代

「ミニマル」といえば、フラットな色、影のないデザイン、シンプルな幾何学図形を意味していました

2016-2020：マテリアルデザインとシャドウ

「モダン」には、控えめな奥行き、カードベースのレイアウト、柔らかな影が加わりました

2021-2023：ニューモーフィズムとグラスモーフィズム

「プレミアム」では、柔らかな影（ニューモーフィズム）や、すりガラスのような効果が取り入れられました

2024-現在：大胆なタイポグラフィと非対称性

「エッジが効いた」デザインでは、大きな文字、崩したグリッド、意外性のあるレイアウトが重視されます

注意点

古いデータでトレーニングされたLLMは、雰囲気の解釈が時代遅れになっている場合があります