SEOの仕事を行っているミエルカさんという会社があるのですが、その会社のYouTubeチャンネルで、SEO関連の11月のニュースが紹介されています。そして、その中で、『「ページ・エクスペリエンス・シグナル」がPC検索でもGoogleのランキング要因に。2022年2月アップデート開始』というニュースが、一番目に挙げられていました。

ここで、「ページ・エクスペリエンス・シグナル」というキーワードが出ていますが、もしかしたら初めて聞いた人もいるかと思います。一度、Googleの公式サイトを見てみましょう。

ページ エクスペリエンスの Google 検索結果への影響について
https://developers.google.com/search/docs/advanced/experience/page-experience

日本語で書かれているサイトなのですが、正直、初心者にはわかりづらい！でも、とっても重要な内容なので、これからWeb制作を学ぶ初級者に向けて、解説してみます。

SEOについて

そもそも、このニュースが、なぜこれほど注目を集めているのでしょうか。それは、SEOを理解すると、わかりやすいと思います。

このSEOという言葉ですが、「Search Engine Optimization」の頭文字をとったもので、日本語に訳すと、「検索エンジン最適化」となります。今や、みなさんも、何か調べものをするときは、検索エンジンを使うのが普通だと思いますが、そもそも、検索エンジンとは何でしょうか。

ここではGoogleを例にしますが、Googleは常にWebサイトを巡回して、文章や画像、動画などの情報を集めて、それらをGoogleのサーバに記録しています。そして、ユーザーが検索窓からキーワードを入力したときに、そのキーワードに関連するサイトをランキング形式で教えてくれています。
昔はいくつかの検索エンジンがありましたし、今もGoogle以外にも検索エンジンはあるのですが、正直、ほぼGoogleの独占状態になっています。

そして、Googleのような検索エンジンで順位を上げるための対策をSEOと呼んでいるのですが、先ほどふれたように、今や検索エンジンはGoogleの独占市場なので、SEO対策=Google対策といっていいんじゃないかな、と思います。

※昔はYahoo!の検索エンジンであるYSTがあったのですが、2010年に開発を止めて、Googleの検索エンジンを使っています。また、Google以外の検索エンジンだと、たとえばMicrosoftが開発しているBingがあります。

でも、ランキングアップの方法について、Googleはほとんど公開していません。というより、さまざまな要素が絡んでいるので、Googleのスタッフ含めて、誰もわからないんじゃないかな。

ただ、たまにGoogleがランキングアップにつながる対策を発信するときもあって、今回の「ページ・エクスペリエンス・シグナル」も、その一つです。ですので、SEO業界では、非常に大きなニュースになっているのだと思います。

公式サイトで「ページ・エクスペリエンス・シグナル」を確認

それでは、ここから細かな部分をみていきましょう。

まず、公式サイトをみると

ページ エクスペリエンスの Google 検索結果への影響について
ページ エクスペリエンスとは、ユーザーがウェブページで操作を行った際の、情報そのものの価値以外に関するエクスペリエンスの尺度となるシグナルのセットです。これには、ウェブに関する主な指標（ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する指標のセット）が含まれます。また、モバイル フレンドリー、HTTPS、煩わしいインタースティシャルに関するガイドラインといった既存の検索シグナルも、これに含まれます。

https://developers.google.com/search/docs/advanced/experience/page-experience?hl=ja

このように書かれています。

この文章を分解して説明していきますね。

まず「ページ エクスペリエンスとは、ユーザーがウェブページで操作を行った際の、情報そのものの価値以外に関するエクスペリエンスの尺度となるシグナルのセットです。」という部分ですが、Googleが考えているページエクスペリエンスというものがあって、それはユーザーがアクセスしたときの指標です。ただ、その指標は、サイトに掲載されている文章や画像といったWebページを構成するコンテンツ以外に関連する指標となります。

ここで確認しておきたいのは、SEOで一番重要なのは、そのページのコンテンツです。昔は、テクニックを使って順位を上げることもできましたが、今はそういった作業は、まず不可能だと思います。また、そういったテクニックを使って不正に順位を上げたときに、Googleからペナルティが課され、最悪、検索エンジンから削除されることもあります。
ですので、Webサイトのコンテンツが最重要なのを前提として、さらにサイトの評価をあげるものがページエクスペリエンスとなります。

次に、順番が変わって「モバイル フレンドリー、HTTPS、煩わしいインタースティシャルに関するガイドラインといった既存の検索シグナルも、これに含まれます。」、こちらを確認します。

最初に、「モバイルフレンドリー」という言葉ですが、これもGoogleが2015年に提唱した考え方です。みなさんも実感していると思いますが、今ではスマホでサイトにアクセスしたり、検索するのが普通です。なので、サイトを制作するときには、スマホやタブレットなどのモバイルデバイスで使いやすいようにしよう、という考え方がモバイルフレンドリーです。さらに、モバイル対応していない場合は、検索エンジンのランキングの評価に悪影響があるとも発表しています。
とはいっても、このモバイル対応は、パソコンサイトとモバイルサイトを別々に用意しろ！と強要している訳ではなく、レスポンシブでもOKなので、今の時代だと特別難しいことではないと思います。

次に、「HTTPS」ですが、これはWebサイトへの接続方法の話になります。
Webサイトのアドレス、URLは、「http」もしくは「https」から始まりますが、これは「Webサイトのコンテンツを、パソコンやスマホといったデバイスにダウンロードする」という仕組みを表しています。もちろん、本当はもっと複雑なものなのですが、デザイナーとして働く場合は、これくらいの理解でも大丈夫です。
そして、ここで大事なのは、「http」と「https」の違いです。

パッとみると、「s」があるか、ないか、くらいの違いですが、「https」から始まるサイトにアクセスしたときは、ダウンロードするコンテンツが暗号化されます。そして、フォームに入力したデータも、暗号化されて送信されます。
つまり、ショッピングサイトなどでクレジットカード番号を入力するときに、暗号化されていない場合は、インターネット上でそのままの数字が送信されます。でも、暗号化されている場合は、カード番号も暗号化されているので、悪質なユーザーに盗聴されても、そう簡単に見破られることはありません。

でも、よく考えると、確かにカード番号は暗号化が必要だけど、サイトに掲載されている文章や画像は、暗号化する必要はあるのでしょうか？おそらく、暗号化する必要は、ないと思います。とはいっても、これもGoogleが「httpsを適用したサイトを優遇する」と言っているので、従うしかないんですよね。。。

そして、三つ目の「煩わしいインタースティシャル」ですが、サイトにアクセスしたときに、画面全体に拡がり、ボタンをタップしづらくなるような状態を指します。あとは、カーソルでホバーしたときに、画面全体に動画が拡がるような広告です。つまり、ユーザビリティーが悪い、ということですね。
これについては、SEO関係なく使い勝手が悪くなるので、使うのは止めておきましょう。

さて、なぜこれを先に説明したかというと、実はこれら三つの項目は、以前からアナウンスされていた情報です。そして、検索エンジンのランキングに直結することから、Webサイトを制作するときには、常にこれらのことを意識して制作されています。

そして、実は、「ウェブに関する主な指標（ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する指標のセット）」も、今年に導入されていたのですが、PCサイトにも、この考え方が適用されるというのがニュースになっていたんです。

今回の記事は、ここからが本編に入ります。

ウェブバイタルについて

まず、「Web担当者Forum」で、ユーザーエクスペリエンスについて紹介されているので、このページを確認してみてください。

【重要】コアウェブバイタルとは? LCP/FID/CLSをわかりやすく解説【SEO情報まとめ】
https://webtan.impress.co.jp/e/2020/06/05/36210

こちらのサイトでは、三つの要素が説明されていますが、これら三つの要素を、Googleは「コアウェブバイタル」と呼んでいます。このウェブバイタルについて、日本語の公式サイトもあります。

Web Vitals
https://web.dev/vitals/

また、三つの要素のうち、今回は、「LCP」について確認していきます。

まず、この「LCP」ですが、確認のために料金などは必要なく、また、どのサイトでも確認することができます。今回は、ソニー株式会社を例にして、実際のサイトで確認してみましょう。

ソニー株式会社
https://www.sony.jp/

まず、Google Chromeで、ソニーのサイトにアクセスします。他のブラウザでも確認できますが、Google Chromeが一番やりやすいと思います。

次に、ページの上で右クリックをし、一番下にある検証をクリックします。

そうすると、開発者ツールが表示されるので、その中の「Lighthouse」をクリックします。続いて、「Generate Report」をクリックしてください。

しばらく待つと、解析結果が表示されます。少し下にスクロールすると、LCPの項目が表示されます。

このLCPについて、先ほどのWeb担当者Forumのページから引用してみると

LCP（Largest Contentful Paint）
「最大コンテンツの描画」の意味で、ユーザーの認識としてのページ表示速度を測る指標。
ブラウザの表示範囲内で、最も大きなコンテンツ（画像・動画の初期表示画像・背景画像のある要素・テキストを含むブロックレベル要素など、そのページでメインとなるコンテンツ）が表示されるまでの時間を表す。

https://webtan.impress.co.jp/e/2020/06/05/36210

と書かれています。ちょっとこの表現では、わかりづらいかもしれませんが、言い換えると、Webサイトにアクセスしたときに、文章や写真がブラウザにダウンロードされ、ブラウザがそれらを表示するのですが、そのページのコンテンツが表示される時間が速い方がいい、ということです。

なぜ、LCPやSEOがデザイナーに必要なのか

さて、LCPだけでなく、ページ・エクスペリエンス・シグナルは、SEOにとって重要そうというのは、感じてもらえたと思います。ですが、なぜこのLCPの考え方が、デザイナーにとって重要なのでしょうか。

先ほど触れたように、Webサイトにアクセスするとき、そのサーバからテキストや画像、動画ファイルをダウンロードし、ブラウザが表示させています。
ということは、見た目を優先させて、高画質で大きなサイズの画像を使ってしまうと、当然、画像のファイルサイズも大きくなります。ということは、サイトが表示までの時間がかかってしまい、結果的にLCPの値が悪くなります。
また、（そんな人はいないと思いますが）普段の活動をアピールするため、4K動画をいくつも埋め込んでしまうと、ダウンロードするファイルサイズがGBを越えてしまい、まったく表示されないことがあり得るかもしれません。

ですので、良かれと思って素材のクオリティを上げた結果、SEOでの評価が下がり、サイトのランキングも悪化してしまう可能性があるのです。

もう一つ、デザイナーもSEOの知識を知って欲しい理由があって、それはコーディングを適切に行うためです。

こちらも先ほど触れましたが、検索エンジンは、サイトを巡回してコンテンツを収集しています。ということは、「このコンテンツが何なのか、記事なのか、見出しなのか、どういった写真なのか」という要素を、できるだけ正確に伝える必要があります。
そのため、コーディングを行うときも、見た目さえ整っていればいい、ということじゃなくて、しっかりと構造を意識した上で行う必要があります。

もしかしたら、いずれ人工知能が発達して、「この文章は見だしで、これは本文で、これは商品画像」と、検索エンジン側で正しく認識してくれる時代が来るかもしれませんが、まだまだ、それは先の話です。今は、しっかりと機能を勉強して、コーディングを行えるようになってください。

とはいっても、さすがにSEO専門の会社さんほどの知識は、いらないと思いますよ。あと、コーディングの仕方も、100点満点のやりかたがあるわけではないので、おそらく世間のコーダーさんは、試行錯誤しながら試しているはずです。
ですので、最初はあまり考えすぎずに、タグの目的とコンテンツの中身を意識してコーディングすることを意識してみてください。