アイコン表現とタイポグラフィ

アイコン表現

アイコンの使用方法として最も多いのは、状態や動作を表す画像ボタンです。デザインがシンプルであるため、アイコンでユーザーインターフェース（UI）のメッセージを補完できます。

Iconography

アイコンの使用方法

Alexaのアイコン表現は究極的にシンプルで、わずかに丸みを帯びています。Androidの規則に従ってアイコンのサイズとストローク幅を適宜変更できます。

画像形式

Amazonは、画面サイズや解像度の異なる幅広いデバイスでも表示されるようにAlexaサービスをデザインしています。デザインする際は、Alexa搭載デバイスのさまざまな解像度に応じて、アイコンをどのように拡大／縮小するかを検討する必要があります。

画像を使ったアイコンをAlexaエクスペリエンスに適用するには、6つの主な密度クラスに対応するアセットを用意する必要があります。たとえば、中密度画面用の72 x 72ピクセルのアイコンの場合には、 54、72、108、144、216、288の各サイズに対して同じアイコンを用意する必要があります。

 

アイコンサイズの例倍率分類PPI
54 x 54 px0.75xldpi〜 120 ppi 以下
72 x 72 px (ベースライン)1xmdpi〜 160 ppi
108 x 108 px1.5xhdpi〜 240 ppi
144 x 144 px2xxhdpi〜 320 ppi
216 x 216 px3xxxhdpi〜 480 ppi
288 x 288 px4xxxxhdpi〜 640 ppi

 

タイポグラフィ

タイポグラフィは、Amazon Echoのブランド認知において重要な役割を果たします。Amazonのアイデンティティに一貫性と統一感を持たせ、言葉にたちまち個性を与えることができます。Amazonのすべての製品とサービスに使用される汎用的なブランドフォントは、Amazon Emberです。

Alexaの基本書体（日本語）はNoto Sans CJKです。ヒントテキスト用の書体はBookerlyです。マルチモーダルディスプレイのデザインに役立つAmazonフォントは、ここからダウンロードできます。

注： 現在のところ、APLはカスタムフォントをサポートしていません。

Typefaces

タイポグラフィの使用方法

Amazonでは、さまざまなデバイスモードの異なる視聴距離から読み取れるように、Alexaの文字スケールをデザインしています。一般的な文字スケールより大きくなっている場合がほとんどです。スケールが大きいため、ユーザーはデバイスから離れた位置にいても、画面上のコンテンツをすばやく読むことができます。重要なコンテンツを読みやすくする必要があるときは、見出し以上のスタイルを使用します。

Display sizes

  • Display 1とDisplay 2（表示1、表示2）のサイズ – 時刻や曜日を示すアクロニムや大きな数字といった、ひとめですぐに読めるテキストに使用します。
  • Display 3とDisplay 4（表示3、表示4）のサイズ – 短いテキストを表示するときに使用します。たとえば、離れた場所から読んでもらう必要があるリストアイテムやインラインタイトルなどです。
  • Display 5とDisplay 6（表示5、表示6）のサイズ – 離れた距離からユーザーに読んでもらう必要がある、より長い文章のテキストを表示するときに使用します。
  • Body（本文）のサイズ – 長い形式のコンテンツ用です。たとえば、本のあらすじなどです。このサイズのコンテンツは離れた場所からは読みづらいので、ユーザーがデバイスに近づく必要がある点に注意してください。
  • Hint（ヒント）のサイズ – Alexaを呼び出すにはどう話しかければよいかを示すために排他的に使用します。
  • Callout（コールアウト）のサイズ – 補助的なテキストに使用します。たとえば、グリッドビューの画像のタイトルです。
  • Title（タイトル）のサイズ – ヘッダーとボタンにのみ使用します。
  • Metadata（メタデータ）のサイズ – コールアウトに添えられるデータに使用します。たとえば、映画の時間に関する追加情報を表示する場合などです。
  • Caption（キャプション）のサイズ – ほとんど使用しません。使うとすれば、UI要素の表示に最も適しています。たとえば、進捗バーに表示される経過時間などです。

ウエイト

Alexaでは、Noto Sans CJKのlightとboldのウエイトを組み合わせてコントラストを付けます。文字スケールには必ずデフォルトの文字スタイルと代替スタイルがあります。たとえば、Display 3のデフォルトスタイルはlightで、代替スタイルはboldです。boldとlightを両方使う場合は、重要なテキストアイテムに注意を向けさせるためにboldを適用します。

注： フッターのヒントに使う場合、Bookerlyでは通常のウエイトが適用されます。BookerlyはItalicでのみ使用します。

Typeface weights

アクセシビリティ

テキストのスタイルとサイズは、エクスペリエンスの読みやすさやアクセシビリティにとって非常に重要です。Alexaレスポンシブ対応レイアウトでは、読みやすくはっきりと認識できる、前景テキストと背景色のコントラスト比の最小値があらかじめ設定されています。ただし、開発の際はコントラスト比を自分でチェックし、テキストサイズ、ウエイト、背景画像がすべて適切に設定され、テキストが読みやすいかどうかを確認することをお勧めします。特にキャプションなど小さな文字については注意が必要です。テキストとアクセシビリティが確保されたコンテンツについての詳細は、Web Content Accessibility Guidelines（WCAG）2.1を参照してください。

サイズ

文字スケールの正確なサイズ値は、デバイスからのユーザーの距離に基づいて計算されています。

デバイス・横長・小、デバイス・円形（1.5m）

スタイル書体デフォルトのウエイト代替ウエイトサイズ (in dp)
Display 1Noto Sans CJKBoldLight106
Display 2Noto Sans CJKBoldLight80
Display 3Noto Sans CJKLightBold66
Display 4Noto Sans CJKLightBold53
Display 5Noto Sans CJKLightBold48
Display 6Noto Sans CJKLightBold40
BodyNoto Sans CJKLightBold32
HintNoto Sans CJKRegular Italic-32
CalloutNoto Sans CJKBoldLight28
TitleNoto Sans CJKMedium-28
MetadataNoto Sans CJKBoldLight24
CaptionNoto Sans CJKRegular-24

デバイス・横長・中、デバイス・横長（2m）

スタイル書体デフォルトのウエイト代替ウエイトサイズ (in dp)
Display 1Noto Sans CJKBoldLight148
Display 2Noto Sans CJKBoldLight111
Display 3Noto Sans CJKLightBold92
Display 4Noto Sans CJKLightBold74
Display 5Noto Sans CJKLightBold48
Display 6Noto Sans CJKLightBold40
BodyNoto Sans CJKLightBold32
HintNoto Sans CJKRegular Italic-32
CalloutNoto Sans CJKBoldLight28
TitleNoto Sans CJKMedium-28
MetadataNoto Sans CJKBoldLight24
CaptionNoto Sans CJKRegular-24

テレビ・全画面、テレビ・オーバーレイ・横長（3m）

スタイル書体デフォルトのウエイト代替ウエイトサイズ (in dp)
Display 1Noto Sans CJKBoldLight192
Display 2Noto Sans CJKBoldLight128
Display 3Noto Sans CJKLightBold96
Display 4Noto Sans CJKLightBold64
Display 5Noto Sans CJKLightBold48
Display 6Noto Sans CJKLightBold40
BodyNoto Sans CJKLightBold32
HintNoto Sans CJKRegular Italic-32
CalloutNoto Sans CJKBoldLight28
TitleNoto Sans CJKMedium-24
MetadataNoto Sans CJKBoldLight24
CaptionNoto Sans CJKRegular-24

行の長さ

一般に、テキストサイズの和文書体が設定されている1段のみで構成されたページでは、35～40文字が最も適切とされています。複数段が組まれている場合は、平均20文字程度が適しています。

見出しやタイトルなど、短いテキストの場合は、最大20文字にする必要があります。本文やコピーといった長いテキストの場合は、最大30文字にする必要があります。maxLinesプロパティを使うと、国際化を考慮に入れつつ、表示する行数を設定できます。

テキストマークアップタグ

最高のエクスペリエンスを得るには、すぐに使用できるスタイルを活用すると共に、以下のリストで説明しているように、Textコンポーネントのテキスト文字列にオプションのマークアップタグを適用することもできます。

注： 画面上に文字を詰め込みすぎると、ユーザーにわずらわしさや負担を感じさせる音声エクスペリエンスになってしまいます。これと同様に、書式オプションを設定しすぎても、コンテンツが読みづらくなります。

  • 取り消し線（strike）は、文字要素が完了したこと、または削除済みであることを表すために使います。書体、ウエイト、色などを変えることなく、別のスタイルに重ねることができます。
  • 太字（strong）は強調するために使います。別のスタイルに重ねて適用できます。影響を受けるのはウエイトのみです。
  • 斜体（italic）は、本、雑誌、新聞などの名前に使います。文字をそれとなく強調するときにも適用します。書体、ウエイト、色などを変えることなく、別のスタイルに重ねることができます。
  • 下線（underline）はテキストをさらに強調したい場合に適用しますが、頻度はあまり多くありません。書体、ウエイト、色などを変えることなく、別のスタイルに重ねることができます。リンクのスタイルとして下線を使わないでください。この場合にはHintスタイルを使用します。
  • サブスクリプト（subscript）は、数学関数、化合物、ベースライン書体より小さなテキストに適用します。別のスタイルに重ねて適用できます。影響を受けるのはサイズのみです。
  • スーパースクリプト（superscript）は序数を表す文字（th、nd、stなど）、指数データ、書体のキャップハイトを超えるテキストに適用します。別のスタイルに重ねて適用できます。影響を受けるのはサイズのみです。
  • 行の高さ（lineHeight）は行の縦間隔、つまり行間のスペースの量を調整します。
  • 文字スペース（letterSpacing）はカーニング、つまり文字間のスペースの量を調整します。