brand-identity

ブランドアイデンティティ

ブランドを表現するビジュアル要素（ロゴシステム、カラー、タイポグラフィ、画像、アイコン、モーション）をデザインまたは評価します。技術スタックやツールを問いません。

このスキルは、ブランドの方向性（ポジショニング、ムード、名称）がすでに承認されていることを前提としています。まだの場合は、先に brand-ideation を実行してください。

---

使用する場面

• ロゴシステムのデザイン
• ブランドカラーパレットの定義
• ブランドのタイポグラフィの選定
• アイコンやイラストのスタイルの策定
• 画像の方向性（写真、イラスト）の定義
• モーションの原則の確立
• 一貫性や不足要素を確認するための既存アイデンティティの監査

使用しない場面

• ブランドの方向性がまだ定義されていない（brand-ideation を使用）
• 完成したシステムをドキュメント化する（brand-style-guide を使用）
• ボイスとトーンを定義する（brand-voice を使用）
• 既存ブランドをもとに UI コンポーネントを構築する（design-standards または design-system を使用）

---

必要な入力

• ブランド名と承認済みのポジショニング
• ムードの方向性（アイデーションから得たもの、または参考資料として提供されたもの）
• オーディエンスとカテゴリーの背景情報
• 適用先（ウェブ、印刷物、パッケージ、モーションなど、該当するもの）
• 制約（親ブランドの要件、規制上必要なマーク、アクセシビリティの最低基準）

---

フレームワーク：5つの要素

完全なアイデンティティは5つの要素で構成されます。それぞれの要素が互いを強化する必要があります。要素間の一貫性の欠如は、アイデンティティが失敗する最も一般的な原因です。

1. ロゴシステム

ほとんどのブランドに必要なのは、単一のロゴではなく、さまざまな状況に対応するマークのシステムです。

ロゴシステムの構成要素：

• プライマリーマーク。 メインのロゴです。スペースに余裕がある場合に使用します。
• ワードマーク。 シンボルを含まない、タイポグラフィだけのロゴです。横幅が限られる場面で使用します。
• シンボルまたはグリフ。 文字を含まない、シンボルだけのロゴです。アプリアイコン、ファビコン、SNS のアバターに使用します。
• ロックアップのバリエーション。 横型、縦積み型、正方形など、該当する形式を用意します。
• モノグラム。 頭文字をマークとしてデザインしたものです。任意ですが、小さな表示領域で役立ちます。

デザインの原則：

• 16 ピクセルでも判読できること。 ファビコンのサイズでロゴをテストします。形が崩れる場合は、再デザインしてください。
• 単色で再現できること。 フルカラーでしか機能しないロゴは、シルクスクリーン印刷や刺繍、ブラウザーのファビコンでの表示に対応できません。
• 特徴的なシルエットであること。 目を細めて見ても、何のロゴかわかりますか？ シルエットがカテゴリー内の他のロゴと見分けられない場合は、再デザインしてください。
• 構成グリッドを定めること。 すべての曲線と角度に意図を持たせます。構成をドキュメント化してください。

よくある失敗：

• プライマリーマークだけをデザインし、ローンチ時にワードマーク、グリフ、小サイズ用のバリエーションが存在しないことに気づく。

2. カラーシステム

カラーシステムは、単なるパレットではありません。色がどのように意味を伝えるかを定めるルールです。

構成要素：

• プライマリーカラー。 ブランドと最も強く結び付くシグネチャーカラーです。
• セカンダリーカラー。 パレットを広げるための補助色を1〜3色用意します。
• ニュートラルカラー。 表面領域の大部分を占めるグレーや淡色です。
• セマンティックカラー。 ブランドがプロダクト UI を扱う場合に使用する、成功、警告、エラー、情報を示す色です。
• アクセントカラー。 ハイライトや強調に限定して使用します。

各色について、以下を記録します：

• HEX、RGB、HSL、CMYK（印刷物が対象の場合）、Pantone（ブランドに不可欠な印刷物がある場合）
• システム内の他の色に対する WCAG AA のコントラスト比
• 使用できる組み合わせと使用できない組み合わせ（一部のブランドカラーは、組み合わせると見栄えが悪くなります）
• 使用上の注意（使用する場面、使用しない場面）

デザインの原則：

• アクセシビリティをテストすること。 WCAG AA では、通常のテキストに4.5:1、大きなテキストに3:1のコントラスト比が必要です。ブランドカラーが白に対してどちらの基準も満たせない場合は、問題があります。
• 色覚特性による見え方をテストすること。 男性のおよそ8％は、何らかの色覚特性を持っています。重要な UI のシグナルを色だけに頼らせてはいけません。
• ニュートラルカラーを慎重に定義すること。 多くのブランド適用例では、表面領域の80％をニュートラルカラーが占めます。ブランドカラー以上に大きな役割を担います。
• パレットを絞ること。 30色のパレットは管理できません。色数が多すぎるシステムより、慎重に選んだ5〜8色の方が優れています。

3. タイポグラフィ

ロゴに次いで、文字はブランドを認識させる要素として2番目に重要です。

タイポグラフィシステムの構成要素：

• ディスプレイ書体。 見出しやブランドを印象づける場面に使用します。
• 本文書体。 長文の読解に使用します。ディスプレイ書体と同じ場合が多く、異なる場合もあります。
• 等幅書体（技術系ブランドで必要な場合）。
• 文字サイズの段階。 アプリケーション全体で使用するサイズのセットです。通常は5〜8段階です。
• 文字の太さとスタイル。 システムに含める太さやイタリック体を定めます。

デザイン原則：

• 書体の組み合わせ。 2種類の書体を使う場合は、本文サイズとディスプレイサイズの両方で調和する必要があります。よくある組み合わせは、見出しにセリフ体、本文にサンセリフ体、または見出しに幾何学的なサンセリフ体、本文にヒューマニストサンセリフ体です。
• Webライセンス。 想定するページビュー数がWebライセンスの対象範囲に含まれることを確認します。人気のある書体の中には、Webライセンスの費用が非常に高いものもあります。
• バリアブルフォントは、パフォーマンスと柔軟性の面でますます有力な選択肢になっています。
• フォールバックスタック。 ブランドフォントの読み込みに失敗した場合に使用するシステムフォントを指定します。見た目が似ているフォントを選びます。
• オープンソースの代替フォント。 ライセンスの利用が現実的でない場合（サードパーティツール、埋め込み環境など）に備え、オープンソースの代替フォントを記録します。

4. 画像とイラスト

画像の方向性が十分に定められていないと、時間の経過とともにブランドの一貫性が失われることがよくあります。

写真の方向性：

• 被写体。 ブランドでは何を見せるのかを定めます。
• 構図のスタイル。 クローズアップ、広い環境、自然な様子、ポーズをとった写真など、どのような構図にするかを定めます。
• ライティング。 明るく自然にするか、ドラマチックで方向性をつけるか、柔らかく拡散させるかを定めます。
• 色調補正。 実際の色味、暖色寄り、彩度を落とした色味、コントラストの強い色味など、どのように仕上げるかを定めます。
• 避けるもの。 ストックフォトのような見た目や、その分野で使い古された表現などを定めます。

イラストの方向性：

• スタイル。 フラット、立体的、手描き、幾何学的、抽象的、写実的など、どのスタイルにするかを定めます。
• 色の使い方。 フルパレット、限定したパレット、ブランドカラーのみなど、色の使い方を定めます。
• 線の処理。 太く輪郭をつけるか、柔らかく陰影をつけるか、輪郭線を使わないかを定めます。
• 題材。 何をイラスト化し、何をイラスト化しないかを定めます。

アイコン：

• スタイル。 塗りつぶしかアウトラインか、角を丸くするか鋭くするか、線の太さを統一するか可変にするかを定めます。
• グリッド。 ピクセル単位で正確なグリッド（多くの場合、24x24または16x16を基本とします）。
• 線の太さ。 アイコンセット全体で統一します。
• セット。 どのアイコンを用意し、新しいアイコンをどのように一貫性を保って追加するかを定めます。

5. モーション

ブランドがデジタル製品、マーケティング動画、アニメーションを使ったタッチポイントのいずれかに登場する場合、モーションもアイデンティティの一部です。

定義するモーション原則：

• イージングカーブ。 アニメーション全体で使用するデフォルトのイージングを定めます。リニア、イーズイン・アウト、カスタムなどがあります。
• 時間の段階。 高速（100ms）、中速（200〜300ms）、低速（500ms以上）の各段階と、それぞれを適用する場面を定めます。
• 振り付け。 要素の登場、退出、インタラクションへの応答方法を定めます。
• ブランドを印象づける演出。 特徴的なアニメーション（ロゴの組み立て、ページ遷移、ローダーなど）を定めます。

デザイン原則：

• 控えめにする。 製品UIのほとんどのモーションは、素早く控えめにする必要があります。ドラマチックなモーションは、ブランドを印象づける演出に限って使用します。
• モーションの軽減。 前庭感受性のあるユーザー向けに、必ずprefers-reduced-motionに対応した代替手段を用意します。
• パフォーマンス。 アニメーションは対象デバイスで60fpsを維持する必要があります。リリース前にプロファイリングを行います。

---

ワークフロー

1. ブランドの方向性を確認します。 ポジショニング、ムード、対象ユーザーを確認します。不明な点があれば、brand-ideationに戻ります。
2. 適用先を洗い出します。 ブランドが登場するすべての場所（Web、印刷物、パッケージ、アプリ、ソーシャルメディア、看板、動画）をリストアップします。適用される環境によって、システムに必要な要件が決まります。
3. 要素ごとにデザインします。 タイポグラフィに制約を与えるロゴと色から始めます。次に文字、画像、アイコン、モーションの順に進めます。
4. ストレステストを行います。 システムを3〜5種類のモックアップ（ホームページ、ソーシャルメディアの投稿、名刺、製品UI、看板）に適用します。どこに問題が生じるかを確認し、修正します。
5. ドキュメントにまとめます。 各要素について、ルール、例、推奨事項と禁止事項を記載します。これがbrand-style-guideへの入力になります。
6. 広く展開する前に承認を得ます。展開後のアイデンティティ変更にかかるコストは、デザイン段階での変更の10倍です。

---

よくある失敗パターン

• アプリケーションから切り離してロゴをデザインする。 高解像度のモックアップでは見栄えがよくても、ファビコンのサイズでは判読できないロゴは、デザインの失敗です。
• コントラストを確認せずにブランドカラーを選ぶ。 白地に対して WCAG AA を満たさないブランドカラーを使うと、その色を基調とした UI は最初からアクセシビリティに問題が生じます。
• Web でのライセンスを確認せずにタイポグラフィを指定する。 選んだ書体のファウンダリーがページビューごとに料金を請求するとデプロイ時に判明すれば、予算を大きく圧迫します。
• 画像の方向性を決めない。 方向性が定まっていないと、次の担当者が選ぶストック写真によってブランドの印象が決まってしまいます。
• モーションを装飾として扱う。 一貫性のないモーションは、一貫性のない色と同じ速さでブランドの統一感を損ないます。
• 主要な状態だけをデザインする。 エラー時のブランドはどのように見えるでしょうか。ダークモードではどうでしょうか。ワードマークの方向を反転させる必要がある言語ではどうでしょうか。これらは例外的なケースではなく、ブランドそのものです。

---

出力形式

デフォルトの出力は、次のような構造化されたファイル一式です。

• identity/logo/ - すべてのロゴバリエーション（メインの SVG と、一般的なサイズの PNG／JPG 書き出し）
• identity/colors.md - 16 進カラーコード、コントラスト比、使用ルールを含むカラースキーム
• identity/typography.md - スケール、ウェイト、フォールバックを含むタイポグラフィシステム
• identity/imagery.md - 参考例を含む画像の方向性
• identity/iconography/ - アイコンセットまたはアイコンのスタイル仕様
• identity/motion.md - モーションの原則
• identity/applications/ - システムをさまざまな条件で検証する 3〜5 個のアプリケーションモックアップ

これらは brand-style-guide に直接渡されます。

---

参考ファイル

• references/identity-system-spec.md - 各要素を記録するための詳細な仕様テンプレートです。
• references/contrast-and-accessibility.md - 数式を含む、色と文字のアクセシビリティチェックです。