UIコンポーネント91種類｜コピペで使える実装サンプル + AIプロンプト

ハンバーガーメニュー

Hamburger Menu

三本線アイコンでメニューの開閉を制御する。モバイルで頻出。

タブバー

Tab Bar

コンテンツを複数のタブで切り替え表示する。情報整理に便利。

パンくずリスト

Breadcrumb

現在のページ階層を表示し、上位ページへの遷移を可能にする。

固定ヘッダー

Sticky Header

スクロールしても画面上部に固定表示されるヘッダー。常にナビゲーションにアクセス可能。

サイドバーナビ

Sidebar Navigation

画面左側に配置される縦型ナビゲーション。管理画面やドキュメントサイトで定番。

テキストフィールド

Text Field

ユーザーが文字列を入力するための基本的なフォーム要素。

セレクトボックス

Select Box

ドロップダウンから一つの選択肢を選ぶフォーム要素。

チェックボックス

Checkbox

複数の選択肢から複数を選択できるフォーム要素。オン/オフの切り替えにも使用。

トグルスイッチ

Toggle Switch

オン/オフを切り替えるスイッチ。設定画面で頻出。

スライダー

Slider

つまみをドラッグして範囲内の値を選択するフォーム要素。

検索バー

Search Bar

キーワードを入力して検索する入力欄。サジェスト機能と組み合わせることが多い。

デートピッカー

Date Picker

カレンダーUIから日付を選択するフォーム要素。

ファイルアップロード

File Upload

ファイルをドラッグ&ドロップまたはクリックでアップロードする領域。

トースト通知

Toast Notification

画面の端に一時的に表示されるメッセージ。操作結果やお知らせを伝える。

モーダル

Modal Dialog

画面を覆うオーバーレイ上にコンテンツを表示するダイアログ。ユーザーの確認操作を求める時に使用。

ツールチップ

Tooltip

要素にホバーまたはフォーカスした時に補足情報を表示する小さな吹き出し。

ローディングスピナー

Loading Spinner

処理中であることを示すアニメーション。ユーザーに待機を伝える。

アラート

Alert

ユーザーに重要な情報を伝えるための目立つ通知バナー。

テーブル

Data Table

データを行と列で整理して表示する表組み。並べ替えやフィルタ機能を付与可能。

カード

Card

関連する情報をまとまりとして表示するコンテナ。一覧表示や詳細表示で使用。

バッジ

Badge

ステータスや数量を示す小さなラベル。通知数やカテゴリ表示に使用。

プログレスバー

Progress Bar

処理の進捗状況を横棒で視覚的に表示する。

スケルトンスクリーン

Skeleton Screen

コンテンツの読み込み中にレイアウトのプレースホルダーを表示する。UXの体感速度を向上させる。

ボタン

Button

ユーザーがアクションを実行するための最も基本的なUI要素。

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

Floating Action Button

画面の固定位置に浮遊する丸型ボタン。最も重要なアクションを配置する。

ボタングループ

Button Group

関連するボタンを横並びにグループ化した要素。セグメントコントロールとしても使用。

コンテキストメニュー

Context Menu

右クリックやロングタップで表示されるメニュー。要素に対する操作を提供する。

アコーディオン

Accordion

クリックでセクションの展開/折りたたみを切り替えるコンテンツ。FAQ等で定番。

カルーセル

Carousel

画像やコンテンツを横スライドで順番に表示する。ヒーローセクションや商品一覧で使用。

料金テーブル

Pricing Table

サービスの料金プランを比較表示するレイアウト。SaaSサイトで定番。

メガメニュー

Mega Menu

ナビの下に大きなパネルを開いてカテゴリごとにリンクを整理表示する。

ページネーション

Pagination

コンテンツを複数ページに分割しナビゲーションするUIコンポーネント。

無限スクロール

Infinite Scroll

スクロールに応じてコンテンツを自動的に追加読み込みする。

ドロワー

Drawer

画面端からスライドインするパネル。サイドメニューや詳細表示に使用。

コマンドパレット

Command Palette

キーボードショートカットで呼び出す検索・コマンド実行パレット。

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

Segmented Control

複数の選択肢をグループ化したトグルコントロール。ビュー切り替えに使用。

タブ

Tabs

関連するコンテンツをタブで切り替え表示する。情報の分類・整理に最適。

ステッパー

Stepper

マルチステップのプロセスを順番に進めるUI。フォームウィザードに最適。

アンカーナビ

Anchor Nav

ページ内のセクションへスムーズスクロールするナビゲーション。

グリッドレイアウト

Grid Layout

CSS Gridを使って要素を行列に整列配置する基本的なレイアウトパターン。

メイソンリーレイアウト

Masonry Layout

高さの異なる要素を隙間なく詰めて配置するレンガ積み型レイアウト。

カードレイアウト

Card Layout

情報をカード単位でまとめて表示する汎用的なレイアウトパターン。

スプリットスクリーン

Split Screen

画面を2分割して異なるコンテンツを並列表示するレイアウト。

ヒーローセクション

Hero Section

ページ冒頭に大きく表示するファーストビュー。CTA誘導に最適。

ベントグリッド

Bento Grid

弁当箱のように不均等なセルサイズで要素を配置するモダンレイアウト。

ホーリーグレイルレイアウト

Holy Grail

ヘッダー・フッター・メイン・左右サイドバーの5領域構成の伝統的レイアウト。

フルブリードレイアウト

Full Bleed

コンテンツ幅を超えてビューポート全幅に広がる要素を含むレイアウト。

スティッキーサイドバー

Sticky Sidebar

スクロールしても固定表示されるサイドバー。ナビや補足情報に使用。

テキストエリア

Textarea

複数行のテキスト入力欄。文字数カウントやリサイズハンドル付きも一般的。

ラジオボタン

Radio Button

複数の選択肢から一つだけを選ぶための排他的選択コントロール。

オートコンプリート

Autocomplete

テキスト入力に応じて候補を表示し選択できるコンボボックス。

タグ入力

Tag Input

複数のタグやキーワードを入力・削除できるフォーム要素。

OTP入力

OTP Input

ワンタイムパスワード（認証コード）を一文字ずつ入力するフォーム。

パスワード強度メーター

Password Strength

パスワードの強度をリアルタイムに可視化するインジケーター。

カラーピッカー

Color Picker

色を視覚的に選択できるインタラクティブなフォーム要素。

インラインエディット

Inline Edit

テキストをクリックするとその場で編集可能になるコンポーネント。

マルチステップフォーム

Multi-Step Form

複数のステップに分割されたフォーム。長いフォームを段階的に入力させる。

ポップオーバー

Popover

要素の近くにフローティングで表示される小さなパネル。追加情報やアクションを提供する。

確認ダイアログ

Confirmation Dialog

ユーザーに操作の確認を求めるダイアログ。削除や送信など重要なアクションの前に表示する。

通知パネル

Notification Panel

通知一覧を表示するドロップダウンパネル。未読・既読の管理や通知種別の表示を行う。

リストビュー

List View

データを縦方向に一覧表示する。行ごとにアイコン・テキスト・アクションを配置。

ツリービュー

Tree View

階層構造のデータをツリー形式で表示する。フォルダ構造やカテゴリ分類に最適。

タイムライン

Timeline

時系列に沿ってイベントやステータスを縦方向に表示する。進捗や履歴の可視化に最適。

カンバンボード

Kanban Board

タスクをカラム別に分けて表示するボード。ステータス管理やワークフロー可視化に最適。

統計カード

Stat Card

KPIや統計情報を目立つ数値で表示するカード。ダッシュボードの主要指標表示に最適。

タグ・チップ

Tag / Chip

カテゴリやステータスを小さなラベルで表示する。フィルタ選択やタグ付けに使用。

アバター

Avatar

ユーザーの顔写真やイニシャルを丸形で表示する。プロフィールやコメント欄で使用。

エンプティステート

Empty State

データが存在しない場合に表示するプレースホルダー画面。ユーザーに次のアクションを案内する。

ライトボックス

Lightbox

画像をオーバーレイで拡大表示するコンポーネント。ギャラリーや製品画像の詳細閲覧に最適。

テスティモニアル

Testimonial

顧客の声や推薦コメントを引用形式で表示する。信頼性向上やソーシャルプルーフに使用。

CTAセクション

CTA Section

ユーザーにアクションを促す目立つセクション。コンバージョン向上の要となるコンポーネント。

FAQセクション

FAQ Section

よくある質問と回答をアコーディオン形式で表示する。サポートコスト削減に貢献。

フィーチャーセクション

Feature Section

サービスや製品の特長をアイコンと説明文でグリッド表示する。LPの主要セクション。

比較テーブル

Comparison Table

複数の製品やプランの機能を一覧で比較するテーブル。購入判断の支援に最適。

アクションシート

Action Sheet

画面下部からスライドインするメニュー。モバイルで選択肢を提示する際に使用。

スプリットボタン

Split Button

メインアクションとドロップダウンを組み合わせたボタン。主操作と副操作を一つにまとめる。

スワイプアクション

Swipe Actions

リスト項目をスワイプして表示する操作ボタン。メールやチャットアプリで定番のインタラクション。

プルトゥリフレッシュ

Pull to Refresh

画面を下に引っ張ってコンテンツを更新するパターン。モバイルアプリの標準的な更新操作。

ボトムシート

Bottom Sheet

画面下部から出現するパネル。詳細情報や補足UIの表示に使用。ドラッグで高さ調整が可能。

ストーリーズ

Stories

円形アバターをタップして全画面コンテンツを表示するパターン。SNSで普及した一時的コンテンツ表示。

アプリバー

App Bar

画面下部に固定されるナビゲーションバー。モバイルアプリの主要セクション間を移動する。

スピードダイヤル

Speed Dial

FABを押すと複数のアクションボタンが放射状に展開するメニュー。素早く複数の操作にアクセスできる。

チャットUI

Chat UI

メッセージの送受信を表示するチャットインターフェース。リアルタイムコミュニケーションの基本UI。

コメントスレッド

Comment Thread

コメントとその返信をツリー構造で表示するUI。議論の流れを視覚的に追える。

絵文字リアクション

Emoji Reactions

コンテンツに対して絵文字でリアクションを付けるUI。テキスト入力なしで感情を表現できる。

フィードカード

Feed Card

SNSフィードに表示されるカード型の投稿UI。ユーザー情報、コンテンツ、アクションをまとめて表示。

メンション

Mention

テキスト入力中に@でユーザーを候補表示し選択するUI。チームコミュニケーションの必須機能。

ウォークスルー

Walkthrough

画面の要素をハイライトして順に説明するガイド機能。初回利用時の機能紹介に使用。

ウェルカム画面

Welcome Screen

アプリの初回起動時に表示されるスワイプ可能な紹介画面。機能や特徴を段階的に説明。

プログレスチェックリスト

Progress Checklist

セットアップ手順や達成項目を進捗バーとチェックリストで表示。ユーザーの完了状態を可視化。

ビデオプレーヤー

Video Player

カスタムコントロール付きの動画再生UI。再生/一時停止、シークバー、音量、全画面を制御。