UI図鑑

Cookieバナー

Cookie banner

ページ読み込み時に自動的に現れ、Cookieの利用について同意・拒否・詳細設定を求める帯状UI。

アクションシート

Action sheet

画面下端から現在の操作に関連する選択肢のリストをせり上げて表示し、1つを選ばせるiOS由来のオーバーレイUI。

アコーディオン

Accordion

見出しをクリックすると、その下のコンテンツパネルが開閉する、縦に積んだ開閉式UI。

アバター

Avatar

ユーザーやアカウントを表す顔写真・イラスト・イニシャルを、丸型または角丸の小さな枠に収めて示す表示UI。

アラートダイアログ

Alert dialog

破壊的操作の確認や警告など、ユーザーの選択を必須にする最小構成の前面ダイアログ。

いいねボタン

Like button

投稿やコンテンツへの好意的な反応をワンタップで表明し、オン/オフの状態と件数を同時に示すトグル型のボタンUI。

インラインバリデーション

Inline Validation

入力中または入力直後に、その場でエラーの有無をフィールド脇に伝える検証UI。

ウィザード

Wizard

複数の手順に分割した入力フォームを、ステップバーで進捗を示しながら1画面ずつ完了させていく全画面レイヤーのUI。

エンプティステート

Empty state

一覧や検索結果が0件のときに、その旨と次にとれる行動をあわせて示す案内画面。

オートコンプリート

Autocomplete

文字入力の途中で候補一覧を動的に絞り込み提示する、検索・入力補助UI。

カード

Card

関連する情報とアクションをひとまとまりの面としてまとめ、一覧に並べられる入れ物UI。

ガイドツアー

Guided tour

複数のUI要素を順番にめぐりながら、ポップオーバーで一つひとつの機能を段階的に説明する初回案内UI。

カウントダウンタイマー

Countdown timer

セール終了や予約締切など、特定の期限までの残り時間を刻々と減っていく数値で表示するUI。

カルーセル

Carousel

複数のスライドを横方向に切り替えながら順送りに表示するUI。

カンバンボード

Kanban board

「未着手」「進行中」「完了」のような列にタスクカードを並べ、列間の移動で状態を管理する表示UI。

ケバブメニュー

Kebab menu

縦に並んだ3つの点のアイコンをクリックすると、対象に対する操作の一覧が展開するメニューUI。

コーチマーク

Coach marks

アプリ初回起動時などに、画面上の特定の要素だけを切り抜いて強調し、短い説明を添えて操作方法を教えるオーバーレイUI。

コピーボタン

Copy button

ワンクリックで対象のテキストをクリップボードにコピーし、完了をその場でフィードバックするボタンUI。

コマンドパレット

Command palette

キーボードショートカット（多くはCtrl+K）で呼び出し、入力しながら候補を絞り込んでコマンドや画面へ即座に移動できる検索型の操作UI。

コンテキストメニュー

Context menu

対象を右クリック（またはタッチデバイスでの長押し）することで、その対象に応じたアクション一覧をカーソル付近に表示するメニューUI。

サイドバー

Sidebar

画面の脇に縦型のナビゲーション領域を常時表示し続けるUI。

サイドピーク

Side peek

一覧を表示したまま画面右側に詳細パネルをせり出させ、一覧の文脈を保ったまま個々の項目を確認できるUI。

スクロールスナップ

Scroll snapping

スクロールの手を離すと、あらかじめ定めた区切り位置へ自動的に吸着して止まるスクロール挙動のUI。

スクロールスパイ

Scrollspy

スクロール位置に応じて、現在表示中のセクションに対応するナビゲーション項目を自動的にハイライトするUI。

スケルトンスクリーン

Skeleton screen

データ読み込み中に、実際のレイアウトの骨組みだけを先に表示しておく灰色のプレースホルダー。

スティッキーヘッダー

Sticky header

スクロールしても画面上部に固定されたまま追従し続けるヘッダーUI。

ステップバー

Stepper

複数の手順から成る工程で、完了・現在・未達の状態を横並びの目印で示す進行状況表示UI。

スピードダイヤル

Speed dial

FABをトリガーに、複数の関連アクションをラベル付きの小さなボタンとして展開するUI。

スピナー

Spinner

処理時間や進捗の割合がわからない不定長の待機状態を、回転するアニメーションで示すフィードバックUI。

スプリットビュー

Split view

画面を左右2ペインに分割し、一覧（マスター）と選択項目の詳細（ディテール）を常時並べて表示するレイアウト。

スプリットボタン

Split button

既定の主操作を実行するボタンと、関連する副次的な操作を選べるメニュートリガーを一体化したボタンUI。

スライダー

Slider

つまみをドラッグして一定範囲内の単一の値を連続的に調整する入力UI。

スワイプアクション

Swipe actions

リストの行を左右にスワイプすることで、削除・アーカイブなどの操作ボタンをその場に出現させるUI。

セグメンテッドコントロール

Segmented control

排他的な選択肢を横並びのボタン群として常時提示し、押した項目に応じて設定値や表示モードを即座に切り替えるUI。

セレクトボックス

Select

あらかじめ用意された選択肢の一覧から1つを選ばせる、クリックで開閉する入力UI。

タイムライン

Timeline

出来事を日付や時刻の順に沿って、縦または横に並べて可視化する時系列表示UI。

タグ／チップ

Chip / Tag

短いテキストと任意のアイコンを丸みのある小さな面にまとめ、分類・選択・入力の単位として使う小型要素UI。

タブ

Tabs

並列するコンテンツパネルを、見出しの切り替えで同じ領域に表示し分けるUI。

チェックボックス

Checkbox

四角い枠をクリックしてオン／オフを切り替える、複数選択可能な入力コントロール。

ツールチップ

Tooltip

要素にホバーまたはフォーカスすると近くに現れる、短い補足説明の小さな吹き出し。

ツリービュー

Tree view

親子関係を持つデータを、開閉できるインデント付きの階層構造として表示するUI。

データテーブル

Data table

行と列で構成されたデータを一覧表示し、並び替えなどの操作を伴うことが多い表形式の表示UI。

デートピッカー

Date Picker

カレンダーを開いて年月日をクリックで選ばせる、日付専用の入力UI。

テキストエリア

Textarea

複数行にわたる長文を自由に入力できる、縦に伸縮可能なテキスト入力UI。

テキストフィールド

Text Field

ラベルと1行の入力欄からなる、フォームで最も基本的な文字入力UI。

トースト

Toast

画面の隅に短時間だけ現れて自動的に消える、操作を妨げずに結果を伝える軽量な通知。

トグルスイッチ

Switch

つまみをスライドさせてオン／オフを即座に切り替える、2状態のコントロールUI。

トップへ戻るボタン

Back to top button

長いページをスクロールした後、ページ最上部へワンクリックで戻れるようにする補助ボタンUI。

ドラッグアンドドロップ

Drag and drop

要素を掴んで移動し、別の位置や領域に離すことで並び替え・移動・投入を行う汎用的な操作パターン。

ドロップゾーン

Drop Zone

ファイルをドラッグ＆ドロップ、またはクリックして選択させる、アップロード専用の受け皿UI。

ドロップダウンメニュー

Dropdown menu

ボタンやリンクをクリック（または一部はホバー）すると、直下に選択肢の一覧が展開するメニューUI。

ドロワーメニュー

Drawer

ハンバーガーボタンなどの操作をきっかけに、画面端からスライドして現れ、操作後は隠れるナビゲーションパネルUI。

バッジ

Badge

アイコンや要素に重ねて、件数や状態を小さなラベルで知らせる表示UI。

バナー通知

Notification banner

ページ上部などに表示され、ユーザーが明示的に閉じるまで残り続ける、持続的な状態・注意喚起の通知帯。

パララックス

Parallax

スクロール量に応じて背景と前景を異なる速度で動かし、奥行きを演出するビジュアル表現。

パンくずリスト

Breadcrumbs

いま見ているページがサイト階層のどこにあるかを、上位階層へのリンク列で示すナビゲーション。

ハンバーガーメニュー

Hamburger menu

三本の横線アイコンをクリックすると、隠れていたナビゲーションが開閉するボタン型UI。

ヒーロー

Hero

ページ冒頭に大きく配置され、見出し・サブコピー・CTAを載せた大型のビジュアル領域。

プルトゥリフレッシュ

Pull to refresh

一覧の最上部から下方向にドラッグ（引っ張る）ことで、コンテンツを再読み込みするタッチ操作主体のUI。

フローティングアクションボタン（FAB）

FAB

画面上に常時浮かんで表示され、そのコンテキストで最も重要な単一のアクションを実行するボタンUI。

プログレスバー

Progress bar

処理の完了度合いを、確定した割合として横棒の塗りつぶしで示す進捗表示UI。

ページネーション

Pagination

一覧を複数のページに分割し、番号や前後ボタンで行き来できるようにするナビゲーションUI。

ボタン

Button

クリックやタップ一つでその場のアクションを実行させる基本のUI要素で、視覚的な強弱によってプライマリ・セカンダリ・CTAなどの役割を使い分ける。

ポップオーバー

Popover

要素をクリックすると近くに現れる、リンクやボタンなど操作要素を含められるリッチな内容の小型フロート面。

ボトムシート

Bottom sheet

画面下端からせり上がり、背面のコンテンツを保ったまま任意の内容を表示するモバイル向けの部分オーバーレイUI。

ボトムナビゲーション（タブバー）

Bottom navigation

モバイル画面の下部に主要な行き先を常時固定表示するナビゲーションUI。

マソンリーレイアウト

Masonry layout

高さの異なるコンテンツを隙間なく詰めて配置する、石積み状のグリッドレイアウト。

メガメニュー

Mega menu

ナビゲーションの1項目をホバーまたはクリックすると、複数カラムにまたがる大面積のパネルとして多数のリンクを一度に展開するメニューUI。

モーダル

Modal / Dialog

背面のコンテンツを操作不能にしたまま前面に表示され、閉じるまで他の操作を止めるウィンドウ。

もっと見るボタン

Load more button

一覧の末尾に置いたボタンをクリックするたびに、次の一定件数を追加で読み込んで表示するUI。

ライトボックス

Lightbox

サムネイル画像のクリックをきっかけに、暗転した背景の上に画像を拡大表示するオーバーレイUI。

ラジオボタン

Radio button

同じグループの選択肢から必ず1つだけを排他的に選ばせる、丸い入力コントロール。

レーティング

Rating

星などの記号を並べ、段階的な評価を入力または表示するUI。

レンジスライダー

Range Slider

2つのつまみを操作して最小値・最大値の範囲を同時に指定する入力UI。

数値ステッパー

Number Stepper

±ボタンで数値を1刻みずつ増減させる、数量入力に特化した入力UI。

続きを読む

Read more / Show more

長い文章を数行で省略表示しておき、クリックすると同じ位置でそのまま展開して全文を表示するUI。

遅延読み込み

Lazy loading

画像などの重いリソースの読み込みを、実際に画面へ表示される直前まで遅らせる表示最適化のUI・実装パターン。

追従セクション

Pinned section

目次やサマリーカードなど特定の要素が、その周囲のセクションをスクロールしている間だけ画面内に留まり続け、セクションを抜けると追従を解除するUI。

無限スクロール

Infinite scroll

一覧の末尾に近づくと次のコンテンツを自動で読み込み、ページ送りなしに連続閲覧させる挙動パターン。