【品質アップ】Webサイト公開前のチェックリスト5項目!ツールも紹介

Coding

Webサイトを公開する前にチェックしたい項目をまとめてみました。
これから紹介するチェック内容は、弊社AndHAでも実践している内容の一部です。
サイト制作のちょっとしたテクニックやツールも紹介していますので、是非参考にしてみてください!

各Webブラウザでのチェック

まずは必須中の必須。各主要ブラウザにて「崩れ」がないかをチェックします。
下記ブラウザでチェックすればおおよそ大丈夫でしょう。
※案件のレギュレーションに合わせる必要があるので、この限りではありません。

  • Google Chrome(PC & スマホ)
  • Mozilla Firefox(PC & スマホ)
  • Safari(PC & スマホ)
  • Microsoft Edge(PC & スマホ)
  • Internet Explorer 11(PC)
    ※各最新バージョン

PCでの確認は、ブラウザの横幅や縦幅を大きくしたり小さくしたりズームインしたりズームアウトしたり、いろいろな想定を考えてチェックします。

IEについては、2022年6月15日でサポート終了としています。ただ、ごく一部のバージョンでIE11のサポートが2022年6月15日以降も継続されます。Web制作会社としては引き続き対応していく方針が良いでしょう。
あらかじめ対応が必要かどうかクライアントに確認するなどし、納品直前でIE11で閲覧が出来ないなどのクレームが上がる前に、制作前の要件定義でしっかり確認しましょう。

メタタグのチェック

各ページに設定されているメタ情報が正確に入力されているかチェックします。

AndHAでは、下記のメタタグをテンプレ化しています。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
<title>サイトタイトル</title>
<meta name="description" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:image" content="./assets/ogp.jpg">
<meta property="fb:app_id" content="">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="robots" content="">
<link rel="icon" type="image/x-ico" href="./assets/favicon.ico">
<link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" sizes="180x180">

簡単に説明します。

  • title
    検索結果ページに表示されるページのタイトル
  • description
    検索結果ページに表示されるページの概要説明文
  • viewport
    表示領域要素。Webページの横幅の指定。
  • property=og
    各SNSでページをシェアした際に表示される要素。
    ちゃんと設定されていると、TwitterやFacebookなどのSNSでシェアされやすくなります。
    下記のOGPチェックサービスで、正常に設定されているか確認できます。
    :OGP確認
  • rel="icon"
    アドレスバーやブラウザのタブ、スマートフォンでWebページをホーム画面に置いた際に表示されるアイコンで、ファビコン(favicon)と呼ばれています。
    サイトのシンボルマークにもなるので忘れずに。

上記テンプレートは制作するサイトやページによって削除したり付け足したりして対応してください。必要なのに読み込まれていない、逆に不要なのに読み込みされているといったことは避けましょう。

画像やリンクのチェック

画像やリンクのチェックは必ずしましょう。

画像

画像についてのよくあるミスとしては下記になるかと思います。

  • 画像がそもそも読み込まれていない
  • ダミーとして仮で入れ込んだままにしている
  • 圧縮していない
  • 文字を画像化した画像のalt属性が空欄
  • 画像がぼやけている
  • 画像の出し分けをしていない(すべてのデバイスで同じサイズの画像を使用している)

中でも、画像のサイズ(横幅・高さ)や、形式(png・jpg・WebP)については注意が必要です。
これらは、ページの読み込み速度や、SEO評価にも繋がります。

画像サイズは、300×200のエリアに差し込むのであれば300×200の画像サイズを用意します。また、最近多くなってきたRetinaディスプレイや4K端末への対応のため、2倍サイズ(600×400)も必要に応じて用意し、画像の出し分けをします。
※AndHAでは、最近多くなってきたRetinaディスプレイや4Kディスプレイ対応のため、2倍サイズの画像差し込みを基本としています。

ちなみに、300×200のエリアに対して301×200で差し込むと、画像がぼやけます。また、ほんの僅かですが1ピクセル分の画像容量が増えるので、サイズはしっかり確認しましょう。
サイトのクオリティにも関わってくるので、必要であればPhotoshop等を使って必ずリサイズします。

画像形式については、最近は「WebP」が推奨されています。
「WebP」は、ほぼ同等の画質でPNGよりも約26%、JPGより約25〜34%軽くできるとGoogleが発表している次世代フォーマットです。

しかし、
IEや一部safariが対応していない。。。。。
IEに関してはおそらく今後対応することもないでしょう。。。。。(T_T)

WebP非対応ブラウザへの対応となると、jpg形式やpng形式の画像差し込みも必須です。
また、そもそも画像編集ソフトがWebPに対応していなかったり、WebPとして書き出せないためにあとで変換が必要になるなど、既存のjpgやpngと比べて使いにくい部分はまだあります。

なお、jpgやpngは基本的に圧縮する事をおすすめします。
下記サイトであれば、一度のアップに20個まで、かつ、ひとつの画像のサイズが5MB以内と制限はありますが、同質の画像のまま約半分くらいの容量になります。
:tinypng
画像圧縮については、圧縮した分色味が変わってしまったりと意図しない結果になる場合がありますので、圧縮後にデザイナーに確認してもらうか、デザイナーに依頼しましょう。また、画像がメインのサイトできれいに見せたいなどがある場合は、圧縮しないことも検討しましょう。

ここまでを踏まえて、画像の出し分けを厳格に記述するなら下記のようなります。

<picture>
  <source media="(max-width: 767px)" srcset="./assets/img/image-sp@2x.webp" type="image/webp">
  <source media="(max-width: 767px)" srcset="./assets/img/image-sp@2x.jpg">
  <source media="(min-width: 768px)" srcset="./assets/img/image-pc.webp, ./assets/img/image-pc@2x.webp 2x" type="image/webp">
  <img src="./assets/img/image-pc.jpg" srcset="./assets/img/image-pc@2x.jpg 2x" width="" height="" loading="lazy" alt="">
</picture>

画面幅767px以下。WebP対応ブラウザ。 image-sp@2x.webp
画面幅767px以下。WebP非対応ブラウザ。 image-sp@2x.jpg
画面幅768px以上。WebP対応ブラウザ。 image-pc.webp
画面幅768px以上。WebP対応ブラウザ。高解像度ディスプレイ image-pc@2x.webp
画面幅768px以上。WebP非対応ブラウザ。 image-pc.jpg
画面幅768px以上。WebP非対応ブラウザ。高解像度ディスプレイ image-pc@2x.jpg

上記の記述だと合計6枚の画像が必要になります。
もし画像の修正があった場合、6枚の画像を差し替える必要が出てきます。
工数への影響もあるので、画像の管理をどうするかも含め、案件によってディレクターやクライアントに確認しましょう。

リンクチェック

  • リンクが切れている
  • 違うリンク先を設定している
  • href=""のまま空欄にしている
  • 別タブで開かせたいのにtarget="_blank"を記述していない(逆も同じく)
  • リンク切れのページが存在する場合、代替として表示される404ページが作成されているか。404ページが正確に表示されているか。
  • SNSやYouTubeの埋め込みがある場合、正しいアカウントであるか。
  • Google Mapの埋め込みがある場合、住所があっているか。

これらの間違いはあとあとの大事故に繋がります。
リンクについては、一つ一つクリックして確認しましょう。

サイト表示速度と構文(文法)のチェック

PageSpeed Insights

表示速度チェック

まず、ページスピード。

ページスピードが遅いと、離脱率が上がりやすくなります。
「数あるサイトからクリックをしてくれてたのに、表示が遅くて見てくれない」ということが起こり、非常にもったいないです。

下記のGoogleが提供している「PageSpeed Insights」を活用しましょう。
:PageSpeed Insights

上記で、モバイル端末やパソコン向けぞれぞれにおいて、実際のパフォーマンス点数やページの改善方法・最適化案を教えてくれます。

モバイルは〇点以上、パソコンは◯点以上など、それぞれで目標点数を決めておくと良いでしょう。

PageSpeed Insightsについて詳しく解説しているサイトがあったので、ご紹介しておきます。

:PageSpeed Insightsスコアを53点→89点に上げた方法とCore Web Vitals改善

構文チェック

hタグの並び順、要素の誤った使い方、無駄なタグがないかなど、明らかにおかしいところがないかはWeb制作担当として必ずチェックしましょう。

下記のようなチェックサイトがあります。
:The W3C Markup Validation Service
:Another HTML-lint gateway
:Another HTML-lint 5

文法に間違いがある場合、エラー警告が表示されます。
利用するツールによっては、エラー部分についての解説がされており、正しい記述法を学ぶこともできます。
ただし、チェックの対象は文法のみです。この部分はpタグよりもhタグがいいなど、使われているタグに対しての評価はしていないので注意。

なお、チェックに関しては厳しめであり、たまに間違っていないのに警告される場合もあります(?)
下記の入れ子チートシートなども活用して確認すると良いでしょう。
:HTML5 入れ子チートシート

Google Analytics / search consoleの設定チェック

:Google Analytics
:search console

google analyticssearch consoletag managerなどの分析、運用ツールが正しく設定されているか確認しましょう。

「タグの付け忘れ」や一文字でも「スペルミス」があると、正しく計測してません。

また、google analytics内のコンバージョン設定が正しくされているかも確認しましょう。

なお、実際にあった失敗談からの注意点。
例えば、ページリニューアルのためにテスト環境で開発し、OKであれば本番環境にアップするという場合。本番環境にのみGAタグを設置しておりテスト環境では設置していないことが多いと思います。
この際、リニューアルしたファイルをそのまま本番環境に上書きしてしまうと、GAタグの無い状態になり、計測ができなくなります。
自分も以前やらかしました。。。注意しましょう!!!

まとめ

作成するサイトによっては他にもチェックする項目はあると思います。

例えば、

  • 文章の確認
  • いらないCSSやJsファイルの削除
  • フォームがあるサイトならメールがちゃんと送受信できているか。
  • ドメインの変更やSSL化の際に、正しくリダイレクト処理がされているか。
  • 各ページのパンくずリストが正しく機能しているか。
  • 電話番号やメールアドレスの記載があるなら、本当に合っているか。
    ※メールアドレスを記載する場合は、スパム対策をするのがおすすめです。
    :ホームページにはメールアドレスを掲載してはいけない!?その理由と対策方法

ここまでざっと上げてみましたがかなり多いですね。。。

ただ、これらのチェックをしっかりとすることで、後々ミスが発覚して修正対応するなど、「あの時やっておけば...!!」といったことが防げます。

弊社では、サイトのクオリティを上げるためにも、半日程度のチェック時間をあらかじめ入れたスケジュールを組んでいます。

ぜひ取り組んでみてはいかがでしょうか?