Button
Note: Sign in to the developer console to build or publish your skill.
Button
Buttonレスポンシブ対応コンポーネントを使うと、ユーザーは表示されるコンテンツから簡単にアクションを起こせるようになります。ボタンは、タッチや音声によってアクションを起こせることをユーザーに視覚的に伝えるものです。たとえば、イベント会場への道順、レシピの材料リスト、映画の上映時間を簡単に知る方法といった情報をユーザーに提供するのに使えます。
Buttonコンポーネントの使用方法
ボタンは、ユーザーが音声を使ったり、押したり、TVリモコンで選択したりすることでアクションを起こせるようにデザインする必要があります。その際、表示されているすべてのボタン(すべてのアクション)は音声で起動できるようにしてください。ただし、すべての音声オプションにボタンなどの画面上に表示される操作対象を持たせる必要はありません。また、ボタンにはアクセシビリティ対応のラベル(accessibilityLabel)を提供し、目の不自由なユーザーにもボタンの機能がわかるようにする必要があります。
ボタンのテキストは、その目的が簡潔にわかりやすく伝わるようにしてください。「道順を表示」などのように、アクションで表すようにします。 可能な限り、1~2語に収めるようにしてください。画像を含める場合、Touch Wrapperと組み合わせたImageを使用することを検討します。
注: Buttonレスポンシブ対応コンポーネントではなくカスタムコンポーネントを使う場合は、ボタンの機能をテストし、さまざまなデバイスモードで正しく表示されることを確認してください。
背景と異なる色のレイヤーで塗りつぶしたボタンは、メインのアクション、つまりユーザーを誘導したいアクションによく使います。背景色が同じで外枠のみのボタンは、ユーザーが起こすことのできるほかの(二次的な)アクションに使います。
ベストプラクティス
- 画面上に、操作やアクションを重複させないようにします。たとえば、戻るなどのナビゲーション操作のボタンが既にあれば、追加しないでください。
- エクスペリエンス全体でボタンの使い方に一貫性を持たせます。たとえば、アクションとナビゲーションのボタンを混在させることは避けてください。
- カスタムの背景色を使っている場合、異なるデバイスモードでもボタンが読み取れるかどうかテストします。
- 一画面に表示するボタンの数を制限します。表示するコンテンツによって異なりますが、一般的には2~3個までとします。