1. 何を点検するスキルか

dads-page-checkは、Webページの現状・修正案・優先度を返すスキルです。DADS β版（デジタル庁）を参考に、hirostaが自分の言葉で点検の観点を整理しました。公式の文章は写していません。

本文16px以上、14px未満は原則避ける、本文の行間1.5倍以上、文字の色の差4.5:1・必要な枠線などは3:1以上を目安にします。日本語の斜体、リンクの下線、フォーカス表示、ボタンの使い分け、フォームの説明も対象です。押せる範囲はボタン44px、リンク24pxの目安と間隔・例外を区別します。詳しい条件はREADMEの基準一覧へまとめています。

点検は2段構えです。Python標準ライブラリだけで動く scripts/check.py がHTML・CSSから候補を出し、ブラウザを操作できるAIエージェントが計算後の文字サイズ・色の差・Tab移動・スマホ幅を確認します。--contrast は不透明な2色の比を計算します。

導入は公開リポジトリを取得し、skills/dads-page-check をエージェントのスキル置き場へコピーします。同名フォルダーの上書きに注意してください。Pythonは3.9以上が必要です。詳しくはREADMEの入れ方へ。

スキルに同梱した架空の小さな団体ページでは、機械の候補は20件から0件でした。色の比4組は別の計算でも照合済みです。これは架空の例の結果で、次の自社サイトの集計とは別です。

2. 自社サイトで変えたこと

2026年10月21〜22日に点検しました。書体はNoto Sans JP、本文は16pxで、主な色の組み合わせも目安を満たしていました。本文と生成りの背景は10.8:1、メインの緑と背景は5.2:1、緑のボタンの白文字は5.8:1、補足の文字は6.7:1です。

直した版を手元で作り、変更前とスマホ375px・PC1280pxで並べて比較しました。本人が見て「全部直す」と決め、次を公開しました。

対象 変更前 変更後
小さな文字15か所 12px（text-xs） 14px
入力欄の枠線と白背景の比 #D1D5DB、約1.5:1 約4.8:1（目安3:1）
入力中の表示 薄い緑の輪（濃さ30%） 濃い緑の枠
Tab移動したときの位置 — サイト共通の :focus-visible に3pxの枠を追加

文字の対象はヘッダーの相談ボタン、「おすすめ」の印、図の注記・ラベル、必須・任意の印、著作権表示などです。

3. 機械の候補はどう変わったか

公開版の check.py を、本番と同じビルド条件のサイト全体にかけた記録です。数えているのは候補が出たページ数で、修正箇所の数ではありません。

候補の種類 修正前（185ページ） 修正後（186ページ）
文字サイズ（12px指定） 185ページ 0ページ
行間 3ページ 3ページ

フッターがあるため、文字サイズの候補は全ページに出ていました。行間の候補は見出しなどの leading-snug で、本文への指定ではないため残しました。

一方、入力欄の枠線の薄さと入力中の表示の弱さは、色がCSS変数で書かれていたため機械では見つからず、画面を見て気付きました。また「色の組を計算できない」という要確認は130ページから0ページになりましたが、これはビルド時のCSSの置き場所が変わり、HTML内にCSSが含まれなくなったためです。修正による改善とは数えません。

4. 間違えかけた点と、まだ分からないこと

最初は箇条書きの明るい緑の点（#3E9C28、約3.2:1）を文字として数え、基準未満と判断してしまいました。点は文字ではなく、目安は3:1なので満たしていました。数字に加え、その色が何に使われているかを確かめる必要があります。

静的な点検では、CSSの継承・変数・透過・計算後の表示を解決できず、未検出も誤検出もあります。候補を集めるのは機械、実際の見え方やTab移動を確かめるのはブラウザ、変更を採用するのは人、という分担にしました。0件でも適合や使いやすさは保証できません。読みやすさ・操作性・問い合わせ数への効果も未測定です。