APL Widgets

Alexa Presentation Language(APL)ウィジェットは、自動更新される読みやすいビューで、コンテンツと機能が表示されます。  ウィジェットを使用するとユーザーは、タッチだけでなく音声を介しても、スキルの最新コンテンツにアクセスしたり、ホーム画面の一覧から項目を外すなどのアクションを実行したりできます。  ユーザーのアクションに応じて、ウィジェットはインラインで更新されたり、全画面のエクスペリエンスになったりします。

ウィジェットのViewportプロファイル

ウィジェットは、一連のViewportプロファイルでサポートされています。デバイスごとに独自のデザインを作成するのではなく、すべてのハブデバイスはウィジェットのサイズごとに1つのViewportプロファイルを共有します。これらのプロファイルを使用して、すべてのハブでデザインをスケーリングできます。

ウィジェットのサイズ変更

大型デバイス、352 x 512

中型デバイス、264 x 384

小型デバイス、264 x 320

ウィジェットのテンプレート

ウィジェットの使用を開始するには、エクスペリエンスでAmazonの既存テンプレートを使用できるか、カスタムのデザインが必要かを検討してください。デザインシステムはすべてのハブデバイスに対して、再利用可能なレスポンシブ対応のテンプレートとコンポーネントを提供します。ウィジェットは、ドメインエクスペリエンスを補完する軽量アクションにのみ使用してください。

Listテンプレート

Listテンプレートを使用して、項目のリスト(買い物リストやリマインダーリストなど)を表示します。

テキストリスト
画像リスト

テキストの折り返しテンプレート

テキストの折り返しテンプレートは、ヒント、豆知識、簡潔な手順などのテキストを強調したエクスペリエンスに使用します。

アクションボタン

アクションボタンテンプレートは、コールトゥーアクション(CTA)に重点を置く、テキストを強調したエクスペリエンスに使用します。

画像キャプションテンプレート

画像キャプションテンプレートは、テキストをサポートする必要がある、画像を強調したエクスペリエンスに使用します。

写真テンプレート

写真テンプレートは、画像が主要または唯一のコンテンツである、画像を強調したエクスペリエンスに使用します。

カスタムテンプレート

Amazonでは、ほとんどのシナリオに対応するように汎用テンプレートをデザインしていますが、コンテンツがカスタムデザインのテンプレートを必要とする場合もあります。カスタムテンプレートは、ほかのウィジェットとの統一感を保つため、APLウィジェットテンプレートのデザイン原則に従う必要があります。

画像の不適切な使用

悪い例

red line

画像にテキストを埋め込む。

悪い例

red line

プロバイダーロゴが埋め込まれた画像を使用する。

悪い例

red line

紛らわしいユーザーインターフェース(UI)要素を背景に配置する。これらの要素は、アクション可能なタッチ対象と誤解され、ユーザーの混乱を招く可能性があります。