{ "name": "アプリ部品図鑑", "description": "スマホアプリの部品の正式な名前の辞書。アプリの画面のどこを何と呼ぶか、意味・使いどころ・AIへの頼み方の例をまとめたもの。", "version": 2, "link": { "example": "?pick=bottom-sheet,snackbar&part=bottom-sheet", "rules": [ "pick に部品の id をカンマ区切りで選んだ順に書く", "part は最初に開く部品の id" ] }, "categories": [ { "id": "frame", "label": "画面の骨組み", "desc": "アプリの画面の上下にいつもある場所" }, { "id": "move", "label": "画面の移り方", "desc": "次の画面への移り方・最初の画面" }, { "id": "gesture", "label": "指の動き", "desc": "長押し・スワイプなど、指でする操作の名前" }, { "id": "overlay", "label": "重なって出る窓", "desc": "画面の上に一時的に重なる物" }, { "id": "input", "label": "押す・入れる・選ぶ", "desc": "利用者が操作する部品" }, { "id": "display", "label": "並べて見せる", "desc": "情報をまとめて見せる入れ物" }, { "id": "status", "label": "状態を伝える", "desc": "読み込み中・件数・お知らせ" } ], "parts": [ { "id": "status-bar", "category": "frame", "ja": "ステータスバー", "en": "Status bar", "aka": [], "meaning": "画面の最上部の時刻・電池・電波の帯", "when": "OSが出す場所。アプリはここに部品を置かず、背景の色と文字の明暗（白か黒か）だけ合わせる。", "ask": "ステータスバーの文字を白にして、その下まで写真が届くようにして。ステータスバーの裏に部品は置かないで。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/status-bar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/status-bar/" }, { "id": "dynamic-island", "category": "frame", "ja": "ダイナミックアイランド", "en": "Dynamic Island", "aka": [ "ノッチ（Notch）", "パンチホール（Android）" ], "meaning": "画面上部の黒い島（カメラの部分）", "when": "ここには文字やボタンを重ねない。タイマーや配達状況を出す「ライブアクティビティ」の置き場にもなる。", "ask": "ダイナミックアイランドに重ならないよう、画面上部の部品はセーフエリアの内側に置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/dynamic-island.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/dynamic-island/" }, { "id": "nav-bar", "category": "frame", "ja": "ナビゲーションバー", "en": "Navigation bar", "aka": [ "トップアプリバー（Android: Top app bar）", "アプリバー", "ヘッダー" ], "meaning": "画面の上の、題と戻る・操作のボタンの帯", "when": "今どの画面にいるかの題と、戻るボタン・右上の操作（編集・共有など）を置く。", "ask": "ナビゲーションバーの左に戻るボタン、右にお知らせのアイコンボタンを置いて。スクロールしたら題を小さくしてバーに収めて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/nav-bar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/nav-bar/" }, { "id": "large-title", "category": "frame", "ja": "ラージタイトル", "en": "Large title", "aka": [ "大きな見出し" ], "meaning": "ナビゲーションバーの下の大きな題", "when": "タブの一番上の画面など、ここが何の画面かを大きく見せたいとき。スクロールするとバーの中に小さく収まる。", "ask": "「お店をさがす」の画面はラージタイトルにして。下へスクロールしたら、ナビゲーションバーの中の小さな題に変えて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/large-title.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/large-title/" }, { "id": "back-button", "category": "frame", "ja": "戻るボタン", "en": "Back button", "aka": [ "バックボタン", "「＜」ボタン" ], "meaning": "左上の、前の画面へ戻るボタン", "when": "プッシュ遷移で進んだ画面に付ける。iOSは「＜ 前の画面の名前」、Androidは「←」の矢印。", "ask": "お店の詳細画面のナビゲーションバーに戻るボタンを付けて。iOSでは「＜ お店をさがす」と前の画面の名前を出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/back-button.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/back-button/" }, { "id": "tab-bar", "category": "frame", "ja": "タブバー", "en": "Tab bar", "aka": [ "ボトムナビゲーション（Android: Navigation bar）", "ボトムナビ", "下タブ" ], "meaning": "画面の下に並ぶ、主な画面の切り替えボタン", "when": "アプリの主な画面3〜5個を、どの画面からでも親指で切り替えられるようにする。", "ask": "タブバーにホーム・さがす・予約・マイページの4つを、アイコンと文字で並べて。今いるタブは色を付けて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/tab-bar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/tab-bar/" }, { "id": "toolbar", "category": "frame", "ja": "ツールバー", "en": "Toolbar", "aka": [ "ボトムアプリバー（Android: Bottom app bar）" ], "meaning": "画面の下の、その画面での操作ボタンの帯", "when": "画面を切り替えるタブバーと違い、今の画面の中身への操作（共有・編集・削除など）を並べる。", "ask": "写真を開いた画面では、タブバーを隠して画面の下にツールバーを出して。共有・お気に入り・削除の3つを並べて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/toolbar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/toolbar/" }, { "id": "home-indicator", "category": "frame", "ja": "ホームインジケーター", "en": "Home indicator", "aka": [ "ホームバー", "ジェスチャーバー（Android: Gesture navigation bar）" ], "meaning": "画面の最下部の横棒。上へなぞるとホームへ", "when": "OSが出す場所。重ねてボタンを置くと、押したつもりがホームへ戻ってしまう。", "ask": "下に固定した「予約する」ボタンは、ホームインジケーターに重ならないよう、下のセーフエリアの分だけ上に置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/home-indicator.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/home-indicator/" }, { "id": "safe-area", "category": "frame", "ja": "セーフエリア", "en": "Safe area", "aka": [ "安全領域", "Safe area insets" ], "meaning": "端末の角・島・横棒に隠れない内側の範囲", "when": "ボタンや文字はこの内側に置く。背景の色や写真だけは外側（画面の端）まで広げてよい。", "ask": "ボタンと文字はセーフエリアの内側に置いて。背景の写真だけはセーフエリアの外まで、画面の端いっぱいに広げて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/safe-area.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/safe-area/" }, { "id": "push", "category": "move", "ja": "プッシュ遷移", "en": "Push navigation", "aka": [ "プッシュ", "横からの遷移", "画面遷移" ], "meaning": "次の画面が右から重なって進む移り方", "when": "一覧から詳細へなど、階層を1つ深く進むとき。左上に戻るボタンが付き、右へなぞっても戻れる。", "ask": "お店の一覧の行を押したら、お店の詳細画面へプッシュ遷移して。左上の戻るボタンと、画面の左端からのスワイプで戻れるように。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/push.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/push/" }, { "id": "modal-present", "category": "move", "ja": "モーダル遷移", "en": "Modal presentation", "aka": [ "モーダル表示", "下からの遷移", "フルスクリーンモーダル" ], "meaning": "次の画面が下からかぶさって出る移り方", "when": "新規作成・ログインなど、今の流れから一度離れて別の作業をさせるとき。戻るではなく「閉じる」「キャンセル」で終える。", "ask": "右上の「＋」を押したら、予約の新規作成画面をモーダル遷移で下から出して。左上に「キャンセル」、右上に「保存」を置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/modal-present.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/modal-present/" }, { "id": "splash", "category": "move", "ja": "スプラッシュ画面", "en": "Splash screen", "aka": [ "起動画面", "ローンチスクリーン（Launch screen）" ], "meaning": "アプリを開いた瞬間に出るロゴの画面", "when": "起動の読み込みの間だけ出す。長く見せたり、ここで広告や説明を出したりしない。", "ask": "スプラッシュ画面は、地を緑にして中央にアプリのアイコンだけを置いて。読み込みが終わったらすぐホームを出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/splash.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/splash/" }, { "id": "onboarding", "category": "move", "ja": "オンボーディング", "en": "Onboarding", "aka": [ "ウォークスルー", "チュートリアル", "初回の説明" ], "meaning": "初めて開いた人への最初の数枚の案内", "when": "初回だけ、アプリでできることを3枚程度で見せる。いつでも「スキップ」で飛ばせるようにする。", "ask": "初回起動のときだけオンボーディングを3枚出して。横にスワイプで進み、下にページコントロール、右上に「スキップ」を置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/onboarding.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/onboarding/" }, { "id": "deep-link", "category": "move", "ja": "ディープリンク", "en": "Deep link", "aka": [ "ユニバーサルリンク（iOS）", "App Links（Android）" ], "meaning": "アプリの中の特定の画面を直接開くリンク", "when": "通知やメール・Webのリンクから、ホームではなくそのお店・その予約の画面へ直接連れていく。", "ask": "予約確認のメールのリンクを押したら、ディープリンクでアプリのその予約の詳細画面を直接開いて。アプリが無ければWebのページを開いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/deep-link.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/deep-link/" }, { "id": "long-press", "category": "gesture", "ja": "長押し", "en": "Long press", "aka": [ "ロングタップ", "タッチアンドホールド" ], "meaning": "指で押したまま少し待つ操作", "when": "コンテキストメニューを出す、並べ替えを始めるなど、普段は隠しておく操作の入口に使う。", "ask": "お店の行を長押ししたら、コンテキストメニューで「共有・お気に入り・非表示」を出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/long-press.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/long-press/" }, { "id": "swipe", "category": "gesture", "ja": "スワイプ", "en": "Swipe", "aka": [ "フリック", "なぞる" ], "meaning": "画面に触れたまま指を滑らせる操作", "when": "写真や画面を横に送る、シートを下げて閉じるなど。素早く払う動きはフリックとも呼ぶ。", "ask": "お店の写真は左右にスワイプで次の写真へ送れるようにして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/swipe.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/swipe/" }, { "id": "swipe-action", "category": "gesture", "ja": "スワイプアクション", "en": "Swipe actions", "aka": [ "スワイプで削除", "Swipe to delete", "スワイプメニュー" ], "meaning": "行を横になぞると出てくる操作ボタン", "when": "一覧の1行ごとの削除・アーカイブなどを、行を開かずに済ませたいとき。", "ask": "お気に入りの一覧の行を左へスワイプしたら、赤い「削除」のスワイプアクションを出して。最後までなぞったらそのまま削除して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/swipe-action.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/swipe-action/" }, { "id": "pull-to-refresh", "category": "gesture", "ja": "プルして更新", "en": "Pull to refresh", "aka": [ "引っぱって更新", "プルトゥリフレッシュ", "リフレッシュコントロール" ], "meaning": "一覧を下へ引っぱって最新にする操作", "when": "タイムラインや一覧の一番上で、指で下へ引くと読み込み直す。くるくるが出て、終わると消える。", "ask": "お知らせの一覧はプルして更新できるようにして。引っぱるとくるくるが出て、読み込みが終わったら消えるように。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/pull-to-refresh.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/pull-to-refresh/" }, { "id": "pinch", "category": "gesture", "ja": "ピンチ", "en": "Pinch", "aka": [ "ピンチイン・ピンチアウト", "ピンチズーム" ], "meaning": "2本の指を広げる・つまむ操作", "when": "写真や地図を大きくする（ピンチアウト）・小さくする（ピンチイン）。", "ask": "お店の写真はピンチで拡大・縮小できるようにして。ダブルタップでも2倍に拡大して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/pinch.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/pinch/" }, { "id": "edge-swipe", "category": "gesture", "ja": "エッジスワイプ", "en": "Edge swipe (Back gesture)", "aka": [ "スワイプで戻る", "戻るジェスチャー" ], "meaning": "画面の左端から右へなぞって戻る操作", "when": "プッシュ遷移で進んだ画面を、戻るボタンを押さずに戻る。画面の端に横スワイプの部品を置くと取り合いになる。", "ask": "詳細画面は、画面の左端からのエッジスワイプで前の画面へ戻れるようにして。地図の横スワイプとぶつからないように。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/edge-swipe.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/edge-swipe/" }, { "id": "drag-reorder", "category": "gesture", "ja": "ドラッグで並べ替え", "en": "Drag to reorder", "aka": [ "ドラッグ＆ドロップ", "並べ替えハンドル" ], "meaning": "行をつかんで動かし、順番を変える操作", "when": "お気に入り・やることの一覧など、利用者が自分で順番を決める物に。右端の「≡」（ハンドル）をつかむと分かりやすい。", "ask": "お気に入りの一覧は、右端の「≡」をつかんでドラッグで並べ替えできるようにして。持ち上げた行は影を付けて浮かせて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/drag-reorder.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/drag-reorder/" }, { "id": "haptics", "category": "gesture", "ja": "触覚フィードバック", "en": "Haptic feedback", "aka": [ "ハプティクス", "バイブ", "振動" ], "meaning": "操作に合わせて端末を小さく震わせる", "when": "スイッチの切り替え・長押しの成立・送信の成功など、手応えを指に返したいとき。多用しない。", "ask": "スイッチを切り替えたときと、長押しでメニューが出たときに、軽い触覚フィードバックを返して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/haptics.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/haptics/" }, { "id": "bottom-sheet", "category": "overlay", "ja": "ボトムシート", "en": "Bottom sheet", "aka": [ "ハーフモーダル", "シート", "セミモーダル" ], "meaning": "画面の下から途中まで出てくる窓", "when": "絞り込み・詳細など、今の画面を見せたまま中身を足すとき。上の取っ手を下へなぞると閉じる。", "ask": "「絞り込み」を押したらボトムシートを画面の半分まで出して。上に取っ手を付けて、下へスワイプで閉じられるように。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/bottom-sheet.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/bottom-sheet/" }, { "id": "action-sheet", "category": "overlay", "ja": "アクションシート", "en": "Action sheet", "aka": [ "アクションメニュー" ], "meaning": "下から出る、操作を選ぶボタンの並び", "when": "押した物への操作をいくつかの中から選ばせる。一番下に「キャンセル」を離して置く。", "ask": "写真を押したらアクションシートで「写真を保存・共有・削除」を出して。削除は赤、一番下にキャンセルを離して置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/action-sheet.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/action-sheet/" }, { "id": "alert", "category": "overlay", "ja": "アラート", "en": "Alert (Dialog)", "aka": [ "ダイアログ（Android: Dialog）", "確認ダイアログ", "アラートダイアログ" ], "meaning": "画面の真ん中で返事を求める小窓", "when": "削除・ログアウトなど取り消せない操作の前に、はい／いいえを選ばせる。ボタンは2つまでにする。", "ask": "ログアウトを押したらアラートを出して。「ログアウトしますか？」と聞き、「キャンセル」と赤い「ログアウト」を並べて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/alert.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/alert/" }, { "id": "snackbar", "category": "overlay", "ja": "スナックバー", "en": "Snackbar", "aka": [], "meaning": "下に出て数秒で消える、操作ボタン付きのお知らせ", "when": "「削除しました」に「元に戻す」を添えるなど、終わった操作を知らせて1つだけ操作させる。", "ask": "お気に入りから外したら、画面の下にスナックバーで「お気に入りから外しました」と出して、右に「元に戻す」を付けて。4秒で消えるように。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/snackbar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/snackbar/" }, { "id": "toast", "category": "overlay", "ja": "トースト", "en": "Toast", "aka": [], "meaning": "数秒だけ出て消える短いお知らせ", "when": "「コピーしました」など、操作の結果を知らせるだけで、押す物が要らないとき。", "ask": "住所をコピーしたら、画面の下にトーストで「コピーしました」と2秒だけ出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/toast.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/toast/" }, { "id": "context-menu", "category": "overlay", "ja": "コンテキストメニュー", "en": "Context menu", "aka": [ "長押しメニュー", "メニュー" ], "meaning": "長押しした物のそばに出る操作の一覧", "when": "行・写真・アイコンへの操作（共有・コピー・削除など）を、画面を散らかさずに用意したいとき。", "ask": "お店の行を長押ししたら、行を浮かせてコンテキストメニューを出して。「共有」「お気に入り」「非表示」を並べて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/context-menu.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/context-menu/" }, { "id": "share-sheet", "category": "overlay", "ja": "共有シート", "en": "Share sheet", "aka": [ "シェアシート", "共有メニュー", "アクティビティビュー" ], "meaning": "共有先のアプリが並ぶ、OSの共有の窓", "when": "「共有」を押したときに、自前で作らずOSの共有シートを呼ぶ。LINE・メール・コピーなどが並ぶ。", "ask": "お店の詳細の共有ボタンを押したら、OSの共有シートを出して、お店の名前とURLを渡して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/share-sheet.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/share-sheet/" }, { "id": "nav-drawer", "category": "overlay", "ja": "ナビゲーションドロワー", "en": "Navigation drawer", "aka": [ "ドロワー", "ハンバーガーメニュー", "サイドメニュー" ], "meaning": "左上の「≡」で横から引き出すメニュー", "when": "画面の種類がタブバーに収まらないほど多いときに使う。主な画面はタブバーの方が見つけやすい。", "ask": "左上の「≡」を押したら、左からナビゲーションドロワーを出して。設定・ヘルプ・ログアウトを並べ、外を押したら閉じて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/nav-drawer.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/nav-drawer/" }, { "id": "permission-dialog", "category": "overlay", "ja": "許可ダイアログ", "en": "Permission dialog", "aka": [ "権限リクエスト", "アクセス許可のダイアログ" ], "meaning": "位置情報・通知などの使用を許可させるOSの窓", "when": "OSが出すので文面は変えられない。いきなり出さず、使う場面で理由を先に説明してから出す。", "ask": "近くのお店をさがすボタンを押したときに、先に理由の説明を出してから、位置情報の許可ダイアログを出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/permission-dialog.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/permission-dialog/" }, { "id": "keyboard", "category": "overlay", "ja": "キーボード", "en": "Keyboard (Software keyboard)", "aka": [ "ソフトウェアキーボード", "ソフトキーボード" ], "meaning": "入力欄を押すと下から出る文字の鍵盤", "when": "入れる物に合わせて種類（数字・メール・電話）と、右下の確定キーの文字（「次へ」「完了」）を選ぶ。", "ask": "電話番号の欄では数字のキーボードを出して。キーボードが出たら、入力欄と送信ボタンが隠れないよう上へずらして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/keyboard.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/keyboard/" }, { "id": "button", "category": "input", "ja": "ボタン", "en": "Button", "aka": [], "meaning": "押すと何かが起きる部品", "when": "画面の主な操作は、横いっぱいの塗りのボタンで下の方（親指の届く所）に置く。", "ask": "予約の画面の下に、横いっぱいの「予約内容を確認する」ボタンを置いて。高さは50pt、角は丸くして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/button.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/button/" }, { "id": "fab", "category": "input", "ja": "FAB", "en": "Floating action button", "aka": [ "フローティングアクションボタン", "ファブ" ], "meaning": "画面の右下に浮かぶ丸い主役のボタン", "when": "新規作成・投稿など、その画面でいちばんよく使う操作を1つだけ置く（Androidのアプリに多い）。", "ask": "予約の一覧画面の右下にFABを置いて、押したら新しい予約を作る画面を出して。タブバーには重ならないように。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/fab.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/fab/" }, { "id": "switch", "category": "input", "ja": "スイッチ", "en": "Switch (Toggle)", "aka": [ "トグル", "トグルスイッチ" ], "meaning": "押した瞬間にオン・オフが切り替わる部品", "when": "設定の画面で、保存ボタンを押さなくてもすぐ効く切り替えに使う。", "ask": "設定画面に「予約の前日に通知する」のスイッチを置いて。オンのときは緑にして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/switch.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/switch/" }, { "id": "segmented", "category": "input", "ja": "セグメンテッドコントロール", "en": "Segmented control", "aka": [ "セグメントボタン（Android: Segmented button）", "セグメントコントロール" ], "meaning": "2〜5個の選択肢がつながった切り替え", "when": "同じ中身の見せ方（一覧と地図、日・週・月など）を切り替える。画面そのものの切り替えにはタブバーを使う。", "ask": "お店をさがす画面の上に、「一覧」と「地図」を切り替えるセグメンテッドコントロールを置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/segmented.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/segmented/" }, { "id": "stepper", "category": "input", "ja": "ステッパー", "en": "Stepper", "aka": [ "プラスマイナスボタン", "数量ボタン" ], "meaning": "「−」と「＋」で数を1つずつ増減する部品", "when": "人数・個数など、小さな範囲の数を選ぶとき。上限・下限では、押せない方のボタンを薄くする。", "ask": "人数はステッパーで選べるようにして。「−」「＋」で1〜8名、上限と下限では押せない方を薄くして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/stepper.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/stepper/" }, { "id": "picker", "category": "input", "ja": "ピッカー", "en": "Picker (Wheel picker)", "aka": [ "ドラムロール", "ホイールピッカー", "ドラムピッカー" ], "meaning": "回転するドラムを回して値を選ぶ部品", "when": "時刻・数・都道府県など、決まった選択肢から1つを選ぶ。選択肢が多すぎるときは一覧から選ばせる。", "ask": "来店時刻はピッカーで選べるようにして。時と分の2列のドラムロールで、分は15分きざみにして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/picker.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/picker/" }, { "id": "date-picker", "category": "input", "ja": "日付ピッカー", "en": "Date picker", "aka": [ "デートピッカー", "カレンダー" ], "meaning": "カレンダーやドラムで日付を選ぶ部品", "when": "予約日・誕生日など。近い日付ならカレンダーの形、誕生日のように遠い日付ならドラムの形が速い。", "ask": "予約日は日付ピッカーをカレンダーの形で出して。今日より前の日と定休日は選べないようにして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/date-picker.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/date-picker/" }, { "id": "slider", "category": "input", "ja": "スライダー", "en": "Slider", "aka": [], "meaning": "つまみを動かして範囲の中の値を選ぶ", "when": "音量・距離など、だいたいの値でよい物を選ぶ。正確な数を入れさせるときは使わない。", "ask": "検索の条件に「現在地から◯km以内」のスライダーを置いて。0.5〜5kmで、動かしている間は数字を出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/slider.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/slider/" }, { "id": "search-bar", "category": "input", "ja": "検索バー", "en": "Search bar", "aka": [ "検索フィールド", "サーチバー" ], "meaning": "言葉を入れて一覧を絞り込む欄", "when": "一覧の上に置く。iOSではラージタイトルの下に置き、下へ引くと出てくる形も多い。", "ask": "お店の一覧の上に検索バーを置いて、「駅名・お店の名前」と薄く出して。入力中は右に「キャンセル」を出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/search-bar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/search-bar/" }, { "id": "text-field", "category": "input", "ja": "テキストフィールド", "en": "Text field", "aka": [ "入力欄", "テキストボックス" ], "meaning": "1行の文字を入れる欄", "when": "名前・メールアドレスなど。入れる物に合ったキーボードを出し、上に何を入れるかの見出しを付ける。", "ask": "予約の画面に「お名前」のテキストフィールドを置いて。見出しは欄の上に付けて、空のまま進んだら赤く知らせて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/text-field.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/text-field/" }, { "id": "chip", "category": "input", "ja": "チップ", "en": "Chip", "aka": [ "フィルターチップ", "タグ" ], "meaning": "押してオン・オフする小さな丸い札", "when": "「電源あり」「Wi-Fi」など、絞り込みの条件を横に並べて、押して選ばせる。", "ask": "検索バーの下に「電源あり」「Wi-Fi」「テラス席」のチップを横スクロールで並べて。選んだチップは塗りにして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/chip.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/chip/" }, { "id": "list-cell", "category": "display", "ja": "リストのセル", "en": "List cell (Table view cell)", "aka": [ "セル", "リストアイテム", "行" ], "meaning": "一覧の1行。押すとその詳細へ進む", "when": "お店・お知らせ・設定項目など、同じ形の行を縦に並べる。左に画像、真ん中に題と説明、右に矢印が基本の形。", "ask": "お店の一覧はリストのセルで並べて。左に丸い写真、真ん中に店名と「徒歩3分・空席あり」、右にシェブロンを置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/list-cell.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/list-cell/" }, { "id": "section-header", "category": "display", "ja": "セクションヘッダー", "en": "Section header", "aka": [ "セクションの見出し", "グループの見出し" ], "meaning": "一覧の中の区切りに付く小さな見出し", "when": "「近くのお店」「最近見たお店」のように、一覧をまとまりに分けて見出しを付けるとき。", "ask": "お店の一覧を「近くのお店」と「最近見たお店」の2つに分けて、それぞれにセクションヘッダーを付けて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/section-header.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/section-header/" }, { "id": "grouped-list", "category": "display", "ja": "グループ化リスト", "en": "Inset grouped list", "aka": [ "インセットグループ", "設定画面の形" ], "meaning": "行を角丸の白い箱でまとめた一覧", "when": "設定画面のように、種類の違う項目をまとまりごとに箱に入れて並べたいとき。", "ask": "設定画面はグループ化リストにして。「通知」「アカウント」「このアプリについて」の3つの箱に分けて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/grouped-list.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/grouped-list/" }, { "id": "disclosure", "category": "display", "ja": "ディスクロージャーインジケーター", "en": "Disclosure indicator", "aka": [ "シェブロン", "「＞」の矢印", "右矢印" ], "meaning": "行の右端の「＞」。押すと次の画面へ進む印", "when": "押すとプッシュ遷移する行にだけ付ける。その場で切り替わるスイッチの行には付けない。", "ask": "次の画面へ進む行の右端には、薄い灰色のディスクロージャーインジケーター（＞）を付けて。スイッチの行には付けないで。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/disclosure.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/disclosure/" }, { "id": "card", "category": "display", "ja": "カード", "en": "Card", "aka": [], "meaning": "写真と文を角丸の枠にまとめた物", "when": "おすすめのお店など、1つ1つが独立した物を並べる。カード全体を押せるようにする。", "ask": "おすすめのお店をカードにして、上に写真、下に店名と駅からの距離を入れて。カード全体を押したら詳細へ進めて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/card.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/card/" }, { "id": "carousel", "category": "display", "ja": "カルーセル", "en": "Carousel", "aka": [ "横スクロール", "スライダー（写真の）" ], "meaning": "カードや写真を横に送って見せる並び", "when": "おすすめ・特集などを、縦の一覧の途中に1列だけ横に並べる。次のカードを少し見せて、横に送れると気付かせる。", "ask": "ホームの上に、おすすめのお店のカルーセルを置いて。次のカードが少し見えるようにして、下にページコントロールを付けて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/carousel.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/carousel/" }, { "id": "page-control", "category": "display", "ja": "ページコントロール", "en": "Page control", "aka": [ "ページインジケーター", "ドット", "インジケーター" ], "meaning": "何枚目かを示す、横に並んだ小さな点", "when": "カルーセル・オンボーディングの下に置き、全部で何枚あり今どこかを示す。", "ask": "カルーセルの下にページコントロールを置いて、今見ているカードの点だけ濃くして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/page-control.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/page-control/" }, { "id": "avatar", "category": "display", "ja": "アバター", "en": "Avatar", "aka": [ "プロフィール画像", "アイコン" ], "meaning": "人やお店を表す丸い小さな画像", "when": "一覧の行の左や、マイページの上に置く。画像が無いときは名前の頭文字を出す。", "ask": "リストのセルの左にお店のアバターを40ptの丸で置いて。写真が無いお店は店名の頭文字を出して。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/avatar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/avatar/" }, { "id": "badge", "category": "status", "ja": "バッジ", "en": "Badge", "aka": [ "通知バッジ", "未読の数" ], "meaning": "アイコンの右上に重ねる赤い数や点", "when": "タブバーのタブ・アプリのアイコン・ベルのボタンに、未読や新着の数を知らせる。", "ask": "タブバーの「予約」に、未確認の予約の数をバッジで出して。10件を超えたら「9+」にして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/badge.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/badge/" }, { "id": "spinner", "category": "status", "ja": "インジケーター", "en": "Activity indicator (Spinner)", "aka": [ "スピナー", "くるくる", "ローディング" ], "meaning": "読み込み中を示す回る印", "when": "終わりが読めない短い待ちに使う。画面全体を止めず、待っている場所の中に出す。", "ask": "送信ボタンを押したら、ボタンの文字をインジケーター（くるくる）に替えて、終わるまで押せないようにして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/spinner.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/spinner/" }, { "id": "progress-bar", "category": "status", "ja": "プログレスバー", "en": "Progress bar (Progress view)", "aka": [ "進捗バー", "プログレスビュー" ], "meaning": "どこまで進んだかを長さで示す棒", "when": "写真のアップロードなど、終わりまでの割合が分かる待ちに使う。", "ask": "写真を送っている間は、ナビゲーションバーのすぐ下に細いプログレスバーを出して、進み具合を伸ばして見せて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/progress-bar.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/progress-bar/" }, { "id": "skeleton", "category": "status", "ja": "スケルトン", "en": "Skeleton (Placeholder)", "aka": [ "スケルトンスクリーン", "プレースホルダー" ], "meaning": "読み込み中に出す、中身の形の灰色の箱", "when": "一覧を読み込む間、くるくるの代わりに行の形を先に出して、待ち時間を短く感じさせる。", "ask": "お店の一覧を読み込む間は、リストのセルの形のスケルトンを5行出して、光が流れるようにして。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/skeleton.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/skeleton/" }, { "id": "empty-state", "category": "status", "ja": "エンプティステート", "en": "Empty state", "aka": [ "空の状態", "0件の画面" ], "meaning": "中身が0件のときに出す案内", "when": "お気に入り・予約がまだ無いときに、真っ白にせず、絵と一言と次にすることのボタンを出す。", "ask": "お気に入りが0件のときはエンプティステートを出して。絵と「お気に入りはまだありません」と、「お店をさがす」ボタンを置いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/empty-state.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/empty-state/" }, { "id": "push-notification", "category": "status", "ja": "プッシュ通知", "en": "Push notification", "aka": [ "通知", "リモート通知" ], "meaning": "アプリを閉じていても届く、画面上部のお知らせ", "when": "予約の前日・順番が来た・返信が来たなど、今すぐ知りたいことだけを送る。押したらその画面をディープリンクで開く。", "ask": "予約の前日の18時にプッシュ通知を送って。「明日 14:00 森のコーヒーのご予約です」と出し、押したら予約の詳細を開いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/push-notification.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/push-notification/" }, { "id": "widget", "category": "status", "ja": "ウィジェット", "en": "Widget (Home screen widget)", "aka": [ "ホーム画面ウィジェット" ], "meaning": "アプリを開かずホーム画面で見られる小窓", "when": "次の予約・ポイント残高など、開かなくても見たい情報を1つだけ置く。押すとその画面を開く。", "ask": "ホーム画面用の小さいウィジェットを作って。次の予約の日時とお店の名前を出し、押したら予約の詳細を開いて。", "text": "https://mashiharalab.dev/app-parts-zukan/api/v1/parts/widget.txt", "open": "https://mashiharalab.dev/app-parts-zukan/parts/widget/" } ], "confusions": [ { "title": "アラートとアクションシート", "parts": [ "alert", "action-sheet" ], "rule": "アラートは画面の真ん中で「本当に〜しますか？」と返事を求める。アクションシートは下から出て「保存・共有・削除」のように、する操作を選ばせる。" }, { "title": "ボトムシートとアクションシート", "parts": [ "bottom-sheet", "action-sheet" ], "rule": "どちらも下から出る。ボトムシートは中に絞り込みや詳細など何でも入る「窓」。アクションシートは操作のボタンだけが並ぶ「メニュー」。" }, { "title": "スナックバーとトースト", "parts": [ "snackbar", "toast" ], "rule": "どちらも数秒で消えるお知らせ。「元に戻す」のようなボタンが1つ付くのがスナックバー、知らせるだけで押す物が無いのがトースト。" }, { "title": "タブバーとツールバー", "parts": [ "tab-bar", "toolbar" ], "rule": "どちらも画面の下の帯。タブバーは「どの画面を見るか」を切り替える。ツールバーは「今の画面で何をするか」（共有・削除など）のボタンを並べる。" }, { "title": "ナビゲーションバーとステータスバー", "parts": [ "nav-bar", "status-bar" ], "rule": "ステータスバーは時刻・電池が出るOSの帯で、アプリは中身を置けない。その下にあるのが、題と戻るボタンを置くアプリのナビゲーションバー。" }, { "title": "タブバーとセグメンテッドコントロール", "parts": [ "tab-bar", "segmented" ], "rule": "タブバーは画面の下で、アプリの主な画面そのものを切り替える。セグメンテッドコントロールは画面の中で、同じ中身の見せ方（一覧・地図など）を切り替える。" }, { "title": "プッシュ遷移とモーダル遷移", "parts": [ "push", "modal-present" ], "rule": "プッシュ遷移は右から重なり、階層を深く進む（戻るボタンで戻る）。モーダル遷移は下からかぶさり、別の作業に一度入る（「閉じる」「キャンセル」で終える）。" }, { "title": "スワイプ・エッジスワイプ・スワイプアクション", "parts": [ "swipe", "edge-swipe", "swipe-action" ], "rule": "スワイプは指を滑らせる操作そのもの。画面の左端から始めて戻るのがエッジスワイプ。一覧の行を横になぞって削除などのボタンを出すのがスワイプアクション。" }, { "title": "長押しとコンテキストメニュー", "parts": [ "long-press", "context-menu" ], "rule": "長押しは指で押し続ける「操作」。コンテキストメニューは長押しで出てくる「操作の一覧」。「長押しで〇〇を出して」と、出す物の名前と組み合わせて頼む。" }, { "title": "カルーセルとページコントロール", "parts": [ "carousel", "page-control" ], "rule": "カルーセルは横に送る並びそのもの。ページコントロールはその下の小さな点で、何枚目かを示すだけ。" }, { "title": "スプラッシュ画面とオンボーディング", "parts": [ "splash", "onboarding" ], "rule": "スプラッシュ画面は毎回の起動で一瞬だけ出るロゴの画面。オンボーディングは初めての人にだけ出す数枚の案内。" }, { "title": "プッシュ遷移とプッシュ通知", "parts": [ "push", "push-notification" ], "rule": "どちらも「プッシュ」だが別の物。プッシュ遷移は画面が右から重なって進む移り方。プッシュ通知はアプリを閉じていても届くお知らせ。" }, { "title": "インジケーター・スケルトン・プログレスバー", "parts": [ "spinner", "skeleton", "progress-bar" ], "rule": "終わりが読めない短い待ちはインジケーター（くるくる）、一覧の読み込みはスケルトン、進み具合が分かるならプログレスバー。" }, { "title": "ピッカーと日付ピッカー", "parts": [ "picker", "date-picker" ], "rule": "ピッカーはドラムを回して決まった選択肢から選ぶ部品全般。日付を選ぶ物は日付ピッカーと呼び、カレンダーの形かドラムの形かを添えると伝わる。" }, { "title": "ステッパー（アプリ）とステップ表示（Web）", "parts": [ "stepper" ], "rule": "iOSのステッパーは「−」「＋」で数を増やす部品。Webで「ステッパー」と言うと、手続きの「1 入力 → 2 確認 → 3 完了」の進み具合を指すことが多い。数を選ぶなら「−と＋のステッパー」と言うと間違えない。" }, { "title": "ナビゲーションドロワーとタブバー", "parts": [ "nav-drawer", "tab-bar" ], "rule": "タブバーは主な画面がいつも見えていて1回で移れる。ナビゲーションドロワーは「≡」を押すまで隠れている。主な画面が5個までならタブバーの方が使われる。" } ] }