Webサイトを公開する前に、なんとなくチェックしていませんか？
Webサイトの公開間近で、もう間違いないだろうと思い込んでいませんか？
最終チェックまでに各パートで単体チェックは実施済でもミスは起きるものです。
最終チェックはどのようなことを確認すればよいのでしょうか？
モノコトWebサイト公開前にチェックすべき20の項目を紹介しますね。
このような人におすすめ
- 本番公開前に何をチェックしたらよいか困っている方
- Webサイトの公開前に何をするのか知りたい方
- Webディレクターの方
上記のような方に、Webサイト公開前チェック項目についてお答えします。
わたしはWeb業界で20数年、働いているモノコト（@monokoto68）です。
これまで様々なWebサイト制作に携わってきました。
そんな現役WebディレクターがWebサイト制作の公開前にチェックするべき20の項目について教えます。
Webサイトの公開前にチェックすべき20項目とは
Webサイトが完成したら、もう一度、チェックを行いましょう。
チェック項目
- 各ブラウザ（Chrome/IE/FF/Safari）で意図した通りに動作するか
- 各デバイス（PC/SP/TAB）で意図した通りに動作するか
- 各ブラウザのバージョンで意図した通りに動作するか
- 画像・リンク切れはないか
- 画像にALTは設定されているか
- 誤字脱字はないか
- ダミー画像（アタリ画像）が残っていないか
- meta情報（title/keyword/description）は正しく記載されているか
- OGPは正しく設定されているか
- Google アナリティクスなどの解析タグは正しく記載されているか
- Javascriptなどにエラーは出ていないか
- 表示速度は問題ないか
- お問い合わせフォームは正しく動作するか
- セキュリティ（XSS、SQLインジェクションなど）は万全か
- Google MAPなどの外部サービスにエラーは出ていないか
- SNSのシェアボタンは正しく動作するか
- SSLは正しく表示されているか
- 404エラーページは用意できているか
- ディレクトリ変更がある場合、301リダイレクト設定リストは用意されているか
- 公開手順書は用意できているか
１．各ブラウザ（Chrome/IE/FF/Safari）で意図した通りに動作するか
制作スタッフは、全てのブラウザでチェックしながら制作していないのが実情です。
公開前のチェックでは、あらゆるブラウザでチェックを行います。
もちろん、クライアントとの取り決め（見積もり項目）によって、チェックすべきブラウザを指定している場合は、その指定ブラウザのみでチェックを行うとよいでしょう。
ブラウザによって仕様が異なるため、ちょっとした動作や余白、文字間隔などに違いが生じます。
ひとつのブラウザでは正しく表示されていても、大きく表示崩れを起こしている場合もあるため、どのブラウザでどのような症状が現れているのかを、チェックする必要があります。
２．各デバイス（PC/SP/TAB）で意図した通りに動作するか
PC（パソコン）、SP（スマートフォン）、TAB（タブレット）の各デバイスによっても動作や画面レイアウトが異なります。
各デバイスで、見え方を予め決めて制作していますので、決めた通りに正しく表示されているかをチェックする必要があります。
特にSPやTABでは、メーカーの世代によっても動作が異なってくるため、注意が必要です。
３．各ブラウザのバージョンで意図した通りに動作するか
ブラウザのバージョンによって、使えるプログラムが違っていることがあるため、作成した動作が再現されないこともあります。
①ブラウザ、②ブラウザのバージョン、③デバイスが絡んで、公開前には数多くのパターンでチェックする必要が出てきます。
公開前にチェックするデバイス、ブラウザなど、提案・見積もり時に取り決めて置かなければ、無限にチェックしなければならくなりますので、確認するデバイスやブラウザを決めた上で、公開前チェックを行いましょう。
４．画像・リンク切れはないか
画像やリンクが正しくつながっているかをチェックします。
全ページの全リンクをひとつひとつクリックして正しく遷移するかを確認しましょう。
非常に地味な作業ですが、とても重要なチェックです。
５．画像にALTは設定されているか
各画像に適切なALTは設定されているかを確認します。
画像の代替となるテキスト情報で、音声読み上げなどでは、ALTに記載された内容が読み上げられることになるため、手を抜かず確認しましょう。
ALTチェックツールなら「ALTチェックツールなら「Alt & Meta viewer」が便利！Webディレクター必須のGoogle Chrome機能拡張」の記事をご覧ください。
６．誤字脱字はないか
コンテンツ自体に、誤字脱字や間違いがないかチェックします。
特に電話番号や人の名前、日付は要注意です。
- 統一表記（お問い合わせ or お問合せ／下さい or ください など）
- 電話番号
- 人の名前
- 年月日時、曜日
７．ダミー画像（アタリ画像）が残っていないか
制作スタート時は、素材が間に合っておらず、ダミー画像やアタリ画像がはめられている場合があります。
そのまま公開されてしまわないように、公開前にもう一度、チェックしましょう。
制作時にアタリ画像と分かるように画像に「アタリ」と入れておくなど、対策を行いましょう。
８．meta情報（title/keyword/description）は正しく記載されているか
Google検索などで、検索結果に表示されるタイトルとディスクリプションは重要です。
ヌケモレがないか公開前にチェックします。
キーワードは近年、SEOにも効果がないとされているため、記載しないこともあります。
meta情報のチェックツールなら「ALTチェックツールなら「Alt & Meta viewer」が便利！Webディレクター必須のGoogle Chrome機能拡張」の記事をご覧ください。
９．OGPは正しく設定されているか
Twitter、FacebookなどのSNSで、シェアされる際に表示される情報です。
OGPの画像やテキスト、URLが正しく設定されているかをチェックします。
１０．Google アナリティクスなどの解析タグは正しく記載されているか
アクセス解析をするための解析タグを設置が、各ページに正しく記載されているかチェックします。
Google アナリティクスのタグが正しく入っているか、IDは正しいものかをチェックしましょう。
Google アナリティクス以外にも広告系のタグが多く設置されている場合は、間違いないように慎重にチェックをする必要があります。
１１．Javascriptなどにエラーは出ていないか
Webサイトは動きのあるものが多くなってきています。
プログラムであるJavascriptにエラーが出ていないかをチェックします。
１２．表示速度は問題ないか
特にデータベースサーバーと連携しているWebサイトは、データベースとのデータのやり取りに時間がかかり、Webサイトの表示速度が遅くなる場合があります。
また、動きのあるWebサイトを作ろうとして、プログラム過多になっている場合や、使用している画像や動画データが非常に重たい場合に、Webサイトの表示速度が遅くなります。
SEOにも表示速度は、早いほうがよいとされているため、表示速度は問題ないかをチェックします。
表示速度については、制作前に検討しておきたいところです。
１３．お問い合わせフォームは正しく動作するか
お客様の重要なデータを取り扱うフォーム関連は、非常に重要なため、正しく動作するか何度も確認する必要です。
情報を送信後に、データベースに正しく格納されるか、自動返信メールは正しく送信されるか、間違った操作で正しくエラー処理を返すかどうかを十分にチェックします。
１４．セキュリティ（XSS、SQLインジェクションなど）は万全か
セキュリティ対策は、重要です。
脆弱性があってはなりません。
XSSやSQLインジェクションなどによる対策は取られているかをチェックします。
１５．Google MAPなどの外部サービスにエラーは出ていないか
Webサイトでは、外部サービスを利用することがあります。
外部サービスは無料のものも多く、突然仕様が変わったりする場合もあるため、エラーが出ていないかをチェックします。
１６．SNSのシェアボタンは正しく動作するか
OGPが正しく設定されていれば、問題ないかとは思うが、実際にTwiterやFacebookなどのSNSでシェアを行って、正しくタイムラインに掲載されるかを確認します。
その際に、画像の見え方も、おかしなところで画像が切れていないかなど、チェックします。
１７．SSLは正しく表示されているか
SSL通信環境下において、正しくWebサイトが動作するかを確認します。
外部サービスなどで、SSL通信から外れているものがある場合、エラー表示されるため、チェックしましょう。
テストサイトではSSLが設定されていない場合があるため、本番公開後のチェックになることもあります。
１８．404エラーページは用意できているか
意図しないURLでアクセスされた場合に表示させる404 Not Foundページが、Webサイトに合わせたデザインで用意されているかを確認します。
１９．ディレクトリ変更がある場合、301リダイレクト設定リストは用意されているか
Webサイトのリニューアルや、ディレクトリが変わった場合、Googleなどの検索結果では、旧URLが表示され、アクセスできない状態となります。
旧ページから新ページへ移行したことをGoogleにも浸透させるためにも、301リダイレクト設定が必要です。
リダイレクトをリストにして、正しく設定されているかをチェックします。
２０．公開手順書は用意できているか
いざ、公開日となったときにどのような手順で、誰が何をいつ行うのかを明確にして、クライアントとも共有しておきます。
公開手順書が予め用意できているか、内容に間違いはないかをチェックします。
誰がチェックを行うのか？
Webサイトの公開前チェックは誰が行うのでしょうか？
モノコト担当ディレクターはもちろん、第三者目線も必要です。周りのディレクターやスタッフに協力してもらいましょう。
会社によっては、品質を管理する部門があり、そのチームでチェックを行っていただくこともあります。
また、ページ数が多い、重要な内容で間違えるわけにはいかない、検証ブラウザや端末が多い場合などは、自社内でチェックすることが難しい場合があります。
その場合は、外部の検証を行ってもらえる企業に依頼することも検討するとよいでしょう。
【テンプレート】公開前チェックシート
公開前チェックシートをGoogleスプレッドシートで用意しました。
こちらをご利用ください。
まとめ：Webサイトの公開前にチェックする20の項目とは？
Webサイトの公開前にチェックする20の項目を見ながら、ひとつひとつ丁寧にチェックし、Webサイトの品質を高めていくことが重要です。
公開後に慌てなくても済むようにしたいですね。
Webサイトの公開前のチェックは、非常に大変です。
チェック後の修正対応、その修正のチェックが発生するため、スケジュールにも十分余裕を持って取り組んでください。
