Webデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。
このチェックリストは、Webサイトの品質基準を定め、品質を維持することを目的としています。
感覚的に確認すると見落としが発生する可能性が高いため、私は常にチェックリストを参照しながら確認しています。
また、このチェックリストを使用して表示確認を行い、それをクライアントに提出することで、安心感を与えることもできます。
クオリティの高いWeb制作体験を提供するために、参考にしていただければ幸いです。
使い方
このチェックリストは、コーディング後や納品時に確認する内容です。私の場合、コーディング後に修正や若干の仕様変更があった場合に対応できるよう、コーディング後と納品時の2回、チェックリストを使用して確認をおこないます。
スプレッドシート1つのファイルに、コーディング後と納品時に確認するためのシートを用意しておきます。案件に合わせて項目を削除したり、別の項目を追加しながら用意します。
コーディング後と納品時、それぞれのタイミングで確認が完了したら、クライアントにシェアし、目を通してもらいます。なので、項目名はクライアントにも分かりやすいよう専門用語はなるべく控えています。
62のチェックリスト項目
コンテンツ
01, 原稿通りになっているか
原稿はクライアントからいただき、制作側で校正後のものを基準とします。校正後原稿通りにマークアップされているか確認します。
02, 表記ゆれがないか
漢字とひらがな、半角と全角、大文字と小文字、記号など表記ゆれやスペルミスはないか確認します。
たとえば、『致します（いたします）』や『行う（おこなう）』など。ほとんどのケースで漢字は開くことが多いのでひらがな表記にしますが、クライアントに確認して統一します。
また、企業名が英字の場合、大文字表記か小文字表記かの確認は特に注意が必要です。
03, 意図しない日付の表記ゆれがないか（2023年1月1日、2023.01.01、2023/01/01 など）
日付の表記はできるかぎり統一した方がいいです。デザイン時点で表記ゆれがあったら確認しましょう。
04, 誤字脱字がないか
あってはいけないのですが、誤字脱字はよくあるので、複数回チェックします。
05, 画像がリンク切れ状態になっていないか
記述ミスでのリンク切れは想定されるので、デザインと合わせてチェックします。
06, 制作過程にダミーとして入れていたテキストや画像、写真がないか
ダミーのテキストや画像は要チェックです。特に、有料素材のカンプデータは本番環境でも使用してしまうとクライアントにも迷惑をかけます。しっかりチェックしましょう。私は、念のため購入履歴も確認しています。
マークアップ・コーディング
07, 余白、フォント、画像サイズなどデザインデータ通りにコーディングできているか
デザイン通りのコーディングができているか確認します。余白、フォント、画像サイズなどはよく見ておきます。
予期せぬ事情による仕様変更は、都度クライアントに確認するようにします。
08, メタ情報（title、meta description）が記述されているか
検索サイト用にメタ情報を記述します。titleとdescriptionは検索サイトに表示されるので、特に気をつけます。
09, OGPが適切に設定されているか、SNSでの表示確認
SNSでシェアされたときの表示されるコンテンツが適切に記述しているか確認します。SNSでの表示確認もしておきましょう。
10, 構造化データは、JSON-LDで正確に記述されているか、リッチリザルト確認、ページ内容に合わせて出力内容を変える
検索サイト用に構造化データを記述します。リッチリザルトテストページで確認し、問題がないか確認しておきましょう。
11, faviconの用意と設定はしてあるか
faviconの最適な記述方法は数年でアップデートされる印象です。都度確認し、納品時にあった設定方法で対応しましょう。
12, 重複コンテンツとみなされないよう正規表記（canonical）を指定しているか
重複コンテンツとならないよう、rel=“canonical”で正規URLを記述します。
13, 見出しを適切に記述し、構造化されたコンテンツになっているか
見出し（h1 h2 h3 h4など）を設定し、適切に構造化されたコンテンツにします。
14, コンテンツに合わせて適切なHTMLタグでマークアップしているか
段落であればp、ボタンであればbuttonなど、適切なHTMLタグを使用してマークアップしているか確認します。すべてdivにしないように。
15, リンク切れがないか、リンクは目的のページへ遷移しているか
リンクは適切に設定されているか確認します。外部サイトにはtarget=”_blank” を記述し、別タグで表示されるようにします（仕様に合わせる）。
16, コンテンツや仕様に合わせた適切な画像のHTMLタグで記述しているか（pictureやfigureなど）
PCとスマホで画像の出し分けをするならpicture、キャプションをつける画像ならfigureなど、目的や仕様にあわせてマークアップします。
ちなみに、figureは写真やイラスト、図などの画像だけではなく、引用やコード紹介、詩なども対象となります。
17, コンテンツとして表記する画像にalt属性を記述しているか
alt属性にはさまざまな意見があるようですが、私はすべてのコンテンツ画像に付与しています。意図のないものは何も記述していません。
18, キーボードで操作可能か、outlineは表示されているか
キーボードの『スペース』『tab』『enter』などのキーをつかって操作する人のために、キーボード操作ができるようにしておきます。よって、outlineの設定はクリアにしません。仕様が決まっている場合にはそれに従ってコーディングします。
19, ハンバーガーメニューのボタンやメニュー内（モーダル）はキーボード操作可能か、モーダル外に移動しないか、escで解除できるか
ハンバーガーメニューのボタンとメニュー内はキーボードで操作可能かチェックします。
『tab』でボタンを選択、『スペース』でメニューを開く、『tab』でメニュー内を移動、『esc』でメニューが閉じるか。
また、メニュー内を『tab』で選択移動し、最終的にメニュー内の最初の項目に戻るかも確認します。メニュー外に移動すると操作しにくくなります。
20, スライダーはキーボード操作可能か
スライダーはキーボード操作可能かチェックします。『スペース』『tab』『enter』などで操作して問題ない状態にします。
21, 英字の大文字の仕様確認（CONTACT→Contact など text-transform: uppercaseで対応）
英字の大文字をそのままマークアップしてしまうと、音声読み上げ時に適切に発音されません。
たとえば、『CONTACT』と記述すると『コンタクト』ではなく『シーオーエヌティエーシーティ』になります。なので、『Contact』と記述し、CSSでtext-transform: uppercaseを指定することで大文字表記にします。
22, 電話番号やメールアドレスの表記方法は仕様に合わせてマークアップしているか、テキスト、画像、クリックでアプリ起動など
電話番号やメールアドレスの表記方法は、予めクライアントに確認をとっておきます。テキストか、画像か、クリックでアプリ起動させるか、それぞれ仕様を決めておき、適切にマークアップします。
23, スムーズスクロールは機能しているか、アニメーションしているか、URLにID名（domain.com#◯◯）がないか
クリックすると同じページ内の意図した場所に移動できるようにするスムーズスクロールが機能しているか確認します。瞬時に移動ではなくアニメーションしているか、クリック後URLにID名がないか、合わせてチェックしておきます。
24, アニメーションは仕様通りに実装してあるか、遅延しすぎていないか、不快に感じないか
遷移時やスクロール時、hover時のアニメーションは仕様通りに実装してあるか確認します。
また、アニメーションはテンポよく作動しているか、気持ちよく動いているかもチェック。
スクロールしても作動せず、通り過ぎてから発動する仕様は大問題なので設定を修正します。
25, すべてのリンクにhover設定してあるか
すべてのリンクに、カーソルをのせると変化させる設定を施しているか確認します。
26, 画像はコンテンツ（HTML）として、装飾（CSS）として、それぞれ適切にコーディングしてあるか
画像がコンテンツの場合はHTML、装飾の場合はCSS、と適切にコーディングしてあるか確認します。
27, 不要なコメントアウトは削除してあるか
不要なコメントアウトは削除してあるか確認します。
フォーム
28, 問題なく送信できるか、確認ページやサンクスページがある場合は遷移されるか
フォームをテスト入力、送信し、問題なく動作しているか確認します。また、確認ページやサンクスページがある場合は、ページ遷移するかも合わせてチェックします。
29, 入力フォームがデザイン通りの表示なっているか（特にスマホ）
入力フォームがデザイン通りに表示されているか確認します。特にスマホはappearance: none でデフォルトのスタイルをリセットする必要があります。
30, フォームは適切にマークアップしているか、label、inputなど
フォームは適切にマークアップされているか確認します。すべてdivで記述するのではなく、label、inputなど正規のかたちでマークアップし、radioやcheckboxなどの要素をオリジナルにする際も、display: noneは使用せず実装します。
31, 必須項目が未記入であったり、入力内容が適切でない（メールアドレスに漢字など）場合に、バリデーションが正しく動作しているか
入力内容をチェックするバリデーションが適切に設定されているかか確認します。
32, フォーム送信後、送信者と管理者宛にメール送信されているか、内容が適切か、迷惑メールになっていないか（双方）
フォーム送信後に送信者と管理者へメールが送信されているか確認します。その際、記述されている内容が問題ないかも合わせてチェック。迷惑メールフォルダーに入っている場合もあるので、クライアントにも確認します。
33, キーボードで操作できるか、radioやcheckbox、selectなど含む
フォームをキーボードで操作できるか確認します。『tab』でフォーム間移動、『矢印キー』で選択肢間の移動、『スペース』で選択など、問題なく機能しているかチェックしておきます。
34, フォーム上にカーソルをのせた時に変化しているか、テキスト、radio、checkbox、select、submit など
フォーム上にカーソルをのせた時に変化しているか確認します。デフォルトでは、テキスト入力関連は変化しますが、radioやcheckbox、submitなどは変化しません。cursor: pointerを指定します。
サイト表示・表示スピード
35, 要件定義で指定してあるバージョンのブラウザで問題なく表示されているか（レスポンシブ含む）
指定範囲内のブラウザで問題なく表示されているか確認します。その際、画面サイズを変更し、スマホやタブレットのサイズでも問題ないことを確認するとともに、実機でのチェックも合わせておこないます。
36, httpでアクセスすると、httpsへリダイレクトされるか
すべてのサイトでSSL設定は必須にしているので、httpでアクセスされないようにします。すべてhttpsへリダイレクトされているか確認します。
37, エラーページが表示されるか
エラーページを用意し、表示されるか確認します。
38, 予期せぬリダイレクトはしていないか
予期せぬリダイレクトはしていないか確認します。
39, 表示速度が極端に遅いページはないか
極端に表示が遅いページがないか確認します。特に、動画を複数表示している、サイズの大きい画像を複数枚表示しているようなページは要注意です。
40, PageSpeed Insightsの指定がある場合は、基準以上のポイントになっているか
PageSpeed Insightsの指定がある場合、あらかじめ基準を決めて規定以上のポイントになっているか確認します。
表示スピードを求めすぎて、コンテンツが薄い、画像のクオリティが低い（画像が粗い）などは、別の問題が発生します。表示速度を優先するのか、コンテンツクオリティを優先するのかはあらかじめ確認し、要件定義で明確に定義しておいた方がいいです。
41, 画像サイズの最適化、最適な拡張子での書き出し、画像の品質チェック（圧縮しすぎて粗くないか）
画像は、適切なサイズに圧縮しているか、jpg・png・gif・svg・webpなど適切な拡張子に設定しているか、確認します。
また、圧縮しすぎて画像が粗くなっていないかは要注意です。画質が粗いのは低クオリティとみなされてしまうので、しっかり確認しましょう。
42, WebMに適した動画素材は変換して、マークアップしてあるか
動画はWebMに変換してマークアップしてあるか確認します。
仕様によってはYouTubeやVimeoにアップロードして表示します。その際はレスポンシブ表示も合わせてチェックします。
表示崩れ
43, 意図しない横スクロールがないか
意図しない横スクロールがないようにチェックします。特に画面サイズが変わると出やすいので、ブラウザのサイズを変更したり、さまざまなデバイスで確認しておきます。
44, どの画面サイズであってもレイアウト崩れがないか
どの画面サイズであってもレイアウト崩れがないか確認します。画像と文章が横並びなっているレイアウトの場合、画面サイズが変わるとバランスが悪くなる可能性があるので注意してチェックします。
45, Google MapsやYouTubeなどのiframeタグに対してレスポンシブ対応ができているか
Google MapsやYouTubeなどのiframeタグはデフォルトではレスポンシブ対応されていないので、都度コーディング対応します。どの画面サイズでも問題なく崩れていないか、極端に見づらい状態になっていないか確認しましょう。
WordPress
46, セキュリティ対策は施しているか（ログイン・config.php・SiteGuard・ユーザー名とパスワード・WAF・reCAPTCHAなど）
セキュリティ対策がしてあるか確認します。
詳細は以下記事から。
47, 未使用状態のプラグインやテーマを削除している
未使用のプラグインやテーマがないか確認し、ある場合は削除します。
48, 構築用ユーザーなど不要なユーザーを削除してあるか
構築用のユーザーなど不要なユーザーは削除しておきます。
49, 画像アップロード時に不要な画像サイズの出力がされないように設定してあるか（デフォルト設定の解除）
デフォルトでは画像をアップロードすると複数パターンの画像サイズが出力されるようになっています。必要なものだけ出力されるように設定しておきましょう。
50, 投稿・カスタム投稿のカテゴリ、タグ、タクソノミー、タームは仕様に合わせて設定してあるか
投稿やカスタム投稿などの投稿ページであらかじめ設定しておくカテゴリ、タグ、タクソノミー、タームがあれば、仕様に合わせて設定してあるか確認します。その際のスラッグも仕様通りになっているか合わせてチェックします。
51, 仕様に合わせて出力されているか（記事一覧や記事コンテンツ、関連記事、カスタムフィールドなど）
仕様に合わせて、記事一覧が問題なく表示されているか。記事コンテンツが表示されているか。関連記事の表示も何を基準として関連としているかを確認し、適切に表示されているか。カスタムフィールドが適切に出力されているか。それぞれ確認します。
52, 表示確認用の記事や固定ページは削除してあるか
お知らせなどで表示確認用の記事が削除されているか確認します。
53, メディア内（uploads）に不要な画像はないか
メディア内（uploadディレクトリ内）に使用していない画像がないか確認します。
54, パーマリンクは仕様に合わせて設定してあるか
パーマリンクはデフォルトのまま使用することは私はほぼないので、『投稿名』に指定されているか確認します。
55, 管理者ユーザー以外に投稿者ユーザーを用意してあるか
複数人で運営することを考慮して、管理者権限のユーザーだけでなく、投稿者権限のユーザーも用意しておきます。ユーザーの数はクライアントに確認しておきましょう。
56, 高速化プラグインの設定はしてあるか
仕様にあれば、高速化プラグインをインストールし、設定しておきます。設定後はPageSpeed Insightsで状況を確認します。
57, メタ情報やOGP、構造化データをページ単位で編集できるか（記事、固定ページ、カテゴリ、タグ、タクソノミー、ターム など）
メタ情報やOGP、構造化データをページ単位で設定できる状態か確認します。
58, サイズの大きい画像アップロードした際の対策をしているか（プラグイン、CSS など）
サイズの大きい画像をアップロードした際の対策はしてあるか確認します。最大の画像サイズ基準を決め、それ以上のものは自動で圧縮されるようにしておきます。
サイト外設定
59, Googleアナリティクスの各種設定、タグの埋め込み（コンバージョン）
Googleアナリティクスの設定はしてあるか、タグを埋め込んであるかチェックします。自分のアクセスをカウントしない設定も合わせておこないます。コンバージョンや、スクロール率の設定は必要か、クライアントに確認しておきましょう。
60, タグマネージャーで設定してあるか
アナリティクス用や広告用に設定が必要な場合、チェックします。
61, サーチコンソールの各種設定、サイトマップ送信、インデックス状況確認
サーチコンソールにて設定が完了しているか確認します。サイトマップ送信、インデックス状況、エラーなどは設定後、一定の日数が必要になるので、アフターサポート期間中で一通り確認できるように、早めに設定しておきます。
62, Googleビジネスプロフィールへ登録してあるか
Googleビジネスプロフィールへの登録も制作範囲内であれば、登録してあるか確認します。反映までは審査等があるので時間がかかります。できるかぎり早めに登録手続きをしておきます。
チェックリストをスプレッドシート化したデータを用意しました
全項目をまとめたスプレッドシートを用意しました。新規スプレッドシートを用意し、コピペしてご利用ください。