UIUXの定量評価には今まで大きな課題がありました。
デザインの変更がどのように経営に貢献できるのか。
UXが向上したと言っても売上には何も影響がでず、経営層からはお金をかけただけで何も効果が無かったように感じでしまうこともしばしば。
そんな課題に対し、1つの指標ができました。
それが「Web Vital」
必ずしてもこれが向上したからといって売上に影響が出るわけでは無いですが
ページ速度が1秒変わっただけでCVRは変わると言われているので、指標として間違いは無いと思います。
そんなWeb Vitalの中でも、重要な指標「Core Web Vital」が2020年にGoogleが掲げました。それについて記します。
UXのためにGoogleが思う重要な指標と考えられております。
元々のGoogle評価指標4つ
Core Web Vital以前に、Googleは4つの評価指標が重要としていました。
それは以下の指標になります。
モバイルフレンドリー
モバイルに最適化されているかどうか
セーフブラウジング
悪意のあるコンテンツが含まれておらず安全に閲覧できる。
セキュリティの問題が無い。
HTTPS
httpsに対応している。
インタースティシャル
ページ内のコンテンツ（インタースティシャル等）が、ユーザーアクションを邪魔していないこと。
UX指標であるCore Web vital
以前の評価指標に加えて、GoogleはよりUXに重視した指標であるCore Web Vitalを作りました。
今後はこれを検索ランキングに指標にもすると話しています。
読み込み時間（LCP: Largest Contentful Paint ）
ページの表示速度。
最も大事な主要コンテンツが読み込まれたタイミングを示します。
インタラクティブ性（FID: First Input Delay）
ユーザーアクションから反応までの時間。
ページ・コンテンツの視覚的安定性（CLS: Cumulative Layout Shift）
視覚的な安定性を測定する。
レイアウトのズレや崩れを定量化します。
地味に便利ですねこれ。
計測はどうすればいいか
Chromeのエクステンション
https://github.com/GoogleChrome/web-vitals-extension
Core Web Vitalを測知する。
Chromeユーザーエクスペリエンスレポート、Page Speed Insights、Search Consoleなどと一致する。
まだまだざっくり指標すぎで、ほとんどのサイトで良い結果が出ているので、今後に期待です。
npm
https://github.com/GoogleChrome/web-vitals/
エクステンションでは自分の環境でしか評価できません。
そのため、これをインストールして計測することができます。
全ユーザーで測定すると、ユーザーのUX定量評価が可能になるのでこれもやってみる価値あり
Google Search Console（通称サチコ）
こちらでも計測することができます。
とはいえ、確認してみると正確な数値まで出ておらず、まだ使いづらい印象です。
独自にnpm packageをインストールして計測していく方がいいかもしれません。
ChromeにあるLighthouseについて。Web Vitalとの違いは？
ChromeにはLighthouseという機能があります。以前はAuditに入っていた機能です。
これはWeb Vitalとどのような機能の違いがあるかというと
仮想環境でロードするので、FIDを測定することができない違いがあります。
代わりに、TBT（合計ブロッキング時間 https://web.dev/tbt/）を利用する。
とはいえ、誰でも利用できる指標になるので便利です。
Lighthouseの利用方法
Chrome Devツール -> Lighthouse
npmも用意されている（npm install lighthouse）
Performance: パフォーマンス
操作が可能になるまでの時間を計測。最初のDOMコンテンツがレンダリングされて操作できるまでの時間を計測している。
Progressive Web App: PWA
PWAの仕様を満たしているかどうかを確認。
https://developers.google.com/web/progressive-web-apps/checklist#baseline
Accessibility: アクセシビリティ
アクセシビリティに考慮できている実装になっているかをチェック
Best Practices
HTTPS利用とかそこらへんのチェック
SEO
SEO観点でのチェック
TBTとは何？
FCPとTTI（Time to Interactive https://web.dev/tti/）の間の合計時間を測定。
その他UX計測ツール
PageSpeed Insights ページスピードインサイト
https://developers.google.com/speed/pagespeed/insights/
URLを入力すると、Lighthouseの分析結果を出力してくれる。
ただし、判定基準が違うようで、こちらの方がエクステンションよりも低い結果が出やすい。
Test My Site モバイルサイトの速度改善
https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/
モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly
どの程度モバイルに最適化された対応がされているかを確認する。
リッチリザルトテスト 構造化データチェック
https://search.google.com/test/rich-results
使ってみたけど、いまいちわかっていません。エラーになるサイトが多かったです。
対象となる構造化のサイトが少ない模様。
まとめ
これらのUX指標を定量化し、過去の推移データとかも管理できるとデザイナーとしてかなり良い指標ができていくかもしれません。
現在では2021年に向けて、機能拡張を検討しており、新しい指標、例えばスムーズさを定量評価する指標などを予定しているとの事。
今後も指標が増えていくため、デザイナーが経営層へ提供できる指標。かなり重要になる事間違いなしです。