ボタンは、ユーザーがアクションやフローを開始するのに役立ちます。強調するには、さまざまな種類のボタンから選択します。
リソース
| タイプ | リンク | ステータス |
|---|---|---|
| デザイン | デザインソース（Figma） | 利用可能 |
| 実装 | Jetpack Compose | 利用可能 |
ハイライト
- 操作の重要度に基づいてボタンのタイプを選択します。 アクションが重要になるほど、ボタンを強調します。
- ボタンには、実行する操作を示す明確なラベルを付けます。
- ボタンは、画面上でユーザーが目にすると思われる場所に配置してください。
- ボタンは使いすぎないでください。画面上のボタンが多すぎると、視覚階層が損なわれます。
バリエーション
ボタンには次の 6 種類があります。
- 塗りつぶしボタン
- アウトライン ボタン
- アイコンボタン
- 枠線アイコンボタン
- 長いボタン
- 画像ボタン
操作の重要度に基づいてボタンのタイプを選択します。 アクションが重要であるほど、ボタンの強調度が高くなります。
塗りつぶしボタンと枠線ボタン
塗りつぶしボタンは視覚的に最もインパクトがあり、保存、今すぐ参加、確認、ダウンロードなど、フローを完了するための重要な最後のアクションに使用します。
枠線付きボタンは中強調ボタンです。このボタンには、重要なアクションが含まれていますが、アプリのメイン アクションではありません。枠線付きのボタンと塗りつぶされたボタンを組み合わせて、代替のセカンダリ アクションを示します。
構造
- コンテナ
- ラベルテキスト
- アイコン（省略可）
状態
コンポーネントのステータスを示す視覚的表現。
- デフォルト
- 集中
- 押下
仕様
アイコンと枠線アイコン ボタン
アイコンボタンを使用して、コンパクト レイアウトでアクションを表示します。アイコンボタンは、オーバーフロー メニューを開く、検索するなどの起動アクションを表すことができます。また、お気に入りやブックマークなど、オンとオフを切り替えられるバイナリ アクションを表すこともできます。メディアの再生や一時停止にも使用されます。
アイコンボタンは、小、中、大の 3 つのサイズで定義できます。
構造
- コンテナ
- アイコン
状態
- デフォルト
- 集中
- 押下
状態は、コンポーネントまたはインタラクティブな要素のステータスを伝えるために使用される視覚的な表現です。
仕様
ワイドボタン
幅の広いボタンは、通常のボタンよりも強調したい場合に使用します。重要なアクションが含まれています。関連するオプションを表すボタンはグループ化されています。このグループは共通のサーフェスを共有する必要があります。
構造
- コンテナ
- 最先端アイコン
- タイトル
- 字幕
状態
- デフォルト
- 集中
- 押下
状態は、コンポーネントまたはインタラクティブな要素のステータスを伝えるために使用される視覚的な表現です。
仕様
画像ボタン
画像ボタンは通常、次のレベルのナビゲーションで利用できるコンテンツのサムネイルを表示するために使用されます。通常は関連するアクションと一緒にグループ化され、そのグループは共通のサーフェスを共有する必要があります。
構造
- コンテナ
- 最先端アイコン
- タイトル
- 字幕
- イメージレイヤ。次の要素で構成されます。
- Scrim（状態オーバーレイ）
- グラデーション（サーフェスの色に基づく）
- 画像
状態
- デフォルト
- 集中
- 押下
状態は、コンポーネントまたはインタラクティブな要素のステータスを伝えるために使用される視覚的な表現です。
仕様
Usage
ボタンは通常、ユーザーが実行できるアクションを伝えるために使用されます。これらは、ダイアログ、モーダル ウィンドウ、フォーム、カード、ツールバーなどの UI 要素によく見られます。
ボタンは、UI でアクションを表すためのオプションの一つにすぎません。過度に使用しないでください。画面上のボタンが多すぎると、視覚的な階層が崩れてしまいます。
- コンテナ
- アイコン
- ラベルテキスト
- タイトル
- 字幕
- 画像
コンテナ
ボタンによって、コンテンツの周囲にコンテナが表示されます。コンテナは、内部パディングを維持したまま、フォーカスで 1.1 倍にスケーリングされます。コンテナに関する考慮事項は次のとおりです。
- コンテンツに基づいてコンテナの幅を設定し、パディングが一定になるようにします。
- レスポンシブ レイアウト グリッドに対するコンテナの相対位置を設定します。
- 塗りつぶしボタンには単色のコンテナを使用します。
- 枠線付きボタンに、フォーカス時にストロークと塗りつぶしの色を使用する。フォーカスされると、コンテナは輪郭とともに塗りつぶし色になります。
- ワイドボタンと画像ボタンの場合、コンテナの幅はレイアウト グリッドに応じて設定されます。
- コンテナのサイズ、位置、配置は、親コンテナのスケーリングに合わせて変更できます。
テキストボタンとアイコンボタンのコンテナは角に丸みがあります。ワイドボタンと画像ボタンのコンテナは、12 dp の丸みを帯びたコンテナです。
すべきこと
注意
アイコン
アイコンは、ボタンの動作を視覚的に伝え、注意を引くのに役立ちます。ボタンの前側に配置してください。アイコンは常にコンテナ内で垂直方向の中央に配置されます。
すべきこと
すべきでないこと
注意
ラベルテキスト
ラベルテキストはボタンの最も重要な要素です。ユーザーがボタンをタップしたときに実行されるアクションを記述します。
ボタンのラベルのテキストでは、最初の単語と固有名詞を大文字にし、文頭を大文字にします。テキストを折り返さないでください。読みやすくするために、ラベルテキストは 1 行にまとめてください。
すべきこと
注意
画像
画像ボタンは、常に背景の画像の上にグラデーション オーバーレイとスクリムが付きます。グラデーション オーバーレイは、コンテナの色に応じて設定されます。スクリムは状態に応じて変化します。
ボタングループ
アクション間で一貫したナビゲーションを維持するため、ボタンは行または列に一緒に表示されます。以降のセクションでは、考慮事項について説明します。
階層を通知する
各画面には 1 つのメイン アクションを設定し、通常は横長の目立つボタンで表します。ボタンは見やすく理解しやすいものにする必要があります。 その他のボタンは目立たないようにし、メインの操作からユーザーの注意をそらさないようにします。
グループ内の最初のボタンが、最初にフォーカスが当たるため、プライマリ アクションとして機能します。
線形レイアウトを維持する
- 行レイアウト
- 列レイアウト
バリアントを論理的に使用する
列レイアウトでは、単一のボタンのバリアントを維持する必要があります。行レイアウトでは、さまざまなバリアントをボタングループにクラスタ化できますが、ロジックが明確である必要があります。塗りつぶしボタンと概要ボタンは同じグループで使用できますが、アクションの階層を明確にする必要があります。
すべきこと
すべきでないこと
注意
