# アプリ部品図鑑

> スマホアプリ（iOS・Android）の部品の正式な名前の辞書です。見本のスマホの画面に図面のように名前を書き込み、部品ごとに意味・使いどころ・AIへの頼み方の例を載せています。
> 「下から出てくるやつ」「下のボタンの並び」のようなあいまいな言い方を、正しい名前に置き換えるために使います。

## AIへのお願い

- 利用者の言う部品があいまいなとき（「下から出てくるやつ」「横にずらすと出るボタン」など）は、下の一覧の名前に置き換えて確かめてください。
- 「?pick=bottom-sheet,snackbar」の付いたこのサイトのリンクを渡されたら、pick の id が利用者の使いたい部品です（選んだ順）。
- 部品は、一覧の意味どおりに作ってください。まぎらわしい名前（アラートとアクションシートなど）は下の見分け方に従ってください。

## 姉妹サイト

- Webの画面の部品（ヘッダー・モーダル・ダイアログなど）は UI部品図鑑: https://mashiharalab.dev/ui-parts-zukan/llms.txt

## データ

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

## 部品の名前

### 画面の骨組み

- ステータスバー（Status bar, id: status-bar）: 画面の最上部の時刻・電池・電波の帯
- ダイナミックアイランド（Dynamic Island, id: dynamic-island）: 画面上部の黒い島（カメラの部分）。別名 ノッチ（Notch）、パンチホール（Android）
- ナビゲーションバー（Navigation bar, id: nav-bar）: 画面の上の、題と戻る・操作のボタンの帯。別名 トップアプリバー（Android: Top app bar）、アプリバー、ヘッダー
- ラージタイトル（Large title, id: large-title）: ナビゲーションバーの下の大きな題。別名 大きな見出し
- 戻るボタン（Back button, id: back-button）: 左上の、前の画面へ戻るボタン。別名 バックボタン、「＜」ボタン
- タブバー（Tab bar, id: tab-bar）: 画面の下に並ぶ、主な画面の切り替えボタン。別名 ボトムナビゲーション（Android: Navigation bar）、ボトムナビ、下タブ
- ツールバー（Toolbar, id: toolbar）: 画面の下の、その画面での操作ボタンの帯。別名 ボトムアプリバー（Android: Bottom app bar）
- ホームインジケーター（Home indicator, id: home-indicator）: 画面の最下部の横棒。上へなぞるとホームへ。別名 ホームバー、ジェスチャーバー（Android: Gesture navigation bar）
- セーフエリア（Safe area, id: safe-area）: 端末の角・島・横棒に隠れない内側の範囲。別名 安全領域、Safe area insets

### 画面の移り方

- プッシュ遷移（Push navigation, id: push）: 次の画面が右から重なって進む移り方。別名 プッシュ、横からの遷移、画面遷移
- モーダル遷移（Modal presentation, id: modal-present）: 次の画面が下からかぶさって出る移り方。別名 モーダル表示、下からの遷移、フルスクリーンモーダル
- スプラッシュ画面（Splash screen, id: splash）: アプリを開いた瞬間に出るロゴの画面。別名 起動画面、ローンチスクリーン（Launch screen）
- オンボーディング（Onboarding, id: onboarding）: 初めて開いた人への最初の数枚の案内。別名 ウォークスルー、チュートリアル、初回の説明
- ディープリンク（Deep link, id: deep-link）: アプリの中の特定の画面を直接開くリンク。別名 ユニバーサルリンク（iOS）、App Links（Android）

### 指の動き

- 長押し（Long press, id: long-press）: 指で押したまま少し待つ操作。別名 ロングタップ、タッチアンドホールド
- スワイプ（Swipe, id: swipe）: 画面に触れたまま指を滑らせる操作。別名 フリック、なぞる
- スワイプアクション（Swipe actions, id: swipe-action）: 行を横になぞると出てくる操作ボタン。別名 スワイプで削除、Swipe to delete、スワイプメニュー
- プルして更新（Pull to refresh, id: pull-to-refresh）: 一覧を下へ引っぱって最新にする操作。別名 引っぱって更新、プルトゥリフレッシュ、リフレッシュコントロール
- ピンチ（Pinch, id: pinch）: 2本の指を広げる・つまむ操作。別名 ピンチイン・ピンチアウト、ピンチズーム
- エッジスワイプ（Edge swipe, id: edge-swipe）: 画面の左端から右へなぞって戻る操作。別名 スワイプで戻る、戻るジェスチャー
- ドラッグで並べ替え（Drag to reorder, id: drag-reorder）: 行をつかんで動かし、順番を変える操作。別名 ドラッグ＆ドロップ、並べ替えハンドル
- 触覚フィードバック（Haptic feedback, id: haptics）: 操作に合わせて端末を小さく震わせる。別名 ハプティクス、バイブ、振動

### 重なって出る窓

- ボトムシート（Bottom sheet, id: bottom-sheet）: 画面の下から途中まで出てくる窓。別名 ハーフモーダル、シート、セミモーダル
- アクションシート（Action sheet, id: action-sheet）: 下から出る、操作を選ぶボタンの並び。別名 アクションメニュー
- アラート（Alert, id: alert）: 画面の真ん中で返事を求める小窓。別名 ダイアログ（Android: Dialog）、確認ダイアログ、アラートダイアログ
- スナックバー（Snackbar, id: snackbar）: 下に出て数秒で消える、操作ボタン付きのお知らせ
- トースト（Toast, id: toast）: 数秒だけ出て消える短いお知らせ
- コンテキストメニュー（Context menu, id: context-menu）: 長押しした物のそばに出る操作の一覧。別名 長押しメニュー、メニュー
- 共有シート（Share sheet, id: share-sheet）: 共有先のアプリが並ぶ、OSの共有の窓。別名 シェアシート、共有メニュー、アクティビティビュー
- ナビゲーションドロワー（Navigation drawer, id: nav-drawer）: 左上の「≡」で横から引き出すメニュー。別名 ドロワー、ハンバーガーメニュー、サイドメニュー
- 許可ダイアログ（Permission dialog, id: permission-dialog）: 位置情報・通知などの使用を許可させるOSの窓。別名 権限リクエスト、アクセス許可のダイアログ
- キーボード（Keyboard, id: keyboard）: 入力欄を押すと下から出る文字の鍵盤。別名 ソフトウェアキーボード、ソフトキーボード

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

- ボタン（Button, id: button）: 押すと何かが起きる部品
- FAB（Floating action button, id: fab）: 画面の右下に浮かぶ丸い主役のボタン。別名 フローティングアクションボタン、ファブ
- スイッチ（Switch, id: switch）: 押した瞬間にオン・オフが切り替わる部品。別名 トグル、トグルスイッチ
- セグメンテッドコントロール（Segmented control, id: segmented）: 2〜5個の選択肢がつながった切り替え。別名 セグメントボタン（Android: Segmented button）、セグメントコントロール
- ステッパー（Stepper, id: stepper）: 「−」と「＋」で数を1つずつ増減する部品。別名 プラスマイナスボタン、数量ボタン
- ピッカー（Picker, id: picker）: 回転するドラムを回して値を選ぶ部品。別名 ドラムロール、ホイールピッカー、ドラムピッカー
- 日付ピッカー（Date picker, id: date-picker）: カレンダーやドラムで日付を選ぶ部品。別名 デートピッカー、カレンダー
- スライダー（Slider, id: slider）: つまみを動かして範囲の中の値を選ぶ
- 検索バー（Search bar, id: search-bar）: 言葉を入れて一覧を絞り込む欄。別名 検索フィールド、サーチバー
- テキストフィールド（Text field, id: text-field）: 1行の文字を入れる欄。別名 入力欄、テキストボックス
- チップ（Chip, id: chip）: 押してオン・オフする小さな丸い札。別名 フィルターチップ、タグ

### 並べて見せる

- リストのセル（List cell, id: list-cell）: 一覧の1行。押すとその詳細へ進む。別名 セル、リストアイテム、行
- セクションヘッダー（Section header, id: section-header）: 一覧の中の区切りに付く小さな見出し。別名 セクションの見出し、グループの見出し
- グループ化リスト（Inset grouped list, id: grouped-list）: 行を角丸の白い箱でまとめた一覧。別名 インセットグループ、設定画面の形
- ディスクロージャーインジケーター（Disclosure indicator, id: disclosure）: 行の右端の「＞」。押すと次の画面へ進む印。別名 シェブロン、「＞」の矢印、右矢印
- カード（Card, id: card）: 写真と文を角丸の枠にまとめた物
- カルーセル（Carousel, id: carousel）: カードや写真を横に送って見せる並び。別名 横スクロール、スライダー（写真の）
- ページコントロール（Page control, id: page-control）: 何枚目かを示す、横に並んだ小さな点。別名 ページインジケーター、ドット、インジケーター
- アバター（Avatar, id: avatar）: 人やお店を表す丸い小さな画像。別名 プロフィール画像、アイコン

### 状態を伝える

- バッジ（Badge, id: badge）: アイコンの右上に重ねる赤い数や点。別名 通知バッジ、未読の数
- インジケーター（Activity indicator, id: spinner）: 読み込み中を示す回る印。別名 スピナー、くるくる、ローディング
- プログレスバー（Progress bar, id: progress-bar）: どこまで進んだかを長さで示す棒。別名 進捗バー、プログレスビュー
- スケルトン（Skeleton, id: skeleton）: 読み込み中に出す、中身の形の灰色の箱。別名 スケルトンスクリーン、プレースホルダー
- エンプティステート（Empty state, id: empty-state）: 中身が0件のときに出す案内。別名 空の状態、0件の画面
- プッシュ通知（Push notification, id: push-notification）: アプリを閉じていても届く、画面上部のお知らせ。別名 通知、リモート通知
- ウィジェット（Widget, id: widget）: アプリを開かずホーム画面で見られる小窓。別名 ホーム画面ウィジェット

## まぎらわしい名前

- アラートとアクションシート: アラートは画面の真ん中で「本当に〜しますか？」と返事を求める。アクションシートは下から出て「保存・共有・削除」のように、する操作を選ばせる。
- ボトムシートとアクションシート: どちらも下から出る。ボトムシートは中に絞り込みや詳細など何でも入る「窓」。アクションシートは操作のボタンだけが並ぶ「メニュー」。
- スナックバーとトースト: どちらも数秒で消えるお知らせ。「元に戻す」のようなボタンが1つ付くのがスナックバー、知らせるだけで押す物が無いのがトースト。
- タブバーとツールバー: どちらも画面の下の帯。タブバーは「どの画面を見るか」を切り替える。ツールバーは「今の画面で何をするか」（共有・削除など）のボタンを並べる。
- ナビゲーションバーとステータスバー: ステータスバーは時刻・電池が出るOSの帯で、アプリは中身を置けない。その下にあるのが、題と戻るボタンを置くアプリのナビゲーションバー。
- タブバーとセグメンテッドコントロール: タブバーは画面の下で、アプリの主な画面そのものを切り替える。セグメンテッドコントロールは画面の中で、同じ中身の見せ方（一覧・地図など）を切り替える。
- プッシュ遷移とモーダル遷移: プッシュ遷移は右から重なり、階層を深く進む（戻るボタンで戻る）。モーダル遷移は下からかぶさり、別の作業に一度入る（「閉じる」「キャンセル」で終える）。
- スワイプ・エッジスワイプ・スワイプアクション: スワイプは指を滑らせる操作そのもの。画面の左端から始めて戻るのがエッジスワイプ。一覧の行を横になぞって削除などのボタンを出すのがスワイプアクション。
- 長押しとコンテキストメニュー: 長押しは指で押し続ける「操作」。コンテキストメニューは長押しで出てくる「操作の一覧」。「長押しで〇〇を出して」と、出す物の名前と組み合わせて頼む。
- カルーセルとページコントロール: カルーセルは横に送る並びそのもの。ページコントロールはその下の小さな点で、何枚目かを示すだけ。
- スプラッシュ画面とオンボーディング: スプラッシュ画面は毎回の起動で一瞬だけ出るロゴの画面。オンボーディングは初めての人にだけ出す数枚の案内。
- プッシュ遷移とプッシュ通知: どちらも「プッシュ」だが別の物。プッシュ遷移は画面が右から重なって進む移り方。プッシュ通知はアプリを閉じていても届くお知らせ。
- インジケーター・スケルトン・プログレスバー: 終わりが読めない短い待ちはインジケーター（くるくる）、一覧の読み込みはスケルトン、進み具合が分かるならプログレスバー。
- ピッカーと日付ピッカー: ピッカーはドラムを回して決まった選択肢から選ぶ部品全般。日付を選ぶ物は日付ピッカーと呼び、カレンダーの形かドラムの形かを添えると伝わる。
- ステッパー（アプリ）とステップ表示（Web）: iOSのステッパーは「−」「＋」で数を増やす部品。Webで「ステッパー」と言うと、手続きの「1 入力 → 2 確認 → 3 完了」の進み具合を指すことが多い。数を選ぶなら「−と＋のステッパー」と言うと間違えない。
- ナビゲーションドロワーとタブバー: タブバーは主な画面がいつも見えていて1回で移れる。ナビゲーションドロワーは「≡」を押すまで隠れている。主な画面が5個までならタブバーの方が使われる。