文字の表現

---

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

• 書体
• スケール
• サイズ
• 行の長さ
• テキストマークアップタグ
• その他のリソース

書体

日本語の基本書体はNoto Sans CJKです。

スケール

Alexaの文字スケールは、さまざまなデバイスモードの異なる視聴距離から読み取れるようにデザインされています。一般的な文字スケールより大きくなっている場合がほとんどです。これは、ユーザーがデバイスから離れていても画面に表示されるコンテンツをすぐに読めるようにするためです。読んでもらう必要がある重要な情報には、ヘッドラインよりも大きいスタイルを適用します。

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

すべてのデバイスに適切な文字スケールを適用できるように、これらのサイズにできるだけ従ってください。

ウエイト

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

サイズ

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

1.5m

スタイル	書体	デフォルトのウエイト	代替ウエイト	サイズ（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	41
Display 6	Noto Sans CJK	Light	Bold	40
Body	Noto Sans CJK	Light	Bold	32
Hint	Noto Sans CJK	Light	–	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

2m

スタイル	書体	デフォルトのウエイト	代替ウエイト	サイズ（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	41
Display 6	Noto Sans CJK	Light	Bold	40
Body	Noto Sans CJK	Light	Bold	32
Hint	Noto Sans CJK	Light	–	32
Callout	Noto Sans CJK	Bold	Light	28
Title	Noto Sans CJK	Medium	–	28
Metadata	Noto Sans CJK	Bold	Regular	24
Caption	Noto Sans CJK	Regular	–	24

3m

スタイル	書体	デフォルトのウエイト	代替ウエイト	サイズ（単位：ピクセル）
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	41
Display 6	Noto Sans CJK	Light	Bold	40
Body	Noto Sans CJK	Light	Bold	32
Hint	Noto Sans CJK	Light	–	32
Callout	Noto Sans CJK	Bold	Light	28
Title	Noto Sans CJK	Medium	–	24
Metadata	Noto Sans CJK	Bold	Regular	24
Caption	Noto Sans CJK	Regular	–	24

行の長さ

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

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

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

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

その他のリソース

• APL Stylesパッケージ - テキストのリソース

先頭に戻る

---