自社のWEBサイトを公開しても、見てもらえなくてはあまり意味がありません。しかし、サイトを訪れてくれるユーザーが多かったとしても、使いやすさが悪ければ離れてしまうユーザーも多いでしょう。そこで役立つWeb検証サービスとしてGoogleが提供するLighthouseがありますが、どのような特徴があるのかみていきましょう。
Lighthouseとは？
企業がWebサイトを作成する理由としては、いくつかあります。企業がいくらすばらしい活動をし、商品やサービスを提供していたとしても、たくさんの人に認知されていないことも多いでしょう。そこで認知度を高め、信頼を獲得するために、会社案内や商品紹介をしています。
また、顧客と関係を持つための資料請求や問い合わせを増やすために用いたり、人材採用の目的で専用の採用サイトを設けたりする場合もあります。さらに、企業ブランディングを向上させるための、イメージアップを目的とすることもあるでしょう。
そうした目的を実現するために、常に新鮮な情報を提供し、更新頻度をあげる、リニューアルするなどして、企業側もただ作成して終わりではなく、Webサイト作成後もいろいろと改善していく必要があります。
とくに、新型コロナの影響によって、いろいろなシーンでオンライン化が進んできているため、とくにWebサイトは重要な役割を担っており、運用していくことが大切になっているのです。
SEO施策が大切
Webサイトの評価に関しては、これまではいくつかブラウザがあるなかで、どのブラウザでも同じように表示され、動いているかどうかや、検索エンジンでいかに上位に表示されるかが求められてきました。現在でも、ふたつは重要なポイントとなっていますが、さらにユーザーにとって、使い勝手がよく満足度が高いかどうかも求められています。
使い勝手が悪いサイトであれば、ユーザーにストレスを与えるのはもちろんのこと、SEOの観点でも大きく影響がでて、検索結果が上位に入れない状態になってしまいます。SEOの強化として、自社のWebページをいかに早く表示されるかどうかや、アクセシビリティの対応などが求められています。
目的に応じたツール選び
現在ではSEO施策として、有料、無料を問わずいろいろなツールがあります。しかし、多くの企業では、どのような対策をしてよいのか分からないまま、ツールを導入していることも多いです。そこで、どのような対策をとるのが効果的なのか、まずは自社で確認するところからはじめてみましょう。
たとえば、同じカテゴリで圧倒的な競合がいる場合は、どれだけサイトを改善しても、上位表示できない可能性もあります。記事コンテンツを上質なものにするために、誤字や脱字をチェックしたり、他サイトからコピーしているコンテンツがないか確認する方法がよい場合もあるでしょう。
最適なキーワードを知ることも大切です。また、アクセス解析をして、どこから流入しているのかを知ったうえで、改善することも大事なポイントといえるでしょう。
そのなかでも、まず大切なのは、自社のWebサイトのなかで、どれだけの対策がされているのかをチェックすることです。対策をすることで、ユーザーが使いやすくなるうえに、Googleに評価してもらうことで、SEOを強化することにつながるのです。
Webサイトの内部対策を確認できるツール
そこでおすすめなのが、Googleが無料で提供しているオープンソースの検証ツールで、Webサイトの分析や診断を行う、Google Chrome拡張機能のLighthouseがあります。特定のWebアプリやページのパフォーマンスやアクセシビリティ、検索エンジン最適化を監査して改善すべき項目をチェックしてくれます。
つまりLighthouseを導入することで、スムーズにコンテンツの課題を把握でき、改善できるので、Webサイトの質を高めるとともに、検索順位上位にすることができるでしょう。
Lighthouseの特徴としては、いろいろな指標で、サイト内の分析ができることが最大の特徴です。分析できることとしては、Webサイトのパフォーマンスや使い勝手のよさ、SEOなどの観点から大きく分けて5つあり、各項目毎に評価点数とともに診断結果が表示され、具体的な改善方法などが記載されます。
分析した結果として、どの部分が合格しているのかも一目で分かるのもポイントです。パソコン上だけでなく、モバイル上での利用も想定した診断も可能です。
Lighthouseの評価基準
Lighthouseでは、いくつかの評価基準によってサイトを評価しています。
具体的には、いらないCSSや、画像要素に最適なaltが設定されているか、言語指定の適切さ、メタタグでタイトルやディスクリプションの設定に関してやリンクの文字列の最適さなどです。そのほかにも多くの評価基準があり、基準をもとに、サイト内のどこを改善する必要があるのかなどを説明してくれます。
確認できるチェック項目としてあるのは、Performance（パフォーマンス）、Accessibility（アクセシビリティ）、Best Practices（ベストプラクティス）、SEO、Progressive Web App（プログレッシブウェブアプリケーション）の５つで、各項目のスコアが100点満点で表示されています。
0～49点までは赤の△、50～89点まではオレンジの四角、90～100点は緑の丸で表示されるために、見た目ですぐに判断できるのが特徴です。各項目の評価スコアが色別で点数とともに表示されており、それぞれの改善点の表示や、改善することで得られる結果なども記載されています。
具体的にそれぞれの項目にはどのような記載があるのか詳しくみていきましょう。
パフォーマンス
性能を知るひとつとして、通信相手までの経路の距離を示す指標のメトリックが使われており、6つの速度指標が提示されています。
指標は、Webページが表示され始めた時間やテキストや画像などの、最大コンテンツが表示されるまでの時間、表示後にユーザーの操作に応答するまでのページの読み込み待ち時間です。また、ページを表示しているときにレイアウトがずれていないかなどの指標、ページの読み込み速度などの指標が表示され、サイトの性能に関しても評価しています。
これらは値が小さいほど高いスコアとなっているため、値が高い場合は改善が必要です。最新の画像形式やテキストの圧縮、未使用のJavaScriptの軽減、画像を効率的にエンコードする、適切な画像の設定についてなど、改善に必要な方法も含めて改善点や問題点が把握できます。
そのほか、合格した監査内容の記載やいろいろな診断結果を解説しており、改善することでページのパフォーマンスを向上させ、ユーザーの離脱率を低下させ、アクセス数アップを期待することができるのです。
アクセンシビリティ
アクセンシビリティとは、サービスや製品の使いやすさを意味する言葉です。Webページを訪れるユーザーや検索エンジンの巡回プログラムに対してなど、誰に対しても最適な作りになっているかどうか、アクセスしやすくなっているかを分析して評価してくれる項目となっています。
テキストと背景色のコントラストにより見やすくなっているか、ボタンの設定が適切な名称で行われているか、HTML構造は最適か、タイトルタグでタイトルが指定されているか、リンクに識別できる名前が記載されているかなどチェックしてくれます。
年齢や障害の有無に関係なく、誰でもどんな時でも問題なくWebを利用できるようにすることがアクセンシビリティで、企業の社会的価値の向上に貢献しており、分析結果によって改善することにより、質の高いページを作成することが可能です。
ベストプラクティス
最善の方法を意味するベストプラクティスでは、Webページをスクロールする場合のパフォーマンスを向上させる方法をはじめ、使い勝手やユーザビリティ、セキュリティなどの観点から分析、評価をしてくれます。
HTTPSや非推奨のAPI、JavaScriptライブラリの使用の有無についてなど、適切な技術やシステムを利用した安心で信頼できるサイトかどうかが把握できるでしょう。
ほかにも、パスワード欄へのペーストをすることをしっかりと禁止しているか、廃止予定のAPIやオフラインでWebアプリケーションを使うためのキャッシュ機構を使用していないかなども診断されます。これらの項目を改善することによって、安全で使いやすくなるでしょう。
SEO
ユーザーが特定のキーワードを検索した場合に、自社のWebページが、検索上位に表示されるようにするための施策のことをSEOといいますが、SEO施策が適切に実施されているかどうかの評価が表示されています。
フォントサイズやリンクの文字列は適切か、タグでページ内容の要約やタイトルを指定しているか、ブラグインが必要なコンテンツを利用していないか、ディスクリプションでページ内容の説明を指定しているか、canonicalが正しく設定されているかなどの項目で診断します。
上記で診断された内容を改善することによって、検索上位になれる可能性もあり、ユーザーや検索エンジンに関しての理解の度合いも増すことができるでしょう。
プログレッシブウェブアプリケーション
モバイルサイト上で、Webページをスマートフォン向けアプリのように使える仕組みのことで、プログレッシブウェブアプリケーションの仕様にそっているかどうかを評価します。
こちらは、ほかの4項目と違って100点満点での表示はありません。プログレッシブウェブアプリケーションに対応しているかどうか、対応するにはどのように改善するのが好ましいのかが記載されており、たとえばService Wokerに登録されているかどうかのチェックがあります。
Service Wokerとは、Webページとは別にバックグラウンドで動作するJavaScript環境のこと意味している言葉で、登録されていることでオフライン上でも実行が可能で、ページを離れた後やブラウザの再起動をした後でも実行できます。
Googleはプログレッシブウェブアプリケーションの普及に力をいれているため、改善することによってユーザーファーストのWebページと認証され、SEO施策にもなるでしょう。
Lighthouseの導入方法とは？
これまでLighthouseについての特徴などを説明してきましたが、導入するにはどのような方法があるでしょうか。導入は無料ですぐに簡単に行うことができますが、どのように行うのか導入と使用の方法について紹介していきます。
Chromeウェブストアで導入
まずはインターネットブラウザのGoogle Chromeを起動して、Chromeウェブストアを開きます。検索ボックスでLighthouseと入力して検索し、該当するページがでてきたらChromeに追加を選択します。Lighthouseを追加するかどうかというダイアログが表示されるので、「拡張機能を追加」をクリックすると導入完了です。
Chromeの拡張機能のため、使用する場合は右上にあるアドレスバーの右側にあるアイコンをクリックします。そこで、導入済みの拡張機能が表示されるので、Lighthouseのアイコンが入っていれば導入は成功です。もしもアイコンが入っていなければ導入に失敗しているため、もう一度最初から確認して進めてみてください。
簡単に使用できる
Lighthouseアイコンがあり、導入の確認ができたら実際に使用してみましょう。使用方法も導入と同じようにとても簡単です。
分析や診断を確認したいWEBサイトを開き、拡張機能のアイコンの中のLighthouseのアイコンをクリックすると「Generate Report」ボタンが表示されます。「Generate Report」ボタンをクリックすると、Webページの分析がスタートです。
分析している間に言語に関して選択するページが現れ、Google翻訳の機能があるために、基本は日本語で翻訳することが可能です。原文のまま確認したい場合は英語で表示することもできるうえに、別の言語で表示したい場合も対応できます。翻訳されている文章のために、日本語がおかしな文章になっていることもあるので注意しましょう。
しばらくすると、スコアレポートが項目ごとに表示され、それぞれに細かく解説が記載されているので、それをもとに改善していきます。以上が使用方法となります。
どのような項目が表示されているかは、先ほど評価基準で記載した5つの項目が確認できます。分析の実行時間としては、早くて数十秒、遅くても1～2分前後で完了し、分析終了後に評価結果のレポートが表示されます。
新規にWebサイトを構築したり、自社サイトをリニューアルした場合は一度診断してみるといいでしょう。それ以外でも、現在のサイトを改善したいと考えている人にもいいでしょう。ページの速度を簡単にはかることができるうえに、パフォーマンスを簡単にできるツールとして、使い勝手のよさに定評があります。
ただし、改善の評価を確認できたとしても、改善するためには簡単に自社で対応できるものもあれば、すぐに改善することが難しい場合もありますが、まずはできるところからはじめましょう。
まとめ
今回はWeb検証サービスのLighthouseについて紹介しました。Web検証サービスは有償無償問わずいろいろありますが、LighthouseはGoogleが無料で提供しているオープンソースのツールです。
パフォーマンスやアクセシビリティ、検索エンジン最適化を検証して、改善すべき項目をチェックしてくれます。チェックされた項目を改善することで、Webサイトの質を高めるだけでなく、検索結果の上位を目指すこともできるでしょう。
おすすめのWeb検証ツール/サービス7選！
Zig-Zag（ジグザグ）
Siteimprove（サイトインプルーブ）
インフォ・クリエイツ
EGテスティングサービス
スタジオ エスアンドシー
ミツエーリンクス
インフォアクシア
