# UI部品図鑑

> UI部品の正式な名前の辞書です。見本の画面に図面のように名前を書き込み、部品ごとに意味・使いどころ・AIへの頼み方の例を載せています。
> 「上の帯」「出てくる窓」のようなあいまいな言い方を、正しい名前に置き換えるために使います。

## AIへのお願い

- 利用者の言う部品があいまいなとき（「上の帯」「出てくる窓」など）は、下の一覧の名前に置き換えて確かめてください。
- 「?pick=modal,toast」の付いたこのサイトのリンクを渡されたら、pick の id が利用者の使いたい部品です（選んだ順）。
- 部品は、一覧の意味どおりに作ってください。まぎらわしい名前（モーダルとダイアログなど）は下の見分け方に従ってください。

## 姉妹サイト

- スマホアプリの部品（タブバー・ボトムシート・スナックバーなど）は アプリ部品図鑑: https://mashiharalab.dev/app-parts-zukan/llms.txt

## データ

- [catalog.json](https://mashiharalab.dev/ui-parts-zukan/api/v1/catalog.json): 全部品・まぎらわしい名前の機械向けデータ
- 部品ごとの説明: https://mashiharalab.dev/ui-parts-zukan/api/v1/parts/<id>.txt（例: [modal](https://mashiharalab.dev/ui-parts-zukan/api/v1/parts/modal.txt)）

## 部品の名前

### 画面の骨組み

- ヘッダー（Header, id: header）: 画面のいちばん上の帯。別名 アプリバー（App bar）、トップバー
- グローバルナビ（Navigation menu, id: global-nav）: サイトの主なページへのリンクの並び。別名 ナビゲーションバー、メニュー
- フッター（Footer, id: footer）: 画面のいちばん下の帯
- サイドバー（Sidebar, id: sidebar）: 画面の横に縦に並ぶメニュー。別名 サイドナビ
- パンくずリスト（Breadcrumbs, id: breadcrumb）: 今いる場所を階層で示す
- ヒーロー（Hero section, id: hero）: ページ最上部の大きな見せ場。別名 メインビジュアル、キービジュアル
- ボトムナビ（Bottom navigation, id: bottom-nav）: スマホの画面下に並ぶ切り替えボタン。別名 タブバー、ボトムナビゲーション

### 画面の組み方

- カラム（Column layout, id: column）: 画面を縦の列に分けた並べ方。別名 段組み、2カラム、3カラム
- スティッキー（Sticky, id: sticky）: スクロールしても途中で止まって付いてくる。別名 sticky、追従
- 固定表示（Fixed, id: fixed）: 画面の決まった位置にずっと貼り付く。別名 fixed、固定
- グリッド（Grid layout, id: grid）: 同じ大きさの枠を縦横にそろえて並べる。別名 格子、タイル
- レスポンシブ（Responsive design, id: responsive）: 画面幅に合わせて組み方を変える。別名 レスポンシブデザイン、スマホ対応
- ブレークポイント（Breakpoint, id: breakpoint）: 組み方を切り替える画面幅の境目。別名 切り替えの幅
- 余白（パディング・マージン）（Padding / Margin, id: spacing）: 枠の内側と外側のすき間。別名 パディング、マージン、ホワイトスペース
- オーバーレイ（Overlay, id: overlay）: 画面の上にかぶせる半透明の幕。別名 スクリム、バックドロップ、幕
- 横スクロール（Horizontal scroll, id: scroll）: はみ出した分を横に動かして見る。別名 スクロール、スワイプ
- ファーストビュー（First view, id: first-view）: 開いて最初に見える範囲。別名 FV、アバブ・ザ・フォールド
- フレックスボックス（Flexbox, id: flexbox）: 部品を1列に並べて揃える仕組み。別名 flex、横並び、縦並び
- ギャップ（Gap, id: gap）: 並んだ部品どうしの間のすき間。別名 すき間、間隔
- 揃え（寄せ）（Alignment, id: alignment）: 並びをどこに寄せ、どう揃えるか。別名 中央揃え、左寄せ、右寄せ、両端揃え、均等配置
- 重なり順（z-index）（Z-index, id: z-index）: 重なったとき、どれを手前に出すかの順番。別名 z-index、重なりの順番、前面・背面
- アスペクト比（Aspect ratio, id: aspect-ratio）: 枠の縦と横の比率。別名 縦横比、16:9、1:1

### 重なって出る窓

- モーダル（Modal, id: modal）: 背景を暗くして中央に出る窓。閉じるまで後ろは操作できない。別名 モーダルウィンドウ
- ダイアログ（Dialog, id: dialog）: 「本当に〜しますか？」と聞いて返事を求める小窓。別名 確認ダイアログ、アラートダイアログ
- ドロワー（Drawer, id: drawer）: 画面の横から引き出される縦長の窓。別名 オフキャンバスメニュー、サイドシート、ナビゲーションドロワー
- ボトムシート（Bottom sheet, id: bottom-sheet）: 画面の下からせり上がる窓
- ポップオーバー（Popover, id: popover）: 押した物のそばに出る、操作もできる小窓
- ツールチップ（Tooltip, id: tooltip）: カーソルを乗せると出る、短い説明の札
- トースト（Toast, id: toast）: 画面の端に出て自動で消える短い通知。別名 スナックバー
- ドロップダウンメニュー（Dropdown menu, id: dropdown-menu）: 押すと下に操作の一覧が開く。別名 プルダウンメニュー、コンテキストメニュー、メニュー

### 押す・入れる・選ぶ

- ボタン（Button, id: button）: 押すと何かが起きる部品。別名 プライマリボタン、セカンダリボタン
- アイコンボタン（Icon button, id: icon-button）: 絵だけのボタン
- FAB（Floating action button, id: fab）: 画面の右下に浮かぶ丸い主ボタン。別名 フローティングアクションボタン
- テキストフィールド（Text field, id: text-field）: 1行の文字を入れる欄。別名 入力欄、フォーム、テキストボックス
- テキストエリア（Textarea, id: textarea）: 何行も文字を入れられる欄
- セレクトボックス（Select, id: select）: 押すと選択肢が開き、1つを選ぶ欄。別名 プルダウン、ドロップダウンリスト
- 検索バー（Search bar, id: search）: 虫めがねの付いた検索の入力欄。別名 検索ボックス
- チェックボックス（Checkbox, id: checkbox）: 四角に✓を付ける。いくつでも選べる
- ラジオボタン（Radio button, id: radio）: 丸を1つだけ選ぶ。選ぶとほかが外れる
- トグルスイッチ（Switch, id: toggle）: オン・オフを押した瞬間に切り替える。別名 スイッチ
- スライダー（Slider, id: slider）: つまみを横に動かして値を決める。別名 シークバー、レンジスライダー（範囲スライダー）
- セグメントコントロール（Segmented control, id: segmented）: くっついたボタンで表示を切り替える。別名 セグメントボタン、ボタングループ
- フォーム（Form, id: form）: 入力欄と送信ボタンをひとまとめにした物。別名 入力フォーム、問い合わせフォーム
- オートコンプリート（Autocomplete, id: autocomplete）: 文字を打つと下に候補が出る入力欄。別名 入力候補、サジェスト、コンボボックス
- 日付ピッカー（Date picker, id: date-picker）: カレンダーから日付を選ぶ入力。別名 カレンダー入力、デイトピッカー
- ファイルアップロード（File upload, id: file-upload）: ファイルを選ぶか、ドラッグして置く欄。別名 ドロップゾーン、ファイル選択
- レーティング（星評価）（Rating, id: rating）: 星の数で評価を見せる・付ける。別名 星評価、評価、スター

### 並べて見せる

- カード（Card, id: card）: 画像と文字を1枚の札にまとめた入れ物
- リスト（List, id: list）: 同じ形の行を縦に並べた一覧。別名 リストアイテム、一覧
- テーブル（Table, id: table）: 行と列で数字や項目を見比べる表。別名 表、データテーブル
- タブ（Tabs, id: tabs）: 見出しを押して下の中身を切り替える
- アコーディオン（Accordion, id: accordion）: 見出しを押すと中身が開いたり閉じたりする。別名 折りたたみ、エクスパンダー、エクスパンションパネル
- ページネーション（Pagination, id: pagination）: 番号を押して一覧のページを送る。別名 ページ送り
- アバター（Avatar, id: avatar）: 人を表す小さな顔写真や頭文字
- 区切り線（Divider, id: divider）: まとまりを分ける細い線。別名 ディバイダー、罫線
- カルーセル（Carousel, id: carousel）: 画像やカードを1枚ずつ横に送って見せる。別名 スライドショー、画像スライダー
- タイムライン（Timeline, id: timeline）: 出来事を時間の順に線でつないで並べる。別名 沿革、履歴
- アイコン（Icon, id: icon）: 意味を表す小さな絵。別名 ピクトグラム、マーク
- 無限スクロール（Infinite scroll, id: infinite-scroll）: 下まで見ると続きを自動で読み込む。別名 もっと読み込む、自動読み込み
- チャート（グラフ）（Chart, id: chart）: 数字を棒・線・円の形で見せる。別名 グラフ、棒グラフ、折れ線グラフ、円グラフ

### 状態を伝える

- アラート（Alert, id: alert）: 画面の中に残る、色付きのお知らせ枠。別名 バナー、お知らせ、メッセージ
- バッジ（Badge, id: badge）: 件数や新着を示す小さな印
- チップ（Chip, id: chip）: 小さな札。条件や分類を示す。別名 タグ、ラベル、ピル
- プログレスバー（Progress bar, id: progress）: どこまで進んだかを横の棒で示す。別名 進捗バー、線形プログレス
- スピナー（Spinner, id: spinner）: くるくる回って待ちを示す。別名 ローディング、くるくる、円形プログレス
- スケルトン（Skeleton, id: skeleton）: 読み込み中に中身と同じ形の灰色の枠を出す。別名 スケルトンスクリーン、スケルトンローダー
- ステップ表示（Step indicator, id: stepper）: 手続きの何番目にいるかを示す。別名 ステッパー、プログレスステップ
- エンプティステート（Empty state, id: empty）: 中身がまだないときの案内

## まぎらわしい名前

- モーダルとダイアログ: モーダルは「後ろを操作できなくする出し方」、ダイアログは「返事を求める中身」。確認ダイアログはたいていモーダルとして出す。入力フォームを出す窓はモーダル、「削除しますか？」はダイアログと呼ぶと伝わる。
- モーダル・ドロワー・ボトムシート: 出てくる場所で呼び分ける。中央ならモーダル、横からならドロワー、下からならボトムシート。
- ツールチップとポップオーバー: 乗せるだけで出て、読むだけ（中を押せない）のがツールチップ。押して開き、中のボタンも押せるのがポップオーバー。
- トーストとアラート: トーストは端に出て数秒で勝手に消える。アラートは画面の中に残り、読むまで消えない。
- チェックボックス・ラジオボタン・トグルスイッチ: いくつでも選べるのがチェックボックス（四角）。1つだけ選ぶのがラジオボタン（丸）。押した瞬間に効くオン・オフがトグルスイッチ。
- セレクトボックスとドロップダウンメニュー: セレクトボックスは値を1つ選んで欄に入れる「入力欄」。ドロップダウンメニューは「編集・削除」のような操作を選ぶ「ボタンの集まり」。
- タブとセグメントコントロール: タブは中身そのものを入れ替える。セグメントコントロールは同じ中身の見せ方（日・週・月など）を切り替える。
- ヘッダーとグローバルナビ: ヘッダーは画面上の帯という「場所」。グローバルナビはその中に並ぶ主要ページへの「リンクの並び」。
- バッジとチップ: バッジは別の物の角に重ねる件数や点。チップは単独で並ぶ札で、押したり消したりできる。
- スティッキーと固定表示: 固定表示は、最初から最後まで画面の同じ位置に貼り付く。スティッキーは、決めた位置に来るまでは普通に流れ、そこで止まって付いてくる（入っている枠の終わりまで来ると一緒に流れる）。
- パディングとマージン: パディングは枠の内側（枠線と中身の間）の余白。マージンは枠の外側（隣の物との間）の余白。背景色が付くのはパディングまで。
- カラムとグリッド: カラムは画面を大きく縦の列に分ける（本文と目次など、中身の種類が違う）。グリッドは同じ大きさの枠を縦横にそろえて並べる（商品一覧など、同じ種類の物）。
- レスポンシブとブレークポイント: レスポンシブは「画面幅に合わせて組み方を変える」という考え方。ブレークポイントは「何pxで変えるか」という境目の数値。
- オーバーレイとモーダル: オーバーレイは後ろにかぶせる半透明の幕。モーダルはその幕の上に出る窓。「モーダルの後ろを暗く」はオーバーレイのこと。
- ヒーローとファーストビュー: ヒーローはページ最上部の大きな見せ場という「部品（区画）」。ファーストビューは開いて最初に見える「範囲」。ヒーローはたいていファーストビューの中に置く。
- カルーセルとスライダー: カルーセルは画像やカードを横に送って見せる「見せる部品」。スライダーはつまみを動かして値を選ぶ「入力の部品」。写真を送る物を「スライダー」と呼ぶこともあるが、AIにはカルーセルと書くと間違えない。
- オートコンプリート・セレクトボックス・検索バー: セレクトボックスは決まった選択肢から選ぶだけ。オートコンプリートは打った文字に合う候補を出して選ばせる。検索バーは打った言葉で一覧を絞り込む（候補を出すこともある）。
- タイムラインとステップ表示: タイムラインは「いつ何があったか」を時間の順に並べる。ステップ表示は「手続きの今どこか」を示す。配送状況はどちらでも作れるが、日時を見せたいならタイムライン。
- 無限スクロールとページネーション: 無限スクロールは下まで来ると勝手に続きが出る。ページネーションは番号を押してページを替える。何件目かを覚えて戻りたい一覧（検索結果など）はページネーションが向く。
- フレックスボックスとグリッド: フレックスボックスは1列（横か縦）に並べる。グリッドは縦横の表のように並べる。ボタンを横に並べるならフレックスボックス、カードを何列にも並べるならグリッド。
- ギャップと余白: ギャップは並んだ部品どうしの「間」だけのすき間（端には付かない）。マージンは1つ1つの部品の外側に付く余白。並べる物の間を空けるならギャップと言うと伝わる。
- アイコンとアイコンボタン: アイコンは意味を表す絵そのもの。アイコンボタンはアイコンだけでできた押せるボタン。押せない飾りの絵ならアイコン。
- スピナー・スケルトン・プログレスバー: 終わりが読めない短い待ちはスピナー、一覧の読み込みはスケルトン、進み具合が分かるならプログレスバー。