コンポーネント

実際に製品で使っている部品です。新しい部品を作る前に、ここにあるもので足りないかを確かめてください。

部品の段

部品は 5 つの段に分けて作ります。下の段は上の段を使いません。

段	名前	例	決まり
0	道具	日付の整形、データの読み方	画面を持たない
1	基本の部品	ボタン、入力欄、リンク、アイコン	受け取った値だけで描く
2	部品	パンくず、下から出るシート、サイドバー	受け取った値だけで描く。データを自分で読まない
3	ブロック	今日の予定、選考の一覧	自分でデータを読み、6 つの状態を必ず出す。ほかのブロックを使わない
4	画面	求職者の詳細	ブロックを並べる

ボタン

種類	見た目	使う場面
主な操作	塗りつぶし（リンクの色）	その画面でいちばん大事な操作。1 画面に 1 つ
ふつうの操作	白地に線	そのほかの操作
文字だけ	リンクの見た目	補助の操作、画面の移動

ボタンには言葉と、意味に合ったアイコンを付けます。アイコンは言葉から自動で選ばれます（「削除」ならごみ箱）。
スマートフォンでは高さ 44 px 以上。
押したあと処理中のあいだは「送っています…」のように今していることを出し、二度押しできないようにします。

よい例

「選考に進める」「田中さんに送る」— 何が起きるかが分かる名前。
主な操作は右下（スマートフォンでは下）に 1 つだけ。

よくない例

「OK」「はい」「実行」— 押すと何が起きるか分からない。
1 画面に塗りつぶしのボタンが 3 つ並ぶ。
同じ操作なのに、画面によって「やめる」と「キャンセル」が混ざる（言葉の対応表を使います）。

入力欄

ラベルは欄の上に置きます。欄の中の薄い文字（プレースホルダー）をラベルの代わりにしません。
必須の項目には「必須」と言葉で書きます（色や「*」だけにしない）。
間違いは、欄のすぐ下に「何が違うか・どう直すか」を書きます。
日付・月・時刻は、年・月・日を分けた選択で入れられるようにしています。
スマートフォンでは高さ 44 px 以上。

カードと一覧

広い画面では表、狭い画面では 1 行を 1 枚のカード にします。カードの中は「見出し：値」を縦に積みます。
長い一覧は、見えている分だけを描きます（数千行でも重くしない）。
空の項目はまとめて「未入力 3 項目」のようにたたみます。

下から出るシート

スマートフォンで「その他」や詳しい内容を出すときに使います。
閉じ方は 4 つ：上の「閉じる」、Esc、背景を押す、端末の「戻る」。
開いているあいだ、後ろの画面は操作できません。閉じたら、開いたボタンにフォーカスを戻します。

案内（サイドバー・下の島・パンくず）

768 px 以上は左のサイドバー、768 px 未満は下に浮かぶ島（行き先 4 つまで＋「その他」）。
島には行き先だけを置きます。保存や送信などの操作は置きません。
どの画面にも、題の前にパンくず（ホーム › 一覧 › 今の画面）を出します。今の画面はリンクにしません。

ブロックの枠

ブロックは必ず共通の枠に入れます。枠が 6 つの状態を出し分けるので、ブロックごとに作り直す必要はありません。状態の出し方はパターンを見てください。

バッジ

「連絡停止」「放置」「テスト」など、そのデータの状態を短く示します。
色だけでなく、必ず言葉で書きます。
押せないバッジは 28 px の高さでかまいませんが、押せるものは 44 px 以上にします。