ウェブサイト開発ルール
パフォーマンス
- 画像はサイトが遅くなる最大の原因です — WebP/AVIFを使用し、ファーストビューより下の画像は遅延読み込みし、明示的な幅/高さを設定してレイアウトシフトを防ぐこと
- レンダリングをブロックするCSSはファーストペイントを遅らせます — 重要なCSSは
<head>にインライン化し、残りは遅延読み込みすること - サードパーティスクリプト（アナリティクス、チャットウィジェット）はしばしば500ms以上のオーバーヘッドを追加します —
asyncまたはdeferで読み込み、定期的に監査すること - フォントは不可視テキストのフラッシュ（FOIT）を引き起こします —
font-display: swapを使用し、重要なフォントをプリロードすること - シークレットモードでLighthouseを使用して測定すること — 拡張機能は結果を歪めます
モバイルファースト
- CSSはモバイルスタイルから始め、
min-widthメディアクエリで複雑さを追加すること — 拡張は削減より簡単です - タッチターゲットは最低44x44pxが必要です — 指は不正確で、小さなボタンはユーザーをイライラさせます
- ブラウザのDevToolsだけでなく、実際のデバイスでテストすること — スロットリングのシミュレーションは実際のジャンクを見逃します
- 横スクロールは重大なバグです — すべてのページを最低320px幅でテストすること
viewportメタタグは必須です:<meta name="viewport" content="width=device-width, initial-scale=1">
アクセシビリティ
- すべての
<img>にはaltテキストが必要です — 装飾画像には空のalt=""、意味のある画像には説明的なテキストを設定すること - 本文テキストのカラーコントラスト比は最低4.5:1 — WebAIMのコントラストチェッカーを使用すること
- フォーム入力には関連付ける
<label>要素が必要です — プレースホルダーだけではアクセシブルではありません - キーボードナビゲーションは機能しなければなりません — Tabキーですべてのインタラクティブ要素をテストすること
- スクリーンリーダーは見出し階層をアナウンスします — H1〜H6を論理的な順序で使用し、レベルをスキップしないこと
HTML構造
- ページごとに
<h1>は1つだけ — これはページタイトルであり、スタイリングツールではありません - セマンティック要素を使用すること:
<nav>、<main>、<article>、<aside>、<footer>— これらはブラウザや支援技術に構造を伝えます - アクションには
<button>、ナビゲーションには<a>— クリックハンドラ付きのdivは使用しないこと - 外部リンクには
rel="noopener"を設定すること —target="_blank"によるセキュリティ脆弱性を防ぎます - HTMLを検証すること — 壊れたマークアップはブラウザ間で予測不能なレンダリングを引き起こします
CSSパターン
!importantを避けること — カスケードを壊し、デバッグを困難にします。代わりに詳細度を修正すること- テキストには固定
pxではなく相対単位（rem、em、%）を使用すること — ユーザーのフォントサイズ設定を尊重します - CSSカスタムプロパティ（変数）は繰り返しを減らします — 色とスペーシングを一度定義し、どこでも使用すること
- 1DレイアウトにはFlexbox、2DレイアウトにはGrid — 一方に他方の役割を強制しないこと
- CSSが読み込まれない状態でテストすること — コンテンツはプレーンなHTMLでも読み取り可能であるべきです
よくある間違い
- ファビコンがないとサーバーログに404エラーが大量に発生します — 常に含めること。単純なPNGでも構いません
<html lang="en">を設定しないと、スクリーンリーダーの発音がおかしくなります- ハードコードされた
http://リンクはHTTPSサイトで壊れます — プロトコル相対//または常にhttps://を使用すること - JavaScriptが利用可能であると仮定しないこと — コアコンテンツはJSなしでも動作するべきです（プログレッシブエンハンスメント）
- 印刷スタイルを忘れている — ユーザーが印刷する可能性のあるページ（レシート、記事）には
@media printを追加すること
ローンチ前
- すべてのフォームが実際に送信されるかテストすること — 壊れたお問い合わせフォームはリードを静かに失います
- 404ページが存在し、役立つことを確認すること — デフォルトのサーバー404はプロフェッショナルではない印象を与えます
- Open Graphタグでソーシャルシェアプレビューを検証すること — Facebook/Twitterのデバッガーでテストすること
- Google Search Consoleにサイトマップを送信すること — インデックスを高速化します
- アップタイム監視を設定すること — ユーザーから聞く前にサイトダウンを把握します