[ 要約 ]UI/UX

[ INP(Interaction to Next Paint) ]について（2023年5月10日：GoogleのChromeチーム）
2024年3月より「FID」の代わりに新たに「INP」を採用し、「Core Web Vitals」の指標の一つとすることを発表。

2023.06.19

Core Web Vitalsとは？
Googleが設定しているサイトの健全性を示す重要指標。
2020年初め
GoogleのChromeチームが導入
2021年6月16日以降
段階的に検索結果のランキング決定要因としてアップデート2021年9月3日
アップデート完了

引用：WEB集客ラボ by GMO
https://gmotech.jp/semlabo/seo/blog/core-web-vitals/

Core Web Vitalsの詳細
LCP（Largest Contentful Paint ）：読み込み時間
・読み込みの早いページを優先的に検索結果に表示させる
・2.5秒以内がGOOD（良好）、4.0秒以上かかってしまうとPOOR（不十分）と評価

FID（First Input Delay）：インタラクティブ性・サイト内で最初にアクションを起こした時の反応の速さ
・リンクをクリックしたり、フォームにテキスト入力した時に、サクサクと反応するかどうかを表す指標

CLS（Cumulative Layout Shift ）：ページコンテンツの視聴的安全性
・ページの安定性を計測する指標であり、ページ内で起こりうるレイアウトのズレや崩れを数値化した指標
・「ズレが生じた表示領域の比率 × 距離の比率」で計算し、0.1未満がGOOD（良好）、0.25以上だとPOOR（不十分）と評価

INP(Interaction to Next Paint)とは？
ページ滞在中にユーザーが起こした操作に対する反応、インタラクション (interaction) の遅延を計測。
どのくらい速く反応が返ってくるか、ユーザーの操作に対する「視覚的な反応」が発生するまでにかかる時間を示す指標。
遅延を表すので、値が小さければ小さいほど良い。
サクサク反応してくれるサイトは使っていて快適、なにか操作しても無反応の時間が長いサイトはストレス。
インタラクションの遅延はユーザー体験に大きく関わってくる。

FIDとINPの違い
FIDINP

サイト内で最初にユーザーが起こした

ページ滞在中にユーザーが起こした操作に対する反応の速さ

操作に対する視覚的な反応の速さ●最初のページでのインタラクションが対象●滞在するサイト内での●速度のみで計測

すべてのインタラクションが計測対象●速度 ＋ 視覚的反応▼

よりUXに重きを置いた考え方

INPの具体例
どのくらい速く反応が返ってくるか、ユーザーの操作に対する「視覚的な反応」が発生するまでにかかる時間を示す指標

https://www.suzukikenichi.com/images/inp.mp4

INPの具体例：解説

左よりも右のほうが、緑の洋服が速く表示されるからINPが良いということでもありません。
右は、緑のカラーをタップすると、緑の洋服が表示される前の段階で、読み込んでいることを示すインジケータが表示されます。インジケータは、タップとほぼ同時に表示されます。タップしてからの視覚的反応に遅延がほぼありません。したがって、INPが良いと言えるのです。

一方、左は、オレンジの洋服から緑の洋服に切り替わるまでに、タップしてからワンテンポ遅れが入ります。視覚的な変化がありません。タップが認識されなかったのではないかと思い、ユーザーはもう一度タップするかもしれません。
タップという操作を実行してから視覚的な反応が発生するまでが遅いので、INP が悪いと判断されます。

INPの計測
FIDは入力の反応の遅れだけを測るのに対し、INPは次の3つのプロセスを計測。

1.

入力遅延 (input delay)
ユーザーが操作しそれが実行されるまでの時間

2.

処理遅延（processing delay)
コードの実際の処理にかかる時間

3.

Chrome拡張機能「Web Vitals」▶
で計測可能

プレゼンテーション遅延 (presentation delay)
処理の実行が完了し、ブラウザがその結果を表示するまでにかかる時間

いかに速く次のアクションがあることをユーザーに視認させられるかUXの自己評価
INPが導入されるにあたって再度意識すべき、UXについての自己評価基準。
以下の質問に対する答えが「はい」の場合は、優れたページ エクスペリエンスを提供するために正しい方向に進んでいるといえるでしょう。

●

ページの Core Web Vitals は良好な状態か。

●

ページは安全な方法で配信（有害なサイトやスパム経由のリンクなど）されていますか。

●

コンテンツは、モバイル デバイスでも適切に表示されるか。

●

コンテンツに、主要なコンテンツを妨害する、またはコンテンツから注意をそらすほどの大量の広告が掲載されていないか。

●

ページに煩わしいインタースティシャル（アプリのインターフェイス全体に表示されるフルスクリーン広告）が無いか。

●

サイト訪問者がページのメイン コンテンツを容易に見つけて移動できるようになっているか。

●

サイト訪問者が、ページのメイン コンテンツとその他のコンテンツを簡単に区別できるようにページが設計されているか。

基本立ち返り）webコンテンツの見直しポイント
フェードイン・・・スクロールに応じてフェードインさせる処理
ネガティブポイント

改善例●（スクロールしないと）表示されない瞬間がある●

ローディングアニメーションやスピナーを常設●

表示までの設定秒数が遅いとストレスになる場合あり●

見せるタイミング（スクロール位置）を高めに設定

等リンクテキストやバナーのマウスホバー時になにも変化がない
ネガティブポイント

改善例●

リンクテキスト・・・下線処理のみ●色を変えたり、動きをつける●

バナー・・・デザインで補完し動き自体がない状態●

ただバナーを薄くするのではなく拡大縮小させる

等

基本立ち返り）webコンテンツの見直しポイント
ページ遷移に係るボタン類のアクション
ネガティブポイント●

改善例

ボタンを押してページの切り替わりに時間が掛かると再●クリック／タップ時の処理を追加

度クリック／タップされる場合あり●

遷移後のページには特にローディングを入れる●

ページ遷移前後でフェードイン・アウトさせる 等

スマホのハンバーガーメニュー
ネガティブポイント

改善例●

タップしてから表示まで、ただ遅い●表示スピードを上げる●

ボタン自体の変化がわかりづらい●

処理速度をあげるためにJSなどシンプルな処理にする

参考・引用元記事
海外SEO情報ブログ
Googleが試験導入した新UX指標のINPとは？ FIDと置き換わりコアウェブバイタルに組み込まれる可能性も2022年5月23日｜https://www.suzukikenichi.com/blog/what-is-inp/

WEB集客ラボ by GMO
コアウェブバイタル（Core Web Vitals）とは？LCP・FID・CLSの意味＆ランキング改善方法
2022年12月9日（更新）｜https://gmotech.jp/semlabo/seo/blog/core-web-vitals/

Google検索セントラル
INP を Core Web Vitals に導入
2023年5月10日｜https://developers.google.com/search/blog/2023/05/introducing-inp?hl=ja※商用・営利目的の資料ではなく、社内発表用の資料です。
※個人的な見解や解釈を含んでいる場合もございますがご容赦ください。