taste-brand-identity

taste-brand-identity

ロゴは絵ではなく、記憶を助けるものです。このスキルは、ファビコンから看板まで、ブランドアイデンティティが一貫して保たれるようにします。

1. コンセプト（描き始める前に）

1. アイデアは一つ、言葉は二つ： マークは一つの連想（「北＋針」「レコード＋花」など）に集約されます。二つの言葉で表せないなら、コンセプトはまだ固まっていません。
2. 文字どおりの表現は最後の手段： 製品カテゴリを表すありきたりなアイコン（きらめき、ロケット、吹き出し、歯車）は、ほかのあらゆるマークが使っています。製品の背後にある抽象的なアイデアを探しましょう。
3. 気に入る前に16pxでテストする： まずマークがファビコンとして認識できなければなりません。成立させるのに3色や細かなディテールが必要なら、不合格です。
4. 色は2色まで： 1色のインク＋アクセント1色（またはモノクロ）。グラデーションがないと成立しないマークは、マークではありません。

2. ワードマークのタイポグラフィ（見落とされがちなところ）

• フォントを一から作るより、既存の優れた書体に手を加えることを優先します。字間（−0.03em）、大文字・小文字の使い分け、句読点のディテール（「skittie.dev」の「.」など）、または一文字の切り抜き・字形の置き換えが候補です。
• ワードマークに加えるタイポグラフィ上の工夫は一つだけにします。字間を詰めるか、大文字・小文字を変えるか、一文字だけを変えるかのいずれかです。二つ加えると、奇抜なロゴになります。
• ワードマークは、大文字、文頭だけ大文字の表記、12pxでテストします。小さいサイズで成立しない場合は、字間を詰めるか、セカンダリーのロックアップを用意します。
• 小文字の字間は広げないでください（単語の形が崩れます）。書体を横に引き伸ばさないでください（実際のコンデンス体を使います）。

3. ロックアップ（マーク＋ワードマークを形式化する）

• 構成グリッドに沿って作成します。マークとワードマークの光学的な中心を揃え、周囲の余白は、マークの最小要素の高さ（またはマーク幅の1/4）にします。
• ロックアップは3種類を一度だけ定義します。横型（マーク＋ワードマーク）、縦型（マークの下にワードマーク）、コンパクト型（小さなスペース用のマーク＋短いワードマーク）です。
• 最小サイズ：マークは16px以上（ファビコン）、24px以上（アプリ内）、コンパクト型のワードマークは12px以上です。
• 禁止するロックアップの誤り：影付きのマーク、グラデーションのマーク、小さいサイズでのアウトライン付きマーク、最初に表示される画面でブランド名を伴わないマーク単体。

4. 色の適用

• ブランドアイデンティティは、インク色＋アクセント1色（ページで使われているパレットから）で表現します。反転版（暗い背景に明るい色）も必須です。両方を定義してください。
• アクセントの使い方：アクセントは、リンク、ボタン1つ、アクティブ状態、ロゴのアクセント部分などの目印として使います。背景の塗りつぶしには使いません。
• 「モノクロのみ」のフォールバックを用意します。すべてのブランド素材には、デフォルトとしてインク色100％の版が必要です。
• ロゴがワードマークの場合、色のルールは見出しと同じインク色です。セクションごとに色を変えた虹色にはしません。

5. 納品物一式（すべて用意する）

1. プライマリーロックアップ — currentColorに対応するSVG。
2. ファビコン — 32pxと180px（apple-touch）。マーク単体を、それ専用の正方形タイルの中央に配置します。
3. og-image — 1200×630のキャンバス。マークまたはワードマークを左上または中央に配置し、アクセントを一つ加え、余白は上下左右80px以上にします。これはインターネット上で最もよく見られるブランド素材です。サイトのスクリーンショットにはしないでください。
4. 1ページのブランドシート — マーク、ワードマーク、余白の図、最小サイズ、パレット（トークン付き）、書体の組み合わせ、してよいこと・いけないことの一覧。このファイルはエージェント独自のブランドガイドラインになります。

6. してよいこと・いけないこと（すばやく見極める）

してよいこと	してはいけないこと
要素が一つだけ残るまで単純化する	「奥行き」を出すために線、影、グラデーションを足す
16px、48px、400pxでテストする	400pxだけでデザインして、うまくいくよう祈る
タイポグラフィ上の工夫は一つだけにする	書体とぶつかる文字を独自に描く
反転版を用意する	白地でしか使えないバージョンだけを納品する
og-imageを意図的に作る	SNSにスクリーンショットを切り抜かせる

7. チェックリスト（次に該当する場合、ブランドアイデンティティとして不合格）

• コンセプトを二つの言葉で表せない。
• 色が2色を超えている（ニュートラルカラーを除く）。
• 視認性を保つためにグラデーション、影、アウトラインが必要。
• 16pxのマークが競合のものと見分けにくい。
• 反転版がない。
• 余白と最小サイズのルールが定義されていない。
• og-imageがない、またはページのスクリーンショットになっている。