HeaderとFooter

Header

ヘッダーには、エクスペリエンス内のユーザーの位置に関する情報が表示されます。この情報には、タイトル、サブタイトル、スキルアトリビューション(テキストまたはアイコン形式)、戻るボタンなどのナビゲーションキューが含まれます。

Header

ヘッダーの使用方法

ヘッダーは、エクスペリエンス内でユーザーを誘導する標識として機能します。ナビゲーション、タイトル、サブタイトル、ブランディングに使用します。

ヘッダーは、常にレイアウトの先頭に配置します。常に同じ位置に配置することにより、親しみやすさが増し、ナビゲーション要素にアクセスしやすくなります。本文テキストやアクションの呼び出しにヘッダーを使用しないでください。

ヘッダーには次の要素が含まれます。

  • タイトル
  • サブタイトル
  • アトリビューション
  • ナビゲーション

タイトル

タイトルは、アクション(タスクなど)に対するAlexaの音声応答を補助するか、画面上の項目について知らせる目的で使用します。画面上の内容、スキル自体、ユーザーが現在いるセクションの記述にタイトルを使用できます。

サブタイトル

タイトルに対応する追加情報をサブタイトルとして含めることができます。サブタイトルはアルファベットを使用し、単語の先頭文字を大文字で記述する必要があります。たとえば、天気スキルでは、タイトルに日付、サブタイトルに場所(市や州など)が表示されます。

アトリビューション

アトリビューションは、スキル名、アイコン、関連する画像を表示します。ヘッダーでは、画像またはテキストをアトリビューションとして表示できます。両方を指定した場合、画像がアトリビューションに表示されます。小さなディスプレイの場合は、タイトルとサブタイトルではなく、画像またはスキルアイコンが表示されます。タイトルとサブタイトルを表示するには、Attribution iconを「true」に設定します。

ナビゲーション

ナビゲーションは通常、戻るボタンの形をとります。エクスペリエンスで「アレクサ、戻って」などのリクエストをサポートしている場合は、ナビゲーション要素を表示する必要があります。 ユーザーが任意のタイミングで前の画面に戻れるようにしたり、発話にリンク付きのタッチ対象を追加したりする場合にのみ、戻るボタンを表示する必要があります。

スクロール

画面サイズに応じて、ヘッダーを固定したり、コンテンツと共にスクロールしたりできます。テンプレート内のヘッダーの配置場所で、スクロールが定義されます。

中型および大型の画面

横長、中型・大型のデバイスのViewportプロファイルでは、ヘッダーを画面上部に固定する必要があります。コンテキストは、ヘッダーとは独立してスクロールする必要があります。ヘッダーが固定されていると、コンテンツのコンテキストの管理がしやすくなり、ユーザーのナビゲーションもスムーズになります。

小型の画面

円形デバイスなどの小さな画面では、画面上のスペースを最大限に利用するため、ヘッダーもコンテンツと共に画面外にスクロールします。

Footer

Footerレスポンシブ対応コンポーネントを使用すると、画面下部にヒントを表示できます。ヒントは、ユーザーにスキルの使用方法を知らせる場合に効果的です。ヒントを表示して、コンテキストに関するヘルプ、追加のアクションや機能をユーザーに知らせます。

Footer

Footerコンポーネントの使用方法

スクロールするコンテンツ領域外の画面下部にフッターを固定して配置し、ヒントを常にBookerlyフォントで表示します。

ヒント

ヒントは、実行できるアクションやスキルの使用方法をユーザーに知らせるために使います。ヒントの使用は任意です。関連情報やユーザーが興味を持ちそうな情報がない場合は使わないでください。ヒントが多すぎると、ユーザーはヒントを読まなくなってしまいます。

ユーザーにサンプル発話を提供する場合は、ウェイクワードを含めないでください。ユーザーは「アレクサ」以外のウェイクワードを設定している可能性があります。 カスタマイズしたトランスフォーマーを使用すると、APLは正しいウェイクワードをヒント文字列に自動的に追加します。 以下の2つの例は、複数のウェイクワード「アレクサ」と「エコー」を使用して、適切に設定されたヒントです。

「アレクサ、材料は何?」と聞いてみてください

「エコー、材料は何?」と聞いてみてください

フッターのヒントをカスタマイズするには、textToHintデータトランスフォーマーを使用して、正しいウェイクワードをヒント文字列に自動的に追加します。テキスト文字列を指定すると、APLが残りの構成を処理してくれます。

試してみる

APLドキュメントの作成と編集を参照してください。

開発者向けドキュメント