【品質アップ】サイト公開前に必ずチェックしたい5項目！チェックツールも紹介。

公開日 : 2021.08.31 最終更新日 : 2022.10.05

コーディング

Webサイトを公開する前にチェックしたい項目として５項目にまとめてみました。

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

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

まずは必須中の必須。各主要ブラウザにて「崩れ」がないかをチェックします。

下記ブラウザでチェックすればおおよそ大丈夫でしょう。
※案件のレギュレーションに合わせる必要があるので、この限りではありません。

Google Chrome（PC ＆スマホ）
Safari（PC ＆スマホ）
Microsoft Edge（PC ＆スマホ）
Mozilla Firefox（PC ＆スマホ）
Internet Explorer 11（PC）※2022年6月15日でサポート終了としています。

※各最新バージョン

上から順に、日本における利用ユーザーが多いブラウザとなります。※国や地域によって異なります。

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

あらかじめ対応したいブラウザがあるかどうかをクライアントに確認するなどし、制作前の要件定義でしっかり確認しましょう。※特に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チェックサービスで、正常に設定されているか確認できます。
https://rakko.tools/tools/9//
rel=”icon”
アドレスバーやブラウザのタブ、スマートフォンでWebページをホーム画面に置いた際に表示されるアイコンで、ファビコン（favicon）と呼ばれています。
サイトのシンボルマークにもなるので忘れずに。

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

なお、metaタグについては、弊社の下記記事で詳しく紹介してます。

これだけは知っておきたい！metaタグ（メタタグ）の種類と設定方法

画像やリンクのチェック

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

画像

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

画像がそもそも読み込まれていない
ダミーとして仮で入れ込んだままにしている
圧縮していない
文字を画像化した画像の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以内と制限はありますが、同質の画像のまま約半分くらいの容量になります。

https://tinypng.com/

画像圧縮については、圧縮した分色味が変わってしまったりと意図しない結果になる場合がありますので、圧縮後にデザイナーに確認してもらうか、デザイナーに依頼しましょう。
また、画像がメインのサイトできれいに見せたいなどがある場合は、圧縮しないことも検討しましょう。

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

<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の埋め込みがある場合、住所があっているか。

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

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

表示速度チェック

まず、ページスピード。

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

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

PageSpeed Insights (web.dev)

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

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

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

PageSpeed Insightsスコアを53点→89点に上げた方法とCore Web Vitals改善 | 東京のWeb制作会社クーシー（COOSY）

構文チェック

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

下記のようなチェックサイトがあります。

上記サイトを利用すると、文法に間違いがある場合、エラーとして警告されます。
利用するツールによっては、エラー部分についての解説がされており、正しい記述法を学ぶこともできます。

ただし、チェックの対象は文法のみです。この部分はpタグよりもhタグがいいなど、使われているタグに対しての評価はしていないので注意。

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

HTML5 入れ子チートシート | 吉川ウェブ (yoshikawaweb.com)

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

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

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

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

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