スポンサーリンク

Webサイトの改善にUXが必須に。SEO勉強会参加の記録。

学習の備忘録
この記事は約9分で読めます。

先日、SEOに関する社内勉強会に参加したので、そのメモを記録します。

筆者は、サービスデザイナーとして勤務しています。

サービスデザイナーという職種を紹介。知名度低いですが意外と幅広くやってるんです。
Webデザイナー・Webディレクターという職種はよく耳にしますよね。 そして現在、○○デザイナー・○○ディレクターと派生が多く存在しています。 この記事では、筆者が就職した職種「サービスデザイナー」について解説していきたいと思います。 筆者 デザイナーの役割をもっと知りたい Web系職種ってどんなのがあるんだろう そういった方向けに書いています。 ...

Webサイトの改善には、PageSpeed InsightsやLighthouseを使っています。

今回は2021年5月から「Web Vitals」という指標が導入されるということで参加しました。
正確には、「Core Web Vitals」ってなんぞやという好奇心。。。

スポンサーリンク

Webサイトの改善って?

Webサイトはただ作るだけでなく、そのWebサイトに存在価値をつける必要があります。
Webサイトの様々な問題を解決して、検索エンジン(Google)から信頼性の高いWebサイトと認識してもらいます。
結果として、検索に引っ掛かりやすくなるわけです。

たしか。。。少し前のアップデートで個人ブログは上位に上がりにくくなったとかなんとかあったかな(><)

それは置いておいて、デザイン・コーディングだけでなく、Webサイト内部の対策も必要というわけです。

「Web Vitals」とは?

UXってご存じですか?
「ユーザーエクスペリエンス」の略で、ユーザーの体験を意味します。
Webサイトを訪れたユーザーが快適にWebサイトを使うことを目的としています。

そのユーザーエクスペリエンスを高めるためのGoogleの取り組みです。

Googleのプラットフォームに参加している方は、その取り組みへの参加は必須です笑
「Webサイトの管理者さん、ちゃっとやってね」という通達なわけです。

筆者
筆者

その取り組みをやるといっても、何からやればいいねん?
優先度ってもんがあるやん・・・

きょん
きょん

はい。「Core Web Vitals」
直訳「中心的(Core)な重要要素」
これを改善してください。

と、「Core Web Vitals」という優先的に改善してくださいという指標が3つ提示されました。
正確には、追加された。

・モバイルフレンドリー
・セーフブラウジング
・SSL対応
・インターステイシャル

は当たり前に存在しています。

LCP(Largest Contentful Paint)

この指標は、Webページがブラウザに表示されるまでの速度です。
画像や動画・ブロックレベルのテキストなどの主要なページ内コンテンツが、ブラウザの表示範囲内で読み込まれる時間が測定対象です。

理想は、2.5秒以内といわれています。

2.5秒以内にページが表示されないWebページはあれってことです。

対策としては、画像や動画の最適化・不要なレイアウトの削除・遅延読み込み処理ですね。

FID(First Input Delay)

この指標は、Webページの反応速度です。
反応速度というのは、そのWebページ内で活動ができるまでの速度です。
具体的な動作としては、画像をクリックできる・入力フォームでテキストが入力できるとかです。

理想は、0.1秒以内といわれています。

0.1秒以内にWebページ内で動作を行えないということはあれってことです。

対策としては、・・・どうするんだろう・・・スクリプトの動作軽減ですかね。

CLS(Cumulative Layout Shift)

この指標は、Webページの予期せぬレイアウトのズレの発生速度です。
よくわかりにくい指標です。
具体的な例としては、カートの決定ボタンを押そうとしたら表示がずれて、変なボタン押しちゃったとかですね。

理想は、0.1秒未満といわれています。

0.1秒までにWebページ内のレイアウトを確定できないということはあれってことです。

対策としては、余計なスクリプトは入れないこと・広告やタグの軽減ですかね。

どうやって計測するの?

・PageSpeed Insights
・Lighthouse
・Web Vitals
・Chrome UX Report
・Googleサーチコンソール

PageSpeed InsightsとLighthouseがサマリ化されてておすすめ
Chrome UX Reportって初めて聞いたけど、ヘビーなツールらしい。。。

まとめ

Web業界の移り変わりってすごいなと思いました。
ということは、URL叩いたら、なんか動画だったり、アニメーションが動いたりするHPはアウトなのかな。。。

ユーザーの使いやすいWebサイト制作とは難しい。
ただ作ればいいってわけじゃないということを実感する。。。

UXを勉強するには、マーケティング・SEO方面も知っておかないといけないなと思いました。

個人ブログの対策って、WordPressだとレンタルサーバーやテーマに依存している箇所が多いからきつい。。。
せめて、画像サイズのリサイズや圧縮くらいは頑張ろうと思います。

スポンサーリンク
ブログの応援よろしくお願いいたします!!
ブログ運営者 兼 筆者
ふらんぶ@パラレルワーカー

More

本業は「サービスデザイナー」で、副業は「Webデザイナー」として、パラレルキャリアを実践し、自分の生き方を追求中

職業訓練校卒(Webデザイン) ▶東証プライム上場のWeb系IT企業勤務▶私生活に影響の出ないスモール副業活動

本ブログは、未経験でのWeb系職種志望者に向けて、勉強方法(おもに職業訓練校)や就職に役立つ情報を自分の体験談をふまえてわかりやすく発信
最近は、副業の幅を広げるためにWebデザインとWebマーケティングの勉強を継続しており、その学習記録をメインに執筆中

「居そうで居ないWeb系職業訓練校の身近な先輩サポーター」として、職業訓練校(Webデザイン)での体験や実務未経験でのWeb系企業への就職の実績をもとに、Web系職種志望者向けのサービスを提供
有料記事公開中

Follow Me
スポンサーリンク
Follow Me
スポンサーリンク


Dayantler

スポンサーリンク
タイトルとURLをコピーしました