目に優しいデザイン
画面を見るときの目の疲れのほとんどは、ウェブサイトが関与できない要因（まばたき、焦点距離、未矯正の視力、部屋の明るさ）から生じます。サイトが制御できるのは、どれだけ余分な視覚的作業を要求するかです。このスキルはその余分な作業を取り除き、各ルールの根拠の強さを示します。
また、快適なページがテンプレートのように見えるのを防ぎます。デザインを始める前に、実際に公開されているサイトを調査し、作品が生成的に見える原因となる選択に対する一連のクラフトルールを提供します。
許容される主張
デザインが「回避可能な視覚的負担を追加しない」と述べることはできます。デザインが目の疲れを防止、軽減、または治癒する、目を保護する、または「ブルーライトセーフ」であるとは決して書かないでください。ダークモード、暖色系の色合い、特別なフォントを健康機能として説明しないでください。ユーザーがそのようなコピーを要求した場合は、その理由を説明し、正直な表現を提案してください。
モード
スキルが呼び出されたときの引数を読み取ります。
- 引数なし、またはビルドタスク。 新しいページやセクションの場合、最初にリファレンスを調査します（「デザイン前に調査」を参照）。次に、UIを記述または編集しながらルールを適用します。プロジェクトにまだカラーまたはタイプトークンがない場合は、
assets/tokens.cssから始めてください。UIが作成されたら、ソースに対してaudit.mjsを実行し、レンダリングされたページに対してinspect.mjsを実行し、完了と言う前に「スクリプトでは確認できない項目」を確認します。 audit（オプションでパスを指定）。スクリプトを実行し、スクリプトでは確認できない項目を確認します。以下のテンプレートを使用して報告します。何も変更しないでください。studyに続けて1つ以上のURL。各ページを検査し、そのデザインブリーフ（何をするページか、何を借用する価値があるか、どの快適性ルールに違反しているか）を報告します。何も変更しないでください。fix（オプションでパスを指定）。監査を実行します。エラーを修正し、次に警告を修正します。エラーや警告の修正に依存する場合、またはあなた自身のレビューで実際の問題であると判断した場合を除き、注釈はそのままにしておきます。スクリプトを再実行して報告します。
スクリプトの実行
プロジェクトルートから実行し、チェックするパスを指定します。スクリプトはこのスキルの scripts/ フォルダにあるため、このスキルがロードされたパスを使用します。
node <skill-dir>/scripts/audit.mjs src # テキストレポート、エラーがあれば終了コード1
node <skill-dir>/scripts/audit.mjs src --json # 機械可読
node <skill-dir>/scripts/audit.mjs src --strict # 警告でも終了コード1
node <skill-dir>/scripts/audit.mjs contrast "#1f2328" "#ffffff" # 1ペア
node <skill-dir>/scripts/audit.mjs contrast "#8a8f98" "#ffffff" --min 3 # ボーダーまたはアイコン
node <skill-dir>/scripts/inspect.mjs https://example.com # デザインブリーフとレンダリングされた快適性チェック
node <skill-dir>/scripts/inspect.mjs http://localhost:3000 --out shots # ライト/ダークのスクリーンショットも保存
node <skill-dir>/scripts/inspect.mjs dist/index.html --json
audit.mjsはソースファイルを読み取ります。inspect.mjsは実際のブラウザでページを開くため、読者が実際に目にするもの（実際の背景に対する実際のテキストのコントラスト、実際の1行あたりの文字数、ダークスキームの有無、動きの抑制が要求されたときに動きが停止するかどうか）を測定します。inspect.mjsは任意のURLまたはローカルHTMLファイルで動作します。プロジェクトにPlaywrightが必要です（npm i -D playwright && npx playwright install chromium）。Playwrightがなく、インストールできない場合は、レンダリングチェックが実行されなかったことを伝えてください。- パスは必須です。ユーザーが指定しなかった場合は、UIソースが含まれるフォルダを使用します。
- 色は16進数、
rgb()、hsl()、oklch()、white、blackで指定できます。 - 意図的な指摘を抑制するには、その行に
easy-on-the-eyes-ignoreを含むコメントを、または直前の行にeasy-on-the-eyes-ignore-next-lineを含むコメントを配置します。 - スクリプトはNode 18以降が必要で、依存関係はありません。Nodeがない場合は、手動でルールを適用し、スクリプトが実行されなかったことを伝えてください。
両方のスクリプトは、以下の表のルールIDの下で報告します。レポートでも同じIDを使用してください。
デザイン前に調査
モデルは見たものの平均を生成し、その平均こそが人々が生成されたと認識するものです。最初に具体的な公開作品を調べることで、反応すべき実際の決定事項を得ることができます。
- 構築するものと同じカテゴリの、公開されているサイトを3〜5つ選びます。ユーザーが挙げたサイトを使用します。それ以外の場合は、ウェブ検索、またはセッションに接続されたデザインリファレンスツールやスクリーンショットツールを使って見つけます。
- 各サイトで
inspect.mjsを実行し、--outオプションを使用してスクリーンショットを開いて確認できるようにします。 - 各サイトについて、フォントとタイプスケール、使用されている色の数とアクセントカラーの位置、行の長さ、セクション構成、そしてそれを特徴づける1つの要素をメモします。
- 各リファレンスの快適性に関する調査結果を読みます。賞賛されるサイトでも、小さなテキスト、弱いコントラスト、激しい動きを採用していることがよくあります。構成を借用し、それらは残します。
references/craft.mdにテーブルがあります。 - 調査したサイトと、それぞれから何を取り入れたかをユーザーに伝えます。構造と決定事項を借用します。ブランド名、ロゴ、文言、画像、正確なレイアウトを決してコピーしないでください。
リファレンスを1つも開けない場合は、その旨を伝え、ルールと references/craft.md からデザインします。
証拠グレード
すべてのルールには1つのグレードが割り当てられます。調査結果を説明するときにグレードを繰り返すことで、習慣を事実と誤認させないようにします。
| グレード | 意味 |
|---|---|
research | 管理された研究または系統的レビューによって支持されている |
standard | WCAG 2.2の達成基準によって定められている。リファレンスファイルが基準とそのレベルを示す |
convention | 賢明で広く採用されているが、試験は行われていない |
inference | 関連する刺激に関する研究から導き出されたもので、ウェブページで試験されたものではない |
ルール
重要度が順序を決定します: 最初にエラー、次に警告、最後に注釈。同じ重要度内では、表の上から下に取り組みます。表示されている重要度は通常のものです。スクリプトは、問題かどうか判断できない場合（ラベルの可能性がある小さいサイズなど）に重要度を下げます。あなたのレビューで実際に害があると判断した場合は、重要度を上げても構いません。
| ID | ルール | 重要度 | グレード | リファレンス |
|---|---|---|---|---|
type-rem-zoom | テキストはズームに耐えられること。サイズはremで指定し、ビューポートのみのフォントサイズは使用せず、ズームを無効にしない。 | エラー | standard | typography |
contrast-floor | すべてのテキストペアは少なくとも4.5:1であること。大きなテキストとUIパーツは少なくとも3:1であること。 | エラー | standard | contrast-and-color |
contrast-color-alone | 状態を色だけで伝えないこと。 | エラー | standard | contrast-and-color |
motion-flash | 1秒間に3回以上点滅するものがないこと。 | エラー | standard | motion |
motion-autoplay | コントロールのない自動再生動画がないこと。テキスト以外で5秒以上動くものには一時停止が必要。テキスト以外で無限ループがないこと。 | エラー | standard | motion |
motion-reduced | 動きは prefers-reduced-motion: no-preference の中にのみ存在すること。 | エラー | standard | motion |
theme-focus | 少なくとも3:1の可視的な代替手段なしに、フォーカスアウトラインを削除しないこと。 | エラー | standard | theming |
type-body-size | 本文テキストは最小1rem、長文読解では1.125rem から 1.25rem。読み取り可能なもので0.875rem未満は不可。 | 警告 | research | typography |
motion-triggers | パララックス、スクロールハイジャック、広範囲のズームはなし。フェードや色の変更は問題ない。 | 警告 | research | motion |
contrast-dark-secondary | ダークサーフェス上のセカンダリテキストは8.5:1以上。AAのみではそこでは弱く読める。 | 警告 | inference | contrast-and-color |
contrast-saturated-on-dark | ダーク上の小さなテキストとして、彩度の高い赤や青を使用しない。ダークテーマでは、より明るく落ち着いたアクセントを使用する。 | 警告 | research | contrast-and-color |
lum-section-steps | ダークセクションと白いセクションを交互に全幅で配置しない。ダークテーマ内に白い埋め込みやモーダルを配置しない。 | 警告 | inference | layout-and-patterns |
lum-white-flash | テーマ化された html 背景、color-scheme 宣言、メタタグ。 | 警告 | convention | theming |
layout-shift | メディアの寸法を予約し、フォールバックフォントのメトリクスに一致させ、CLSを0.1以下に保つ。 | 警告 | research | layout-and-patterns |
contrast-pure-extremes | ほぼ黒に近い白、オフホワイトに濃いグレー。ページのテキストと背景として、純粋な黒と純粋な白を避ける。 | 警告 | convention | contrast-and-color |
type-leading | 本文の line-height は1.5（1.4～1.6）。見出しは1.1～1.3。 | 警告 | convention | typography |
type-weight | 本文のウェイトは400以上。ボディサイズで100～300は不可。 | 警告 | convention | typography |
type-align | text-align: start。本文の両端揃えは不可。大文字は短いラベルのみ。 | 警告 | standard | typography |
layout-targets | ポインターターゲットは最小24×24 CSSピクセル、プライマリアクションは44×44。文中のリンクは除外。 | 警告 | standard | layout-and-patterns |
theme-both-schemes | ライトとダークを提供し、prefers-color-scheme に従う。手動切り替えはオプションで、デフォルトはシステム設定に従う。 | 注釈 | research | theming |
pattern-stripes | 広い領域にわたって7〜27ピクセルの周期を持つ、高コントラストのストライプやグリッドを使用しない。 | 注釈 | inference | layout-and-patterns |
type-measure | 読解テキストは 50ch から 60ch に制限する（約65〜78文字）。 | 注釈 | convention | typography |
motion-duration | 100〜300ミリ秒、最大500ミリ秒、出現にはease-out。 | 注釈 | convention | motion |
theme-preferences | prefers-contrast、forced-colors、prefers-reduced-transparency を尊重する。 | 注釈 | convention | theming |
pattern-clutter | ビューごとに1つの主要な強調。アクセントカラー、サイズ、ボーダースタイルは少数に抑える。 | 注釈 | research | layout-and-patterns |
craft-copy | 具体的なコピー。統計、 testimonial、評価、クライアントロゴをでっち上げない。 | 警告 | convention | craft |
craft-reference | デザイン前に、同じカテゴリの実際のサイトを3〜5つ調査する。決定事項を借用し、決してコピーしない。 | 注釈 | convention | craft |
craft-one-idea | ビューごとに1つの特徴的なアイデア。他のすべては控えめに。 | 注釈 | convention | craft |
craft-palette | 色味のあるニュートラルと1つのアクセント。インディゴやパープルのグラデーション、グラデーションテキストは使用しない。 | 注釈 | convention | craft |
craft-show-product | 実際のインターフェース、データ、またはコードを表示する。3つの同一のアイコンカードの行、絵文字アイコンは使用しない。 | 注釈 | convention | craft |
craft-layout | すべてを中央揃えにしない。不均等なグリッド分割と変化に富んだセクション構造。 | 注釈 | convention | craft |
craft-restraint | フラットなサーフェスとヘアライン。影は少なく、半径スケールは1つ、ぼかしとグローの重ね付けはしない。 | 注釈 | convention | craft |
リファレンスファイルには、根拠、出典、before/afterコードが含まれています。適用または報告するルールをカバーする各ファイルを読んでください。ページ全体の修正には、通常3〜4つのファイルが必要です。
references/contrast-and-color.md: 色の選択、パレットまたはダークテーマの構築、コントラストに関する調査結果の説明。references/typography.md: タイプサイズ、行長、スペーシング、フォント、可変タイプ。references/motion.md: アニメーション、トランジション、ビデオ、スクロール効果、ローダー。references/layout-and-patterns.md: テーブル、グリッド、ストライプ、密度、セクション背景、画像、レイアウトシフト。references/theming.md: ライト/ダークテーマ、テーマ切り替え、フォーカススタイル、ユーザー設定メディアクエリ、Tailwind、shadcn/ui。references/craft.md: 新しいページやセクションのデザイン、テンプレート的または生成的に見える結果、リファレンスサイトから何を借用し何を残すか。references/evidence.md: ユーザーが理由を尋ねたり、ルールに疑問を持ったり、ブルーライト、ダークモード、ディスレクシアフォント、APCAについて質問したりした場合。
依頼されなくても記述するデフォルト設定
:root {
color-scheme: light dark;
--bg: light-dark(oklch(0.985 0.002 90), oklch(0.18 0.01 255));
--text: light-dark(oklch(0.24 0.01 255), oklch(0.93 0.005 255));
--muted: light-dark(oklch(0.48 0.01 255), oklch(0.78 0.01 255));
--accent: light-dark(oklch(0.5 0.19 255), oklch(0.74 0.13 255));
}
html { background-color: var(--bg); color: var(--text); }
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; }
p, li { max-inline-size: 55ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.card { transition: transform 200ms ease-out; }
}
ページの <head> に <meta name="color-scheme" content="light dark"> を追加します。
本文テキストは、ライトで15.75:1、ダークで15.30:1になります。ミュートテキストは6.25:1と9.39:1です。アクセントカラーは5.78:1と8.14:1で、これがフォーカスリングに使用される理由です。システムの Highlight 色はダークサーフェス上で3:1を下回る可能性があります。assets/tokens.css には、サーフェス、コントロール用のボーダー、長文読解サイズ、オプトインの薄暗いテーマを含む完全なセットがあります。
color-scheme: light dark は、ページに両方のスキームの色が本当にある場合にのみ追加してください。ハードコードされたライトカラーのページにこれがあると、白いページにダークなスクロールバーとフォームコントロールが表示されます。theme-both-schemes は同じ変更で修正してください。
Tailwindとshadcn/uiは、純粋な白とほぼ黒（約19.8:1）、および純粋な値として bg-white / text-black を出荷します。--background と --foreground をオーバーライドし、bg-background や text-foreground などのセマンティックユーティリティを使用してください。
スクリプトでは確認できない項目
inspect.mjs は、レンダリングされたページで実行できる場合、以下の項目の1、3、5をカバーします。残りの項目、および実行できなかった場合はすべての項目を、コードまたはページを読んで確認してください。確認できない項目がある場合は、「未確認」の下にリストアップし、その理由を述べてください。
- 画像やグラデーション上のテキストを含む、実際のテキストと背景のペアごとのコントラスト。
contrastコマンドでペアを測定します。 - 小さなテキストが本文なのか短いラベルなのか
- レンダリングされたレイアウトでの行の長さ。いくつかの完全な行の文字数を数えます。
- アニメーションとビデオの点滅レート
- セクション間の明るさの変化と、ダークテーマ内の白い埋め込み
- 読み込み中のレイアウトシフト。
widthとheightのない画像やビデオを含む。 - 状態が色だけで伝えられているかどうか
- 動きの抑制を無視するJavaScript駆動のアニメーション
em、パーセンテージ、fontショートハンドで設定されたサイズ、およびbackground-sizeで構築されたストライプ
レポートテンプレート
Easy on the Eyes - 監査レポート
チェック対象: [パス]
エラー:
- [ルールID]: [説明]
警告:
- [ルールID]: [説明]
注釈:
- [ルールID]: [説明]
スクリプトでは確認できない項目:
- [未確認の項目とその理由]
概要: [修正された/一部修正された/問題は見つかりませんでした]