Alexaでは、Alexa Presentation Language（APL）と呼ばれる視覚デザインフレームワークを採用しています。これにより、幅広いデバイスに対応した対話型の音声および視覚エクスペリエンスを構築できます。このようなマルチモーダルなエクスペリエンスは、スキルをより楽しく、魅力的にします。APLでは、次のような視覚要素を提供しています。
開発者は、Echo Show、Fire TV、一部のFire Tabletデバイスなどの標準的なAlexa搭載デバイス向けに、独自の視覚要素をデザインできます。Alexa Smart ScreenやTV Device SDKを使用して開発したサードパーティデバイスも、APLデザインフレームワークに対応しています。
APLは、音声、オーディオ、視覚要素を1つのユーザーインターフェースに統合した独自のエクスペリエンスデザインを可能にします。このフレームワークは柔軟性が高く、視覚要素や音声要素を同期させながら、1つのデザインを複数のタイプのデバイスに拡張できます。さまざまな方法でAPLを活用することで、ユーザーエクスペリエンスが向上します。APLを使用すれば、部屋の向こう側からでも一目で分かる補足情報を表示したり、リストや検索項目といった視覚的な手掛かりを提供したりできます。APLは音声コマンドにも対応しているので、ユーザーはタッチ対話だけではなく、音声でアイテムを画面に表示させることもできます。これにより、異なる種類の対話同士のやり取りがスムーズになり、スキルとユーザーとのやり取りもシームレスで直感的になります。
APLを使用してデザインする場合、開発者が自由に視覚要素を画面上のどこに配置するかを定義することができます。複数のAlexa搭載デバイス間で視覚表現とブランドアイデンティティを一致させることも可能です。オーサリングツールを使用してAPLでデザインしながら、Alexa開発者コンソールでシミュレーションテストを行い、Amazonの各種Alexa搭載デバイス間でデザインがどのように表示されるかを確認できます。
複数のスキルでデザインを再利用したり、デザインを他者と共有したりすることも可能です。異なるデバイス間でも統一性のあるデザインが可能なので、対象とするユーザーやデバイスの種類に応じてエクスペリエンスをカスタマイズできます。簡単に開発を始められるように、APLレイアウトのサンプルを提供しています。これらのレイアウトは、さまざまなAlexa搭載デバイスで機能するようデザインされています。レイアウトをそのまま使用することも、修正して使用することも、一から自分で作成することもできます。APLは新しい言語ですが、普遍的な形式に準拠していますので、構文はフロントエンドの開発経験を持つ人であれば誰でもすぐに習得できます。
APLは、デザイン要素の仕様を含むJSONファイルを作成し、スキルからAlexa搭載デバイスに送ります。デバイスは、これが何のためのものなのか確認してから、必要な画像やデータをインポートし、エクスペリエンスとして出力します。次のライブラリには、視覚デザインに使用可能なすべてのAPLコンポーネントが含まれています。
タッチ対応の画像（テキストあり、またはなし）を、TouchWrapperを使用して画面上に作成できます。また、ぼかしフィルターを適用した画像を作成することもできます。
コンポーネントを画像の前面に配置する場合は、オーバーレイ（レイヤー）を使って色付きの不透明なレイヤーを画像の上に適用すると、コンテンツの読みやすさとアクセシビリティが向上します。画像を目立たせないようにする場合、不透明度を変更して効果に変化をつけることもできます。
背景画像を使用すると、主役のコンテンツを邪魔することなく、視覚エクスペリエンスを高めることができます。画面に表示されるメインコンテンツのアクセントとして、レイアウトの背景に画像を配置します。
サムネイルを使うと、検索結果を確認したり、TextコンポーネントとImageコンポーネントを組み合わせたりして、選択肢にコンテキストを追加できます。
小さな画像で三次的なコンテンツを提供します。たとえば、評価を表す星などに使います。
エンプティステートやデフォルトステートのレイアウトに画像を追加すると、レイアウトが整います。エンプティステートに画像を追加すると、単純な応答にも楽しさやコンテキストをプラスできます。
ユーザーがタッチ対象をタッチだけでなく声でも選択できるよう、タッチ対象を必ず音声にも紐付けるようにしてください。TouchWrapperでテキスト文字列を囲む場合は、インテントをトリガーするフレーズの文字列を囲むことをお勧めします。
ユーザーがタッチでアイテムを選択し、詳しいコンテンツを見ることができるように、TouchWrapperでシークエンスのアイテムを囲みます。
TouchWrapperをImageコンポーネントと組み合わせて、ナビゲーション項目（グラフィックボタンなど）を作成したり、画像に対話と選択のポイント（ゲームボードなど）を追加したりすることができます。
TouchWrapperはタッチが目的なので、最小サイズとしては48 x 48 dpをお勧めします。これに伴い、タッチの物理ターゲットは画面サイズに関係なく9 mmになります。
テキストを表示する場合、使用できるフォントに対して色、サイズ、太さを指定できます。TouchWrapperとScrollViewを使用することで、テキストをタッチ対応にし、Containerの範囲外に表示できます。これにより、ユーザーはタッチしてスクロールすることで、最初の画面で見えない部分を表示できます。
テキストの強調を追加または削除する場合は、色や不透明度を変えると、状態、メインとそれ以外のコンテンツを区別しやすくなります。
画面に表示されるテキストが多すぎると、音声エクスペリエンスの妨げになり、ユーザーにとっては負担になります。リスト内でTextコンポーネントを使用する場合、テキストを3行までとします。これで最も関連ある情報が強調され、簡単にスキャンして選択できるようになります。
注： 現時点では、カスタムフォントはサポートされていません。
リッチテキストの書式オプションの数は2つまでにします（太字と斜体など）。
階層を強調し、メッセージの意味を伝えるために、使用するテキストサイズの数をできるだけ少なくします。
ユーザーが離れた距離からでもテキストを読めるように、テキストと背景をはっきりと対比できる色を選択します。
注： Imageコンポーネントとは違い、Textコンポーネント同士は重ねないでください。重なったテキストは読めないだけでなく、Alexaデバイスエコシステムのアクセシビリティ基準も満たしません。
PagerはAlexaが読み上げているテキストと完全に一致しているわけではない画像やテキスト、またはユーザーにスクロールさせたくないコンテンツに最適です。たとえば、カルーセル形式の画像や試合のスコアを表示する一連のカードを自動的にページ分割して表示する場合にPagerを使用できます。
Pagerは、ユーザーが関心を持つ可能性のある追加（またはボーナス）情報や画像を表示する場合にお勧めです。TTSはAlexaが発話するものに関連しているべきですが、厳密に守る必要はありません。ユーザーがうんざりしてしまわないよう、Pager項目の数は多くても6～7個にしてください。
重要な情報は音声で伝えるようにしてください。ユーザーは表示されるコンテンツを常に見ているとは限りませんし、見ていたとしても最後まで読まないかもしれません。Pagerコンポーネントを使って表示するコンテンツは、画面にほかのレイアウトがあまりない場合に最適です。一度に多くの要素が表示されると、ユーザーはわずらわしく感じる可能性があります。
Sequenceコンポーネントを使用して、リストをスキルに配置できます。Sequenceは、ユーザーが選択できるように、複数の選択肢や結果をあらかじめ決められた順序で提示する場合に最適です。音声コマンドでシークエンスをどう制御すればよいかをユーザーが理解できるように、1画面に表示するシークエンスは1つだけにします。
ユーザーが項目を簡単に選択できるように、Sequenceの各項目に番号を順番に付けることが重要です。番号は必ず1から始めて、Sequenceの終わりまで1ずつ増やします。
シークエンスのスクロール方向を縦または横に設定できます。テキストのSequenceには縦方向、画像のSequenceには横方向のスクロールが最適です。
音声とテキストの同期を使用すると、Alexaの音声応答と同じタイミングでテキストを強調表示できます。
また、音声や画面に表示されるコンテンツの表現方法をAPLドキュメントで変更するコマンドを送信することもできます。たとえば、SpeakItemコマンドやhighlightModeを使用して、現在読んでいる行やブロックのテキストを強調表示させることができます。音声用のSSMLと同様、Idleコマンドを使用すると、Alexaが話の途中で一時停止する場合に、休止を視覚シークエンスに挿入できます。
注： テキストは通常Noto Sans CJKフォントで表示されますが、音声とテキストの同期を使用する場合は、強調表示の際には読みやすいように異なる不透明度で表示されます。
音声とテキストの同期は、Alexaが読み上げるテキストをそのまま表示する際に使用します。使用しない場合は、画面上でスクロールされるテキストが読み上げる内容と一致しない可能性があります。
画面分割など複数のパネルが表示された状態で、あるパネルと音声の同期が適用されたテキストが自動スクロールされると、ユーザーは混乱してしまう可能性があります。音声と同期したテキストが際立つよう、画面上のほかの機能をすべて最小化します。
Alexaが読み上げられる量のテキストだけを表示します。Alexaが読み上げるテキストは、短い形式のコンテンツでは15秒前後に制限します。これは、ユーザーが集中しやすく、必要に応じて中断もできる長さです。Alexaが読み上げられる量よりテキストが多い場合、プロンプトを追加してユーザーに「もっと読みましょうか？」などと続行するかどうか聞くようにします。 ユーザーが続行を選んだ場合、追加のテキストを追加することを忘れないでください。
注： ほとんどのデバイスでは、画面のタッチで読み上げ機能とテキストのスクロールが一時停止します。
APLレイアウトにビデオコンテンツを含めることで、スキルがメディアの再生を終了したときでもスキルエクスペリエンスを継続できます。再生、一時停止、巻き戻しボタンといった再生コントロールを組み込むだけでなく、ビデオ再生をカスタマイズすることもできます。
ビデオは、それがスキルのメインコンテンツである場合のみ含めることができます。たとえば、ユーザーが歌を流すようリクエストした場合、音楽ビデオを再生できます。スキルの主要アクションとしてではなく背景としてビデオを表示することは、ユーザーの注意力を散漫にし、混乱を招く原因となります。
注： ビデオには常に字幕を入れてください。
ビデオには、プレビュー画像としての役割を果たすスクリーンショットか、関連画像を含めます。
音声、および画面上のボタンやその他のコントロールでビデオコンテンツを一時停止する方法を用意します。エクスペリエンス側で制御しなければならない特別の理由がない限り、ユーザーが常にビデオ再生を制御できるようにしてください。可能な限り、ユーザーがビデオのリピート再生や全編リピート再生を選択できるようにします。
再生コントロールには、一般的で認識しやすいアイコンを使用します。同様に、ユーザーが音声で再生を制御するときも、使い慣れた語句を使えるようにし、最低でも、再生、一時停止、全画面ボタンを設定します。