Webサイトの開発から公開までのプロセスにおいて、品質管理の要となるのが「コーディングチェック」です。FMCでは、より高品質なWebサイトをお客様にお届けできるよう、エンジニア、デザイナー、ディレクターのクリエイティブメンバーが集まり、「コーディングチェックのポイント」に関する社内勉強会を開催しました。

先日は「デザインチェックのポイント」についての勉強会も実施しています。よろしければ、あわせてこちらの記事もご覧ください。

「より良いWebサイトをお届けするために。社内勉強会「デザインチェックのポイント」を開催しました。」

本記事では今回の勉強会の内容をもとに、私たちが普段どのような観点でチェックを行っているのか、その具体的な5つのチェックポイントを解説します。

チームで連携できるチェック体制を整える

FMCでは「フェーズごとチェックシート」を用意し、「要件定義」や「デザイン初稿」などの各段階で確認すべき項目をリスト化しています。

今回の勉強会では、「公開前のコーディングチェック」について、チーム全体で認識を合わせ、チェックシートのアップデートを行いました。各項目に担当者を設け、複数人によるダブルチェックを徹底することで、見落としのない確かな品質管理体制を整えています。

実際のチェックシートの一部分

それでは、私たちが実際に公開前に確認している5つのポイントをご紹介します。

ポイント1. デザインと挙動の確認

まずは、作成したデザインデータ通りにブラウザ上で再現できているかを確認します。

• Figma等で作成したデザインと実際のブラウザ表示が一致しているか（「Perfect Pixel」などのブラウザ拡張機能を使用すると便利です。）
• レスポンシブ対応やファーストビュー、スクロールアニメーションが要件通りに動作するか
• ホバー時の変化の秒数やスピードなどの挙動に異常がないか
• 全デバイスでのレスポンシブ対応がなされているか（Windowsの150%表示や、iOS、Androidなど）
• タブレット表示、PCやスマートフォンなどの各画面幅において、情報が欠損したりレイアウトが崩れたりしていないか

Perfect Pixelという拡張機能で、レイヤーを重ねてデザインと照らし合わせます。

ポイント2. SEO設定とHTMLマークアップの検証

検索エンジンにWebサイトのコンテンツを正しく評価してもらうための、土台となるマークアップを確認します。

• タイトル、ディスクリプション、見出しタグ構造（H1〜H6）、画像alt属性が適切に設定されているか
• 多言語サイトの場合、オルタネイト設定やカノニカル設定が正しく行われているか
• Chrome拡張機能の自動チェックだけに頼らず、重要な項目についてはソースコードの直接確認まで徹底できているか
• タグエラーチェックツール等を用い、コーディングミスやタグの閉じ忘れ（divタグの抜けなど）が発生していないか

拡張機能を使ってSEO設定の確認を行う様子

ポイント3. 不要なコードやコンソールエラーの除去

本番環境に不要な情報が残っていると、思わぬ不具合や情報漏洩に繋がる可能性があるため、安全な運用のためのクリーンアップを行います。

• ブラウザの検証ツール（コンソール）上で、無駄なエラーログが出力されていないか
• 実装中に使用したデバッグ用のJavaScriptログが、本番環境へのリリース前にしっかりと削除されているか
• ソースコード上に、開発中のリンク先や不要なコメントアウト、過去の古いお知らせ情報などが残っていないか

ポイント4. リンクとフォームの動作テスト

ユーザーが直接触れる機能は、ツールの自動チェックだけでなく、手作業も交えて念入りにテストします。

• リンクチェッカーツールによる自動チェックに加え、404エラーや外部リンクの挙動、ページ内リンクの遷移について手作業による目視確認も併用できているか
• アンカーリンクにおいて、ページの読み込みタイミングや画像サイズの影響による位置ずれが起きないよう、繰り返しテストによる挙動検証が行われているか
• 静的なフォームを実際に動かし、必須項目やエラーメッセージが仕様通りに機能するか
• フォームの送信先メールアドレスや、返信先のアドレスに誤りがないか

リンクチェッカーツールの実行結果画面

ポイント5. 各種タグ設置・その他の品質管理

目に見えにくい部分の作り込みこそ、Webサイト公開後の運用や成果に大きく影響します。

• アクセシビリティの向上（およびSEOスコアの向上）に配慮されているか（スクリーンリーダーを使用した読み上げテストなどを実施）
• Google AnalyticsやGoogleタグマネージャー、その他の外部タグ（ピクセルタグ等）が、ソースコードの指定された場所（headタグの上部など）に正しく埋め込まれているか
• ファビコンやAppleのアイコンなど、複数サイズの画像が標準仕様に合わせて登録されているか
• 画像の解像度が荒くなっていないか（目視確認）、適切な圧縮が行われているか、ダミー画像やウォーターマークが残っていないか

まとめ

本記事では、弊社における公開前の「コーディングチェックのポイント」をご紹介しました。Webサイトの品質は、デザインの美しさだけでなく、SEOやアクセシビリティ、セキュリティなど、目に見えない部分の丁寧な作り込みによって大きく左右されます。FMCでは、自動チェックツールと目視による手作業を適切に組み合わせ、エンジニア、デザイナー、ディレクターがそれぞれの専門的な視点でダブルチェックを行うことで、安心・安全なクオリティを担保しています。

私たちはこれからも、社内勉強会やチェックシートのアップデートを重ね、お客様に信頼いただけるWebサイトをお届けできるよう努めてまいります。引き続き、どうぞよろしくお願いいたします。