選択 / 入力コントロール
15 種類目的
ON/OFFのように、2つの状態を即時に切り替えるためのUI。設定画面の通知オン/オフなど。
特徴
操作が即時に反映される。確認ステップが不要な場合に使う。チェックボックスと異なり「今すぐ適用」の意味合いが強い。
名称の由来
物理的なトグルスイッチ（照明のオン/オフスイッチ）が由来。
目的
複数の選択肢から0個以上を選ぶとき。フォームの同意確認や複数選択フィルターなど。
特徴
複数同時選択が可能。チェックを入れるだけで選択状態が視覚的にわかる。
名称の由来
紙の書類に「✓」を記入するチェックボックスが由来。
選択肢 A
選択肢 B
選択肢 C
目的
複数の選択肢から1つだけ選ぶためのUI。支払い方法や性別などの排他的な選択に使う。
特徴
選択肢の中の1つを選ぶと他が自動で解除される排他制御が特徴。
名称の由来
古いカーラジオのプリセットボタン（1つ押すと他の押されていたボタンが飛び出て選択が解除される）が由来。
選択肢 A
選択肢 B
選択肢 C
目的
数値を連続的に調整するとき。音量 / 明るさ / 価格帯フィルターなど。
特徴
正確な数値入力より「大体この辺り」という感覚的な調整に向く。範囲選択の2ハンドル型もある。
名称の由来
物理的なスライド式ボリュームツマミが由来。
目的
少数（2〜5個）の排他的な選択肢を切り替えるとき。表示切替（月/週/日）やビュー切替など。
特徴
全選択肢が常に見えているため、何が選べるかが一目瞭然。タブより小さいエリアに収めたいときに有効。
名称の由来
操作/機能（コントロール）ごとに分割（セグメント）された見た目から。
目的
文字 / 数字などの自由入力を受け取るためのUI。名前 / メール / 検索ワードなど。
特徴
もっとも基本的な入力UI。type属性（email/password/number等）でバリデーションを制御できる。
目的
テキスト入力と同じ用途。入力前はラベルがプレースホルダー的に表示される。入力時はラベルが上部へ移動し、入力エリアを確保する。
特徴
ラベルとプレースホルダーを兼ねるためスペース効率が高い。Material Designで広まったパターン。
名称の由来
フォーカス時にラベルが「浮かび上がる（floating）」動きから。
目的
数値を1ずつ増減させるときに使うUI。数量指定 / フォントサイズ調整など。
特徴
直接入力より誤入力が少なく、小さな数値範囲の調整に向く。スライダーが「おおよその値」ならステッパーは「正確な値」用。
名称の由来
一定の刻み幅で段的に増減させる動作から。
1
目的
テキスト入力でコンテンツを絞り込むためのUI。サイト内検索 / フィルタリングなど。
特徴
虫眼鏡アイコンで検索の意味を視覚化するのが定番。入力中にサジェストを表示するライブサーチも一般的。
目的
ファイルをドラッグ＆ドロップで受け取るエリア。画像アップロード / CSV読み込みなど。
特徴
ファイルを直接エリアに放り込むことができるので、直感的に操作できる。ドラッグ中は、枠線や背景色を変えるなど、覚的なフィードバックが必要。クリックでの代替手段も併設するのが親切。
名称の由来
ファイルを「落とす（drop）領域（zone）」という動作の説明がそのまま名前になっている。
ファイルをドロップ
またはクリックして選択
目的
カレンダーから日付を選択するときに使われる。予約 / フィルタリング / 生年月日入力など。
特徴
テキスト入力より誤入力が少なく、日付の文脈（曜日など）がわかる。日付範囲選択（Range Picker）も一般的。
名称の由来
日付（date）を選び取る（pick）という動作から。
2026年4月
日
月
火
水
木
金
土
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
目的
選択肢が多い場合にスペースを節約しながら1つ選ぶためのUI。都道府県 / カテゴリ選択など。
特徴
クリックするまで選択肢が隠れているため、画面をすっきり保てる。選択式なので表記揺れや誤入力を防げる。
名称の由来
ドロップダウン→選択肢のリストが「下に落ちてくる（drop down）」の動きから。プルダウン→選択肢のリストを「下に引っ張る（pull down）」の動きから。セレクトボックス→選択肢を選ぶための箱（box）から。
目的
選択肢が多いとき、グループ（optgroup）でカテゴライズして選びやすくするとき。
特徴
HTMLのoptgroup要素を使いカテゴリ見出しを挿入。グループ名は選択できない。
目的
複数の選択肢を同時に選べるようにするとき。タグ選択 / スキル入力など。
特徴
Ctrl/Cmd クリックで複数選択。複雑な操作が必要なため、チップ型UIの方がUXが良い場合も多い。
目的
テキスト入力と選択肢リストを組み合わせ、入力に応じて候補を絞り込むときに使われる。検索 / 住所入力など。
特徴
自由入力と選択の両方に対応。オートコンプリートやサジェスト機能と組み合わせることが多い。
名称の由来
テキストボックスとリストボックスを組み合わせた（combo）UIの意。
東京
東大阪
東広島
目的
サイト全体で共通して表示されるメインナビゲーション。どのページからでも主要セクションへ移動できるようにするためのUI。
特徴
全ページで一貫して表示されることで、ユーザーが現在地を把握しやすくなる。「グロナビ」と略されることも多い。
名称の由来
サイト全体（グローバル）に共通するナビゲーションの意。
ページコンテンツ
目的
大規模サイトで多数のリンクを整理して一度に見せたいとき。ECサイトのカテゴリメニューなど。
特徴
ホバーやクリックで大きなパネルが展開し、複数カラムで多くのリンクを整理して表示できる。
名称の由来
通常のドロップダウンより大きい（mega）パネルで多くのメニューを一覧表示できることから。
デザイン
UI キット
コンポーネント
テンプレート
開発
API ドキュメント
SDK
Webhooks
サポート
ヘルプセンター
コミュニティ
ステータス
「機能」をクリックするとメガメニューが開きます
目的
アプリや管理画面で、画面左端に常時表示する主要ナビゲーション。ダッシュボードや設定画面など。
特徴
全機能への導線を常に見せておける。現在のセクションを強調表示することで現在地を示す。
名称の由来
画面の側面（side）に位置するバー状のナビゲーションから。
目的
サイドバーと同用途だが、画面スペースを節約したいとき。アイコンのみで表示し、ホバーでラベル表示する形もある。
特徴
コンテンツ表示エリアを最大化しつつナビゲーションを保持できる。ツールチップでアイコンの意味を補足することが多い。
名称の由来
サイドバーを折りたたんだ（collapsed）状態から。
目的
フィルター / 設定 / 詳細情報など補助的なコンテンツを必要なときだけ画面の端からスライドイン表示するときに使われる。
特徴
メインコンテンツを隠さずに補助パネルを表示できる。モバイルではハンバーガーメニューを押したときに展開する形でもよく使われる。
名称の由来
引き出し（drawer）のように端から引き出して、隠れていたコンテンツが現れる動きから。
フィルター
カテゴリ
日付範囲
ステータス
目的
モバイルアプリで主要セクション（3〜5つ）間の移動を親指で行いやすくするとき。
特徴
画面下部に固定されるため親指が届きやすい。アイコン＋ラベルで現在地を示す。タブバーとも呼ばれる。
名称の由来
iOS/Androidのアプリで普及したパターン。Material Designでも定義されている。
コンテンツ
目的
モバイル画面上部に画面タイトル / 戻るボタン / 主要アクションを配置するときに使われる。
特徴
戻るナビゲーションとページタイトルを一行に収めることでモバイルの縦スペースを効率よく使える。
名称の由来
Material Designの用語。iOSではナビゲーションバー（Navigation Bar）と呼ばれる。
目的
スクロールしても常に上部に表示し続けたいヘッダーやナビゲーション / テーブルヘッダーなどで使われる。
特徴
スクロールしても見出しやナビが消えないため、長いページでもコンテキストを失いにくい。
名称の由来
粘着する（sticky）ヘッダーの意。CSSの position: sticky で実装する。
スクロールしても固定されます
コンテンツが続きます。スクロールするとヘッダーが上部に固定されたまま画面内に留まります。長いページやテーブルでよく使われるパターンです。コンテンツコンテンツコンテンツ。
目的
サイドバー内などで手順やフォームの進捗を縦方向に表示するとき。設定ウィザードや申請フローなど。
特徴
水平ステッパーより1ステップあたりの説明文を長く書けるため、複雑なフローに向く。
アカウント作成
2
プロフィール設定
3
完了
フィードバック / オーバーレイ
6 種類目的
操作結果を一時的に通知するとき。保存完了 / 送信成功 / エラーなど。数秒後に自動消滅する。
特徴
ユーザーの操作を妨げずに通知できる。自動で消えるため確認操作が不要。画面端（主に下部）に表示。
名称の由来
トースターからパンが飛び出る様子に見た目が似ていることから。
保存しました
目的
トーストと同様の一時通知だが、「元に戻す」などのアクションボタンを伴うことが多い。
特徴
Material Designで定義されたコンポーネント。画面下部中央に表示されることが多く、1つのアクションまで持てる。
名称の由来
Material Designが命名。スナック（軽食）のように、短時間で「ひと口サイズの情報」を確認できる意。スナックバーの細長い形が由来になっている説もある。
目的
重要な確認 / 警告 / フォームなど、ユーザーに必ず応答させたいときに使われる。背景を暗くしてフォーカスを集中させる。
特徴
他の操作をブロックするため重要なアクションの確認に向く。閉じるまで背後のコンテンツを操作できない。
名称の由来
「モーダル（modal）」はコンピュータ用語で「特定のモードに入った状態」の意。ダイアログとも呼ばれる。
確認
この操作は取り消せません。続けますか？
目的
アイコンや略称など、補足説明が必要な要素にホバーしたときに簡単な説明を表示するためのUI。
特徴
ホバー時にのみ表示され、常時表示を避けることで画面をすっきり保てる。長文には不向き。
名称の由来
道具（tool）の使い方を示す補足情報（tip）の意。
ホバーして
説明テキストです
目的
リストや検索結果が空のときに、ただ空白の画面を表示するのではなく、コンテキストに合ったメッセージやアクションを提示したいときに使われる。
特徴
イラスト / タイトル / 説明文 / CTAボタンで構成されることが多い。「何もない状態」をポジティブに設計することでUXが向上する。
名称の由来
コンテンツが空（empty）の状態（state）を示すUIの意。ゼロステートとも呼ばれる。
まだ通知はありません
新しい通知が届くとここに表示されます
目的
既存のコンテンツに重ねて情報を表示するときに使われる。画像上のテキスト / ホバー時の説明 / 暗幕など。
特徴
オーバーレイは画面全体を覆う形。モーダル背景の暗幕もオーバーレイの一種。
名称の由来
Overlay=「上に重ねる」という英語の動詞がそのまま名称に。
ローディング
2 種類目的
コンテンツの読み込み中に、実際のレイアウト形状をグレーのプレースホルダーで示すことで、どんなコンテンツが表示されるかをユーザーが予測できるようにするためのUI。
特徴
従来のスピナー（くるくる）より「もうすぐ表示される」感が伝わり、体感速度が速く感じられる。
名称の由来
コンテンツが抜けた骨格（skeleton）だけの画面の意。シマーアニメーションで動きを付けることが多い。
目的
処理中 / 読み込み中であることをユーザーに伝えるときに使われる。次に何が表示されるかが不明な場合や、処理中であることを表すときに使われる。
特徴
回転するアイコン（スピナー）や点滅するドット（ドットローダー）が一般的。処理が終わり次第消える。
名称の由来
待機状態（loading）と回転する動き（spin）がそのまま名前になっている。
ラベル / タグ / インジケーター
6 種類目的
ステータス / カテゴリ / ラベルなどを小さなタグとして付与するときに使われる。
特徴
色とテキストで情報を一目で伝えられる。背景色でカテゴリや重要度を区別することが多い。
名称の由来
タグ（下げ札） / ラベル（衣服につける細い布帯）が由来。
デザイン
完了
要対応
保留
目的
フィルタリング / タグ付け / 選択された項目の表示などに使われる。インタラクティブに選択 / 削除できるラベルとして使う。
特徴
選択 / 削除（×ボタン） / グループ操作が可能。入力フィールドと組み合わせてタグ入力UIを作ることも多い。
名称の由来
Chip は小さな破片の意。Pill は丸みのある錠剤型の形状から。
UX ×
UI
デザイン
目的
アイコン上に未読 / 未処理の件数を重ねて表示するときに使われる。アプリアイコンの通知やカート内商品の数量など。
特徴
コンテンツを邪魔せずに数値を伝えられる。99+のように上限表示することが多い。赤丸のみ（数字なし）はドットバッジと呼ぶ。
名称の由来
服飾のバッジ（徽章）のイメージから。
3
99+
目的
オンライン/オフライン、処理中/完了など、状態を一目で伝えるときに使われる。
特徴
小さなドット（点）で状態を色分けするシンプルな形が多い。テキスト説明と組み合わせて使うことが多い。
オンライン
離席中
オフライン
目的
ファイルアップロード / 処理の進行状況など、全体のうちどれだけ処理が完了したかを示すときに使われる。
特徴
進捗の割合が視覚的にわかるため、ユーザーの待機ストレスを軽減できる。完了率が不明な場合はローディングスピナーを使う。
アップロード中72%
処理中34%
目的
評価を星 / ハートなどで視覚的に表示 / 入力するとき。商品レビュー / 満足度調査など。
特徴
表示専用と入力可能の2種類がある。半星 / 連続値対応もある。5段階が最も一般的。
リンク
5 種類目的
文章中や画面内で別のページや情報へ誘導するときに使われる。もっとも基本的なリンクの形。
特徴
下線＋アクセントカラーで識別するのが一般的。マウスホバー時に色を変えることでンタラクティブ性を伝える。
利用規約を読む
詳細はこちら
目的
外部サイトへ遷移することをユーザーにあらかじめ伝えるときに使われるアイコン。同じようなアイコンを使い「新しいタブで開く」ことを示すこともある。この場合の UI は Open In New と呼ばれる。
特徴
↗ アイコンを付けることで「外部サイトへ移動する」ことを視覚的に示す。
公式ドキュメント
目的
リンク先の内容や種類（PDFダウンロード / メールなど）をアイコンで補足するとき。
特徴
リンクテキストの内容の省略形として理解できるアイコンの場合に有効。アイコンを併用することでテキストだけより直感的に伝わる。
目的
ナビゲーション内のリンク。下線をなくし、ホバーで背景色を付けてボタンに近い見た目にすることが多い。
特徴
テキストリンクとボタンの中間的な存在。メニューやサイドバーのリンクに多い。当ページ左サイドバーのTOCもナビリンクになっている。
ホーム
ブログ
お問い合わせ
目的
同一ページ内の特定セクションにスクロール移動するときに使われる。目次リンクなどに使う。
特徴
ページ遷移なしに移動できる。当ページの左サイドバーのTOCもアンカーリンクになっている。
名称の由来
アンカー（錨）のように特定の場所に固定（定着）させ、そこへジャンプすることから。
はじめに
使い方
よくある質問
データ表示
6 種類目的
複数の項目を行と列で整理して比較しやすくするときに使われる。管理画面 / レポート / 一覧系の画面など。テーブル内の値に対し、ソートやフィルタリングなどの操作をつけた表は「データテーブル」と呼ばれることが多い。
特徴
ヘッダー行で列の意味を示し、各行がデータの1件に対応する。
| 名前 | 役割 | 状態 |
|---|---|---|
| 田中 | デザイナー | 進行中 |
| 鈴木 | エンジニア | 完了 |
| 佐藤 | PM | 保留 |
目的
行数が多いテーブルで、行の視認性を高めるときに使われる。
特徴
偶数行 / 奇数行で背景色を交互に変える。「ゼブラストライプ」とも呼ばれる。
名称の由来
縞様様（stripe）/ シマウマ（zebra）の縞に見えることから。
| 商品 | 価格 | 在庫 |
|---|---|---|
| A | ¥1,200 | 12 |
| B | ¥3,400 | 5 |
| C | ¥800 | 28 |
| D | ¥2,100 | 9 |
目的
行をクリックまたは選択できるテーブルで、現在フォーカスしている行を視覚的に示したいときに使われる。
特徴
マウスホバーした行が背景色で強調される。クリックで詳細表示や編集に遷移するUIでよく使われる。
| タイトル | 更新日 |
|---|---|
| デザイン基礎 | 04/10 |
| UX設計入門 | 04/12 |
| プロトタイプ | 04/14 |
目的
関連する情報をひとまとまりに見せるコンテナ。商品一覧 / ブログ記事サムネイル / プロフィールなど。
特徴
枠 / 影 / 背景色でグループ化を視覚化する。グリッドで並べることで情報の比較がしやすくなる。
名称の由来
名刺 / トランプ / 索引カードのように「1枚に1件の情報」を収めるカードが由来。
キャットフード
ねこや本舗 · ¥1,200
目的
複数の項目を縦に並べて表示するとき。設定画面 / 連絡先 / メニュー一覧など。
特徴
多数の項目をコンパクトに表示できる。各行にアイコン / テキスト / アクションを組み合わせることが多い。
お気に入り猫›
猫の写真集›
写真集›
目的
一覧の並び順をユーザーが変えられるようにするためのUI。価格順 / 新着順 / 評価順など。
特徴
昇順/降順の切替が基本。テーブルのヘッダークリックで列ソートする方式もよく使われる。
価格↑
キャットフード¥800
猫じゃらし¥1,200
爪とぎ¥3,500
エラー / 通知バナー
6 種類目的
操作の失敗 / システムエラーなど重要な問題をページ内に常時表示するときに使われる。
特徴
赤系の背景色で緊急性を伝える。アイコン / タイトル / 説明文で構成。必要に応じてアクションリンクも持てる。
目的
問題ではないがユーザーに注意を促したいときに使われる。期限切れ / 非推奨機能の通知など。
特徴
黄色系で「注意」を示す。エラーより低い重要度。ユーザーのアクションを強制しない。
目的
操作が正常に完了したことをページ内で伝えるときに使われる。フォーム送信完了 / 設定保存など。
特徴
緑系で「成功 / 完了」を示す。トーストより目立つ位置（フォーム上部など）に使うことが多い。
目的
ユーザーに知っておいてほしい情報（お知らせ / ヒント / 変更通知）を伝えるとき。
特徴
青系でニュートラルな情報を示す。エラーでも警告でもない中立的な通知に使う。
目的
フォーム入力欄のバリデーションエラーを、該当フィールドの直下に表示するとき使われるときに使われる。
特徴
ボーダーを赤くして問題箇所を示し、直下にエラーメッセージを表示。どこが間違っているかを即座に伝えられる。
正しいメールアドレスを入力してください
目的
入力値が正しいことをリアルタイムで伝え、ユーザーに安心感を与えるときに使われる。
特徴
ボーダーを緑にして入力完了を示す。パスワード設定やユーザー名重複チェックなどに特に有効。
使用できます
アコーディオン
4 種類目的
FAQや詳細情報など、デフォルトでは折りたたんでおき、必要なものだけ展開させたいときに使われる。
特徴
コンテンツを折りたたむことでページの見通しが良くなる。
名称の由来
楽器のアコーデオンのように蛇腹状に伸び縮みする動きから。
詳細を見る
展開されたコンテンツがここに表示されます。
目的
FAQやヘルプページで複数の質問を1つのグループとしてまとめるときに使われる。
特徴
全項目を囲む外枠があり、グループとして視覚的にまとまって見える。
料金プランは？
無料 / スタンダード / プロの3プランがあります。
解約はできますか？
いつでも解約可能です。
目的
外枠 / 背景なしで、区切り線のみのシンプルなアコーディオンが必要なときに使われる。
特徴
枠線をなくしページのコンテンツと一体化したすっきりした見た目。ドキュメントやLP内で使われることが多い。
名称の由来
外枠なしで同一平面上に（flush）に収まる見た目から。Bootstrapでの呼称。
配送について
全国翌日配送に対応しています。
返品ポリシー
到着後7日以内であれば返品可能です。
目的
カテゴリ→サブカテゴリのように階層構造のコンテンツを折りたたんで表示するとき。
特徴
親を開くと子アコーディオンが現れる。深くなりすぎるとユーザーが迷子になるため2階層程度までが推奨。
▸ デザイン
カルーセル
3 種類目的
バナー / 画像 / カードなど複数のコンテンツを限られたスペースに順番に表示するとき。
特徴
左右ボタンとドットインジケーターで操作。自動再生と手動操作を組み合わせることが多い。
名称の由来
回転木馬（carousel）のように要素がぐるぐる回ることから。スライダーとも呼ばれる。
‹
›
目的
商品画像ギャラリーなど、全スライドのサムネイルを一覧表示してダイレクトに選択できるようにするとき。
特徴
メイン表示の下にサムネイル列を配置。ECサイトの商品詳細ページでよく使われる。
A
B
C
目的
トップページのヒーローバナーなど、ユーザーの操作なしに複数コンテンツを自動で切り替えるとき。
特徴
自動再生と手動操作（ポーズ）を組み合わせる。アクセシビリティ上、停止ボタンの提供が推奨される。
メディア / アイコン
3 種類目的
ユーザーを視覚的に識別するアイコン。プロフィール写真 / コメント欄 / チームメンバー一覧など。
特徴
写真がない場合はイニシャルや汎用アイコンにフォールバックする。グループアバターは複数を重ねて表示する。
名称の由来
ヒンドゥー教の神の化身「アバタール」から。ゲーム / ネットの仮想キャラクターを指すようになり、UI でも用いられる。
cat-sniffer
A
B
C
目的
写真 / イラスト / 図などのビジュアルを表示するとき。ヒーロー画像 / サムネイル / アイコンなど。
特徴
alt属性によるアクセシビリティも重要。
alt="白猫が窓際で寝ている写真"
目的
ブラウザのタブ / ブックマーク / 検索履歴などにサイトを識別するための小さなアイコンを表示するとき。
特徴
16〜32pxと非常に小さいため、ロゴを縮小するのではなくシンボルだけに簡略化するのが基本。
名称の由来
Favorites（お気に入り）+ Icon の造語。Internet Explorer 5がブックマーク機能と共に広めた。
nekozukan.com
オンボーディング
2 種類目的
初回起動時に新規ユーザーにアプリの主要機能を説明するときに使われる。
特徴
全画面の説明スライドを数枚表示するのが典型的。スキップ可能にするのが UX の基本。コーチマークと違い画面遷移を伴うことが多い。
名称の由来
建物や施設を歩いて回る下見や見学（ウォークスルー）が由来。
目的
実際の画面上で特定のUI要素を強調し、操作方法を説明するとき。
特徴
オーバーレイで背景を暗くして対象をスポットライトで照らす形が多い。ウォークスルーと違い実画面のまま案内できるのが特徴。
名称の由来
スポーツのコーチが横でリアルタイムに指示するように、実際の操作をガイドするイメージから。
アプリ画面
ここから新しい作品を追加できます