【チェックシート付】品質アップにつなげるWebサイト公開時のチェック項目

皆さん、新規のサイトを公開するとき、チェックってしてますか?

私もチェックはするのですが、なんだかんだで漏れがあったりでミスする事がよくあるのと、人にお願いするときどこをどうチェックしてもらえばいいか頼むのに結構苦労したのでチェックシートを作りました。
私仕様の規約で作成しているので、ここの内容がWEB業界の標準なんてことはありませんが、どなたかの参考になれば嬉しいです。

チェックシート

チェックの際は新規ユーザーのつもりになって見るほうが良いので、普段使っていないブラウザかchromeのシークレットモードを使うのがおすすめです。
シークレットモードを使えばcookieや過去に保持したデータを0にして確認できるのでより新規ユーザーに近い形でチェックできます。

基本項目

IP制限・ベーシック認証の削除
テスト環境を作らず、そのまま本番環境でチェックしている場合があるとき、公開したつもりでもhtaccessで閲覧制限している場合は必ずチェックしましょう。
404ページの有無
404ページの設置が必要か確認して、ページデザインも一緒にチェック。
ただリンクが切れたというより404でページがなくなってる事をユーザーに伝えるほうが親切ですよね。
また、Googleアナリティクスのようなアクセス解析を入れておけば404が多くなったときにアラートを出して事故に気が付きやすかったりします。
Google タグマネージャーは設定されているか
bodyタグの直下にGoogle タグマネージャーが入っているかチェック。
また、別サイトのGoogle タグマネージャーが入っていないかも確認する必要があります。
たまにまぎれてるくるんですよね…
私はGoogleアナリティクスをはじめとしてタグ関連がGoogle タグマネージャーで管理しています。
Google タグマネージャー
Google アナリティクスで目標設定は設定済みか、正常に数字を取れるか
Google アナリティクスを入れてるだけだと公開したあと後悔する事になると思います。
目標設定が取れてないとクライアントに怒られるかもです…。
フォームは正常に動くか

公開前にテストはしてると思いますが、念のためもう一度確認。
きちんと送信できているか、送信完了メールは迷惑メールに入ってないか、送信があったメールはクライアント(担当者)にも受信できているかも確認が必要です。
気が付きにくいところですが、ここでエラーが出ているとクライアントとユーザーにも迷惑をかけるのでかなり激おこされます。

META関連

titleタグは適切に記載されているか
何が適切かとか言われそうですが、ページにあったタイトルになっているか、他ページと重複していないか、空白になっていないか、30文字程度に収まっているかはチェック対象に入れても良いかと思います。
descriptionは適切に記載されているか
これまた何が適切かとか言われそうですが、本文のコピペではなく検索したユーザーが興味を引くような説明になってる事が好まれるでしょう。
不要なページは検索に引っかからないようになっているか
コンテンツとして中身の薄いページ、検索して訪問してほしくないページなどnoindexなどで検索対象にならないようになっているかのチェックです。不要なページを検索対象から外すのも立派なSEO対策なんですってよ。
OGPは正常に表示されるか(twitter・facebook)
忘れがちなOGPの確認。実際のURLで試しておかないと思わぬ落とし穴があったり…。
公開前の知らない間に仕様が変わるなんて事もありますしね…。
faviconは設定されているか
faviconの有無はchromeのデベロッパーツールでもエラーとして表示されてるので個人的にはもう必須と思っています。
タブブラウザが主流の今faviconがあるとないのって結構違いますしね。
faviconはブックマークされたときも見栄えが差別化されるので役に立ちます。

SEO関連

サーチコンソールの設定は済んでいるか
通称さちこ。sitemap.xml、robots.txtの登録も同時に確認。
検索ワードなど後々解析するのにも大助かりです。
サーチコンソール
パンくずはページ内に適切に記載されているか
そもそもパンくずはあるか。URLのディレクトリとばらばらになっていないか確認。
静的ページを量産したときにコピペの修正漏れでコピー元のパンくずになっていることなんて事もありますよね。
見出しタグはクローラーが理解しやすいようになっているか
サイト内にh1タグh2などがきちんと順番通りに並んでいるか。急にh3タグとかでてきてないか。
私はchromeでエクステンション入れて確認してます。
HTML5 Outliner

コンテンツ関連

文言は適切か
誤字脱字はないかの確認。私はよく誤字脱字します!
ダミー画像はないか
レンタルポジの素材が購入前のサンプルのままで公開してないかのチェックは非常に重要ですね。
画像にaltの漏れはないか
全部の画像にaltが必要なんてことはないですが、わかりにくい文言だったりしてないか今一度確認。
私はchromeでエクステンション入れて確認してます。
Alt & Meta viewer
リンクは適切か
別のページに遷移してないか、リンク切れになっていないかのチェック。
もちろんPC/スマホどちらも要チェックですね。

私はchromeでエクステンション入れて確認してます。(リンク切れのみ)
Check My Links

JavaScriptにエラーはないか
ブラウザのコンソールを使ってJavaScriptがエラー出してないかもチェック。
おそらく制作時にプログラマ・コーダーがチェックしてると思いますが念のため。
公開後に修正となるとみんなテンション下がるので、エラー関係はなるべく公開前にかたずけて置きたいものです。
ファイルのリンク切れはないか
PDFへのリンク切れやCSS、画像などのリンクが切れてないかもチェックが必要ですね。
私はWindowsユーザーなのでWebsite Explorerを使っていますがmacで類似のツールがあれば教えてください…。

最後に

炎上してる案件ほど公開前のチェックがずさんになるので人の協力が必要になってくると思います。
WEBの基礎知識がない人でも協力してもらえるところはたくさんあるので、炎上してる時ほど、適切な人員配置の人海戦術をしてチェックする体制が取れる状態で臨みましょう。

スプレッドシートで公開してるのでみなさんの使い勝手のいいようにカスタマイズしちゃってください。
チェックシート

そもそも炎上したら絶対ダメなんだからね(*ゝω・*)

需要がありそうならWordPress用のチェックシートも公開するかもです。

この記事を書いた人

conti

大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。
コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。
プロフィール