polish

磨き上げ

磨き上げとは、何かを追加することではありません。すでに問題があるのに、まだ誰も確認していない項目を洗い出すことです。上から順に進め、見つけたものをすべて修正してください。小さなことだからと飛ばしてはいけません。小さなことこそ大切です。

ドキュメントとメタデータ

• <title> はページごとに具体的な内容にします。「App」ではなく「Settings — App」のようにします。クライアント側のナビゲーション時にも更新します。
• 役立つ場合は、タイトルに状態を反映します。未読件数や、未保存を示すドット（「• Untitled」）などです。
• ファビコンには、SVG 内で prefers-color-scheme を使ったダークモード用のバリエーションに加え、32px の PNG フォールバックと 180px の apple-touch-icon を用意します。
• Open Graph と Twitter 用の画像を用意します。サイズは 1200×630 とし、汎用ロゴではなく、サイトの書体でページタイトルを表示します。
• 両方の配色モードに対応する theme-color メタデータを設定し、ブラウザーの外枠の色を合わせます。
• <html> に lang を設定します。ルートに color-scheme を設定します。
• 正規 URL を設定し、/page と /page/ に重複したコンテンツが存在しないようにします。
• アプリの枠組みに合った 404 ページを用意し、戻る手段を設けます。アプリに検索機能がある場合は、検索も用意します。

テキスト

• すべてのボタン、ラベル、見出し、メニュー項目で文頭のみ大文字にします。
• タイトルで単語が孤立しないようにします。text-wrap: balance を設定します。
• 列の数値、カウンター、価格、タイムスタンプ、ショートカットには、すべて等幅数字を使います。
• 正しいアポストロフィと引用符（’ “ ”）を使います。範囲には en ダッシュを使い、ピリオド 3 つではなく省略記号を使います。
• 空状態、エラーメッセージ、読み込み中のテキストは、プレースホルダーではなく適切に記述します。
• 「Lorem」や「TODO」を残さず、本番環境に console.log を含めません。
• 日付はロケールに合わせて書式設定します。最近の日付は相対表記（「4m ago」）にし、ホバー時に絶対時刻を表示します。

色と表面

• ::selection の色を配色に合わせます。
• スクロールバーのテーマを設定します。scrollbar-width: thin; scrollbar-color を使います。
• どの表面でもフォーカスリングが見えるようにします。最も暗い背景と最も明るい背景の両方で確認します。
• すべての画面で両方のテーマを確認します。#000 上で #fff のテキストを使わないでください。
• 読み込み時に誤ったテーマが一瞬表示されないようにします。
• フォームコントロール、<select> のポップアップ、日付ピッカーのテーマを合わせます（color-scheme）。
• 無効状態は、読みやすさを保ちながら、無効だと視覚的に分かるようにします。

レイアウト

• 読み込み時にレイアウトがずれないようにします。画像に寸法を設定し、フォントにはメトリックが近いフォールバックを指定し、スケルトンをコンテンツに合わせます。
• 固定ヘッダーのオフセットをアンカーとフォーカス対象に適用します（scroll-margin-top）。
• 375px 幅で横スクロールが発生しないようにします。
• スマートフォンでは左右の余白を 16px にし、0px にはしません。
• 画面下部に固定する要素ではセーフエリアを考慮します。
• 長いコンテンツでテストします。最長の名前、最長のエラー、0 件、10,000 件を確認します。
• ダイアログでスクロールをロックする際は、スクロールバーの余白を補正し、15px のジャンプが起きないようにします。

インタラクション

• すべてのボタンに :active のフィードバックを設定します。
• ホバー効果は @media (hover: hover) の場合にのみ適用します。
• アイコンのみのコントロールには、すべて aria-label とツールチップを設定します。
• キーボードショートカットを、ツールチップ、メニュー項目、フッターのヒントなど、目に見える場所に表示します。
• コピー操作はインラインで完了を示し（アイコンの切り替え）、クリップボードへのアクセスに失敗した場合も処理します。
• 外部リンクは矢印マーカーを付けて新しいタブで開き、rel="noopener" を設定します。
• リンクには cursor: pointer を、ドラッグハンドルには grab を設定します。
• Escape キーで最前面のレイヤーを閉じ、フォーカスを起動元に戻します。
• 二重送信を防止します。
• トーストは、ホバー時とタブが非表示のときに表示時間のカウントを一時停止します。

モーション

• prefers-reduced-motion を全体に適用し、アニメーションが実行されない場合にコンテンツが隠れたままにならないようにします。
• transition: all を使いません。
• 表示時はイーズアウトし、非表示時はそれより短くします。
• 再レンダリングのたびにアニメーションしないようにします（リストのフィルター、タブの切り替え、並べ替えを確認します）。
• ページ読み込み時のアニメーションは、初回描画時に一度だけ実行し、戻るたびに繰り返さないようにします。
• キーボード操作によるアクションではアニメーションしません。

アイコンと画像

• アイコンセットを1つに統一し、線幅を揃え、currentColorを使用します。
• アイコンはテキストと視覚的に揃えます（通常は1px上）。
• 装飾用アイコンにはaria-hiddenを設定します。
• 画像：altを記述し、ファーストビューより下ではloading="lazy"を設定し、最新の形式を使い、Retinaディスプレイ向けにsrcsetを用意します。
• アバターにはフォールバック（ニュートラルな背景にイニシャルを表示）を用意し、サイズを正確に揃えます。
• 外部アイテムのファビコンは、サイトが指定するアイコンを取得し、フォールバックとして文字タイルを表示します。

体感できるパフォーマンス

• フォントを事前読み込みします（ファーストビューで使う2つのウェイト）。font-display: swapとメトリクスのオーバーライドを設定します。
• ルートの切り替え時に画面が白くちらつかず、フレームが維持されます。
• 主要な操作では、CPUをスロットリングした状態で、インタラクションから次の描画までを100ms未満にします。
• 大きなリストは仮想化し、スクロール時に大きな画像をメインスレッドでデコードしません。
• ファーストビューより下にある長いセクションにcontent-visibility: autoを設定します。
• ループ内での計測によるレイアウトの頻繁な再計算がありません。

マシンリーダー

• 見出しがアウトラインを構成します（h1は1つ、その後にh2…）。
• ランドマークとしてheader、nav、main、footerを使用し、同じ種類の要素が複数ある場合はaria-labelを設定します。
• メインコンテンツへのスキップリンクを用意します。
• コンテンツがリスト、記事、または製品の場合は構造化データを用意します。
• robots、sitemapを用意し、サイトがリソースの場合はllms.txtも用意します。

JavaScript無効・低速ネットワークでの確認

• すべての語句とリンクがHTMLに含まれています。JavaScriptを無効にしてページを読みます。
• リビールアニメーション用に非表示にした要素は、JSなしでも表示されます（html:not(.js) [data-reveal] { opacity: 1 }）。
• Slow 3Gに一度スロットリングして、読み込み順序を確認します。重要なものが最後に読み込まれることはありません。

リリース判定

次のことができれば、インターフェースは完成です。

1. マウスを使わずに、すべての画面をTabキーで移動できます。
2. 375px幅で片手の親指を使って操作できます。
3. すべての画面でテーマを切り替えても、表示が崩れません。
4. モーションを減らす設定を有効にしても、何も欠けません。
5. 読み込み中、空の状態、エラー、完了など、すべての状態を確認できます。
6. トークンを使っていない値（色、間隔、イージング、継続時間、角丸）がありません。

カタログより

• インターフェースをより快適にする細部 — このリストの考え方です。
• HTMLにできること — JSより先にHTMLで実現できる動作です。
• web.dev — Core Web Vitalsと「速く感じる」ことを支える計測指標です。
• ファビコンとOGツール — アセットを生成して確認できます。
• Lighthouse、axe、各種チェック — リリース前に実行します。
• さらに詳しくはstealth.pm/toolsをご覧ください。