（2026.04.21 リンク修正しました）
「モーダルって英語でなんて言うんだっけ？」
「ドロワーとシートって何が違うの？」
「あのUIなんて検索すれば出てくるんだ……」
こういう疑問、デザイナーもエンジニアも一度は経験あると思います。
「UIコンポーネントの名前と動きを日本語でまとめたサイト」がなかったので作りました。
👇👇👇ここで公開中です👇👇👇
どんなサイト？
339件のUIコンポーネントを名前・動き・コードとセットで確認できる日本語リファレンスサイトです。
「欲しいUIがきっとある」をコンセプトに、よく見かけるUIをひたすら網羅しました。
- モーダル / トースト / ドロワー といった基本UIはもちろん
- カンバン / OTP入力 / バーチャルスクロール などの実践的なUI
- 絵文字ピッカー / クレジットカード入力 / タイプライター効果 のような特殊なUIまで
全部インタラクティブに動かして体験できます。
機能紹介
インタラクティブデモ
コンポーネントページを開くと、実際に動くデモがあります。
ボタンを押せば開くし、ドラッグすれば動くし、入力すれば反応します。「あのUIってこういう動きだったよな」を手を動かしながら確認できます。
コードサンプル（4形式）
デモの横には即コピペできるコードが並んでいます。
| タブ | 内容 |
|---|---|
| TSX | React + TypeScript での実装例 |
| HTML | セマンティックなマークアップ（ARIA属性付き） |
| CSS | 素のCSSによるスタイル |
| JS | バニラJSでの実装 |
「Reactで使いたい」「HTML/CSSだけで書きたい」どちらにも対応しています。
比較機能
2〜4つのコンポーネントを横並びにして比較できます。
「モーダルとダイアログってどう違うの？」「トーストとスナックバー、どっちを使えばいい？」——そういう判断の場面で使えます。
2つ並べると差分テーブルも自動表示されます。用途・動作・アクセシビリティの違いが一覧で確認できます。
検索機能
検索バーからUIを絞り込めます。
- コンポーネント名（日本語・英語）
- 説明文・目的
- タグ・ユースケース
「フォーカス」「通知」「ドラッグ」などの動詞・概念でも引っかかります。URLに検索クエリが保存されるので、「さっき見てたUI」に戻るのも簡単です。
カテゴリフィルター
15カテゴリで絞り込めます。
通知 / 割り込み / 開閉 / フォーム / 補足情報 /
ナビ / レイアウト / ステータス / アクション / 検索 /
データ / モバイル / 複合UI / 比較
「フォーム系UIをまとめて見たい」「ナビ系で何があるか確認したい」という使い方もできます。
収録UIの種類
339件を15カテゴリに分類しています。
通知・注意喚起
画面のどこかに出てきてユーザーに何かを伝えるUI群。
トースト / スナックバー / バナー / アラート / コールアウト / バッジ / 通知センターなど。
地味に「トーストとスナックバーって何が違うの？」問題はよく起きます。答えは比較機能で確認できます。
割り込み・確認
ユーザーの作業を一時停止させて判断を求めるUI群。
モーダル / ダイアログ / ドロワー / ボトムシート / 確認ダイアログ / 許可ダイアログ / インタースティシャルなど。
モーダルとダイアログを区別して使っているサービスはかなり少ないですが、定義上は別物です。
開閉・折りたたみ
クリックで展開・収縮するUI群。
アコーディオン / ディスクロージャー / コラプス / エクスパンダブルパネル / FAQ トグルなど。
見た目はほぼ同じなのに名前が違うものが多いジャンルです。
フォーム・入力
情報を入力してもらうためのUI群。
テキストフィールド / セレクト / チェックボックス / ラジオ / スイッチ / スライダー / デートピッカー / カラーピッカー / リッチテキストエディタなど。
変わり種では OTP入力（ワンタイムパスワードの6桁ボックス）、クレジットカード入力（カード番号の自動フォーマット＋カード種別判定）、@メンション入力（@ を打つと候補が出るやつ）、フローティングラベル（Material Designで有名な入力するとラベルが上に逃げるやつ）なども収録しています。
ナビゲーション
ページや画面間の移動を担うUI群。
タブ / ブレッドクラム / ページネーション / サイドバー / メガメニュー / コマンドパレット / テーブルオブコンテンツなど。
コマンドパレット（⌘K で開く全機能検索）やミニマップ（エディタ右端の小さいコード俯瞰図）など、開発ツール寄りのUIも収録しています。
データ表示
情報を整理して見せるUI群。
テーブル / ソータブルテーブル / データグリッド / ガントチャート / ヒートマップ / KPIカード / タイムラインなど。
レイアウト
画面全体の構造を決めるUI群。
マスター詳細 / スプリットビュー / マルチペイン / マソンリーレイアウト / 画像ギャラリー / ファイルブラウザなど。
ステータス・フィードバック
処理中・完了・エラーなど状態を伝えるUI群。
ローディング / スケルトン / プログレスバー / スピナー / サークルプログレス / シマー / スクロール進捗バー / 配送ステータスなど。
バーチャルスクロール（大量リストを仮想化して数百件でも軽快に動かす技術）もここに入れています。デモでは200件のリストを実際に試せます。
複合・アプリケーションUI
複数のUIを組み合わせた、より大きな単位のUI群。
カンバン / チャットバブル / ライブチャットウィジェット / コメントスレッド / カート（ドロワー型） / 料金プランカード / ステップフォーム / タイプライター効果 / 画像比較スライダー / オーディオプレイヤー / 動画プレイヤーなど。
画像比較スライダー（Before/Afterを境界線でスライドして比較するやつ）やリアクションボタン（SlackやDiscordの👍❤️😂みたいなやつ）など、名前を知らないと検索できないUIも多く収録しています。
モバイル特有UI
スマートフォンアプリでよく見るUI群。
プルトゥリフレッシュ / スワイプアクション / ページドット / モバイルFAB / ジェスチャーヒントなど。
Webではなくネイティブアプリで一般的なUIですが、PWAやモバイルWebでも登場します。
その他・レアなUI
- コラボカーソル — Figmaや Notion のように複数人の操作が見えるやつ
- ミニマップ — VS Codeの右端にある小さいコードマップ
- コーチマーク — 初回起動時に「ここを押してください」と案内するやつ
- インスペクターパネル — Figmaの右サイドバーのようなプロパティ編集パネル
-
コマンドパレット —
⌘Kで開く全機能ランチャー - 差分ビュー — GitHubのPRのような変更前後の比較表示
- バージョン履歴 — Notionのように過去の状態を遡れるUI
- 絵文字ピッカー — クリックで絵文字グリッドが開くやつ
- スピードダイヤル — FABをタップすると複数アクションが扇状に広がるやつ
- ドッキングパネル — IDE風のドラッグで配置を変えられるパネル
おわりに
「あのUIなんだっけ」を解決するために作り始めたら、気づいたら339件になっていました。
名前を知るだけで検索ができるようになるし、デモで動きを確認してからコピペすれば実装も早くなります。デザイナーとエンジニアで「このUI」と指差せる共通言語としても使えると思います。
GitHubはprivateですが、フィードバックはXにどうぞ。
-
UIの部屋: https://ui-room.vercel.app/
-
X (Twitter): https://x.com/retro_maid