コーディングガイドライン

• ✓PageSpeed Insights での計測を実施し、改善可能な項目を確認しているか
• ✓ファーストビュー以外の画像に loading="lazy" を設定しているか
• ✓画像を適切な形式（WebP等）・サイズで最適化しているか
• ✓レイアウトシフト（CLS）の発生を最小限に抑えているか
• ✓不要な CSS や JavaScript を読み込んでいないか

• ✓各ブラウザ幅で正常に表示されるか（320 / 375 / 767 / 768 / 1024 / 1440 / 1920px）
• ✓意図しない横スクロールが発生していないか
• ✓モバイル端末で操作性が確保されているか（タッチ操作、UIの間隔など）
• ✓タッチデバイスで :hover 効果が誤動作せず、適切に無効化されているか
• ✓要件定義されたブラウザ・デバイスで動作確認を行っているか

• ✓見出しタグ（<h1>〜<h6>）が適切な階層構造で使用されているか
• ✓セマンティックな HTML タグ（<header>、<main>、<section>、<article> 等）を適切に使用しているか
• ✓HTML バリデーションエラーがないか
• ✓リンク切れがないか

• ✓デザインカンプ通りに実装され、特に効果が再現されているか（box-shadow、opacity、border-radius 等）
• ✓命名規則（基本は BEM）に基づいて記述されているか
• ✓CSS 構文エラーがないか
• ✓不要な CSS コードが残っていないか
• ✓スタイルの肥大化を避け、共通化や変数管理（CSSカスタムプロパティ等）がされているか

• ✓JavaScript エラーがブラウザコンソールに表示されていないか
• ✓スムーズスクロール、アニメーションが正常に動作するか
• ✓処理の重複や無駄なイベントリスナーが排除されているか

• ✓各ページに適切な <title> と <meta name="description"> が設定されているか
• ✓favicon、OGP 設定が適切に設定されているか
• ✓構造化データ（JSON-LD）が必要に応じて実装されているか

• ✓キーボードでの基本操作（Tab、Enter、Escape）が可能か
• ✓フォーカス可能要素に視認性の高いフォーカススタイルが設定されているか
• ✓画像に適切な alt 属性が設定されているか
• ✓スクリーンリーダーでの読み上げを考慮したテキスト記述になっているか（英字は小文字で入力し text-transform で表記を調整／レイアウトのためのスペースは使用しない など）

※ デザインや仕様上、セマンティックな構造やアクセシビリティ要件を満たすことが困難な場合は、WAI-ARIA 属性で補完対応を行います。

• ✓必要なリダイレクト設定が適切に実装されているか（http→https、旧URL→新URL 等）
• ✓404 エラーページが適切に設定されているか
• ✓開発用コメントや不要なファイルが残っていないか
• ✓PHP 等のサーバーサイドコードで適切なエスケープ処理が実装されているか

• ✓フォーム送信が正常に動作するか
• ✓送信後の確認メール・管理者通知メールが正常に送信されるか
• ✓バリデーションは正常に動作するか（必須・形式・長さなど）
• ✓スパム対策が実装されているか（reCAPTCHA 等）
• ✓仕様に応じた確認画面・完了画面が設置され、適切に画面遷移するか

• ✓カスタムフィールドが仕様通りに動作し、エラーが発生しないか
• ✓投稿・固定ページの表示が仕様通りになっているか
• ✓ページテンプレートの分岐・ループが仕様通りに動作しているか
• ✓サイト内のリンクやカテゴリ設定が正しく行われているか
• ✓投稿箇所は、テキストやコンテンツが増えても表示崩れしないか

• ✓全ページでのブラウザ表示確認を行っているか
• ✓リンク・画像・フォーム等の動作確認を行っているか
• ✓誤字脱字・表記ゆれがないか
• ✓クライアント要件を満たしているか（機能、デザイン、品質、納期）