brand-identity

スキルのバージョン： 1.0.0

ブランドアイデンティティ — 3案を提示し、1案を選ぶ

概要

デザイナー、マーケター、開発者ではない人向けの、インタビュー形式のブランド作成です。短い会話（5つの質問と任意のムードボード）を行い、本当に異なる3つのビジュアル案を提示します。ユーザーが違いを見て比べられるよう、1つのブラウザページに横並びで表示し、1つを選んでもらってから、その案を単独で完結するプロダクトアイデンティティのHTMLドキュメント（ロゴ／ワードマーク、色、タイポグラフィ、コンポーネント、余白、声とトーン、使用例）に仕上げます。

**基本原則：ユーザーは完成した案を比べて好みを決め、あなたはその案を生み出すデザイン上の判断を担います。**フォームではなく、コンサルタントとして振る舞ってください。デザイン用語を使った質問（「どんな色相がいいですか？」「角丸の半径は？」など）は決してしないでください。プロダクトについて、またどんな印象を覚えていてほしいかを尋ね、それをデザインに反映します。提案にはすべて理由を添えてください。

対象はプロダクトアイデンティティに限ります。ブランド戦略全般（目的、ミッション、アーキタイプ、ペルソナ、メッセージング）は今後の拡張機能です。ユーザーから求められない限り、そこまで広げないでください。

使用する場面

• ユーザーがブランド／ブランドキット／デザインシステム／ビジュアルアイデンティティを求めており、まだほとんど何もない、または何もない場合
• ユーザーがプロダクト、アプリ、会社について「どんな色やフォントを使えばいいですか？」と尋ねる場合
• 成熟した既存のブランドシステムを刷新する場合には使用しません（その場合は監査してください）。また、ロゴのイラスト制作にも使用しません（ワードマークはタイポグラフィのみです）

プロセス

以下の5つのフェーズを順番に進めてください。フェーズ2（コンセプトの確認）とフェーズ4（選択）は必須の確認段階です。ユーザーの確認なしに、レンダリングや最終化を先に進めないでください。

1. ヒアリング — 5つの質問を1回に1つずつ

平易な言葉で、会話形式で質問してください（AskUserQuestionは使いません。自由回答形式の質問です）。次の質問をする前に、毎回回答を待ってください。これは堅苦しいフォームではなく会話であり、いつでもチャットに話題を切り替えられると、最初に伝えてください。

1. 何をしていますか？（ブランド／プロダクト名も確認してください。まだ出ていなければ尋ねます）
2. 誰のためのものですか？
3. なぜ相手に関心を持ってもらえるのですか？（どんな点が他と違うのですか）
4. 競合は誰ですか？（名前、または「直接の競合はいない」と答えてもらいます。後で案の見た目を競合から遠ざけるために使います）
5. 覚えていてほしい、たった1つのこと — 「これを初めて見た人に、何を1つだけ覚えていてほしいですか？」感情、ビジュアル、主張、姿勢のいずれかを、1文で答えてもらいます。記録してください。**その後の判断はすべて、これに沿う必要があります。**あらゆる点で印象に残ろうとするデザインは、何も印象に残りません。

回答が曖昧な場合は、追加質問は最大1つにして、次へ進んでください。質問を重ねすぎると、デザインに詳しくない人は行き詰まります。

**印象を段階評価する質問はしません。**質問票で性格を決めつけるのではなく、3つの案をビジュアルで示し、個性の方向性を探ります。

2. 参考素材とムードボード — 提供を促し、内容を読み取って共有する

ユーザーに、ムードボード（チャットに複数の画像をドラッグして追加）、好きなブランド／ウェブサイト、または好みの色（名称または16進数）を尋ねてください。必須ではありませんが、強くおすすめします。ムードボードがあると、案の精度が大きく高まります。

画像が提供された場合は、画像を読み取り、雰囲気のプロファイルを抽出してください（design-mapping.md → 「Moodboard → vibe profile」を参照）：主要な色の組み合わせと暖色／寒色の傾向、彩度、コントラスト、質感／素材感、形状の言語、タイポグラフィの印象、雰囲気を表す形容詞3～5個です。コンセプトを作る前に、読み取った内容をユーザーに見せて、修正してもらってください。「ムードボードからは、温かみがあり、エディトリアルで、少しヴィンテージ風、クリーム色の紙にインクを刷ったような印象で、アクセントは鮮やかな1色だと感じました。合っていますか？」

ムードボードの画像が互いに異なる場合、無理に平均して曖昧にまとめず、その対立点を言葉にしてください。「この中の2つは温かみがあり手作り感がありますが、1つは冷たくテクニカルです。冷たい方向を追いたいのでなければ、温かみと手作り感を共通の軸にします。」

参考素材やムードボードが提供されない場合は、ヒアリングの回答だけをもとに進め、そこから案を導き出してください。

3. 3つのコンセプト → 横並びで表示

3a. まず3つのコンセプトを言葉で示します。 ディスカバリーと雰囲気のプロフィールから、実際に異なる3つの方向性を導き出します（design-mapping.md → 「3つの異なるコンセプトの導き出し方」を参照）。それぞれ1行で、アルファベット付きのリストとして提示します。

A) "Quiet Ledger" — precise, restrained, monospace accents; numerals as hero
B) "Warm Signal"  — editorial warmth, a real serif, an ember accent
C) "Field Notes"  — soft, human, organic; grain and rounded forms

方向性の収束を避けることは必須です： 3つの案は、必ず異なるフォントファミリー、異なる色温度、異なる形状やレイアウトのリズムを用いてください。2つの案のワードマークを入れ替えても気づかれないなら、一方は失敗です。意図的に異なる方向性で作り直してください。まるで3つの異なるデザインチームが手がけたように感じられるものにします。

手短に確認を取ります（「それで作って」／「Cをもっと大胆なものに差し替えて」）。コンセプトの修正は最大2回です。これは、レンダリング前に手早く反復できる段階です。

3b. 比較ページを作成します。 3つの方向性をすべて忠実にレンダリングした、自己完結型のbrand-directions.htmlを1つ生成します。output-spec.md → 「比較ページ」に従ってください。各方向性のパネルには、ワードマーク、カラー見本（名前＋16進数）、書体見本、ユーザー自身のドメインのコンテンツを使った実際のコンポーネント（ボタン、カード、入力欄）、使用例を1つ、平易な言葉で書いた安全性／リスクに関する注記を含めます。

提示前の自己審査は必須です。 各方向性について、次のように自問します。「これに自分の名前を載せるのを、デザイナーとして恥ずかしく思うだろうか？」 そうなら、破棄して作り直してください。却下の対象：紫やバイオレットのグラデーションヒーロー、円の中にアイコンを配置した3列グリッド、すべてが中央揃えで均一な間隔のレイアウト、本文にInterまたはSpace Groteskを使うこと、すべてにバブル状の角丸を使うこと、グラデーションのCTAボタン、ありきたりなストック写真の雰囲気、ディスプレイ／本文フォントにsystem-uiを使うこと。どれか1つでも当てはまれば、その方向性は却下して作り直します。

ユーザーのブラウザーで開きます（SendUserFileでdisplay: "render"を指定するか、openを使用）。次のように伝えます。「3つの方向性を横並びにしました。見比べて、どれがしっくりくるか教えてください。組み合わせることもできます（『Bにして、アクセントはAから』など）。」

4. 選択 — チャットで決める

ユーザーはチャットで選択を伝え、必要に応じて組み合わせの希望も伝えます。インタラクティブなボタンもサーバーもありません。ページは見るためのもので、決定はチャットで行います。進める前に、理解した内容を確認します。「Bの『Warm Signal』を選び、Aの明るいアクセントを取り入れる、ということですね？」

5. 仕上げて最終的なアイデンティティドキュメントを納品する

会話を通じて選ばれた方向性を磨き上げます（組み合わせの希望を反映し、必要な箇所を調整します）。次に、output-spec.md → 「最終アイデンティティドキュメント」に従って最終版のproduct-identity.htmlを作成します（製品名に合わせて命名します。例：pact.html）。その後、以下を行います。

• コントラスト比はスクリプトで計算し、決して推測しないでください。 表示するテキストと背景のすべての組み合わせについて、実際のWCAGコントラスト比を示します。納品前に、本文のテキストで4.5:1未満の組み合わせがあれば修正します。
• コンポーネントの例や、ブランドの声に関する「すること／しないこと」には、ダミーテキストではなく、ユーザーのドメインのコンテンツを使います。
• レンダリングするかスクリーンショットを撮って、問題がないことを確認してから送信します（SendUserFile、render）。
• 何を納品したかと、自然な次のステップ（ロゴデザイン、ブランド戦略全体など）を伝えて締めくくります。次のステップには着手しません。

クイックリファレンス

入力	収集方法	活用先
ディスカバリー ×5	自由回答式の質問を1つずつ	コンセプト、コピー、ブランドの声、コンポーネントのコンテンツ
記憶に残るもの	質問5	すべての判断の軸
インスピレーション／ムードボード	画像／ブランド／16進数	雰囲気のプロフィール → コンセプト、パレット、書体
選択	比較ページの後、チャットで	最終ドキュメントに採用する方向性

参考資料： design-mapping.md（ムードボードから雰囲気へ、3つのコンセプトの導き出し方、パレットの作り方、フォントのガイド、使用禁止リスト、安っぽさの回避、安全性／リスク） · output-spec.md（比較ページと最終アイデンティティドキュメントの構成）

よくある間違い

• すべての発見のための質問を1つのメッセージで尋ねる → ユーザーは1つだけ答えて、残りを無視します。1つずつ尋ねてください。
• 兄弟のように見える3つの方向性 → 収束の罠です。異なるフォント、温度感、リズムにしなければ、3つの選択肢とは言えません。
• コンセプト確認のゲートを省略する → ユーザーがテキスト1行で方向を修正できたのに、3つの方向性をすべて作り込んでしまいます。
• 相反するムードボードを平均化する → ぼんやりして個性のない結果になります。緊張感を明確にし、通底する軸を選んでください。
• Inter や Space Grotesk をデフォルトで使う → AI ツールはどれもそこに収束します。ユーザーが指定しない限り、主要フォントとしては使わないでください。使いすぎの一覧を参照してください。
• コントラスト比を推測する → 間違った数値を公表することになります。計算してください。
• 汎用的な埋め草のコンテンツ（「Lorem ipsum」、「Acme Corp」）→ ボタンに ユーザー自身の アクションが表示され、カードに ユーザー自身の データが示されて初めて、ドキュメントは機能します。
• 本格的なブランド戦略（ミッション、アーキタイプ、ペルソナ）にまで広げる → 対象は製品のアイデンティティのみです。それ以外はフォローアップとして提案してください。