UI・UX
UIパーツ、導線、画面設計に関する用語をまとめます。
UI VOCABULARY
画面の部品は、名前で指定すると伝わります。
「いい感じのボタン」ではなく、部品の名前と状態で指定すると、AIが作る画面のぶれが小さくなります。似た部品は役割が違うので、違いもあわせてまとめます。
並べる・まとめる
情報をひとまとまりにして見せる部品です。部品の名前と、中に入れるものをセットで指定します。
ヘッダー
Header画面上部の帯です。ロゴ・主な移動先・検索などを置きます。
- ロゴ
- 主なリンク
- 固定表示
ヘッダーは画面上部に固定し、左にロゴ、右に検索と主要な3つのリンクを置いてください。カード
Card1件の情報を枠でまとめた部品です。一覧で見比べやすくなります。
- 1件1枠
- 一覧
- 画像と見出し
記事の一覧はカードで並べてください。各カードに画像・見出し・要約2行・更新日を入れます。アコーディオン
Accordion見出しを押すと中身が開閉する部品です。長い内容を畳んでおき、必要なところだけ読ませます。
- 開閉
- 見出しだけ見せる
- よくある質問
よくある質問はアコーディオンにしてください。見出しの右に開閉を示す矢印を付け、最初はすべて閉じておきます。チップ
Chip条件や値を小さな丸い枠で示す部品です。バッジと違い、押して選んだり、×で外したりできます。
- 選べる
- ×で外す
- 条件の表示
選んだ絞り込み条件を、一覧の上にチップで並べてください。各チップに×を付け、押すとその条件だけ外れるようにします。アバター
Avatar人物を丸い写真や頭文字で示す部品です。写真がないときは頭文字で代わりにします。
- 丸い写真
- 頭文字
- 担当者
コメント欄の各投稿の左に丸いアバターを置いてください。写真がない人は、名前の頭文字を色つきの丸で表示します。切り替える・選ぶ
同じ場所で表示や設定を切り替える部品です。何を切り替えるかで使い分けます。
タブ
Tabs同じ場所で、表示する区画そのものを切り替える部品です。関係する情報を並べて見せます。
- 区画の切り替え
- 並列
- 選択中の表示
設定画面を「基本」「通知」「権限」の3つのタブに分け、選択中のタブに下線を付けて強調してください。セグメントコントロール
Segmented control選択肢をひと続きのボタンにまとめ、1つを選ぶ部品です。タブと違い、同じ内容の見せ方（日・週・月など）を切り替えます。
- ひと続きのボタン
- 1つだけ選ぶ
- 見せ方の切り替え
グラフの上に「日・週・月」のセグメントコントロールを置き、選んだ期間でグラフを切り替えてください。トグル
Toggleオンとオフを切り替えるスイッチです。押した時点で設定が反映されるものに使います。
- オン・オフ
- すぐ反映
- 設定画面
通知設定の各項目の右にトグルを置き、オンは青、オフは灰色で表示してください。押した時点で保存します。重ねて出す
今の画面の上に重ねて表示する部品です。どこから出て、何を入れられるかが違います。
モーダル
Modal画面の中央に重ねて出す小窓です。閉じるまで後ろの画面は操作できません。確認や短い入力を求めるときに使います。
- 後ろを暗くする
- 確認
- 閉じる操作
削除の前にモーダルで確認してください。「削除する」と「キャンセル」を並べ、右上に閉じるボタンも付けます。ドロワー
Drawer画面の端から引き出すパネルです。メニューや、一覧を離れずに詳細を見せるときに使います。
- 端から出る
- メニュー
- 一覧を保ったまま
スマホではメニューを左から出るドロワーにしてください。背景は暗くし、外側を押すと閉じるようにします。ボトムシート
Bottom sheet画面の下からせり上がるパネルです。スマホで、親指の届く位置に選択肢を出せます。
- 下から出る
- スマホ向け
- 引き上げて広げる
スマホの並び替えはボトムシートで出してください。上端につまみを付け、下にスワイプすると閉じるようにします。ポップオーバー
Popover押した部品のすぐ近くに出る小さな枠です。ツールチップと違い、ボタンなど操作できるものを入れられます。
- 押して開く
- 操作を置ける
- 近くに出る
「共有」ボタンを押したら、すぐ上にポップオーバーを出し、「リンクをコピー」と「メールで送る」を並べてください。ツールチップ
Tooltip部品にマウスを重ねたときだけ出る短い説明です。操作は入れず、1〜2行にとどめます。
- 重ねると出る
- 短い説明
- 操作は入れない
アイコンだけのボタンには、マウスを重ねたときにツールチップで機能名を表示してください。知らせる
操作の結果や、今の状態を伝える部品です。消えるか残るか、操作できるかが違います。
トースト
Toast操作の結果を短く知らせ、数秒で自動的に消える通知です。操作ボタンは置きません。
- 短い通知
- 自動で消える
- 操作なし
保存したら、画面下部に「保存しました」とトーストで3秒だけ表示してください。スナックバー
Snackbar画面下に出る帯状の通知です。トーストと違い、「元に戻す」などの操作を1つ置けます。
- 画面下の帯
- 操作を1つ
- 取り消し
削除したら画面下にスナックバーで「削除しました」と出し、右端に「元に戻す」を置いてください。5秒で消えます。バッジ
Badgeアイコンや項目の角に付ける小さな印です。未読の件数や「新着」などの状態を示します。押して操作するものではありません。
- 件数
- 未読
- 状態の印
通知アイコンの右上に、未読件数を赤い丸のバッジで表示してください。10件以上は「9+」にします。プログレスバー
Progress bar処理がどこまで進んだかを横長の棒で示します。残りの見通しが分かると、待つ負担が減ります。
- 進み具合
- 割合
- 待ち時間
アップロード中はプログレスバーで進み具合を示し、右に「60%」のように割合を表示してください。導線と移動
読み手が迷わず次の操作に進めるようにするための部品です。
パンくずリスト
Breadcrumb今いる場所を階層で示すリンクの列です。上の階層へ1回で戻れます。
- 現在地
- 階層
- 戻りやすさ
ページ上部にパンくずリストを置き、「ホーム › カテゴリ › 記事名」の形にしてください。今いるページはリンクにしません。ページネーション
Pagination一覧を複数のページに分け、番号で移動できるようにします。
- ページ番号
- 前へ・次へ
- 現在地
一覧は20件ずつに分け、下部にページネーションを置いてください。今のページ番号は塗りつぶして示します。ステッパー
Stepper今どこにいて、あと何段階あるかを、番号つきの丸と線で示します。
- 進み具合
- 段階
- 戻れる
申し込みフォームを3段階に分け、上部に「入力 → 確認 → 完了」のステッパーを置いてください。主ボタンと副ボタン
Primary / Secondaryいちばんしてほしい操作を1つだけ目立たせ、ほかは控えめにします。
- 主な操作は1つ
- 見た目の差
- 並び順
主ボタンは「申し込む」の1つだけにし、塗りつぶしで目立たせてください。ほかは枠線だけのボタンにします。絞り込みと並べ替え
Filter / Sort条件で絞り込み、順番を変えられるようにします。条件を外す操作も必ず用意します。
- 条件
- 件数の表示
- 解除
一覧の上に絞り込みを置き、該当件数を表示してください。「条件をすべて外す」ボタンも付けます。画面の状態
正常なときだけでなく、空・待ち・失敗のときの見せ方も指定します。抜けやすい部分です。
空の状態
Empty stateまだ何もないときの表示です。次に何をすればよいかを示し、行き止まりにしません。
- 0件
- 次の行動
- 行き止まりを作らない
データが0件のときは、説明文と「最初の1件を追加する」ボタンを表示してください。スケルトンスクリーン
Skeleton screen読み込み中に、完成形と同じ形の灰色の枠を先に出す表示です。画面全体を隠さず、遅れている部分だけに出します。
- 読み込み中
- 完成形の形
- 部分的に
読み込み中は、カードと同じ形をした灰色の枠（スケルトンスクリーン）を表示してください。エラー表示
Error何が起きたか、どうすればよいかを、責める言い方をせずに伝えます。
- 原因
- 次の行動
- 入力を消さない
入力エラーは該当する欄のすぐ下に赤で表示し、入力済みの内容は消さないでください。押せない状態
Disabled今は押せない操作を薄く表示します。押せない理由が分かるようにします。
- 押せない理由
- 薄い表示
- 条件の案内
必須項目が埋まるまで送信ボタンを押せないようにし、ボタンの近くに理由を表示してください。この指示を使うレシピ：仕様メモから動作確認のテスト表を作る