UI RUSH
50語

用語図鑑

20語の名前・読み・説明・AIへの指示例を分類ごとに並べています。各項目のデモは開いて操作できます。時間制限はありません。

重なり表示

6

  • モーダル

    Modal（もーだる）重なり表示

    画面の上に重なって表示され、閉じるまで背後の操作を遮るダイアログ。確認や入力に使う。

    デモを開いて操作できます

  • ドロワー

    Drawer（どろわー）重なり表示

    画面の端からスライドして出てくるパネル。引き出しのように開閉し、メニューによく使う。

    デモを開いて操作できます

  • ツールチップ

    Tooltip（つーるちっぷ）重なり表示

    対象にカーソルを合わせるかフォーカスすると、すぐ近くに出る短い説明。操作要素は含めない。

    デモを開いて操作できます

  • ポップオーバー

    Popover（ぽぷおーばー）重なり表示

    ボタンの近くに開く小さなパネル。メニューや設定など、操作できる中身を載せられる。

    デモを開いて操作できます

  • ボトムシート

    Bottom sheet（ぼとむしーと）重なり表示

    画面の下からせり上がってくるパネル。スマホで選択肢や詳細を出すときによく使う。

    デモを開いて操作できます

  • コンテキストメニュー

    Context menu（こんてきすとめにゅー）重なり表示

    右クリックや長押しした位置に開くメニュー。その対象に対する操作を並べる。

    デモを開いて操作できます

フィードバック

10

  • トースト

    Toast（とーすと）フィードバック

    画面の隅に短時間だけ浮かぶ小さな通知。操作を妨げず、保存できたことなどを知らせる。

    デモを開いて操作できます

  • スナックバー

    Snackbar（すなっくばー）フィードバック

    画面の下に現れる通知で、「元に戻す」などの操作ボタンを添えられるのが特徴。

    デモを開いて操作できます

  • プログレスバー

    Progress bar（ぷろぐれすばー）フィードバック

    処理の進み具合を横棒の長さや色で示す表示。ユーザーは完了までの目安を知れる。

    デモを開いて操作できます

  • スケルトン

    Skeleton（すけるとん）フィードバック

    読み込み中の間、完成後の形を灰色の枠で仮表示するもの。体感の待ち時間を短くする。

    デモを開いて操作できます

  • バッジ

    Badge（ばっじ）フィードバック

    未読件数や状態を表す小さな印。アイコンや見出しに重ねて置く。

    デモを開いて操作できます

  • バナー

    Banner（ばなー）フィードバック

    画面幅いっぱいに置く告知。閉じるまで残ることが多く、内容の宣伝に使う。

    デモを開いて操作できます

  • アラート

    Alert（あらーと）フィードバック

    操作の結果や注意を、その場に表示するメッセージ。色と記号で重要度を示す。

    デモを開いて操作できます

  • 空状態

    Empty state（からじょうたい）フィードバック

    データが1件もないときに、その旨と次の操作を案内する表示。

    デモを開いて操作できます

  • スピナー

    Spinner（すぴなー）フィードバック

    回転する印で、処理中であることだけを示す表示。進捗の割合は示さない。

    デモを開いて操作できます

  • プログレスリング

    Progress ring（ぷろぐれすりんぐ）フィードバック

    円弧の長さで進み具合を示す表示。狭い場所やボタンの中に収めやすい。

    デモを開いて操作できます

ナビゲーション

9

  • タブ

    Tabs（たぶ）ナビゲーション

    同じ画面の中で、並んだ見出しを切り替えて表示内容を変えるナビゲーション。

    デモを開いて操作できます

  • カルーセル

    Carousel（かるーせる）ナビゲーション

    左右にスライドして、複数の画像やカードを順番に見せる表示。回転木馬が語源。

    デモを開いて操作できます

  • ドロップダウン

    Dropdown（どろっぷだうん）ナビゲーション

    ボタンを押すと下に開くメニュー。項目を選ぶとその操作が実行される。

    デモを開いて操作できます

  • パンくずリスト

    Breadcrumb（ぱんくずりすと）ナビゲーション

    現在地までの階層を「ホーム > 製品 > 詳細」のように並べ、上位へ戻れるようにする。

    デモを開いて操作できます

  • ページネーション

    Pagination（ぺーじねーしょん）ナビゲーション

    複数ページに分かれた内容を、番号や前後のボタンで行き来するためのリンク群。

    デモを開いて操作できます

  • セグメントコントロール

    Segmented control（せぐめんとこんとろーる）ナビゲーション

    横並びのボタンのうち1つを選び、表示を切り替える。タブに似るが、選択状態が1つに限られる点が特徴。

    デモを開いて操作できます

  • スプリットボタン

    Split button（すぷりっとぼたん）ナビゲーション

    主操作と、その派生メニューを1つにまとめたボタン。右端の矢印で選択肢を開く。

    デモを開いて操作できます

  • フローティングボタン

    Floating action button（ふろーてぃんぐぼたん）ナビゲーション

    画面の隅に浮かせて置く丸いボタン。その画面の中心となる操作に使う。

    デモを開いて操作できます

  • タブバー

    Tab bar（たぶばー）ナビゲーション

    画面下に固定し、アプリの主要画面を切り替える横並びのアイコン群。

    デモを開いて操作できます

フォーム

17

  • セレクト

    Select（せれくと）フォーム

    選択肢の一覧から1つを選ぶ入力フォーム。選んだ値が欄に残る。

    デモを開いて操作できます

  • チェックボックス

    Checkbox（ちぇっくぼっくす）フォーム

    四角い枠にチェックを入れる選択肢。複数同時に選べる。

    デモを開いて操作できます

  • ラジオボタン

    Radio button（らじおぼたん）フォーム

    丸い選択肢のうち、1つだけを選ぶ入力。選ぶと他の選択は外れる。

    デモを開いて操作できます

  • トグルスイッチ

    Toggle switch（とぐるすいっち）フォーム

    つまみを左右に動かして、オンとオフを切り替えるスイッチ。設定の有効化などに使う。

    デモを開いて操作できます

  • スライダー

    Slider（すらいだー）フォーム

    つまみをドラッグして、音量や明るさなどの数値を連続的に決める入力。

    デモを開いて操作できます

  • コンボボックス

    Combo box（こんぼぼっくす）フォーム

    入力欄に文字を打つと候補が絞り込まれ、一覧から選べる入力。候補が多いときに向く。

    デモを開いて操作できます

  • ステッパー

    Stepper（すてっぱー）フォーム

    数字の左右にある「−」「＋」で、数量を1ずつ増減させる入力。

    デモを開いて操作できます

  • テキストフィールド

    Text field（てきすとふぃーるど）フォーム

    1行の文字を入力する欄。名前やメールアドレスなどに使う。

    デモを開いて操作できます

  • テキストエリア

    Textarea（てきすとえりあ）フォーム

    複数行の文字を入力する欄。改行できる点がテキストフィールドと違う。

    デモを開いて操作できます

  • 検索フィールド

    Search field（けんさくふぃーるど）フォーム

    虫眼鏡アイコンを伴い、文字を入れて一覧を絞り込む入力欄。

    デモを開いて操作できます

  • 日付ピッカー

    Date picker（ひづけぴっかー）フォーム

    カレンダーから日付を選ぶ入力。手入力の表記ゆれを防げる。

    デモを開いて操作できます

  • レーティング

    Rating（れーてぃんぐ）フォーム

    星などを並べ、5段階などで評価を選ぶ入力。

    デモを開いて操作できます

  • ドロップゾーン

    Dropzone（どろっぷぞーん）フォーム

    ファイルをドラッグ&ドロップ、またはタップして選ぶ領域。

    デモを開いて操作できます

  • トグルボタン

    Toggle button（とぐるぼたん）フォーム

    押すたびにオン・オフが切り替わり、押された状態が見た目に残るボタン。

    デモを開いて操作できます

  • リッチテキストエディタ

    Rich text editor（りっちてきすとえでぃた）フォーム

    太字や見出しなどの書式を、見たままの形で付けられる入力領域。

    デモを開いて操作できます

  • カラーピッカー

    Color picker（からーぴっかー）フォーム

    色見本やスウォッチから色を選ぶ入力。テーマ設定などに使う。

    デモを開いて操作できます

  • インライン編集

    Inline edit（いんらいんへんしゅう）フォーム

    表示中の文字をその場で編集可能にし、別画面へ移らずに更新する操作。

    デモを開いて操作できます

開閉

1

  • アコーディオン

    Accordion（あこーでぃおん）開閉

    見出しをタップすると中身が開閉する折りたたみ式のリスト。必要な情報だけを開いて読める。

    デモを開いて操作できます
クイズを始める用語と別名ホームへ