- PageSpeed Insights
- Googleが無料で公開している、ホームページの表示の速さを採点する道具です。URLを入れるだけで、どなたでも同じ点数を確かめられます。
- ファビコン
- ブラウザのタブや、お気に入りの一覧に出る小さなアイコンです。
- OGP
- ページをLINEやXに貼ったときに出る、画像と題名の設定です。設定していないと、URLの文字だけが出ます。
- LCP
- そのページでいちばん大きい部分が表示されるまでの秒数です。開いてから何秒待たされたか、とお考えいただければ十分です。
- クロール
- Googleのプログラムが、そのページを見に来ることです。
なぜ公開前の確認に手間をかけるのか
ホームページの間違いには、2種類あります。あとで直せば済む間違いと、気づかれるまで実害が出続ける間違いです。
誤字は前者です。恥ずかしいですが、実害は小さい。一方、電話番号の1桁違い、送信しても届かないフォーム、スマートフォンで読めないページは後者です。お客様は「電話がつながらなかった」とわざわざ教えてくれません。黙って別の店に行くだけです。つまり後者の間違いは、失った分が数字に表れず、いつまでも気づけません。
公開前の確認は、この「気づけない損失」を防ぐための作業です。以下、当社が実際に踏んでいる順番で書きます。
① 電話番号・住所・料金の確認
最初にやるのは、技術の確認ではなく事実の確認です。
- 電話番号をサイト上の表記を見ながら実際にかけて確かめる(目視の突き合わせは間違えます)
- 住所・郵便番号を地図アプリで検索して正しい場所が出るか確かめる
- 営業時間・定休日・料金を、原本(メニュー表・料金表)と1項目ずつ突き合わせる
- 会社名・店名・代表者名の表記ゆれがないか、全ページを確認する
ここは、制作会社には正誤が判断できない領域です。外注している場合でも、事実の最終確認だけは発注者ご自身の目で行ってください。
② スマートフォンでの表示確認
いまは多くのサイトで、訪問者の過半がスマートフォンです。パソコンの画面できれいでも、スマートフォンで崩れていたら、多数派に崩れた姿を見せていることになります。
- 自分のスマートフォンで、全ページを上から下までスクロールして見る
- 文字が小さすぎないか、横スクロールが発生していないかを見る
- ボタンが指で押せる大きさか、隣のボタンと近すぎないかを見る
- 可能なら、家族や知人の別の機種でも見てもらう(機種によって見え方が変わります)
③ リンク切れの確認
押しても飛ばないリンク、エラー画面に落ちるリンクをリンク切れと呼びます。訪問者の行き止まりになるだけでなく、「管理されていないサイト」という印象を残します。
- 全ページのメニュー・ボタン・本文中のリンクを、実際にクリックして回る
- 外部サイトへのリンク(SNS・地図など)は、飛んだ先が正しいページかまで見る
- ページ数が多い場合は、無料のリンク切れチェックツールで機械的に洗い、最後に主要な導線だけ手で確かめる
④ title・description・OGPの確認
ここから、画面の見た目には現れない部分です。
title(タイトル)は、検索結果やブラウザのタブに表示されるページの題名です。description(ディスクリプション)は、検索結果で題名の下に出る紹介文です。どちらも訪問者が最初に読む文章なのに、設定を忘れると「無題」やページ本文の断片がそのまま表示されます。
OGPは、LINEやSNSでURLを送ったときに出るプレビューの画像と文章の設定です。設定がないと、せっかく紹介してもらったときに殺風景な白いカードが表示されます。画像の寸法や、直したのに古い画像が出続ける理由まではOGP設定の仕組みと確認方法にまとめました。アドレス欄の「保護されていない通信」が気になる場合は常時SSLの確認手順もあわせてご覧ください。
- 全ページにtitleが入っているか、ページごとに内容が違っているかを見る
- descriptionが入っているか、内容と合っているかを見る
- 自分のサイトのURLを自分のLINEに送ってみて、プレビューの画像と文章を実際に見る
⑤ ファビコンと404ページ
ファビコンはブラウザのタブに出る小さなアイコン、404ページは存在しないURLを開いたときに出る案内ページです。どちらも無くてもサイトは動きますが、有るか無いかで「手をかけて作られたサイトかどうか」の印象が変わります。細部なので、404ページとファビコンの記事に分けて詳しく書きました。
- ブラウザのタブにアイコンが表示されているかを見る
- 自分のサイトのURLの後ろに適当な文字(/aaaなど)を付けて開き、何が表示されるかを見る
⑥ 電話発信とフォーム送信の確認
見た目の確認と、動くことの確認は別物です。ここがいちばん実害に直結します。
電話番号のタップ発信
スマートフォンでは、電話番号をタップするとそのまま発信できるように作るのが普通です。実際に自分のスマートフォンでタップし、発信画面に正しい番号が出るかを確かめてください。ここの設定を誤ると、表示は正しいのに発信だけ間違った番号にかかる、という事故が起こり得ます。
フォームの送信テスト
問い合わせフォームは、表示されていることと届くことが別問題です。必ず自分で1件、テスト送信をしてください。
- フォームから実際に問い合わせを送る
- 受信用のメールアドレスに届いたかを見る
- 迷惑メールフォルダに入っていないかも見る(ここに入る事故が意外と多い)
- 送信した人への自動返信メールが届くかを見る
- 必須項目を空のまま送信して、きちんとエラーになるかを見る
⑦ PageSpeed Insightsでの測定
最後に、Googleが無料で公開している測定ツールPageSpeed Insightsで表示速度を測ります。URLを入れるだけで、Google自身がそのページを採点してくれます。
目安として、LCP(主役のコンテンツが表示されるまでの時間)が2.5秒以内に収まっているかをまず見てください。遅い場合、原因の多くは重すぎる画像です。スコアの詳しい読み方はPageSpeed Insightsの見方に書きました。当社が自社サイトのモバイルで57点を出してしまい、81点まで直した失敗の記録もあります。
そのまま使えるチェックリスト
ここまでの内容を確認する順に1枚にまとめます。印刷するなどしてお使いください。
- 電話番号に、表記を見ながら実際にかけた
- 住所を地図アプリで検索し、正しい場所が出た
- 営業時間・定休日・料金を原本と突き合わせた
- スマートフォンで全ページを見た(できれば2機種以上)
- すべてのリンクをクリックして回った
- 全ページにtitleとdescriptionが入っている
- URLをLINEで自分に送り、プレビューを確認した
- ブラウザのタブにファビコンが出ている
- 存在しないURLを開き、404ページが出た
- スマートフォンで電話番号をタップし、正しい番号が発信画面に出た
- フォームからテスト送信し、受信・迷惑メール・自動返信の3点を確認した
- PageSpeed Insightsで測定し、LCPが2.5秒以内だった
ここでよく出る質問
全部確認すると、どれくらい時間がかかりますか?
サイトの規模によりますが、10ページ前後のサイトなら、慣れていない方でも半日あれば一通り確認できます。慣れれば1〜2時間です。公開後に間違いが見つかって信用を落とすことに比べれば、十分に割に合う時間だと思っています。
制作会社に頼んでいる場合も、自分で確認した方がよいですか?
はい。制作側の確認と発注者の確認は、見えるものが違います。特に電話番号・住所・営業時間・料金などの事実は、制作会社には正誤が判断できません。事実の最終確認だけは、必ずご自身の目で行ってください。
公開後に間違いを見つけてしまいました。どうすればよいですか?
慌てる必要はありません。ホームページは印刷物と違い、直せばその瞬間から正しい状態になります。見つけ次第、修正して再度アップロードすれば大丈夫です。ただし電話番号や料金の間違いは実害が出るので、気づいたら最優先で直してください。
フォームの送信テストでは、何を確認すればよいですか?
実際に自分で問い合わせを1件送り、①受信用のメールアドレスに届いたか、②迷惑メールフォルダに入っていないか、③送信した人への自動返信が届いたか、の3点を確認します。フォームは「表示されている」ことと「届く」ことが別問題で、見た目だけでは判断できません。
まだ直せるうちに直す
公開前に確かめるのは、まだ直せるうちに直すためです。
- いちばん怖いのは「気づけない間違い」:電話番号・フォーム・スマホ表示。お客様は黙って離れる
- 事実の確認は発注者にしかできない:電話番号・住所・料金は、必ず自分の目で
- 動きは実際に動かして確かめる:電話はタップしてみる、フォームは送ってみる
- 迷ったらチェックリストの順番どおりに:上から順に潰せば漏れません
そのまま書くと、当社もこのリストのすべてを最初から揃えていたわけではありません。自社サイトの表示速度の問題は、公開後に測って初めて気づき、記事にして直した経緯があります。だからこそ、公開前に機械的に確認する手順を決めておくことに意味があるとみています。頭で覚えておくのではなく、リストにして、順番に潰す。それだけで防げる事故がほとんどです。