ビジュアル・アイデンティティとデザイン
良いプレイヤー教育は、他のコミュニケーションと同じくらい読みやすく、丁寧にデザインされているべきです。このモジュールでは、アダプティブ・アイデンティティ・モデル、ティア1とティア2で異なるビジュアルの扱い、そしてブランドシステムで使うアクセシビリティ要件とデザイン規約を扱います。
オペレーター注: 本文中の
{{PROGRAM_NAME}}は自社のプログラム名に置き換えてください。デフォルトのパレット、タイプシステム、ティアのルールはブランドシステムの一部であり、変更すべきではありません。あなたが実際にカスタマイズするもの — 自社の色、フォント、ロゴ — こそ、アダプティブ・アイデンティティ・モデルがまさに変えられるよう設計したものです。ナレーター原稿は、セクションにティア2と明記がない限り、Playbookのティア1のボイスで録音してください。
プログラム: ブランド基礎 | 所要時間: 約20分 | 前提条件: RGの基礎
クイックスキャン目次
| セクション | 内容 | 時間 |
|---|---|---|
| 学習目標 | このモジュール終了後に身につくこと | — |
| セクション1: ビジュアルシステムの原則 | アダプティブ・アイデンティティ、カラー、タイポグラフィ、アイコン、写真 | 約7分 |
| セクション2: ティア1とティア2のビジュアルルール | 2つのティアの見た目がどう異なるか、置かれる文脈の中でデザインを見直す | 約7分 |
| セクション3: アクセシビリティ要件 | WCAG 2.1 AAのベースライン、ダークモード、公開前チェックリスト | 約4分 |
| モジュールテスト | 5問の評価問題、合格は80% | 約2分 |
| キーポイント | 要約 | — |
| 参考資料 | Playbookブランド資料へのリンク | — |
学習目標
このモジュールを終えると、次のことができるようになります:
- アダプティブ・アイデンティティ・モデルを使って、新しいオペレーター展開についてデザイナーにブリーフィングできる
- ティア1とティア2のビジュアルルールを、どんな制作物にも適用できる — 途中でそれが切り替わるケースも含めて
- 実際の制作物で、WCAGのコントラスト要件と、Playbookのターゲットサイズおよび文字の規約を確認できる
セクション1: ビジュアルシステムの原則
リーディング
プレイヤー教育にも、オペレーターの他のコミュニケーションと同じ手間をかけるべきです。装飾的な効果を足すことよりも、明確な階層、役に立つ情報、読みやすい文字のほうが大切です。
アダプティブ・アイデンティティ・モデルは、共通の構造を保ちながら、オペレーター独自のアイデンティティを活かせるようにします:
- オペレーターがカスタマイズできるのは、パレット、見出しと本文のフォント、ロゴ、コブランディング、写真のスタイルです。
- レイアウトのパターン、スペーシング、情報の階層、2種類の線幅のアイコンシステム、コンポーネントの構造は一貫させます。
Playbookのデフォルトのアイデンティティでは、骨格となる部分にネイビー #1B2838、強調とアクションにティール #10B981、ティア1の任意のアクセントにオレンジ #FF6B35を使います。現行のコラテラルは、このパレットの一部だけを使っている場合があります。すべての教育コンテンツにオレンジが必要なわけではありません。
- ネイビー #1B2838主な背景、見出し、アイデンティティ
- ティール #10B981強調とアクション(コントラストを確認したうえで)
- オレンジ #FF6B35ティア1の任意のアクセント
状態カラーには別の役割があります。 成功(#00C853)、警告(#FFB300)、危険(#FF3D00)、情報(#2979FF)は、状態を伝える色です。アイデンティティを調整するときも、これらの意味は一貫させてください。言葉など別の手がかりも添えて、色だけが合図にならないようにします。それぞれの背景の上で、テキストのコントラストを確認してください。
教材のタイプシステムでは、見出しとコントロールにInter、本文にSource Sans 3、データと連絡先番号の見本にSource Code Proを使います。Source Code Proは、似た文字を見分けやすくします。現在公開されているコラテラルは、全体にInterを使っている場合があります。ナレーションが説明しているのは教材のタイプシステムであり、現在のすべての書き出しではありません。
アイコンシステムは2種類の線幅を使います。 本来の座標サイズでは、外側の構造に2単位、内側のディテールに1単位の線を使います。SVGを拡大すると表示される線も太くなるため、これはどの表示サイズでも変わらない画面上のピクセル値ではありません。アイコンは、コントロールを見分けたり内容を説明したりするのに役立つ場面でだけ使ってください。
写真とイラストは、メッセージを支えるものでなければなりません。 成功が約束されているかのような画像、高額の賭けを華やかに見せる画像、サポートから注意をそらす画像は避けてください。写真の上に文字を置くときは、背景の処理をコントロールし、コントラストを測定する必要があります。グラデーションを加えただけでは、基準を満たしている証明にはなりません。
ナレーター・スクリプト
ナレーター: [transition slide] {{PROGRAM_NAME}}のビジュアルシステムは、3つのブランドカラーから始まります。ネイビーはプライマリ — 信頼と権威。エメラルドはセカンダリ — インタラクティブ要素、リンク、行動喚起。ボールド・オレンジはアクセント — ティア1の素材のためのエネルギーで、ティア2では完全に姿を消します。
[show three-color palette] その隣に並ぶのが、別物のセマンティックカラーのセットです — 成功、警告、危険、情報。他のすべてを変えるときも、これらは標準のまま保ってください。プレイヤーは、使うすべてのプロダクトをまたいでこれらを学習するからです。
[show type system] 3つのフォント、3つの役割。見出しにはInter、本文にはSource Sans、そしてヘルプライン番号にはSource Code Pro — 誰かが助けを求めて電話をかけるとき、ゼロがOのように見えないようにするためです。
[show iconography] アイコンセットも同じ考えを受け継ぎます。2種類の線幅 — 力強い構造と軽やかなディテール — すべてのオペレーターで一貫したひとつのライブラリです。
[pause 3s] このシステム全体は、意図的に抑制されています。視覚的なノイズは、プレイヤー教育の敵です。
セクション2: ティア1とティア2のビジュアルルール
リーディング
ティア1は日常の教育を扱います。パレット全体、写真、イラスト、目的のあるアニメーションを使えます。メッセージに必要な要素を選んでください。シンプルな教育レイアウトでも、ティア1であることに変わりはありません。
ティア2はサポートと危機対応のコミュニケーションを扱います。サポートへのルートをわかりやすく保ちます:抑えた色、読みやすいシングルカラム、ゆとりあるスペーシング、シンプルなアクション。プロモーション用の画像、冗談、お祝いの演出は取り除きます。
Playbookの現行のティア2テンプレートは、ニュートラルとティールを使った明るい背景を採用しています。このデザイン規約に従いつつ、実際のコントラスト、読み順、サポートへのルートを確認してください。
デザインは、置かれる文脈の中で見直します。 オペレーターの他の素材と並べて馴染んでいるか? 制作品質は同等か? 階層は、この用途に役立っているか? 人が読めて、操作できるか? これらのチェックは、公開前に行うリンク先、内容、アクセシビリティ、地域のコンプライアンスの確認に代わるものではありません。
ナレーター・スクリプト
ナレーター: [transition slide] ティア1とティア2は同じブランド品質を使います。違いは品質ではなく、抑制です。
[show tier 1 sample board] ティア1は完全なビジュアルシステムを得ます。ネイビーの背景、ティールのアクセント、ボールド・オレンジのハイライト、遊び心のあるアイコン、ブランドのイラスト。ここに人格が宿ります。
[show tier 2 sample board] ティア2はすべてを削ぎ落とします。オレンジは姿を消します。装飾は姿を消します。パレットは、本質的なアクションのためのニュートラル+ティールにまで縮小されます。レイアウトはシングルカラムになり、余白が開き、そしてティア2は、たとえプレイヤーがダークモードを有効にしていても、常にライトモードでレンダリングされます。
[pause 3s] 誰かが助けを必要としているとき、不要なビジュアル要素はすべて摩擦になります。
セクション3: アクセシビリティ要件
リーディング
実際のテキスト、コントロール、読み順を確認してください。見た目が整ったページでも、アクセシブルでないことがあります。
WCAG 2.1 AAのコントラスト要件: 通常のテキストには4.5:1以上、大きいテキストには3:1以上が必要です。「大きい」とは、**18ポイント(24 CSS px)以上、または太字で14ポイント(約18.67 CSS px)**以上を指します。テキスト以外の該当するインターフェース部品やグラフィカルオブジェクトには、達成基準の例外を除き、3:1が必要です。
Playbook独自の追加デザイン規約: コントロールは44 × 44 CSS px以上、本文は16 CSS px以上を目安にします。これらをWCAG 2.1 AAの要件とは呼ばないでください。44ピクセルのターゲットは、WCAG 2.1 AAAの達成基準2.5.5に例外付きで登場するものです。WCAG 2.2 AAの達成基準2.5.8は、24ピクセルの最小値、または定められた間隔などの例外を用います。文字サイズだけでは、読みやすさも適合も立証できません。
#1B2838のネイビー上の白は約14.92:1、同じネイビー上の#10B981のティールは約5.88:1です。これらの値は、まさにこの単色どうしの組み合わせにだけ当てはまります。ホバー、フォーカス、無効、エラーの各状態も含め、実際の組み合わせをひとつずつ確認してください。写真の上の文字は、実際に重なる背景に対してテストする必要があります。
ダークモードのチェック: #1A1A2E上の#6B6B8Aは約3.33:1です。自分のモニターでは読めるように見えても、通常テキストのしきい値を下回っています。通常の本文には、より明るい文字色を使ってください。画像と状態カラーは、実際に展開するテーマで確認します。「常に暗い文字を使う」のようなひとつのルールで、すべての組み合わせが合格すると考えないでください。
承認の前に:
- すべてのアクションをキーボードで操作します。フォーカスが見えること、順序が論理的であること、キーボードトラップがないことを確認します。
- 支援技術でページを読み上げます。意味のある見出し、ラベル、ステータスの通知を使います。
- 情報を伝える画像には役に立つ代替テキストを、装飾的な画像には空の代替テキストを付けます。隣のテキストを不必要に繰り返さないでください。
- 色、動き、音声だけに頼らずに意味が伝わるようにします。
- 幅の狭い画面や高さの低い画面で、ズーム、リフロー、実際のタッチターゲットの領域を確認します。
- 地域の要件は社内ポリシーで確認してください。
基準: W3C コントラスト(最低限)、WCAG 2.1 ターゲットのサイズ(AAA)、WCAG 2.2 ターゲットのサイズ(最低限)(AA)。
ナレーター・スクリプト
ナレーター: [transition slide] アクセシビリティは任意ではありません。それは、インクルーシブなプレイヤー教育の土台です。
[show WCAG checklist] 色のコントラストはWCAGのダブルAを満たします — 本文は4.5対1、大きいテキストは3対1。タッチターゲットは最小44ピクセル。あらゆるレイアウトがキーボードで機能し、スクリーンリーダーにきれいに読み上げられます。意味を伝えるのに色だけを使ってはいけません。すべての画像に代替テキストがつきます。そしてティア2は、危機の場面でダークモードが孤立的に感じられることがあるため、常にライトモードでレンダリングされます。
[pause 3s] 目標はシンプルです。あらゆるプレイヤーが、能力にかかわらず、あらゆる素材にアクセスできることです。
[transition to exercise] テストの前に、6つのデザイン判断があなたの机で待っています。それぞれについて、決めてください。出荷するか、直すか。答えはすべて、いま学んだルールから直接導けます。順に取り組んでから、先へ進みましょう。
エクササイズ: 公開するか、直すか?
Type: scenario
指示: 公開するか、直すか? 判断するのはビジュアルの扱いだけです。連絡先、リンク、告知は別に確認します。縮小表示された画像ではなく、記載された測定値で判断してください。
| 項目 | 正しい分類 | フィードバック(正解) | フィードバック(不正解) |
|---|---|---|---|
| このティア1の会場ポスターの扱いを確認してください。 | 公開する | 明確な階層、一貫した書体、ルール条件を添えた数値が、このティア1の作品に合っています。オレンジと写真は任意です。 | 「公開する」です。階層とルール条件付きの数値は機能しています。ティア1に、オレンジや写真は必須ではありません。 |
| オペレーターの商業素材の隣のホルダーに置く、このラックカードを確認してください。 | 直す | 共通のアイデンティティがなく、オッズ情報があるべき場所にスローガンがあります。現行のラックカード・テンプレートと、ルール条件を添えた事実を使ってください。 | 「直す」です。汎用的なスタイルは隣に並ぶ商業素材に見劣りし、スローガンはオッズについての事実を何も伝えていません。 |
| ティア2のコミュニケーションとして、このアカウント一時停止の画面を確認してください。 | 直す | 紙吹雪、プロモーション風の見出し、オレンジのアクションが、サポートの決定と競合しています。抑制しつつ臨床的にはせず、一時停止がもう始まったように見せないでください。 | 「直す」です。紙吹雪とオレンジが、ティア2のサポートの決定を祝ってしまっています。抑制したサポートの扱いにし、一時停止がもう始まったように見せないでください。 |
| このサポート入口画面のビジュアルの扱いと、添えられた仕様を確認してください。 | 公開する | シングルカラム、明確なアクション、測定済みのコントラスト、48ピクセルのターゲットが、サポートの用途に合っています。 | 「公開する」です。ティア2の抑制は意図的なものです。5.88:1のコントラストと48ピクセルのターゲットは、このモジュールのチェックを満たしています。 |
| モバイルのクイズと、添えられたターゲットサイズの測定値を確認してください。 | 直す | 36 × 36 CSS pxのターゲットは、Playbookの44 pxの目標に届きません。WCAG 2.1では、44 pxはAAではなくAAAです。大きくしてください。 | 「直す」です。テキストのコントラストが良くても、36 pxのターゲットは補えません。Playbookの目標は44 × 44 CSS pxで、WCAG 2.1ではAAではなくAAAです。 |
| この2つのアカウント状態メッセージを確認してください。 | 直す | これはキャンペーンのアクセントではなくアカウントの状態なので、標準の成功色と警告色が必要です。テキストのラベルも残してください。 | 「直す」です。このメッセージはブランドのオレンジとネイビーを借りています。アカウントの状態には、テキストのラベルとともに標準の成功色と警告色を使います。 |
モジュールテスト
ナレーター: [transition slide] 学んだことを確認する時間です。ビジュアルシステム、ティア1とティア2のビジュアルルール、そしてアクセシビリティの床をカバーする5問です。このモジュールを修了とするには80% — つまり5問中4問 — が必要です。じっくり取り組んでください。一度で合格できなくても、教材を見直してから再受験できます。
問題1
評価対象: 学習目標1
問題文: {{PROGRAM_NAME}}のコンテンツにとっての「ビジュアル品質のルール」とは何ですか?
| 選択肢 | 内容 |
|---|---|
| A | {{PROGRAM_NAME}}のコンテンツは、商業コンテンツと差別化するために、独自の臨床的な美学を使うべきだ |
| B | {{PROGRAM_NAME}}のコンテンツは、オペレーターの商業マーケティングの制作品質に匹敵しなければならない |
| C | {{PROGRAM_NAME}}のコンテンツは、オペレーターのブランドと競合しないようミニマルであるべきだ |
| D | {{PROGRAM_NAME}}のコンテンツは、政府の健康コミュニケーションのデザイン基準に従うべきだ |
Correct: B
解説: 近くのプロモーションより安っぽく見える教育は、小さな文字の注意書きのように扱われます。同じ手間をかけてください。有用性とアクセシビリティは別に確認します。
出典: Visual System
問題2
評価対象: 学習目標1
問題文: 「アダプティブ・アイデンティティ・モデル」とは何ですか?
| 選択肢 | 内容 |
|---|---|
| A | {{PROGRAM_NAME}}がすべてのオペレーターで同一に見えるシステム |
| B | オペレーターが{{PROGRAM_NAME}}の構造的なアイデンティティ(レイアウト、階層、アイコン)を保ちつつ、自社の色とフォントを適用するシステム |
| C | プレイヤーのセグメントに基づいて自動的に変化するシステム |
| D | 市場ごとにカスタムデザインを生成するためにAIを使うシステム |
Correct: B
解説: レイアウト、階層、アイコン、スペーシングを一貫させれば、プレイヤーはどのオペレーターでも{{PROGRAM_NAME}}だと気づけます。色とフォントは各オペレーターのものを使います。
出典: Visual System
問題3
評価対象: 学習目標2
問題文: このティア2のサポート草稿を修正するとき、どの方向性に従うべきですか?
| 選択肢 | 内容 |
|---|---|
| A | 緊急性を示すために、全体を通して赤と警告色を使う |
| B | 視覚的に簡素にする — ブランドのスタイリングを一切なしにする |
| C | 同じブランド品質だが、本質的なものまで削ぎ落とす: すっきりしたレイアウト、ゆとりある余白、最大限のコントラスト、視覚的なノイズゼロ |
| D | ティア1とまったく異なるデザインシステムを使う |
Correct: C
解説: サポート情報と競合するものがあってはいけません。ティア2はブランドの品質を保ちつつ装飾を外します: 抑制的で、臨床的ではなく、明るい背景の上に。
出典: Visual System
問題4
評価対象: 学習目標3
問題文: この仕様にある、標準ウェイトで16 CSS pxの本文には、WCAG 2.1 AAのどの最小コントラスト比が適用されますか?
| 選択肢 | 内容 |
|---|---|
| A | 2:1 |
| B | 3:1 |
| C | 4.5:1 |
| D | 7:1 |
Correct: C
解説: 標準ウェイトで16 CSS pxの文字は通常テキストなので、4.5:1が必要です。大きいテキスト(3:1)は24 CSS pxから、太字なら約18.67 pxからです。
出典: Accessibility
問題5
評価対象: 学習目標1
問題文: なぜ{{PROGRAM_NAME}}はヘルプライン番号にSource Code Proを使うのですか?
| 選択肢 | 内容 |
|---|---|
| A | 他のフォントよりモダンに見えるから |
| B | ブランドのプライマリフォントだから |
| C | 似た文字を判別できるから — 0/Oと1/l/Iが視覚的に区別できる |
| D | ギャンブリング規制当局によって要求されているから |
Correct: C
解説: 0とO、1とlを取り違えると、ヘルプラインの番号を間違えてかけてしまうかもしれません。Source Code Proはそれらを区別できるようにします。
出典: Visual System
キーポイント
- オペレーターの他のコミュニケーションと同じ制作品質にそろえます。明確な階層、読みやすい文字、用途に合った情報を使ってください。
- オペレーターはアイデンティティの要素を調整できますが、レイアウト、スペーシング、コンポーネントのふるまいは一貫させます。
- デフォルトのパレットは、ネイビー、明るいティール、任意のオレンジです。機能的な状態カラーとそのテキストラベルは一貫させてください。
- ティア1は、より幅広いビジュアルシステムを使えます。現行のティア2テンプレートは、明るい背景、抑えた色、シンプルなサポートへのルートを使います。
- 実際の作品を、置かれる文脈の中で確認します。ビジュアルの承認は、内容、リンク先、アクセシビリティ、地域の公開前チェックに代わるものではありません。
- WCAG AAの通常テキストのコントラストは4.5:1です。Playbookはさらに、44 × 44 CSS pxのターゲットと16 CSS pxの本文を定めています。キーボード操作、支援技術でのアクセス、リフローも確認してください。
出典の基盤
これらを読む必要はありませんが、このモジュールのルールの背後にある公刊済みの基準と研究です — 同僚から聞かれた時のために。
- World Wide Web Consortium (2018). Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation. 掲載理由: コントラストとインタラクションの達成基準です。44 × 44 CSS pxのターゲットサイズの基準はWCAG 2.1ではAAAで、Playbookはこれを追加のデザイン規約として採用しています。
- Arditi, A. & Cho, J. (2005). Serifs and font legibility. Vision Research, 45(23), 2926–2933. 掲載理由: 文字の判別のような機能的なタイプ選択の背後にある可読性の証拠 — 0/Oと1/l/Iを分けるフォントが、なぜ審美的な好みではないのかを示します。
- Robins, D. & Holmes, J. (2008). Aesthetics and credibility in web site design. Information Processing & Management, 44(1), 386–399. 掲載理由: ビジュアルの制作品質が、人々がコンテンツを信頼に足ると判断するかどうかを左右するという実験的証拠 — ビジュアル品質のルールの実証的な背骨です。
参考資料
| リソース | 何に使うか |
|---|---|
| Visual System | アダプティブ・アイデンティティ、パレット、タイポグラフィ、アイコノグラフィ、写真 |
| Accessibility | WCAGのベースライン、コントラスト表、ダークモードのルール、チェックリスト |
| Collateral templates | ブリーフィングとベンチマークの対象となるティア1とティア2の実例 |