brand-visual-language

ブランドのビジュアルランゲージ

ビジュアルの形状は個性を伝えます。角が丸いか鋭いかで、ユーザーに伝わる印象は異なります。そして、そのメッセージはユーザーがひとことも読む前に届きます。タイポグラフィ、角丸、アイコンの形状は、一貫したストーリーを伝える必要があります。

形状の言語

形状	トーン	関連する分野
丸みのある、ピル型	親しみやすい、近づきやすい、遊び心がある、モダン	消費者向けアプリ、ヘルスケア、子ども向け、ライフスタイル、ソーシャル
やわらかな角丸（8–12px）	プロフェッショナル、温かみがある、利用しやすい	SaaS、生産性向上、一般的なB2B
軽い角丸（2–4px）	正確、構造的、効率的	エンタープライズツール、金融、データプラットフォーム
鋭角／角丸なし	技術的、真面目、権威的	開発者向けツール、セキュリティ、産業

カード、入力欄、モーダル、バッジなど、すべてのコンポーネントで同じ角丸の方針に従う必要があります。

大きな面の角丸

要素の大きさによって、感じられる「丸み」は変わります。ボタンでは柔らかく見える角丸も、大きなコンテナでは鋭く見えることがあります。

• 大きなカードとモーダル： 一貫したビジュアルトーンを保つため、通常はボタンより大きな角丸を使用します（例：ボタンが4pxなら、大きなカードは8pxまたは12px）。
• ウェルと背景セクション： 大きな背景領域や「ウェル」には、領域に構造を与えて明確にしつつ、「浮いている」コンポーネントのように感じさせないために、小さめの角丸（2px～8px）がよく使われます。これにより、コンテナ自体ではなく、その中のコンテンツに視線を集められます。

既存ブランドの形状を読み取る

角丸を選ぶ前に、ブランドの既存の素材を確認してください。

• ロゴ： 丸みがありますか、幾何学的ですか、それとも角張っていますか？ロゴの形状は、意図的に選ばれたブランド表現です。
• 製品写真やイラストのスタイル： 丸みのある、ふっくらしたイラストは、鋭角的で技術的な図とは異なる個性を伝えます。
• タイポグラフィ： 幾何学的なサンセリフ（Circular、Futura）は、ヒューマニストサンセリフ（Inter、Söhne）や鋭角的なエディトリアルセリフとは異なる印象を与えます。
• 競合の状況： 角張った市場で少し柔らかい選択肢になることや、遊び心のある市場でより構造的な選択肢になることが、差別化につながる場合があります。

推測せず、実際の形状の言語を読み取りましょう（dembrandt engine、任意）。 すでに製品を提供しているブランドの場合、ロゴから推測するのではなく、公開中のサイトから実際の角丸、書体、トーンを抽出します。get_brand_identity と get_design_tokens は、DOMから計算値を取得します。extract-design を参照してください。

タイポグラフィと形状

書体の形状も同じようにトーンを伝えます。

書体のスタイル	トーン
幾何学的サンセリフ（円形の字形）	モダン、すっきり、少し遊び心がある
ヒューマニストサンセリフ（線幅に変化がある）	温かみがある、読みやすい、プロフェッショナル
グロテスクサンセリフ（中立的、実用的）	真面目、効率的、飾り気がない
セリフ	権威的、確立された、エディトリアル
丸みのあるサンセリフ	親しみやすい、近づきやすい、くだけた
等幅	技術的、開発者向け、正確

書体と角丸が矛盾してはいけません。丸みがあり親しみやすい書体と、鋭角的な0pxの角を組み合わせると、ビジュアルに不調和が生じます。

ブランドのタイポグラフィを拡張する

ブランドブックでは見出し用フォントが指定されていても、本文については十分に定義されていないことがよくあります。ウェイトは1種類だけで、読みやすい文字サイズの指定もフォールバックもありません。これは、ブランドアイデンティティが画面ではなく印刷物を前提に作られた、ラグジュアリー、ファッション、老舗ブランドでよく見られます。

ブランドブックの指定だけではUIに不十分な場合は、意図を持って拡張します。

拡張が妥当な場合：

• ブランドフォントは小さいサイズでは読みづらい（ディスプレイフォント、装飾書体）
• ブランドフォントにはUIの階層に必要なウェイトがない（レギュラーやミディアムがない）
• ブランドフォントには本文用や可読性を重視したバリエーションが定義されていない
• ブランドフォントの読み込みに問題がある（パフォーマンス、ライセンス、ウェブでのレンダリング）

拡張方法：

• 見出しやディスプレイ用途にはブランドフォントを使い続けます。ブランドアイデンティティはここに表れます
• 本文用に、競合するのではなく、トーンが調和するセカンダリ書体を追加します
• 形状の言語を合わせます。ジオメトリックなブランドフォントにはジオメトリックな本文フォントを、ヒューマニストなディスプレイフォントにはヒューマニストな本文フォントを組み合わせます

Brand heading font (display, h1–h3): maintains identity
↓
Secondary body font (body, labels, UI copy): legibility and completeness

組み合わせの原則：

• 役割にはコントラストをつけても、個性にはつけません。2つのフォントは同じプロダクトに属しているように感じられる必要があります
• 2つのディスプレイフォントや、個性の強いフォント同士の組み合わせは避けます
• ニュートラルで高品質なサンセリフ（Inter、DM Sans、Söhne）は、ほとんどのブランドフォントと安全に組み合わせられます
• ブランドフォントがセリフ体なら、すっきりしたサンセリフの本文フォントが自然な補完となり、その逆も同様です

この拡張は控えめに行います。 書体を2種類使うのは意図的な拡張です。3種類はほとんどの場合、多すぎます。将来のデザイナーが3つ目を追加しないよう、判断とその根拠を記録してください。

アイコノグラフィ

アイコンのスタイルはブランドの形状の言語に合わせる必要があります。細い線、太い線、塗りつぶし、アウトラインなど、異なるスタイルを混在させると、個々のアイコンが正しくてもビジュアルの一貫性が損なわれます。

アイコンのスタイル	トーン	使用する場面
細線／アウトライン（1～1.5pxの線幅）	ミニマル、エレガント、洗練	ラグジュアリー、エディトリアル、プレミアムなSaaS
標準的なアウトライン（2pxの線幅）	バランスがよく、プロフェッショナル	一般的なSaaS、生産性ツール
太線／極太（2.5～3pxの線幅）	力強く、明快で、アクセシブル	コンシューマーアプリ、モバイルファースト、アクセシビリティ重視
塗りつぶし	しっかりとしていて、自信に満ち、小さいサイズでも明瞭	ダッシュボードのインジケーター、ステータスアイコン、モバイルナビゲーション
アイコンのパスに丸みのある角	親しみやすく、近づきやすい	コンシューマー向け、ライフスタイル、ヘルスケア
アイコンのパスに鋭い角	技術的で、正確	開発者向けツール、金融、データ

ルール： アイコンライブラリは1つ、ウェイトも全体を通して1つにします。混在が避けられない場合（例：選んだライブラリにない特殊なアイコンを使う場合）は、線幅と角のスタイルを手動で合わせます。

定着した概念には標準アイコンを使い、独自のアイコンは作らない

歯車＝設定、人＝プロフィール、虫眼鏡＝検索、家＝ホーム、ゴミ箱＝削除、ベル＝通知です。ここで別のアイコンを考案しても、メリットはなく、意味を読み解く負担が増えるだけです。採用を決める前に「icon [concept]」で検索し、慣例を確認してください。デザインの自由度は、定着したアイコンがない概念のために取っておきます。

アイコンがあれば、目は文字を読み飛ばせます。ただし、それは曖昧さのないアイコンに限り、スキャンすることで効率が上がる場所（ナビゲーション、ステータス、行の種類）でのみ有効です。曖昧なアイコンや装飾的なアイコンは、手間を省くどころか増やします。すべてのラベルにアイコンを付けるのはノイズです。適切なアイコンを適切な場所に使います。時間として読むことについては[[ui-density]]を参照してください。

構造にはUnicode、意味にはアイコン

Unicodeの記号（矢印、点、山形）は、機能が低下しても問題なく使える構造として機能します。意味を持つものはすべて、固定された表示で提供するアイコンにします。フォントに依存する記号は、プラットフォームごとにステータス列での見た目が異なります。

動作を表すアイコンはボタンに使う

鉛筆、ゴミ箱、プラス記号は、操作を示します。これらを受動的な種類マーカーに使ってはいけません。行の種類を示すアイコンが鉛筆なら、実際に編集できるかどうかにかかわらず、その行は編集可能だと受け取られます。

1つの概念に1つの記号、製品ファミリー全体で統一

アイコンセットのバージョンを固定します。セットではリリースごとに記号が描き直されるため、依存関係を固定しないと、インストール時にプロダクトの語彙が変わってしまいます。製品ファミリー全体で、同じ概念にはすべてのアプリで同じ記号を使います。

小さなサイズでは、形より先に色を考えます

16pxでは、文字の幅は約3pxしかなく、識別の手がかりにはなりません。小さなマークのまとまり（ファイルの種類、アプリのタイル、ファビコンなど）を見分ける必要がある場合は、まず色相で、次に形で区別します。

要素間の一貫性

形のある要素はすべて、同じ視覚的なロジックに従う必要があります。

要素	形の表現に適用するもの
ボタン	--radius-button
カード	--radius-card（ボタンと同じか、やや大きめ）
入力欄	--radius-input（通常はボタンと同じ）
バッジ／タグ	ボタンより丸みを強くできます — ピル型が一般的です
モーダル／ドロワー	--radius-modal（多くの場合、12–16px）
アバター	常に完全な円形（--radius-full）
アイコン	線の太さと角のスタイルをブランドに合わせます
イラスト	形のスタイルをアイコンのスタイルに合わせます

適用する前にガイドの適用範囲を確認する

ガイドの値を適用する前に、ガイドに記載された適用範囲を確認してください。印刷向けのマニュアルは、紙面への印刷を想定して最適化されています。薄いグレーでも判読でき、ライセンス取得済みの書体も一度PDFに埋め込めば済みます。しかし、どちらも画面では通用しません。同じグレーでも白とのコントラスト比が約2:1になることがあり、同じ書体もウェブフォントの配信経路では利用できないことがよくあります。

ガイドの対象媒体と実際の作業媒体が異なる場合、ガイドは規則ではなく判断材料です。 文字どおりに適用すると、ブランドには沿っていてもアクセシビリティに問題のある製品が生まれます。さらに、それを無視せざるを得ないエンジニアからガイドへの信頼が失われ、ほかの項目への準拠にも影響します。

既存製品でガイドから外れている箇所は、誤りと決めつける前に、調査結果として読み取ってください。文字色を変更したチームは、たいてい、あなたがこれから再現しようとしているコントラストの問題にすでに対処しています。逆の誤りも同様に問題です。逸脱をすべて一貫性の乱れとみなすと、実際に誰かが行った唯一のガイドの監査結果を捨てることになります。

逸脱が画面上の制約として再現できるかどうかが、両者を見分ける基準です。 元の色が2:1になるために変更した、ライセンスがウェブフォントを許可していないために書体を差し替えた、元の角丸が16pxでにじんで見えるために半径を変更した。これらはそれぞれ調査結果であり、更新が必要なのはガイドです。説明できる制約がなく、元の値を問題なく使えたのに逸脱しているなら、それは一貫性の乱れであり、修正が必要なのは製品です。このテストは製品単位ではなく値ごとに行ってください。多くの製品群には両方が含まれています。

こうした差異を調査結果としてブランドの責任者に伝えてください。画面で検証されたことのないガイドは間違いではなく、不完全なのです。それを補完する最も手早い方法は、適用できなかった箇所を一覧にすることです。コントラストの最低基準については、[[wcag-accessibility]]を参照してください。

書き換えられないソフトウェアへのブランド適用

ブランド関連の作業の大半は、まっさらなコードベースを対象とするわけではありません。使われていたフレームワークをそのまま採用した2015年製のポータルや、社員が日がな一日向き合うほど古い社内システムなど、既存のシステム群が対象です。そこでもブランド体験が問われます。

これを現実的にする要素は2つあります。第一に、形の表現は最後に取り組むものであり、最初ではありません。 古いアプリケーションでも、適切なロゴ、ブランドカラー、書体さえあれば、ブランドを十分に印象づけられます。角丸やアイコンのスタイルを揃えるのは第3段階の作業であり、そうした環境では取り組む価値がないことがほとんどです。第二に、アプリケーションごとに、アイデンティティ、クローム、トークン、コンポーネントのどこまで適用するかを決めてください。書き換えない限り失敗だと考えるのではなく、段階的に判断します。この段階とアプリケーションごとの判断については、[[layout-paradigms-and-consistency]]を参照してください。

古いアプリケーションに変数がある場合（通常、BootstrapやSassを使ったビルドにはあります）、ブランドカラーと書体を変数に割り当てるだけで、作業量を大幅に抑えながら、見た目の一貫性の大半を実現できます。ここで得られるのは忠実な再現ではなく、認知です。読み込みから1秒以内に、ユーザーが誰のソフトウェアなのかを理解できることが目標です。

レビュー用チェックリスト

• 角丸トークンは、ブランドの形状表現（ロゴ、イラスト、写真）と一致していますか？
• ボタン、入力欄、カードに同じ角丸のルールが適用されていますか？
• 書体の雰囲気は、ブランド全体の個性と一致していますか？
• 単一のアイコンライブラリが一貫して使用されていますか？
• アイコンの線の太さはブランドに合っていますか（洗練された印象には細め、使いやすさを重視する場合は太め）？
• 親しみやすいブランドには丸みのあるアイコンの角、技術的なブランドには鋭い角を使用していますか？
• 設定、プロフィール、検索、削除、通知などの標準的な概念には、独自に作成したものではなく一般的なアイコンを使用していますか？
• アイコンは認識しやすさにつながる場合にのみ使用し、すべてのラベルに装飾として散りばめていませんか？
• 意味を担う記号には提供済みのアイコンを使用し、Unicodeは骨組み部分に限定していますか？
• 動作を表すアイコンはアクションにのみ使用し、種類を示すマーカーとしては使用していませんか？
• アイコンセットのバージョンは固定されており、同じ概念にはファミリー全体で同じグリフを使用していますか？
• 角丸はサーフェスのサイズに合わせて調整されていますか（例：モーダルでは大きく、ウェルや背景では2～8pxに抑える）？
• 書体のスタイルと形状の選択に、視覚的な矛盾はありませんか（例：丸みのある書体と角張ったカードの組み合わせ）？