チップChip
別名 タグ、ラベル、ピル
小さな札。条件や分類を示す
使いどころ絞り込み条件・記事のカテゴリ・入力したキーワードの表示に。
部品をタップすれば、名前がでます
お知らせ10月20日はメンテナンスのため予約を受け付けません。
森のコーヒー 駅前店
静かな店内で、季節の豆を一杯ずつ淹れます。
季節のブレンド・自家製プリン・厚切りトースト
モーダル・ダイアログなど画面に重なって出る窓は、図面ではなく下の「部品の名前」にあります。
画面の骨組み画面の上下左右にいつもある場所
サイドバーSidebar画面の横に縦に並ぶメニュー パンくずリストBreadcrumbs今いる場所を階層で示す いつもの一杯を、
待たずに。
近くのカフェの空き席を見て、そのまま予約できます。
ボトムナビBottom navigationスマホの画面下に並ぶ切り替えボタン
画面の組み方部品の並べ方・画面の分け方のことば
カラムColumn layout画面を縦の列に分けた並べ方 スティッキーStickyスクロールしても途中で止まって付いてくる 固定表示Fixed画面の決まった位置にずっと貼り付く グリッドGrid layout同じ大きさの枠を縦横にそろえて並べる レスポンシブResponsive design画面幅に合わせて組み方を変える ブレークポイントBreakpoint組み方を切り替える画面幅の境目 余白（パディング・マージン）Padding / Margin枠の内側と外側のすき間 オーバーレイ（半透明の幕）後ろの画面は暗くなり、押せなくなる
横にスクロールしてみてください（次のカードが少し見えています）
見出し申し込む
ここまでがファーストビュー
スクロールしないと見えない
123
横に並べる（row）123
縦に並べる（column）123
しま模様が「ギャップ」（間だけ。端には付かない）ギャップGap並んだ部品どうしの間のすき間揃え（寄せ）Alignment並びをどこに寄せ、どう揃えるか z-index: 1z-index: 2z-index: 3
数が大きいほど手前に出る重なり順（z-index）Z-index重なったとき、どれを手前に出すかの順番アスペクト比Aspect ratio枠の縦と横の比率
重なって出る窓画面の上に一時的に重なる物
予約の内容
10月18日（土）14:00〜・2名・窓ぎわの席
予約を取り消しますか？
取り消すと元に戻せません。
ドロワーDrawer画面の横から引き出される縦長の窓 ボトムシートBottom sheet画面の下からせり上がる窓 ポップオーバーPopover押した物のそばに出る、操作もできる小窓 ツールチップTooltipカーソルを乗せると出る、短い説明の札 トーストToast画面の端に出て自動で消える短い通知 ドロップダウンメニューDropdown menu押すと下に操作の一覧が開く
押す・入れる・選ぶ利用者が操作する部品
ボタンButton押すと何かが起きる部品 アイコンボタンIcon button絵だけのボタン FABFloating action button画面の右下に浮かぶ丸い主ボタン テキストエリアTextarea何行も文字を入れられる欄 セレクトボックスSelect押すと選択肢が開き、1つを選ぶ欄 チェックボックスCheckbox四角に✓を付ける。いくつでも選べる トグルスイッチSwitchオン・オフを押した瞬間に切り替える スライダーSliderつまみを横に動かして値を決める
セグメントコントロールSegmented controlくっついたボタンで表示を切り替えるフォームForm入力欄と送信ボタンをひとまとめにした物 オートコンプリートAutocomplete文字を打つと下に候補が出る入力欄 日月火水木金土
ここにファイルをドラッグまたは ファイルを選ぶ（10MBまで） レーティング（星評価）Rating星の数で評価を見せる・付ける
並べて見せる情報をまとめて見せる入れ物
森のコーヒー 駅前店
静かな店内で、季節の豆を一杯ずつ淹れます。
- お知らせ予約の前日に通知
- 予約の一覧3件
- お気に入りのお店12件
- アカウント設定
| 日付 | お店 | 人数 | 金額 |
|---|
| 10/18 | 森のコーヒー 駅前店 | 2名 | ¥1,200 |
| 10/12 | 森のコーヒー 川沿い店 | 1名 | ¥650 |
| 10/03 | 森のコーヒー 駅前店 | 3名 | ¥2,100 |
| 9/27 | 森のコーヒー 本店 | 2名 | ¥1,500 |
季節のブレンド・自家製プリン・厚切りトースト
アコーディオンAccordion見出しを押すと中身が開いたり閉じたりする ページネーションPagination番号を押して一覧のページを送る カルーセルCarousel画像やカードを1枚ずつ横に送って見せる - 配達が完了しました
- 配達に出発しました
- 店舗を出発しました
- ご注文を受け付けました
タイムラインTimeline出来事を時間の順に線でつないで並べる無限スクロールInfinite scroll下まで見ると続きを自動で読み込む チャート（グラフ）Chart数字を棒・線・円の形で見せる
状態を伝える読み込み中・件数・お知らせ
お知らせ10月20日はメンテナンスのため予約を受け付けません。
電源ありWi-Fiテラス席禁煙
チップChip小さな札。条件や分類を示すプログレスバーProgress barどこまで進んだかを横の棒で示す
スケルトンSkeleton読み込み中に中身と同じ形の灰色の枠を出す- 入力
- 2確認
- 3完了
ステップ表示Step indicator手続きの何番目にいるかを示すお気に入りはまだありません気になるお店の♡を押すと、ここに並びます。
エンプティステートEmpty state中身がまだないときの案内