レスポンシブ対応コンポーネント

---

レスポンシブ対応コンポーネントは、モジュール式のレスポンシブ対応要素にコンポーネントを結合したものです。コンポーネントを使用する場合と同様に、ドキュメントの構成要素として使用できます。

利用可能なレスポンシブ対応コンポーネント

以下の表は、alexa-layoutsパッケージで利用できるレスポンシブ対応コンポーネントの一覧です。各コンポーネントがalexa-viewport-profilesパッケージのどのViewportプロファイルでサポートされているかも示しています。

名前	説明	標準のViewport	ウィジェットのViewport
Background	コンテンツの背景にビデオ、画像、色を表示します。	◯	中
Button	ユーザーがタッチまたはコントローラーで選択できるボタンを表示します。ボタンに表示されるテキスト、ボタンの外観、ボタンを選択したときに実行されるコマンドを設定できます。	◯	×
Card	コンテナー内に最小単位のコンテンツを表示します。このコンポーネントを使用すると、ひとめで読み取ることができる情報のスナップショットを表示できます。背景、メタデータ、ユーザーがカードを選択すると実行されるコマンドを設定できます。	◯	×
Check Box	ユーザーがオン／オフを切り替えることができるチェックボックスを表示します。チェックボックスのサイズ、色、ユーザーがチェックボックスを操作したときに実行するコマンドを制御できます。	◯	×
Divider	水平方向または垂直方向の区切り線を表示して、項目間を視覚的に分離します。	◯	×
Footer	画面の下部にヒントを表示して、ユーザーが試すことのできるほかの発話を提案します。	◯	×
Footer Action Button	AlexaButtonのウィジェット用のバリエーションです。ユーザーが選択できるボタンを表示します。ボタンの外観と、ユーザーがボタンを選択したときに実行するコマンドを制御できます。	×	中
Header	タイトル、サブタイトル、戻るボタンなどの一般的なヘッダー情報を表示します。	◯	中
Icon Button	ベクターグラフィックをボタンとして表示します。ユーザーは、タッチまたはコントローラーでボタンを選択できます。開発者は、表示するグラフィック、ボタンのスタイル、ボタンを選択したときに実行するコマンドを指定できます。AlexaIconButtonは、disabled、pressed、focusedなど、さまざまな状態を自動的に処理します。	◯	×
Image	画像を表示します。標準的なアスペクト比（縦長や円形など）と、角丸などの効果を使用して画像を表示できます。	◯	×
Image List Item	リストに合わせた形式で画像とテキストを表示します。	◯	×
Ordinal	リスト項目の番号を表示します。このコンポーネントは、複数の子コンポーネントを持つコンポーネント（Sequence、Container、Pagerなど）のリスト項目に番号を付けるために使用します。	◯	×
Page Counter	現在のページ番号と合計ページ数を表示します。たとえば、5ページ中1ページ目の場合は「1 | 5」のように表示します。このコンポーネントを使用して、Pagerのページに番号を付けることができます。	◯	×
Pagination Dots	Pagerに、現在のページと合計ページ数を表すグラフィックを表示します。このコンポーネントは、ユーザーがページを変更するときにアニメーションを実行できます。	◯	中
Photo Caption	画像のコンテキストを提供するテキストを表示します。	◯	中
Progress Bar	アニメーション化された進行状況バーを表示して、進行中のアクティビティを表します。	◯	中
Progress Bar Radial	小型の円形デバイスに円形の進行状況バーを表示して、進行中のアクティビティを表します。	◯	×
Progress Dots	アクションが進行中であることを表すアニメーション化されたドットを表示します。	◯	×
Radio Button	ユーザーがオン／オフを切り替えることができるラジオボタンを表示します。ボタンのサイズ、色、ユーザーがラジオボタンを操作したときに実行するコマンドを制御できます。	◯	×
Rating	非対話型の項目の評価を表示します。デフォルトの星画像か、グラフィック用の独自のカスタムアセットを使用できます。	◯	×
Slider	対話型の進行状況バーを表示します。ユーザーは、コンテンツをスクラブしてバーをドラッグしたり、設定を変更したりできます。	◯	×
Slider Radial	対話型の円形の進行状況バーを表示します。ユーザーは、コンテンツをスクラブしてバーをドラッグしたり、設定を変更したりできます。	◯	×
Swipe to Action	ユーザーがスワイプしてアクションを実行できる項目を表示します。	◯	×
Switch	ユーザーがオン／オフを切り替えることができるスライド式のスイッチを表示します。スイッチのサイズ、色、ユーザーがスイッチを操作したときに実行するコマンドを制御できます。	◯	×
Text List Item	リストに合わせた形式でテキストを表示します。	◯	中
Transport Controls	ビデオプレーヤーコントロールのセットを表示します。ボタンの外観をカスタマイズしたり、ユーザーがボタンを選択したときに実行するコマンドを定義したりできます。	◯	中

Viewportプロファイルとレスポンシブ対応コンポーネント

Viewportプロファイルは、alexa-viewport-profilesパッケージで提供されます。

標準Viewportプロファイルには、以下が含まれます。

• すべての円形デバイスプロファイル
• すべての横長デバイスプロファイル
• すべての縦長デバイスプロファイル
• すべてのモバイルプロファイル
• すべてのテレビプロファイル

ウィジェットのViewportプロファイルには、以下が含まれます。

• ウィジェット、中（@hubWidgetMedium）

Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

デザインガイダンス

標準APLドキュメントでレスポンシブ対応コンポーネントを使用する方法に関するデザインガイダンスについては、Alexaデザインガイド： レスポンシブ対応コンポーネント（英語のみ）を参照してください。

ウィジェットでレスポンシブ対応コンポーネントを使用する方法に関するデザインガイダンスについては、Alexaデザインガイド： ウィジェットのレスポンシブ対応コンポーネント（英語のみ）を参照してください。

関連トピック

• Alexaデザインシステムの概要
• レスポンシブ対応コンポーネントとテンプレート

---

---

最終更新日: 2025 年 12 月 02 日