アイコンの使用方法として最も多いのは、状態や動作を表す画像ボタンです。デザインがシンプルであるため、アイコンでユーザーインターフェース(UI)のメッセージを補完できます。
Alexaのアイコン表現は究極的にシンプルで、わずかに丸みを帯びています。Androidの規則に従ってアイコンのサイズとストローク幅を適宜変更できます。
Amazonは、画面サイズや解像度の異なる幅広いデバイスでも表示されるようにAlexaサービスをデザインしています。デザインする際は、Alexa搭載デバイスのさまざまな解像度に応じて、アイコンをどのように拡大/縮小するかを検討する必要があります。
画像を使ったアイコンをAlexaエクスペリエンスに適用するには、6つの主な密度クラスに対応するアセットを用意する必要があります。たとえば、中密度画面用の72 x 72ピクセルのアイコンの場合には、 54、72、108、144、216、288の各サイズに対して同じアイコンを用意する必要があります。
アイコンサイズの例 | 倍率 | 分類 | PPI |
---|---|---|---|
54 x 54 px | 0.75x | ldpi | 〜 120 ppi 以下 |
72 x 72 px (ベースライン) | 1x | mdpi | 〜 160 ppi |
108 x 108 px | 1.5x | hdpi | 〜 240 ppi |
144 x 144 px | 2x | xhdpi | 〜 320 ppi |
216 x 216 px | 3x | xxhdpi | 〜 480 ppi |
288 x 288 px | 4x | xxxhdpi | 〜 640 ppi |
タイポグラフィは、Amazon Echoのブランド認知において重要な役割を果たします。Amazonのアイデンティティに一貫性と統一感を持たせ、言葉にたちまち個性を与えることができます。Amazonのすべての製品とサービスに使用される汎用的なブランドフォントは、Amazon Emberです。
Alexaの基本書体(日本語)はNoto Sans CJKです。ヒントテキスト用の書体はBookerlyです。マルチモーダルディスプレイのデザインに役立つAmazonフォントは、ここからダウンロードできます。
注: 現在のところ、APLはカスタムフォントをサポートしていません。
Amazonでは、さまざまなデバイスモードの異なる視聴距離から読み取れるように、Alexaの文字スケールをデザインしています。一般的な文字スケールより大きくなっている場合がほとんどです。スケールが大きいため、ユーザーはデバイスから離れた位置にいても、画面上のコンテンツをすばやく読むことができます。重要なコンテンツを読みやすくする必要があるときは、見出し以上のスタイルを使用します。
テキストのスタイルとサイズは、エクスペリエンスの読みやすさやアクセシビリティにとって非常に重要です。Alexaレスポンシブ対応レイアウトでは、読みやすくはっきりと認識できる、前景テキストと背景色のコントラスト比の最小値があらかじめ設定されています。ただし、開発の際はコントラスト比を自分でチェックし、テキストサイズ、ウエイト、背景画像がすべて適切に設定され、テキストが読みやすいかどうかを確認することをお勧めします。特にキャプションなど小さな文字については注意が必要です。テキストとアクセシビリティが確保されたコンテンツについての詳細は、Web Content Accessibility Guidelines(WCAG)2.1を参照してください。
文字スケールの正確なサイズ値は、デバイスからのユーザーの距離に基づいて計算されています。
スタイル | 書体 | デフォルトのウエイト | 代替ウエイト | サイズ (in dp) |
---|---|---|---|---|
Display 1 | Noto Sans CJK | Bold | Light | 106 |
Display 2 | Noto Sans CJK | Bold | Light | 80 |
Display 3 | Noto Sans CJK | Light | Bold | 66 |
Display 4 | Noto Sans CJK | Light | Bold | 53 |
Display 5 | Noto Sans CJK | Light | Bold | 48 |
Display 6 | Noto Sans CJK | Light | Bold | 40 |
Body | Noto Sans CJK | Light | Bold | 32 |
Hint | Noto Sans CJK | Regular Italic | - | 32 |
Callout | Noto Sans CJK | Bold | Light | 28 |
Title | Noto Sans CJK | Medium | - | 28 |
Metadata | Noto Sans CJK | Bold | Light | 24 |
Caption | Noto Sans CJK | Regular | - | 24 |
スタイル | 書体 | デフォルトのウエイト | 代替ウエイト | サイズ (in dp) |
---|---|---|---|---|
Display 1 | Noto Sans CJK | Bold | Light | 148 |
Display 2 | Noto Sans CJK | Bold | Light | 111 |
Display 3 | Noto Sans CJK | Light | Bold | 92 |
Display 4 | Noto Sans CJK | Light | Bold | 74 |
Display 5 | Noto Sans CJK | Light | Bold | 48 |
Display 6 | Noto Sans CJK | Light | Bold | 40 |
Body | Noto Sans CJK | Light | Bold | 32 |
Hint | Noto Sans CJK | Regular Italic | - | 32 |
Callout | Noto Sans CJK | Bold | Light | 28 |
Title | Noto Sans CJK | Medium | - | 28 |
Metadata | Noto Sans CJK | Bold | Light | 24 |
Caption | Noto Sans CJK | Regular | - | 24 |
スタイル | 書体 | デフォルトのウエイト | 代替ウエイト | サイズ (in dp) |
---|---|---|---|---|
Display 1 | Noto Sans CJK | Bold | Light | 192 |
Display 2 | Noto Sans CJK | Bold | Light | 128 |
Display 3 | Noto Sans CJK | Light | Bold | 96 |
Display 4 | Noto Sans CJK | Light | Bold | 64 |
Display 5 | Noto Sans CJK | Light | Bold | 48 |
Display 6 | Noto Sans CJK | Light | Bold | 40 |
Body | Noto Sans CJK | Light | Bold | 32 |
Hint | Noto Sans CJK | Regular Italic | - | 32 |
Callout | Noto Sans CJK | Bold | Light | 28 |
Title | Noto Sans CJK | Medium | - | 24 |
Metadata | Noto Sans CJK | Bold | Light | 24 |
Caption | Noto Sans CJK | Regular | - | 24 |
最高のエクスペリエンスを得るには、すぐに使用できるスタイルを活用すると共に、以下のリストで説明しているように、Textコンポーネントのテキスト文字列にオプションのマークアップタグを適用することもできます。
注: 画面上に文字を詰め込みすぎると、ユーザーにわずらわしさや負担を感じさせる音声エクスペリエンスになってしまいます。これと同様に、書式オプションを設定しすぎても、コンテンツが読みづらくなります。