コーディングガイドライン
web制作、コーディングにおける重点チェック項目を定めています。これら項目を入念にチェックの上、納品しております。
パフォーマンス・Core Web Vitals
- PageSpeed Insightsでの計測を実施し、改善可能な項目を確認しているか
- ファーストビュー以外の画像に
loading="lazy"
を設定しているか - 画像を適切な形式(WebP等)・サイズで最適化しているか
- レイアウトシフト(CLS)の発生を最小限に抑えているか
- 不要なCSSやJavaScriptを読み込んでいないか
レスポンシブデザイン・デバイス対応
- 各ブラウザ幅で正常に表示されるか(320|375|767|768|1024|1440|1920px)
- 意図しない横スクロールが発生していないか
- モバイル端末で操作性が確保されているか(タッチ操作、UIの間隔など)
- タッチデバイスで
:hover
効果が誤動作せず、適切に無効化されているか - 要件定義されたブラウザ、デバイスで動作確認を行っているか
HTML・マークアップ
- 見出しタグ(
<h1>〜<h6>
)が適切な階層構造で使用されているか - セマンティックなHTMLタグ(
<header>
、<main>
、<section>
、<article>
等)を適切に使用しているか - HTMLバリデーションエラーがないか
- リンク切れがないか
CSS・スタイリング
- デザインカンプ通りに実装されているか。特に効果が再現されているか(
box-shadow
、opacity
、border-radius
等) - 命名規則(基本はBEM)に基づいて記述されているか
- CSS構文エラーがないか
- 不要なCSSコードが残っていないか
- スタイルの肥大化を避け、共通化や変数管理(CSSカスタムプロパティ等)がされているか
JavaScript・インタラクション
- JavaScriptエラーがブラウザコンソールに表示されていないか
- スムーズスクロール、アニメーションが正常に動作するか
- 処理の重複や無駄なイベントリスナーが排除されているか
SEO基本設定
- 各ページに適切な
<title>
と<meta name="description">
が設定されているか - favicon, OGP設定が適切に設定されているか
- 構造化データ(JSON-LD)が必要に応じて実装されているか
アクセシビリティ
- キーボードでの基本操作(Tab、Enter、Escape)が可能か
- フォーカス可能要素に視認性の高いフォーカススタイルが設定されているか
- 画像に適切な
alt
属性が設定されているか - スクリーンリーダーでの読み上げを考慮したテキスト記述になっているか(英字は小文字で入力し
text-transform
で表記を調整/レイアウトのためのスペースは使用しない など)
※ デザインや仕様によってセマンティックな構造やアクセシビリティ要件を満たすことが困難な場合は、WAI-ARIA属性で補完対応を行います。
セキュリティ・技術品質
- 必要なリダイレクト設定が適切に実装されているか(http→https、旧URL→新URL 等)
- 404エラーページが適切に設定されているか
- 開発用コメントや不要なファイルが残っていないか
- PHP等のサーバーサイドコードで適切なエスケープ処理が実装されているか
フォーム
- フォーム送信が正常に動作するか
- 送信後の確認メール・管理者通知メールが正常に送信されるか
- バリデーションは正常に動作するか(必須・形式・長さなど)
- スパム対策が実装されているか(reCAPTCHA 等)
- 仕様に応じた確認画面・完了画面が設置され、適切に画面遷移するか
WordPress設定・セキュリティ
- WordPress本体とプラグインが適切なバージョンで動作しているか
- 不要なプラグイン・テーマが削除されているか
- 管理画面への基本的なセキュリティ対策(ログイン画面URL変更 等)が施されているか
wp-config.php
のパーミッションが適切に設定されているか- テスト投稿・固定ページが削除されているか
WordPress機能・カスタマイズ
- カスタムフィールドが仕様通りに動作し、エラーが発生しないか
- 投稿・固定ページの表示が仕様通りになっているか
- ページテンプレートの分岐・ループが仕様通りに動作しているか
- サイト内のリンクやカテゴリ設定が正しく行われているか
- 投稿箇所は、テキストやコンテンツが増えても表示崩れしないか
最終チェック
- 全ページでのブラウザ表示確認を行っているか
- リンク・画像・フォーム等の動作確認を行っているか
- 誤字脱字・表記ゆれがないか
- クライアント要件を満たしているか(機能、デザイン、品質、納期)
これらのガイドラインを遵守することで、高品質でユーザーフレンドリーなウェブサイトを提供できるよう努めています。