デザインシステム

• 赤は red-700 まで（red-600 は白地では通るが、赤い帯の上で割る）
• 緑は green-700 まで
• 青は blue-600 まで（リンクとして最も薄くできる段）

エラー文言のように、操作しなければ画面に出ない文字もあります。 こうした色は、状態を切り替えるテストの中で測っています。ページを開いて眺めるだけでは見つかりません。

• 見出しと本文text-2xl（24px）一覧・案内・フォームの見出し
• 見出しと本文text-xl（20px）詳細ページ・管理画面・結果画面の見出し
• 見出しと本文text-lg（18px）節の見出し
• 見出しと本文text-base（16px）カード・フォームの小見出し
• 見出しと本文text-sm（14px）本文・入力欄・ボタン
• 見出しと本文text-xs（12px）補助（日付・短縮 ID・注記）

本文は 14px、補助的な文字は 12px です。12px は 4.5:1 を満たす色でしか使えないため、 このサイズに使えるグレーは上で決めた下限（gray-400 = 500 相当）までに限られます。 段の間は太さ（font-semibold / font-bold）で差を付け、段そのものは増やしていません。

• 確認する確認するその画面の主たる操作。原則1画面に1つ
• キャンセルキャンセル主たる操作の隣に置く、戻る側の操作
• 取り下げる取り下げる取り消せない操作
• 削除削除破壊的だが画面の主役ではない操作（管理画面）

右側は押せない状態です。色を薄くするだけでなく、カーソルの形も変えています。

見た目はボタンでも、実体は <a> のままにしています。 新しいタブで開く・URL をコピーする・カーソルを乗せて遷移先を確かめるといったブラウザ標準の動作が そのまま使え、読み上げにも「リンク」として伝わるためです。<button> にして JavaScript で移動させると、これらは全部失われます。

画面の並び順に出すのは、上から順に直していけるようにするためです。 検証の都合で順番が飛ぶと、読み手が直す順序を組み立て直すことになります。 実際のフォームでは各項目が該当の入力欄へのリンクになっています（この見本は表示だけです）。

最初から数字を見せると、上限そのものが目安になって「そこまで書いてよい」と読めてしまいます。 上限に近づいたときだけ出せば、警告としてだけ働きます（GOV.UK Design System の Character count が同じ理由で threshold を持っています）。

type="number" は不正な値が入ると、読み出せる値が空文字になります。 全角で「１４１」と打たれても、半角に直す対象そのものが取れません。 日本語入力の確定を合図にして直す方法もありますが、貼り付けではその合図が来ません。 実際に本番で、全角のまま「数字を入力してください」で止まる投稿が発生しています。

文字として受け取り、欄から離れた時点で半角へ直す形にしました。 失われる ▲▼ と上下キーでの増減は自前で補い、 代わりにホイールで値が勝手に変わる誤操作は起きなくなっています。

ブラウザが標準で描く矢印は枠の右端に貼り付き、文字との間が空きます。 位置も形も CSS からは動かせないうえ、幅は最も長い選択肢で決まるので、 短い選択肢を選んでいるときほど間延びして見えます。標準の矢印を消し、 同じアイコン集の矢印を重ねて位置を揃えました。

重ねた矢印はクリックを受け取らないようにしてあります。そうしないと、矢印の上を押したときだけ開かないという、見た目では分からない壊れ方をします。

並べ替え・絞り込み・ページ送りの計算だけを借り、マークアップは自分で持っています。 画面幅が狭いときは、同じデータを次のカードに切り替えて出します。

6つの列をそのまま縮めると、どの列も等しく読みにくくなります。 カードでは「どの本の・どこが・どう間違っているか」の順に積み直し、 書影（サムネイル）と誤/正を主役に置きました。表紙の無い本はアイコンに置き換えます （この見本がその状態です）。表では横に並ぶ値の優先順位が付いていませんが、 カードでは縦の順序がそのまま優先順位になります。