見分け方
トーストとスナックバー、モーダルとダイアログのように、名前も見た目も似ているWebパーツの違いを表で比べる。
トースト・スナックバー・アラート・バナーの違い
どれも「何かを知らせる」部品。違いは、出る場所と、自分で消えるかどうか。
- トースト
- スナックバー
- アラート
- バナー
モーダル・ダイアログ・ボトムシート・ドロワーの違い
どれも画面の上に重なって出る。違いは、出てくる方向と、中に入れるもの。
- モーダル
- ダイアログ
- ボトムシート
- ドロワーメニュー
ツールチップ・ポップオーバー・ドロップダウン・コンテキストメニューの違い
どれも何かのそばに小さく重なって出る。違いは、開くきっかけと、中を操作できるかどうか。
- ツールチップ
- ポップオーバー
- ドロップダウンメニュー
- コンテキストメニュー
チェックボックス・ラジオボタン・トグルスイッチ・トグルボタンの違い
どれもオンとオフを選ばせる。違いは、いくつ選べるかと、いつ反映されるか。
- チェックボックス
- ラジオボタン
- トグルスイッチ
- トグルボタン
ラジオボタン・セレクトボックス・オートコンプリートの違い
どれも選択肢から1つ選ばせる。違いは、選択肢の数と、最初から見えているかどうか。
- ラジオボタン
- セレクトボックス
- オートコンプリート
タブ・アコーディオン・アンカーリンクの違い
どれも長い内容を区切って見せる。違いは、隠すかどうかと、同時にいくつ見えるか。
- タブ
- アコーディオン
- アンカーリンク
ハンバーガー・ドロワー・サイドバー・グローバルナビ・ボトムナビの違い
どれもサイト内を移動するためのメニュー。違いは、いつも見えているかと、画面のどこにあるか。
- ハンバーガーメニュー
- ドロワーメニュー
- サイドバー
- グローバルナビゲーション
- ボトムナビゲーション
バッジ・チップ・通知ドット・タグ入力の違い
どれも小さな札や丸を使う。違いは、何を示すかと、押したり入力したりできるか。
- バッジ
- チップ
- 通知ドット
- タグ入力
カード・パネル・ボックス・補足ボックスの違い
どれも枠で囲んだ箱。違いは、中に入れるものと、並べて使うかどうか。
- カード
- パネル
- ボックス
- 補足ボックス
ローディングスピナー・プログレスバー・スケルトンスクリーンの違い
どれも「待ってね」を伝える。違いは、進み具合が分かるかどうかと、何を先に見せるか。
- ローディングスピナー
- プログレスバー
- スケルトンスクリーン
ページネーションと無限スクロールの違い
どちらも長い一覧を小分けにして読み込む。違いは、次を読み込むきっかけ。
- ページネーション
- 無限スクロール
カルーセル・ギャラリー・ライトボックスの違い
どれも写真を見せる部品。違いは、一度に何枚見えるか。
- カルーセル
- ギャラリー
- ライトボックス
検索ボックス・オートコンプリート・コマンドパレットの違い
どれも文字を打って目当てのものを探す。違いは、探す相手と、出てくる場所。
- 検索ボックス
- オートコンプリート
- コマンドパレット
空状態・結果画面・アラートの違い
どれもアイコンと短い文で状況を伝える。違いは、伝えるタイミングと、画面に占める大きさ。
- 空状態
- 結果画面
- アラート
ダイアログ・ポップ確認・スナックバーの違い
どれも「消してよいか」を扱える。違いは、止める強さと、あとから取り消せるか。
- ダイアログ
- ポップ確認
- スナックバー
ハンバーガー・三点メニュー・アプリランチャーの違い
どれもアイコン1つのボタンで、押すと何かが開く。違いは、アイコンの形と、開いたときに出てくるもの。
- ハンバーガーメニュー
- 三点メニュー
- アプリランチャー
ツールバー・メニューバー・テーブルの操作バーの違い
どれも操作を横一列に並べた帯。違いは、並ぶものと、どこに対する操作か。
- ツールバー
- メニューバー
- テーブルの操作バー
プログレスバー・円形プログレス・メーター・ローディングスピナーの違い
どれも棒や輪で「どれくらいか」を見せる。違いは、進み具合なのか量なのか、そして残りが分かるかどうか。
- プログレスバー
- 円形プログレス
- メーター
- ローディングスピナー
ツールチップ・トグルチップ・ポップオーバーの違い
どれもそばに小さく出る説明。違いは、開くきっかけと、中にリンクなどを置けるかどうか。
- ツールチップ
- トグルチップ
- ポップオーバー
日付ピッカー・期間選択・カレンダー（月表示）・生年月日の入力の違い
どれも日付を扱う部品。違いは、選ぶのか見せるのか、そして選ぶ日付が近いか遠いか。
- 日付ピッカー
- 期間選択
- カレンダー（月表示）
- 生年月日の入力