ANA CX Sprint

共通コンポーネント使用例

プロジェクトで利用可能な全ての共通コンポーネントの使用例とバリエーションを紹介します

Button（ボタン）
様々なスタイルとサイズのボタンコンポーネント

バリエーション

サイズ

状態

Card（カード）
コンテンツをグループ化するためのカードコンポーネント
基本的なカード
カードの説明文がここに入ります

カードのコンテンツエリア

アクション付きカード
右上にアクションボタンがあるカード

アクション付きのカードコンテンツ

Form Controls（フォームコントロール）
入力フィールドと選択コンポーネント
Feedback（フィードバック）
ユーザーへの情報表示コンポーネント

60% 完了

Display（表示）
バッジ、アバター、スケルトンなどの表示コンポーネント
DefaultSecondaryDestructiveOutline
田中佐藤山田
Navigation（ナビゲーション）
ナビゲーション関連のコンポーネント
Overlays（オーバーレイ）
ダイアログ、ポップオーバー、ツールチップなど
Layout（レイアウト）
レイアウト関連のコンポーネント

上部コンテンツ

説明文

下部コンテンツ

説明文

16:9 のアスペクト比

スクロール可能なコンテンツ 1
スクロール可能なコンテンツ 2
スクロール可能なコンテンツ 3
スクロール可能なコンテンツ 4
スクロール可能なコンテンツ 5
スクロール可能なコンテンツ 6
スクロール可能なコンテンツ 7
スクロール可能なコンテンツ 8
スクロール可能なコンテンツ 9
スクロール可能なコンテンツ 10
スクロール可能なコンテンツ 11
スクロール可能なコンテンツ 12
スクロール可能なコンテンツ 13
スクロール可能なコンテンツ 14
スクロール可能なコンテンツ 15
スクロール可能なコンテンツ 16
スクロール可能なコンテンツ 17
スクロール可能なコンテンツ 18
スクロール可能なコンテンツ 19
スクロール可能なコンテンツ 20
スクロール可能なコンテンツ 21
スクロール可能なコンテンツ 22
スクロール可能なコンテンツ 23
スクロール可能なコンテンツ 24
スクロール可能なコンテンツ 25
スクロール可能なコンテンツ 26
スクロール可能なコンテンツ 27
スクロール可能なコンテンツ 28
スクロール可能なコンテンツ 29
スクロール可能なコンテンツ 30
スクロール可能なコンテンツ 31
スクロール可能なコンテンツ 32
スクロール可能なコンテンツ 33
スクロール可能なコンテンツ 34
スクロール可能なコンテンツ 35
スクロール可能なコンテンツ 36
スクロール可能なコンテンツ 37
スクロール可能なコンテンツ 38
スクロール可能なコンテンツ 39
スクロール可能なコンテンツ 40
スクロール可能なコンテンツ 41
スクロール可能なコンテンツ 42
スクロール可能なコンテンツ 43
スクロール可能なコンテンツ 44
スクロール可能なコンテンツ 45
スクロール可能なコンテンツ 46
スクロール可能なコンテンツ 47
スクロール可能なコンテンツ 48
スクロール可能なコンテンツ 49
スクロール可能なコンテンツ 50
Interactive（インタラクティブ）
アコーディオン、タブ、トグル、折りたたみなど

タブ 1 のコンテンツです。

Data Display（データ表示）
テーブルとカレンダーコンポーネント
サンプルデータテーブル
名前メール役職給与
田中太郎tanaka@example.comエンジニア¥500,000
佐藤花子sato@example.comデザイナー¥480,000
山田次郎yamada@example.comマネージャー¥600,000
September 2025
Advanced Components（高度なコンポーネント）
カルーセル、チャート、コマンドパレットなどの高度なコンポーネント
1
2
3
4
5
パネル 1
パネル 2A
パネル 2B
Specialized Inputs（特殊な入力コンポーネント）
OTP入力などの特殊な入力フィールド
Menu Components（メニューコンポーネント）
メニューバー、ナビゲーション、コンテキストメニューなど
右クリックしてメニューを表示
Extended Overlays（拡張オーバーレイ）
ドロワー、サイドバー、通知などの追加オーバーレイコンポーネント