UI辞書を検索
コンポーネント名、画面名、デザインシステム名、用語の揺れから横断検索できます。
103件 / 103件を表示
AIアプリUI（AI App UI）
用途別ハブ
AIアプリUIは、入力、生成中、出力、再生成、失敗時の説明を一連の体験として設計する必要があります。
デザインシステムApple Human Interface Guidelines
Apple
Appleプラットフォーム向けの体験設計、操作、アクセシビリティ、コンポーネント指針をまとめた公式ガイドライン。
用途EC UI（Ecommerce UI）
用途別ハブ
EC UIは、商品比較、詳細確認、カート、決済までの不安を減らし、購入判断を支えるUI設計です。
デザインシステムFluent UI
Microsoft
Microsoft製品群で使われるデザインシステム。業務アプリ、管理画面、情報密度の高いUIの参考になる。
デザインシステムMaterial Design
Googleが提供するデザインシステム。Material 3では色、形、状態、モーションを含む体系的なUI指針を提供する。
コンポーネントOTP入力（OTP Input）
入力
OTP入力（OTP Input）は、SMS認証やメール認証で使用する数桁のワンタイムパスワードを入力するコンポーネント。1桁ずつのセルに分かれ、入力時に自動フォーカス移動する。
用途SaaS UI（SaaS UI）
用途別ハブ
SaaS UIは、繰り返し使う業務画面として、情報密度、検索、テーブル、設定、権限操作の安定性が重要です。
デザインシステムshadcn/ui
shadcn
Radix UIとTailwind CSSを活用したReact向けコンポーネント集。コードを所有しながらUIを組み立てやすい。
画面パターンアカウントセキュリティ画面（Account Security Screen）
画面から逆引き
アカウントセキュリティ画面は、パスワード、二要素認証、ログイン履歴、接続済み端末を安全に管理する画面です。
コンポーネントアコーディオン（Accordion）
表示
アコーディオン（Accordion）は、ヘッダーをクリックすることでコンテンツを展開・折りたたみできるコンポーネント。FAQやコンテンツのグループ表示に使用される。
用語集アコーディオンと折りたたみの違い（Accordion vs Collapse）
用語・言い換え
アコーディオンは複数セクションを見出しで開閉するUI、折りたたみは単一領域を開閉する一般的な表現です。
コンポーネントアバター（Avatar）
表示
アバター（Avatar）は、ユーザーやエンティティを表すアイコン・プロフィール画像コンポーネント。画像がない場合はイニシャルや代替アイコンで表示する。
用語集アバターとアイコンの違い（Avatar vs Icon）
用語・言い換え
アバターは人や組織など主体を表し、アイコンは操作・状態・カテゴリなど抽象的な意味を表します。
コンポーネントアラート（Alert）
フィードバック
アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。
用語集アラートとトーストの違い（Alert vs Toast）
用語・言い換え
アラートは画面内で重要な状態や注意を残し、トーストは短時間で消える軽いフィードバックに使います。
画面パターンオンボーディング画面（Onboarding Screen）
画面から逆引き
オンボーディング画面は、初回利用者に価値、操作、初期設定を短く伝える導入画面です。
コンポーネントカード（Card）
表示
カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
用語集カードとリストの違い（Card vs List）
用語・言い換え
カードは独立した情報単位を視覚的にまとめ、リストは同種の項目を効率よく比較・走査する表示に向きます。
コンポーネントカルーセル（Carousel）
表示
カルーセル（Carousel）は、複数の画像やカードを横スクロールまたは自動再生で切り替えて表示するコンポーネント。ドット・矢印などのナビゲーターを持つ。
画面パターンカレンダー画面（Calendar Screen）
画面から逆引き
カレンダー画面は、日付・予定・空き時間を視覚的に確認し、選択や予約へ進むための画面です。
コンポーネントグリッド（Grid）
レイアウト
グリッド（Grid）は、コンテンツを列ベースのグリッドで整列させるレイアウトコンポーネント。レスポンシブ対応のカラム数指定が可能。
コンポーネントコンテキストメニュー（Context Menu）
表示
コンテキストメニュー（Context Menu）は、右クリックや長押し操作で表示されるショートカットメニューコンポーネント。選択中の要素に対する操作一覧を提供する。
コンポーネントサイドバー（Sidebar）
ナビゲーション
サイドバー（Sidebar）は、画面左右に配置する縦型のナビゲーションメニュー。多階層メニューの展開や折りたたみに対応し、管理画面・ダッシュボードで多用される。
用語集スイッチとチェックボックスの違い（Switch vs Checkbox）
用語・言い換え
スイッチは即時反映される設定のオン/オフ、チェックボックスはフォーム内で選択値として送信するオン/オフに向きます。
コンポーネントスケルトン（Skeleton）
フィードバック
スケルトン（Skeleton）は、コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。
用語集スケルトンとスピナーの違い（Skeleton vs Spinner）
用語・言い換え
スケルトンは読み込み後の形を先に示すプレースホルダー、スピナーは処理中であることだけを示すローディング表示です。
コンポーネントステッパー（Stepper）
ナビゲーション
ステッパー（Stepper）は、複数ステップの手順や進捗を視覚的に示すナビゲーションコンポーネント。申請フォームのウィザードUI・購入フローなどで使われる。
コンポーネントスピナー（Spinner）
フィードバック
スピナー（Spinner）は、非同期処理や読み込み中であることをアニメーションで示すコンポーネント。ローディング・インジケーター・プログレスとも呼ばれる。
コンポーネントスペーサー（Spacer）
レイアウト
スペーサー（Spacer）は、要素間の余白を明示的に制御するレイアウト補助コンポーネント。デザイントークンで定義されたスペーシングスケールに従う。
コンポーネントスライダー（Slider）
入力
スライダー（Slider）は、トラックとサムで数値や範囲をスライド操作で入力するコンポーネント。価格フィルターや音量調整などに使用される。
用語集スライダーとステッパーの違い（Slider vs Stepper）
用語・言い換え
スライダーは範囲内の感覚的な値調整、ステッパーは段階や手順を順番に進めるUIとして使われます。
用語集ダイアログとボトムシートの違い（Dialog vs Bottom Sheet）
用語・言い換え
ダイアログは中央に確認や入力を出すUI、ボトムシートは画面下から関連操作や選択肢を出すモバイル向けUIです。
コンポーネントタイムライン（Timeline）
表示
タイムライン（Timeline）は、時系列に並んだイベントや更新履歴を縦・横に表示するコンポーネント。承認フロー・活動ログ・チャット履歴などに使われる。
コンポーネントタグ（Tag）
表示
タグ（Tag）は、コンテンツの分類・属性を示すラベルコンポーネント。削除可能・クリック可能なバリアントを持つ場合もある。バッジより情報量が多く、一覧での絞り込みにも使われる。
用途ダッシュボードUI（Dashboard UI）
用途別ハブ
ダッシュボードUIは、指標、異常、次のアクションを短時間で判断できるように情報を並べる業務画面です。
画面パターンダッシュボード画面（Dashboard Screen）
画面から逆引き
ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。
コンポーネントタブ（Tab）
表示
タブ（Tab）は、複数のコンテンツパネルをタブで切り替えて表示するコンポーネント。同一画面内で関連するコンテンツを整理する。
用語集タブとタブバーの違い（Tab vs Tab Bar）
用語・言い換え
タブは同一文脈内の内容切り替え、タブバーはアプリの主要セクションを切り替えるナビゲーションとして使われます。
コンポーネントタブナビゲーション（Tab Navigation）
ナビゲーション
タブナビゲーション（Tab Navigation）は、ページレベルのコンテンツ切り替えを担うナビゲーション型タブ。URLルーティングと連動し、現在アクティブなセクションを示す。
コンポーネントチェックボックス（Checkbox）
入力
チェックボックス（Checkbox）は、複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。
用語集チェックボックスとラジオボタンの違い（Checkbox vs Radio Button）
用語・言い換え
チェックボックスは複数選択やオン/オフ、ラジオボタンは同じ選択肢グループから1つだけ選ぶ入力に使います。
画面パターンチャット画面（Chat Screen）
画面から逆引き
チャット画面は、会話履歴、入力欄、送信状態、添付や既読などのコミュニケーション情報を扱う画面です。
コンポーネントツールチップ（Tooltip）
表示
ツールチップ（Tooltip）は、要素にホバーまたはフォーカスしたときに表示される補足情報。短いテキストで要素の説明や補足を行う。
コンポーネントツリービュー（Tree View）
表示
ツリービュー（Tree View）は、フォルダ・カテゴリ・組織図など階層構造のデータをツリー形式で表示するコンポーネント。ノードの展開・折りたたみが可能。
カテゴリデータ表示UI（Data Display UI）
カテゴリ別ハブ
データ表示UIは、一覧、数値、状態、履歴などを比較・把握しやすく表示するためのコンポーネント群です。
コンポーネントテーブル（Table）
表示
テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。
コンポーネントテキストエリア（Textarea）
入力
テキストエリア（Textarea）は、複数行のテキストを入力するフォームフィールド。自動リサイズ・最大行数制限・文字数カウンターのバリアントを持つ。
用語集テキストフィールドとテキストエリアの違い（Text Field vs Textarea）
用語・言い換え
テキストフィールドは短い1行入力、テキストエリアは説明文やメモなど複数行入力に使います。
コンポーネントテキスト入力（Input）
入力
テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。
コンポーネントトースト（Toast）
フィードバック
トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。
用語集トーストとスナックバーの違い（Toast vs Snackbar）
用語・言い換え
トーストとスナックバーはいずれも短いフィードバック通知です。スナックバーはアクションを伴う通知として扱われることがあります。
コンポーネントトグルスイッチ（Switch）
入力
トグルスイッチ（Switch）は、ON/OFFの2状態をトグル操作で切り替えるコンポーネント。設定画面の機能有効化・無効化に広く使われる。
用語集ドロップダウンとセレクトの違い（Dropdown vs Select）
用語・言い換え
セレクトはフォーム入力として選択値を決める部品、ドロップダウンはメニューや操作候補を開く広い表現として使われます。
コンポーネントドロワー（Drawer）
ナビゲーション
ドロワー（Drawer）は、画面端からスライドインするパネル型コンポーネント。モバイルメニュー・フィルターパネル・詳細ビューに使用される。
用語集ドロワーとサイドバーの違い（Drawer vs Sidebar）
用語・言い換え
ドロワーは一時的に開閉するパネル、サイドバーは常時または半常時表示されるナビゲーション領域として使われます。
コンポーネントナビゲーション（Navigation）
ナビゲーション
ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。
カテゴリナビゲーションUI（Navigation UI）
カテゴリ別ハブ
ナビゲーションUIは、ユーザーが現在位置を理解し、目的の画面へ迷わず移動するための導線設計です。
コンポーネントバッジ（Badge）
表示
バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。
用語集バッジとタグの違い（Badge vs Tag）
用語・言い換え
バッジは状態や件数を短く示し、タグやチップは分類・属性・選択済み条件を示すために使います。
コンポーネントパンくずリスト（Breadcrumb）
ナビゲーション
パンくずリスト（Breadcrumb）は、ユーザーの現在位置をページ階層で示すナビゲーション補助コンポーネント。サイトの深い階層を分かりやすく示す。
用語集パンくずリストとナビゲーションの違い（Breadcrumb vs Navigation）
用語・言い換え
パンくずリストは現在位置と階層を示し、ナビゲーションは主要な移動先を選ばせるために使います。
コンポーネントファイルアップロード（File Upload）
入力
ファイルアップロード（File Upload）は、ファイルを選択またはドラッグ＆ドロップでアップロードするコンポーネント。ファイル種別・サイズ制限の表示やプレビュー機能を持つ場合もある。
カテゴリフィードバックUI（Feedback UI）
カテゴリ別ハブ
フィードバックUIは、処理結果、エラー、読み込み、警告をユーザーに伝え、次の行動を判断できるようにするUIです。
カテゴリフォームUI（Form UI）
カテゴリ別ハブ
フォームUIは、ユーザーから情報を受け取り、入力ミスを減らしながら完了まで導くための入力コンポーネント群です。
UIパターンフォームバリデーション（Form Validation）
設計パターン
フォームバリデーションは、入力内容の誤りや不足をユーザーが修正できる形で伝えるUIパターンです。
コンポーネントプログレスバー（Progress Bar）
表示
プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。
画面パターンプロフィール画面（Profile Screen）
画面から逆引き
プロフィール画面は、ユーザーの基本情報、自己紹介、公開状態、編集導線をまとめて確認・更新する画面です。
コンポーネントページネーション（Pagination）
ナビゲーション
ページネーション（Pagination）は、複数ページに渡るコンテンツを区切り、ページ間を移動するためのナビゲーション。ページ数・現在位置・前後移動ボタンで構成される。
用語集ページネーションと無限スクロールの違い（Pagination vs Infinite Scroll）
用語・言い換え
ページネーションは結果をページ単位で移動し、無限スクロールは下へ進むほど追加読み込みする一覧UIです。
コンポーネントボタン（Button）
表示
ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
コンポーネントポップオーバー（Popover）
表示
ポップオーバー（Popover）は、要素に紐付いてトリガー操作で表示される吹き出し型UIコンポーネント。ツールチップより情報量が多く、ボタンやフォームを内包できる。
用語集ポップオーバーとツールチップの違い（Popover vs Tooltip）
用語・言い換え
ツールチップは短い補足説明、ポップオーバーは操作・詳細情報・小さなフォームを含められる浮動パネルです。
コンポーネントボトムシート（Bottom Sheet）
ナビゲーション
ボトムシート（Bottom Sheet）は、モバイルUIで画面下部からスライドアップするパネルコンポーネント。ドロワーのモバイル版に相当し、アクションメニューや詳細情報の表示に使われる。
コンポーネントマイナンバー入力（My Number Input）
行政・公共
マイナンバー入力（My Number Input）は、12桁のマイナンバー（個人番号）をマスク表示しながら入力するコンポーネント。セキュリティ要件に対応したペースト制御・入力値の非表示機能を持つ。
コンポーネントモーダル（Modal）
表示
モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。
用語集モーダルとダイアログの違い（Modal vs Dialog）
用語・言い換え
モーダルは背景操作を一時的に止める表示形式、ダイアログはユーザーに確認・入力・情報提示を行うUI要素として扱われます。
用途モバイルUI（Mobile UI）
用途別ハブ
モバイルUIは、狭い画面、片手操作、下部導線、短い入力を前提にコンポーネントを選ぶ必要があります。
コンポーネントラジオボタン（Radio Button）
入力
ラジオボタン（Radio Button）は、複数の選択肢から1つだけ選択させる入力コンポーネント。グループで使用し、排他的な選択を表現する。
コンポーネントルビ（ふりがな）（Ruby）
特殊
ルビ（ふりがな）（Ruby）は、漢字などの文字の上または横にふりがな（読み仮名）を付けるコンポーネント。教育系・行政系サービスでのアクセシビリティ向上に使われる。
カテゴリレイアウトUI（Layout UI）
カテゴリ別ハブ
レイアウトUIは、情報のまとまり、余白、表示領域、重なり方を設計し、画面全体の読みやすさを支える構造です。
画面パターンログイン画面（Login Screen）
画面から逆引き
ログイン画面は、ユーザーが本人確認を行い、サービス内の個別領域へ入るための入口です。
画面パターン管理テーブル画面（Admin Table Screen）
画面から逆引き
管理テーブル画面は、業務データを検索・絞り込み・一括操作し、詳細確認や編集へ進むための画面です。
コンポーネント区切り線（Divider）
レイアウト
区切り線（Divider）は、セクション間を視覚的に分割する水平・垂直の区切り線コンポーネント。コンテンツの論理的なグループ分けを補助する。
コンポーネント空の状態（Empty State）
フィードバック
空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。
UIパターン空状態（Empty State）
設計パターン
空状態は、まだデータがない、検索結果がない、権限がないなどの状態で次の行動を示すUIパターンです。
用語集空状態とエラー状態の違い（Empty State vs Error State）
用語・言い換え
空状態はデータがない通常状態、エラー状態は処理失敗や取得失敗で本来の内容を表示できない状態です。
画面パターン決済画面（Checkout Screen）
画面から逆引き
決済画面は、商品、金額、配送、支払い方法、確認操作を誤解なく完了させるための画面です。
画面パターン検索結果画面（Search Results Screen）
画面から逆引き
検索結果画面は、検索条件に合う情報を一覧し、絞り込みや並び替えで目的の項目へ到達する画面です。
コンポーネント口座番号入力（Bank Account Input）
行政・公共
口座番号入力（Bank Account Input）は、金融機関コード・支店コード・口座種別・口座番号を分割入力する複合フォームコンポーネント。給与振込先や公金受取口座登録などに使われる。
コンポーネント氏名入力（Name Input）
特殊
氏名入力（Name Input）は、姓・名・姓（フリガナ）・名（フリガナ）を分割して入力する複合コンポーネント。日本の氏名入力フォームの標準的な実装パターン。
コンポーネント住所入力（Address Input）
行政・公共
住所入力（Address Input）は、郵便番号入力による住所自動補完と、都道府県・市区町村・番地・建物名を分割入力する複合フォームコンポーネント。
コンポーネント縦書きテキスト（Vertical Text）
特殊
縦書きテキスト（Vertical Text）は、日本語の縦書きレイアウトに対応したテキスト表示コンポーネント。出版・新聞・伝統的なデザインUIで使用される。
画面パターン商品一覧画面（Product List Screen）
画面から逆引き
商品一覧画面は、複数の商品を比較しながら絞り込み、目的の商品詳細へ進むための画面です。
画面パターン商品詳細画面（Product Detail Screen）
画面から逆引き
商品詳細画面は、商品の価値、仕様、価格、在庫、購入導線を判断しやすくまとめる画面です。
コンポーネント数値入力（Number Input）
入力
数値入力（Number Input）は、数値の入力に特化したコンポーネント。インクリメント・デクリメントボタン付きで、最小値・最大値・ステップ値の制御が可能。
画面パターン設定画面（Settings Screen）
画面から逆引き
設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。
コンポーネント選択ボックス（Select）
入力
選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。
画面パターン通知画面（Notification Screen）
画面から逆引き
通知画面は、ユーザーに必要な更新、警告、アクション要求を時系列または重要度順に整理する画面です。
コンポーネント電話番号入力（Phone Number Input）
特殊
電話番号入力（Phone Number Input）は、日本の電話番号形式（市外局番・市内局番・加入者番号）に対応した複合入力コンポーネント。ハイフン自動挿入・携帯/固定電話の形式切り替えに対応する。
コンポーネント日付選択（Date Picker）
入力
日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。
画面パターン入力ウィザード画面（Form Wizard Screen）
画面から逆引き
入力ウィザード画面は、長いフォームを複数ステップに分け、進捗と保存状態を示しながら完了へ導く画面です。
コンポーネント評価（レーティング）（Rating）
入力
評価（レーティング）（Rating）は、星や数値でユーザーの評価を入力・表示するコンポーネント。読み取り専用・インタラクティブのバリアントがある。
コンポーネント和暦入力（Japanese Calendar）
行政・公共
和暦入力（Japanese Calendar）は、令和・平成・昭和などの和暦（元号）と西暦を相互変換しながら日付を入力・表示するコンポーネント。行政・公共サービスで必須の機能。