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