詳しくはこちら
Webサイト納品前・公開前に確認したいチェックリスト（スプレッドシートでダウンロード可能）
Webサイト制作をコーディングまで完了して、後は納品・公開するだけ！という時に、やり残したことがないかを確認するためのチェックリストを作りました。
うっかりミスで「○○の作業を忘れた...」なんてことは、誰しも一度はあるはずです。
しかし、このチェックリストを使えばうっかりミスも格段に減るので是非活用してください。
また、チェックシートをスプレッドシート形式に変換したものも用意しているので、是非ダウンロードして使ってみてください。
https://docs.google.com/spreadsheets/d/1qD4Bnpy2oZzzS_cvcibqT-SLdDgMf935gPkAa_OAjHQ/edit#gid=0
※このスプレッドシートは閲覧用なので、コピーしてお使いください。
サイト上で確認すること
テキスト
誤字・機種依存文字・ダミーテキストなどは残っていないか
ダミーテキストが残っていないかをしっかりと確認します。
また、機種依存文字があると文字化けする可能性があるので、テキストエディタのプラグインなどを用いて機種依存文字が目立つようにするのもいいでしょう。
表記の統一（半角・全角・日付や名前で表記がブレていないか）
例えば、2020/3/1と2020.03.01のように、日付の形式がバラバラだと見た目が悪いし分かりにくいです。
なので、統一されているかをしっかりと確認します。
画像
ダミー画像・未購入画像などは残っていないか
未購入の透かし文字が入った画像は絶対にそのまま公開してはいけません。
全ページしっかりと確認します。
画像を圧縮してファイルサイズを小さくしているか
画像サイズが大きすぎるとサイトの表示速度が遅くなります。画像圧縮サービスなどを使ってファイルサイズを小さくしましょう。
フォーム
バリデーションをフロントサイド・サーバーサイドでかけているか
フォームのバリデーションは必ずかけましょう。悪意あるデータが送られる可能性があります。
バリデーションは「JavaScriptを使ってフロントサイドでかける」「PHPなどを使ってサーバーサイドでかける」のどちらも対応します。
メールがちゃんと届くか（ユーザー側・管理者側）
お問い合わせなどのメールがちゃんと届くかを確認します。
ユーザー側と管理者側のどちらもしっかりと確認しましょう。
迷惑メール・文字化けなどは起こしていないか
メールの設定によっては文字化けが起きることがあります。
また、迷惑メールフォルダに振り分けられることもあるので、受信したメールをしっかりと確認しましょう。
クライアントにメールチェックOKもらっているか
フォームの設定やメールなどを自分で確認するのは当然ですが、クライアントにもちゃんと確認してもらいましょう。
「メールの内容が思ったのと違う」など後々トラブルになる可能性があります。
確認・サンクス画面に遷移するか
ローカル環境ではサンクス画面まで遷移するけど、本番環境に移行させたら画面遷移しない...のようなことはよくあるので、本番環境でも必ず確認しましょう。
スマホで入力欄のfont-sizeを16pxにしたか（それ未満だと入力時に拡大される）
スマホで入力欄のfont-sizeが16px未満だと、入力時に画面が拡大して使いにくくなってしまいます。
実際にスマホで挙動の確認をしましょう。
エラー
ページ内でリンク切れを起こしていないか
ヘッダーやフッターなどのリンクから正しく遷移できるかを確認しましょう。
量が多い場合はチェックツールを使うのもいいでしょう。
チェックツール：https://validator.w3.org/checklink
SNSなど外部のリンク先は正しいか
外部リンクもURLの打ち間違いがないかなど、しっかりと確認しましょう。
404ページを作成したか
意外と作り忘れることが多いです。
存在しないURLでアクセスして404ページが表示されるかを確認します。
URLにパラメーターが付いても、jsやPHPの処理が正常に行われるか
jsやPHPで「URLを取得して○○をする」のような処理をしている場合、パラメータが付いても正しく処理が実行されるかを確認しましょう。
ページャーの2ページ目以降が正しく表示されるか
ページャーの2ページ目以降が404になるのはあるあるです。
特にWordPressで起こりがちなのでしっかりと確認しましょう。
対象ブラウザで表示崩れが起きていないか
特にIEやSafariでは特定のCSSやjsが効かないことが多いです。しっかりと確認しましょう。
予期せぬリダイレクトはかかっていないか
既存のサイトを改修する場合、.htaccessにリダイレクト処理が書かれてることが多々あります。無駄なリダイレクト処理が行われていたら修正しましょう。
その他
iframeなど外部要因の要素は正しく表示されているか
ローカル環境では表示されていたけど本番環境では表示されない...のようなことはよくあります。
外部サービスの埋め込みタグを使う場合、「特定のドメインでのみ利用を許可する」のような設定をしている場合があるので、本番環境でもしっかりと確認しましょう。
スマホでiframe要素が見切れていないか
iframeタグでありがちなのは、HTMLにインラインスタイルでwidthが設定されていて、スマホになったら画面幅を貫通してしまうことです。
CSSでwidth: 100%;に!importantを付けてインラインスタイルを上書きしておくのもいいでしょう。
ブレイクポイント前後でチェック
CSSのレイアウトが画面幅によって崩れないか、特にブレイクポイント前後（640pxなら、639, 640, 641）の画面幅はしっかりと確認しましょう。
コード
W3C Markup Validator チェック
HTMLが正しくマークアップできているかを確認します。
W3Cのチェックツールがおすすめです。
CSS, JavaScriptなどはminify化したか
必須ではありませんが、ツールを使ってminify化すれば不要なコメントなどを削除してくれるので是非試してみてください。
jsのconsole.logは残っていないか
デバッグ用などの記述が残っていないかをしっかりと確認しましょう。
変なコメントは残っていないか
console.logと同様、不要なコメントなどは削除しましょう。
SEO・マーケティング関連
<head>タグ内
タイトル・メタ ディスクリプションの設定（下層ページも要チェック）
各ページをしっかりと確認しましょう。メディア系のサイトの場合は絶対にミスってはいけない項目です。
canonical の設定（URLの正規化）
重複コンテンツ防止のために設定することがあります。
noindex, nofollow の解除
絶対に解除しましょう。残ったままだと検索結果に表示されません。
ファビコン・アップルタッチアイコンの設定
ファビコンは何故かキャッシュが強いので、反映されなかったらキャッシュクリアをしてみましょう。
OGPの設定
デバッグツールを使って正しく表示されるかを確認します。
- Twitter： https://cards-dev.twitter.com/validator
- Facebook： https://developers.facebook.com/tools/debug/
ドメイン
wwwあり/無し のリダイレクト
ドメインにwwwを付けてアクセスしたら、www無しにリダイレクトされるようにします。（もしくはwww無し→wwwあり）
.htaccessなどで設定を行い、実際にサイト上でリダイレクトされるかを確認しましょう。
wwwあり無しどちらもアクセスできると、重複コンテンツとみなされる場合があるのでこのような対応を行います。
また、canonicalタグの設定も同時に行うことが多いです。
http → https のリダイレクト
httpにアクセスしたら、httpsにリダイレクトされるかを確認します。
念の為、TOPと下層いくつかのページを確認するといいでしょう。
SSL化
SSL化（https化）されているかを確認します。
SSL証明書は無料でも発行できるので、最低限無料のドメイン認証くらいは行いましょう。
計測タグ
Googleアナリティクス
正しく計測されているか確認しましょう。
リアルタイム計測を見れば、実際にアクセスが集計されているかを確認できます。
コンバージョンタグは正しく計測されるか
コンバージョンの計測は「Googleアナリティクス」「タグマネ」「その他の外部サービス」のいずれかで行われると思います。
完了ページなどにアクセスして、正しく計測されるかをしっかりと確認しましょう。
Googleサーチコンソール
管理画面からサイトが正しく登録されているかを確認しましょう。
Google Tag Manager（タグマネ）
管理画面のプレビュー機能を使って、正しく計測されているかを確認しましょう。
また、タグマネに登録するべきタグがちゃんと登録されているか、計測されるかなども確認しましょう。
その他の計測タグ
上記で紹介したタグの他にも、ASPなどの計測タグを使うこともあります。
それぞれのサービスの管理画面などにアクセスして正しく計測されるかを確認しましょう。
その他
XMLサイトマップ
Googleサーチコンソールにサイトマップを登録されているかを管理画面から確認します。
WordPressを使っている場合はプラグインで簡単に実装できます。
robots.txt
Googleサーチコンソールのrobots.txtテスターを使って確認します。
WordPress
ログイン画面のURLを変更したか
ログイン画面のURLは必ず変えましょう。誰でもアクセスできる状態だとセキュリティ的によろしくありません。
/?author=1でユーザー名が表示されないか
https://domain.com/?author=1のようにアクセスして、ユーザー名が表示されないかを確認します。
何も対策をしていないとユーザー名が表示されてしまいます。
デバッグモードをoffにしたか => wp-config.php の define( 'WP_DEBUG', false );
wp-config.phpのdefine( 'WP_DEBUG', false )がfalseになっているかを確認しましょう。
ここがtrueになっていたら、サイト上にエラーメッセージが表示されてしまうので、デバッグモードは開発時のみ使うようにしましょう。
不要な記事データが残っていないか（下書き含む）
不要な記事はサイト公開前に削除しましょう。
検索エンジンに不要な記事がクロールされる場合があります。
不要なプラグインは残っていないか
開発時に色々なプラグインを試して、公開時にもそのまま不要なプラグインが残っているとサイトのパフォーマンスが低下してしまいます。
不要なプラグインは削除するようにしましょう。
データベースのバックアップ対応の有無
ファイルやデータベースを定期的に自動でバックアップする設定をしておくと何かと安心です。
スプレッドシート形式のチェックシートをダウンロード
https://docs.google.com/spreadsheets/d/1qD4Bnpy2oZzzS_cvcibqT-SLdDgMf935gPkAa_OAjHQ/edit#gid=0
※このスプレッドシートは閲覧用なので、コピーしてお使いください。
関連記事
