ウェブサイト開発ルール
パフォーマンス
- 画像はサイトが遅くなる最大の原因 — 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構造
- 1ページに1つの
<h1>のみ — これはページタイトルであり、スタイリングツールではない - セマンティック要素を使用:
<nav>、<main>、<article>、<aside>、<footer>— これらはブラウザと支援技術に構造を伝える - アクションには
<button>、ナビゲーションには<a>— クリックハンドラー付きのdivは使用しない - 外部リンクには
rel="noopener"が必要 —target="_blank"によるセキュリティ脆弱性を防ぐ - HTMLを検証 — 壊れたマークアップはブラウザ間で予測不能なレンダリングを引き起こす
CSSパターン
!importantは避ける — カスケードを壊し、デバッグを困難にする。代わりに詳細度を修正する- テキストには固定の
pxではなく相対単位（rem、em、%）を使用 — ユーザーのフォントサイズ設定を尊重する - CSSカスタムプロパティ（変数）は繰り返しを減らす — 色とスペーシングを一度定義し、どこでも使用する
- 1次元レイアウトにはFlexbox、2次元にはGrid — 一方に他方の役割を強制しない
- CSSが読み込まれない状態でテスト — コンテンツはプレーンなHTMLでも読み取れる必要がある
よくあるミス
- ファビコンがないとサーバーログに404エラーが頻発 — 必ず含める。シンプルなPNGでもよい
<html lang="en">を設定しないとスクリーンリーダーの発音が壊れる- ハードコードされた
http://リンクはHTTPSサイトで壊れる — プロトコル相対の//または常にhttps://を使用 - JavaScriptが利用可能であると仮定しない — コアコンテンツはJSなしでも動作するべき（プログレッシブエンハンスメント）
- 印刷スタイルを忘れる — ユーザーが印刷する可能性のあるページ（領収書、記事）には
@media printを追加
SEO / インデックス作成
- 正規URLはサーバーが実際に提供するURLと一致しなければならない — 不一致（例: 末尾スラッシュありとなし）はGoogleを混乱させ、インデックス作成を妨げる可能性がある
- すべてのコンテンツページには、それを指す内部リンクが少なくとも1つ必要 — サイトマップにしかなく参照ページがないページは、Googleのクローラーによって優先順位が下げられる
- テンプレートのコンテンツフィルターは、ページをナビゲーションから静かに除外する可能性がある — サイトマップだけを確認するのではなく、ホームページからリンクをたどってすべてのページに到達可能であることを確認する
- Search Consoleで「検出されたが現在インデックスに登録されていない」は、通常、技術的なブロックではなく内部リンクの欠如を意味する — インデックス登録をリクエストする前にまずリンクを修正する
起動前
- すべてのフォームが実際に送信されることをテスト — 壊れたお問い合わせフォームはリードを静かに失う
- 404ページが存在し、役立つことを確認 — デフォルトのサーバー404はプロフェッショナルに見えない
- Open Graphタグでソーシャルシェアプレビューを検証 — Facebook/Twitterデバッガーでテスト
- Google Search Consoleにサイトマップを送信 — インデックス作成を高速化
- アップタイム監視を設定 — ユーザーから知らされる前にダウンを知る