すべてこのページ上で実際に動くサンプルです。「名前 → 説明 → 実物 → どこで見られるか」の順で確認してください。ボタンやアコーディオンは実際に触って動きを確かめられます。
コンテンツを「ひとかたまり」に見せて、視線の流れを整理するコンポーネント群。
ページを開いて最初に目に入る大きな見出しエリア。キャッチコピー＋説明＋行動ボタン（CTA）の3点セットが定番構成。ここで「何のサイトか」を3秒で伝えます。
1.2kgの最軽量コードレス掃除機。今なら30日間返品無料。
ほぼすべてのサービスLP（ランディングページ）や企業サイトのトップ。
画像＋見出し＋説明を1枚の枠にまとめた部品。角丸と薄い影で「1つのまとまり」を表現します。並べて一覧表示するのが典型的な使い方。
軽量1.2kg・40分駆動
自動ゴミ収集・地図学習
Netflixの作品一覧、メルカリの商品一覧、noteの記事一覧。
限られたスペースで複数の画像・バナーを横にスライドさせて見せる部品。下の点（インジケーター）が現在位置を示します。点をクリックすると切り替わります↓
楽天・Yahoo!トップのバナー、App Storeの特集、Instagramの複数枚投稿。
見出しをタップすると中身が開閉する部品。長い情報を畳んでページをすっきり見せます。楽器のアコーディオンのように伸び縮みするのが由来。実際に開閉できます↓
FAQ（よくある質問）ページの定番。デジタル庁デザインシステムにも収録。
データが空のときに表示する画面。ただ「0件」と出すのではなく、次にやるべき行動へ誘導するのが良い設計とされます。
気になる商品を追加して、買い物を始めましょう。
カートが空のEC、メッセージ0件の受信箱、初回起動時のアプリ。
クリック・入力・選択など、ユーザーの操作を受け取るコンポーネント群。状態（State）の設計が重要です。
UIの基本部品。重要度で使い分けます：プライマリー（最重要・塗り）、セカンダリー(次点・枠線)、テキストボタン（控えめ）、無効状態（Disabled）（今は押せない）。1画面にプライマリーは原則1つ。
あらゆる画面。Material Designでは「Filled／Outlined／Text」と呼びます。
入力欄の集合。ラベル・必須マーク・ヘルプテキスト・エラーメッセージがセットです。エラーは「その場で・赤く・直し方まで」示すのがエラー防止の定石。
会員登録、ログイン、お問い合わせ、決済画面。
キーワード入力＋検索ボタンの組み合わせ。プレースホルダー（薄い例文テキスト）で入力例を示すのが定番。虫眼鏡アイコン🔍とセットで使われます。
Google、Amazonのヘッダー、YouTubeの上部。
ON／OFFを1タップで切り替えるスイッチ。チェックボックスと違い「即座に反映される設定」に使うのが原則です。実際に切り替えられます↓
iPhone／Androidの設定画面、アプリの通知設定。
ボタンを押すと選択肢のリストが垂れ下がって表示される部品。画面を占有せず多くの選択肢を格納できます。削除など危険な操作は赤字にするのが定石。
Gmail右上のアカウントメニュー、GitHubの「…」メニュー。
丸みのある小さなボタン状の部品。フィルター条件や選択タグを表します。選択状態で色が変わり、×で外せるものもあります。クリックで選択できます↓
食べログ・ホットペッパーの絞り込み、Google検索下の関連キーワード、Material Design収録。
画面右下に浮いている円形ボタン。その画面で最も重要なアクション（新規作成など）を1つだけ置きます。Material Design発祥の代表的パターン。
メール一覧画面（のつもり）…
Gmailの「作成」ボタン、Googleマップの現在地ボタン、Xの投稿ボタン。
進捗・件数・読み込み中など、システムの状態をユーザーに知らせるコンポーネント群。ヒューリスティクス第1原則「システム状態の可視化」に直結します。
バッジはアイコンの角に付く未読件数などの小さな通知。ラベルは「NEW」「SALE」など状態を示す小さな札。どちらも一目で状態を伝えます。
LINEアプリアイコンの未読数、ECの「NEW」「残りわずか」表示。
複数ステップの手続きで「今どこ・あと何歩」を示す部品。完了・現在・未完了を色分けします。長いフォームの離脱防止に効果的。
ECの購入手続き、会員登録ウィザード、確定申告サイト。
読み込み中にコンテンツの「骨組み」をグレーで先に表示する手法。真っ白な画面やくるくるより体感待ち時間が短く感じられます。下はアニメーション中です↓
YouTube・Facebookの読み込み中画面、Netflixのサムネイル読み込み。
アイコンなどにカーソルを乗せると出る小さな補足説明。画面を汚さずに補助情報を提供できます。「?」にマウスを乗せてみてください↓
決済フォームの「?」アイコン、Googleドキュメントのツールバー。
「押した結果どうなったか」を伝えるコンポーネント群。エラー防止・ユーザーコントロールの原則と深く関わります。
画面の上に重ねて表示し、背景を暗くして操作をいったん止めるウィンドウ。削除確認など「今すぐ判断してほしいこと」に使います。乱用すると邪魔になるので注意。
削除確認、ログイン促進、Cookieの同意、画像の拡大表示（ライトボックス）。
画面の隅に数秒だけ出て自動で消える通知。操作を邪魔せず結果を伝えます。「元に戻す」リンクを添えると、ユーザーコントロールの原則も満たせます。
Gmailの「送信しました・取消」、スマホの「クリップボードにコピーしました」。
部品名というより「ユーザーに取ってほしい行動へ誘導するボタン・エリア」の役割名。「無料で始める」「資料請求」など。目立つ色・具体的な動詞ラベルが鉄則で、A/Bテストの主戦場です。
30日間無料でお試しいただけます
クレジットカード登録は不要です
LPの随所、Netflixトップの「今すぐ始める」、SaaSサイトの「無料トライアル」。