コンテンツにスキップ

ADR-0062: コードを動かす画面だけ、文字を 12px と 13px まで小さくし、押せる領域をマウスで押す端末は 24×24 CSS px、触る端末は 44×44 CSS px にする

Status

承認

Context

コードを動かす画面の文字と押せる領域を、原則より小さくするかを決める必要がある。
コードを動かす画面は、エディタ、ファイルの木、端末、プレビュー、HTTP の流れ、コンソールを、1 つの画面に並べる。
利用者は、今の画面がコードエディタや DevTools と比べて大きく見え、使い勝手が違うと感じた。

  • デザインシステムの原則は、14px より小さい文字を使わず（TEXT-MIN-SIZE）、押せる領域を 44×44 CSS px 以上にする（TARGET-SIZE）と決めている。
  • プリミティブトークンの書体の太さ、文字の大きさ、行高は、DADS の @digital-go-jp/design-tokens 2.1.0 の値を使うと決めている。
  • 角丸、影、筆の線の動きは、操作できる要素と重なる面だけに付ける。
  • 同じ記録を出して測った値は、次のとおり。2026-11-13 に、Chromium 156.0.8078.4 の DevTools と、vscode.dev（VS Code のビルドのコミット 6904719。バージョンの番号は確認できなかった）で測った。
    • Chrome の DevTools のコンソールは、文字 11px、1 行 18px、値の木の項目 16px である。
    • VS Code（vscode.dev）は、エクスプローラーの行 22px（文字 13px）、ペインの見出し 28px（文字 11px）で、ペインを 1px の罫で仕切る。
    • 詰める前のコードを動かす画面は、コード 16px（行高 27.2px）、ファイルの木の行 44.8px、タブの帯 44px、ペインの見出し 44px で、ペインの間を 16px 空ける。コンソールの 1 行は 37.8px である。
  • WCAG 2.2 は、押せる領域の大きさを AA（2.5.8）で 24×24 CSS px 以上、AAA（2.5.5）で 44×44 CSS px 以上としている。TARGET-SIZE は、既に Link を例外にし、AA の 24×24 CSS px 以上としている。
  • WCAG 2.2 の 2.5.8（AA）は、押せる領域を 24×24 CSS px 以上にするか、24px の円が隣の押せるものに重ならない間隔を求める。
  • コードを動かす画面は、ペインの間の隙間と外側の余白をなくし、木の行を 24px、HTTP の流れの行を約 44px に詰めた。
  • 詰めたペインの文字には、12px と、太字の 13px のほかに、標準の太さの 13px と、13px の等幅が要る。
    • 標準の太さの 13px は、ファイルの木の行、入力欄の値、表のセル、メニューの項目、開閉の中身、空の状態の文、注意の枠の本文、読み込み中の文、SQL のペインの結果の文（影響した行の数、ページの番号、実行計画のツリーと時間）に使う。
    • 13px の等幅は、エディタ、端末、HTTP のメソッドと URL、HTTP のヘッダと本文、SQL のペインのテキストの実行計画に使う。
  • 詰めたペインの題の帯とタブは 32px、ボタンと入力欄は 28px、木の行と開閉の要約は 24px の整数の px にそろえ、題とタブの文字は 13px である。ここに 14px 以上の文を置くと、隣の題や行と文字の大きさがそろわず、VS Code と DevTools に近い密度にならない。
  • 13px の等幅の文字を 20px の行に置くには、DADS の行高（100%、130%、150%、160%、170%）に無い値が要る。VS Code の行の間隔は、github1s.com で測ると、12px の文字で 18px だった。
  • 375px の幅で詰めた画面を使うと、24px の木の行と 28px のボタンは、指で押し分けにくい見込みである（実機では測っていない）。

Decision

コードを動かす画面に置くコンポーネントだけ、2 つの原則を緩める。
コンソール（ConsoleEntryList）と、その値の木（TreeView の density="compact"）から適用する。
色と筆の線の動きは変えない。
コードを動かす画面の面、罫、角丸は、ADR-0073 が決める。

文字

  • 文字は、コードと操作のラベルを 13px、コンソールの値と補足（時刻、出力元、HTTP の流れの通信する者）を 12px まで小さくしてよい。
  • 13px にしてよい文字は、コードと操作のラベルに加え、ファイルの木の行、入力欄の値、表のセル、メニューの項目、開閉の中身、空の状態の文、注意の枠の本文、読み込み中の文である。SQL のペインの結果の文（影響した行の数、ページの番号、実行計画のツリーと時間）と、テキストの実行計画も、13px にしてよい。
  • テーマ変数に、次の 4 つを置く。
    • text-compact: 12px。
    • text-label-compact: 太字の 13px。
    • text-body-compact: 標準の太さの 13px。行高は 130%。
    • text-code-compact: 13px の等幅。行高は 154%（約 20px）。
  • 154% は DADS の行高に無いので、プリミティブトークンに足す。
  • 4 つのトークンは、コードを動かす画面のコンポーネントの外で使わない。使う場面は、デザインシステムの Design Doc の文字の表に書く。

押せる領域

  • マウスで押す端末では、押せる領域を、WCAG 2.2 の AA（2.5.8）の 24×24 CSS px 以上にする。木の行と開閉の要約（Disclosure）は 24px、ボタン、入力欄、タブは 28〜32px にする。
  • 触る端末（pointer: coarse）では、コードを動かす画面の押せる要素は、全て、押せる領域を 44×44 CSS px 以上にする。WCAG 2.2 の AAA（2.5.5）の大きさである。
    • 対象の例は、ボタン、タブ、タブの閉じるボタン、木の行、開閉の要約（Disclosure）、入力欄、HTTP の流れとコンソールの押せる行である。
    • 木の行、タブの帯、ペインの見出しの帯の高さも 44px にする。24px の行に 44px の押せる領域を重ねると、隣の行の押せる領域と重なるためである。
    • 44px の大きさは、packages/ui の density="compact" のコンポーネントと size="XS" の Button の中に、Tailwind の pointer-coarse: の variant で書く。ツールのページと記事の埋め込みで同じ大きさになり、JavaScript で端末を見分けずに済むためである。
    • TARGET-SIZE のテストは、触る端末とマウスで押す端末の両方の大きさを確認する。
  • 分割の幅を変える SplitPane の仕切りは、マウスで押す端末の PC の配置では、押せる領域の幅（押せる幅）を 8px にする。
    • 仕切りの押せる幅 8px は、WCAG 2.2 の 2.5.8 の 24×24 CSS px に届かない。TARGET-SIZE の例外として認める。
      • 24px の円が、ペインの中の押せるもの（木の行、エディタのスクロールバー）に重なる。
      • マウスで押す配置だけで使い、キーボードの矢印のキーで同じ操作ができる。
      • キーボードの操作が、2.5.8 が認める例外（同じ機能を持つ別の押せるもの）に当たるかは、未確認である。
    • 触る端末（pointer: coarse）で PC の配置になるとき（横に向けたタブレット）は、仕切りの押せる幅を 44px にする。

理由

  • コードを動かす画面は、多くの行を一度に見比べる画面で、記事の本文と読み方が違う。DevTools とコードエディタに近い密度にすると、記録を見渡しやすくなる。
  • マウスで押す端末の押せる領域は、仕切りのほかは AA（2.5.8）の基準を満たす。仕切りが 2.5.8 の例外に当たるかは未確認なので、仕切りについては AA への適合を確認していない。
  • ファイルの木の行と名前を、太字にせずに 13px で書ける。
  • 詰めたペインの帯と行に置く文を、13px の題とタブにそろえられる。
  • 13px の等幅の行が約 20px（20.02px）になり、ほかの帯と行の整数の px にほぼそろう。DADS の 150% では 19.5px になる。

Verification

試作の CSS をカタログの story に当てて測った値である。

  • コンソールは、同じ記録で行の領域の高さが 849px から約 570px になる。
  • コードを動かす画面のほかのコンポーネントも詰めると、画面の高さは 1692px から約 1120px になる。

カタログの「画面/コードを動かす画面」を、Chromium の 1600x900 で開いて確認した。

  • 13px の等幅の行の高さは 20.02px だった。
  • 13px にしてよい範囲に加えた文を 14px 以上にしたとき、隣の題や行と文字の大きさがそろわないことは、画面で測っていない（未確認）。
  • Safari と Firefox での確認はしていない。

Considered Options

文字と押せる領域を小さくするかの案は、次の 3 つ。

選択肢 強み 弱み
採用: コードを動かす画面だけ、文字を 12px と 13px、押せる領域を 24×24 CSS px まで小さくする DevTools と VS Code に近い密度になる。木の行とタブの高さも詰まる 原則の例外が 2 つ増える。押せる領域の基準が、マウスで押す端末では、この画面だけ AAA から AA に下がる
原則を守り、文字を 14px にして隙間を 1px の罫にする 原則を変えずに済む 木の行、タブ、見出しが 44px のまま残り、画面は大きく見えるままになる
今のまま 変更が無い 利用者が挙げた違和感が残る

詰めたペインの文字のトークンの案は、次の 3 つ。

選択肢 強み 弱み
採用: 標準の太さの 13px と等幅のトークンを足し、等幅の行高に 154% を使う ファイルの木の行と名前が太字にならない。13px の等幅の行が約 20px になり、ほかの帯と行の整数の px にほぼそろう トークンが 4 つになる。DADS に無い行高が 1 つ増える
text-label-compact に標準の太さの指定を重ねる トークンが増えない 使う側ごとに太さを書き、トークンで文字のスタイルを決める形が崩れる
等幅の行高を DADS の 150% にする DADS の値だけで済む 行が 19.5px になり、整数の px からの外れが 154% より大きい

触る端末の押せる領域の案は、次の 2 つ。

選択肢 強み 弱み
採用: 触る端末だけ押せる領域を 44px にする 文字の大きさを保ったまま押し分けやすい 押せる領域の大きさが、端末の種類で 2 つになる
押せる領域を 24px のままにする 変更が無い 375px の幅で、木の行とボタンを押し分けにくい見込みである

Consequences

Positive

  • コンソールとコードを動かす画面で、一度に見渡せる行が増える。
  • 詰めたペインの文字を、トークンだけで書ける。
  • スマートフォンと記事の埋め込みで、木の行、タブ、ボタンを押し分けやすくなる見込みである。
  • 触る端末だけ 44px にするので、マウスで押す端末の画面の密度は変わらない。

Negative

  • 12px と 13px の文字は、サイトの中で一番小さい文字になる。コードを動かす画面の外に広げないよう、レビューで見る。
  • TARGET-SIZE のテストは、コードを動かす画面のコンポーネントでは、マウスで押す端末は 24px 以上、触る端末は 44px 以上を確認する形に変わる。
  • DADS に無い行高が 1 つ増える。
  • 触る端末では、行と帯が 44px になり、1 つのペインに見える行が減る。
  • 押せる領域の大きさが、端末の種類で 2 つになる。
  • 仕切りの押せる幅が、マウスで押す端末と触る端末で違う。
  • 仕切りは 2.5.8 の大きさに届かない。2.5.8 が認める例外に当たるかは、未確認である。