Button



Button

Buttonレスポンシブ対応コンポーネントを使うと、ユーザーは表示されるコンテンツから簡単にアクションを起こせるようになります。ボタンは、タッチや音声によってアクションを起こせることをユーザーに視覚的に伝えるものです。たとえば、イベント会場への道順、レシピの材料リスト、映画の上映時間を簡単に知る方法といった情報をユーザーに提供するのに使えます。

2台のハブデバイスでボタンを含む画像を表示した例です。NASAのわし星雲の画像が右側に表示され、簡単な説明が左側に表示されています。タイトルの下に「ビデオを観る」、「ギャラリーを見る」というボタンがあります。

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

ボタンは、ユーザーが音声を使ったり、押したり、TVリモコンで選択したりすることでアクションを起こせるようにデザインする必要があります。その際、表示されているすべてのボタン(すべてのアクション)は音声で起動できるようにしてください。ただし、すべての音声オプションにボタンなどの画面上に表示される操作対象を持たせる必要はありません。また、ボタンにはアクセシビリティ対応のラベル(accessibilityLabel)を提供し、目の不自由なユーザーにもボタンの機能がわかるようにする必要があります。

ボタンのテキストは、その目的が簡潔にわかりやすく伝わるようにしてください。「道順を表示」などのように、アクションで表すようにします。 可能な限り、1~2語に収めるようにしてください。画像を含める場合、Touch Wrapperと組み合わせたImageを使用することを検討します。

背景と異なる色のレイヤーで塗りつぶしたボタンは、メインのアクション、つまりユーザーを誘導したいアクションによく使います。背景色が同じで外枠のみのボタンは、ユーザーが起こすことのできるほかの(二次的な)アクションに使います。

外枠のみのボタン(左)と塗りつぶしのボタン(右)の例

ベストプラクティス

  • 画面上に、操作やアクションを重複させないようにします。たとえば、戻るなどのナビゲーション操作のボタンが既にあれば、追加しないでください。
  • エクスペリエンス全体でボタンの使い方に一貫性を持たせます。たとえば、アクションとナビゲーションのボタンを混在させることは避けてください。
  • カスタムの背景色を使っている場合、異なるデバイスモードでもボタンが読み取れるかどうかテストします。
  • 一画面に表示するボタンの数を制限します。表示するコンテンツによって異なりますが、一般的には2~3個までとします。

その他のリソース

先頭に戻る