tasq/.claude/skills/material-thinking/references/components.md

Material 3 Components

Material 3は38のドキュメント化されたコンポーネントを提供します。各コンポーネントには、概要、ガイドライン、仕様、アクセシビリティのサブページがあります。

Table of Contents

1. Action Components
2. Selection and Input Components
3. Navigation Components
4. Containment and Layout Components
5. Communication Components

---

Action Components

ユーザーがアクションを実行するためのコンポーネント。

Buttons

Common Buttons

主要なアクションのための標準的なボタン。

Variants:

• Filled: 最も高い強調度、プライマリアクション
• Filled Tonal: 中程度の強調度、セカンダリアクション
• Outlined: 線のみ、中程度の強調度
• Elevated: 影付き、強調が必要だがFilledほどではない
• Text: 最も低い強調度、補助的なアクション

Usage Guidelines:

• 1つの画面にFilledボタンは1つまで推奨
• ボタンの階層を明確に（Filled > Tonal > Outlined > Text）
• 最小タッチターゲット: 48×48dp
• ラベルは動詞で開始（例: "保存", "送信", "削除"）

URL: https://m3.material.io/components/buttons/overview

Icon Buttons

コンパクトな補助的アクションボタン。

Variants:

• Standard
• Filled
• Filled Tonal
• Outlined

Usage:

• 繰り返し使用されるアクション（お気に入り、共有、削除）
• 限られたスペース
• アイコンのみで意味が明確な場合

URL: https://m3.material.io/components/icon-buttons/overview

Floating Action Button (FAB)

画面の主要アクションのための浮遊ボタン。

Types:

• FAB: 標準的なFAB
• Small FAB: 小さいFAB
• Large FAB: 大きいFAB
• Extended FAB: テキストラベル付きFAB

Guidelines:

• 1画面に1つのFAB推奨
• 最も重要なアクションのみ
• 配置: 通常は右下
• スクロール時の動作を考慮（隠す/縮小）

URL: https://m3.material.io/components/floating-action-button/overview

Segmented Buttons

関連するオプションの単一選択または複数選択グループ。

Usage:

• ビューの切り替え（リスト/グリッド）
• フィルタリング（カテゴリ選択）
• 設定オプション

Guidelines:

• 2-5個のオプション推奨
• 各オプションは簡潔に（1-2語）
• アイコン+テキストまたはテキストのみ

URL: https://m3.material.io/components/segmented-buttons/overview

---

Selection and Input Components

ユーザーが選択や入力を行うためのコンポーネント。

Checkbox

リストから複数のアイテムを選択。

States:

• Unchecked
• Checked
• Indeterminate（部分選択）

Usage:

• 複数選択
• オン/オフ設定（ただしSwitchの方が適切な場合も）
• リスト項目の選択

URL: https://m3.material.io/components/checkbox/guidelines

Radio Button

セットから1つのオプションを選択。

Usage:

• 相互排他的なオプション（1つのみ選択可能）
• すべてのオプションを表示する必要がある場合
• 2-7個のオプション推奨

Guidelines:

• デフォルト選択肢を提供
• オプションは垂直に配置推奨
• ラベルはクリック可能に

URL: https://m3.material.io/components/radio-button/overview

Switch

バイナリのオン/オフ切り替え。

Usage:

• 即座に効果が反映される設定
• 単一アイテムの有効/無効化
• リスト内の個別項目の切り替え

vs Checkbox:

• Switch: 即座に効果、状態の切り替え
• Checkbox: 保存が必要、複数選択

URL: https://m3.material.io/components/switch/guidelines

Text Fields

テキスト入力用のフォームフィールド。

Types:

• Filled: デフォルト、背景塗りつぶし
• Outlined: 線のみ、フォーム内で推奨

Elements:

• Label: 入力内容の説明
• Input text: ユーザー入力
• Helper text: 補助的な説明
• Error text: エラーメッセージ
• Leading/Trailing icons: アイコン

Guidelines:

• ラベルは簡潔に
• プレースホルダーは補助的な例として使用
• エラーは具体的に（"無効な入力" ではなく "有効なメールアドレスを入力してください"）

URL: https://m3.material.io/components/text-fields/overview

Chips

コンパクトな情報要素。

Types:

• Assist: アクションやヘルプのサジェスト
• Filter: コンテンツのフィルタリング
• Input: ユーザー入力（タグ、連絡先）
• Suggestion: 動的な提案

Usage:

• タグや属性の表示
• フィルタリングオプション
• 選択されたアイテムの表示

URL: https://m3.material.io/components/chips/guidelines

Sliders

範囲内の値を選択。

Types:

• Continuous: 連続的な値
• Discrete: 離散的な値（ステップ付き）

Usage:

• 音量、明るさ調整
• 価格範囲選択
• 数値設定

URL: https://m3.material.io/components/sliders/specs

Date Pickers / Time Pickers

日付と時刻の選択。

Date Picker Modes:

• Modal: ダイアログ形式
• Docked: インライン表示

Time Picker Types:

• Dial: ダイヤル形式
• Input: テキスト入力形式

URL: https://m3.material.io/components/date-pickers

---

Navigation Components

アプリ内のナビゲーションを提供するコンポーネント。

Navigation Bar

モバイル向けボトムナビゲーション。

Guidelines:

• 3-5個の主要な目的地
• アイコン+ラベル（アイコンのみは避ける）
• 常に表示（スクロールしても固定）
• Compact window size class向け

URL: https://m3.material.io/components/navigation-bar/overview

Navigation Drawer

サイドナビゲーション。

Types:

• Standard: 画面端から開閉
• Modal: オーバーレイ形式

Usage:

• 5個以上の目的地
• Medium/Expanded window size class
• アプリの主要セクション

URL: https://m3.material.io/components/navigation-drawer/overview

Navigation Rail

垂直方向のナビゲーション（中型画面）。

Usage:

• Medium window size class（タブレット縦向き）
• 3-7個の目的地
• 画面左端に固定

URL: https://m3.material.io/components/navigation-rail/overview

Top App Bar

画面上部のタイトルとアクション。

Types:

• Small: 標準的なアプリバー
• Medium: 中サイズ（スクロールで縮小）
• Large: 大サイズ（スクロールで縮小）

Elements:

• Navigation icon: 戻る、メニュー
• Title: 画面タイトル
• Action icons: 主要なアクション（最大3つ推奨）

URL: https://m3.material.io/components/app-bars/overview

Tabs

コンテンツを複数のビューに整理。

Types:

• Primary tabs: メインコンテンツの切り替え
• Secondary tabs: サブセクションの切り替え

Guidelines:

• 2-6個のタブ推奨
• ラベルは簡潔に（1-2語）
• スワイプジェスチャーでの切り替えをサポート

URL: https://m3.material.io/components/tabs/guidelines

---

Containment and Layout Components

コンテンツを整理・表示するためのコンポーネント。

Cards

関連情報をまとめたコンテナ。

Types:

• Elevated: 影付き
• Filled: 背景塗りつぶし
• Outlined: 線のみ

Usage:

• 異なるコンテンツのコレクション
• アクション可能なコンテンツ
• エントリーポイント

Guidelines:

• 過度に使用しない（リストで十分な場合も）
• 明確なアクションを提供
• 情報の階層を維持

URL: https://m3.material.io/components/cards/guidelines

Lists

垂直方向のテキストと画像のインデックス。

Types:

• Single-line
• Two-line
• Three-line

Elements:

• Leading element: アイコン、画像、チェックボックス
• Primary text: メインテキスト
• Secondary text: サブテキスト
• Trailing element: メタ情報、アクション

Usage:

• 同質なコンテンツのコレクション
• スキャン可能な情報
• 詳細へのエントリーポイント

URL: https://m3.material.io/components/lists/overview

Carousel

スクロール可能なビジュアルアイテムのコレクション。

Types:

• Hero: 大きい、フォーカスされたアイテム
• Multi-browse: 複数アイテム表示
• Uncontained: フルブリード

Usage:

• 画像ギャラリー
• プロダクトショーケース
• オンボーディング

URL: https://m3.material.io/components/carousel/overview

Bottom Sheets / Side Sheets

追加コンテンツを表示するサーフェス。

Types:

• Standard: 永続的、画面の一部
• Modal: 一時的、フォーカスが必要

Bottom Sheet Usage:

• コンテキストアクション
• 追加オプション
• Mobile向け

Side Sheet Usage:

• 詳細情報、フィルタ
• Tablet/Desktop向け

URL: https://m3.material.io/components/bottom-sheets/overview

---

Communication Components

ユーザーにフィードバックや情報を伝えるコンポーネント。

Dialogs

ユーザーアクションが必要な重要なプロンプト。

Types:

• Basic: タイトル、本文、アクション
• Full-screen: フルスクリーンダイアログ（モバイル）

Usage:

• 重要な決定（削除確認など）
• 必須の情報入力
• エラーや警告

Guidelines:

• タイトルは質問形式推奨
• アクションは明確に（"削除"、"キャンセル"）
• 破壊的なアクションは右側に配置しない

URL: https://m3.material.io/components/dialogs/guidelines

Snackbar

プロセスの簡潔な更新を画面下部に表示。

Usage:

• 操作完了の確認（"メッセージを送信しました"）
• 軽微なエラー通知
• オプショナルなアクション提供

Guidelines:

• 表示時間: 4-10秒
• 1行のメッセージ推奨
• 最大1つのアクション
• 重要な情報には使用しない（Dialogを使用）

URL: https://m3.material.io/components/snackbar/overview

Badges

ナビゲーション項目上の通知とカウント。

Types:

• Numeric: 数値表示（1-999）
• Dot: ドット表示（新着あり）

Usage:

• 未読通知の数
• 新着コンテンツのインジケーター

URL: https://m3.material.io/components/badges/overview

Progress Indicators

進行中のプロセスのステータス表示。

Types:

• Circular: 円形、不定期または確定的
• Linear: 線形、確定的な進捗

Usage:

• Circular: ローディング、処理中
• Linear: ファイルアップロード、ダウンロード

Guidelines:

• 2秒以上かかる処理で表示
• 可能な限り確定的な進捗を使用
• 進捗率がわからない場合は不定期

URL: https://m3.material.io/components/progress-indicators/overview

Tooltips

コンテキストラベルとメッセージ。

Types:

• Plain: テキストのみ
• Rich: テキスト+アイコン/画像

Usage:

• アイコンボタンの説明
• 切り詰められたテキストの完全版
• 補助的な情報

Guidelines:

• 簡潔に（1行推奨）
• 重要な情報には使用しない
• タッチデバイスではlong press

URL: https://m3.material.io/components/tooltips/guidelines

Menus

一時的なサーフェース上の選択肢リスト。

Types:

• Standard menu
• Dropdown menu
• Exposed dropdown menu（選択状態を表示）

Usage:

• コンテキストメニュー
• 選択オプション
• アクションのリスト

Guidelines:

• 2-7個のアイテム推奨
• アイコンはオプション
• 破壊的なアクションは分離

URL: https://m3.material.io/components/menus/overview

Search

検索バーとサジェスト。

Elements:

• Search bar: 検索入力フィールド
• Search view: 全画面検索インターフェース

Usage:

• アプリ内検索
• フィルタリング
• サジェスト表示

URL: https://m3.material.io/components/search/overview

---

Component Selection Guide

Action Selection

Need	Component
Primary screen action	FAB or Filled Button
Secondary action	Tonal/Outlined Button
Tertiary action	Text Button
Compact action	Icon Button
Toggle between 2-5 options	Segmented Button

Input Selection

Need	Component
Single choice from list	Radio Button
Multiple choices	Checkbox
On/Off toggle	Switch
Text input	Text Field
Date selection	Date Picker
Value from range	Slider
Tags or attributes	Input Chips

Navigation Selection

Window Size	Primary Nav	Secondary Nav
Compact (<600dp)	Navigation Bar	Tabs
Medium (600-840dp)	Navigation Rail	Tabs
Expanded (>840dp)	Navigation Drawer	Tabs, Top App Bar

---

References

• Material Design 3 Components: https://m3.material.io/components/
• All Components List: https://m3.material.io/components/all-buttons