なぜ今「心地よさ」なのか
近年、ブラウザ上で動くアプリケーション（SaaSやリッチなEC）が増えました。その結果、Webは「読むもの」から「使うもの」へと変化しています。
かつてのWebのUX指標（LCP）は、ページが開くまでの「待機時間」を削る戦いでした。しかし、ページが開いた後の問題もあります。ボタンを押しても反応が鈍ければ、ユーザーは「壊れている」と感じて離脱します。
この流れを受け、GoogleはWebサイトのUXを数値化した主要指標として、2024年にINPを追加しました。
INPとは
INP（Interaction to Next Paint）とは、操作への反応速度を測る指標です。具体的には「ユーザーがクリックやタップをしてから、ブラウザが画面を更新するまでの速さ」を計測します。
ユーザーがボタンを押してから画面が変化するまでには、内部で3つの待ち時間が発生します。INPはこの合計時間を計測します。
入力遅延 (Input Delay)
ユーザーが操作したのに、ブラウザのメインスレッドが他の処理（重いJSの実行など）で忙しく、イベント処理を開始できない待機時間。
処理時間 (Processing Time)
JavaScriptのイベントハンドラ（クリックイベントなど）が実際に実行されている時間。
表示遅延 (Presentation Delay)
JavaScriptの処理後、ブラウザが新しい画面を計算して実際にピクセルを描画し終えるまでの時間。
これまで重要視されていたLCPは「最初の画面が出るまでの読み込みの速さ」です。FIDは「ページ読み込み直後の1回の反応」を対象とします。一方、INPはすべての操作を対象とします。そのため、INPが「使い心地」に最も直結していることがわかります。
なぜINPがUXデザインの最前線なのか
リッチな体験が操作性を奪うエンジニアのジレンマ
ユーザー体験を向上させるために、リッチなアニメーションやリアルタイムのバリデーション、高度なパーソナライズ機能を次々と追加します。しかし皮肉にも、積み上げられたJavaScriptの山が、ユーザーの操作性を奪っていきます。
エンジニアが書いた巨大なロジックがブラウザのメインスレッドを占有します。その間、ブラウザはユーザーのクリックやタップを無視せざるを得なくなります。
人間が「即座」と認識する「0.2秒の壁」
心理学的な研究によれば、人間が「即座に反応があった」と感じる限界値は約0.1〜0.2秒と言われています。
- 0.1秒以内：「自分の体の一部のように動いている」と感じる
- 0.2秒を超えると：「外部のシステムを操作している」という自覚が芽生える
- 0.5秒を超えると：脳が「待たされている」というストレスを感じ始める
そのため、GoogleのCore Web VitalsではINPの合格ラインが「200ミリ秒未満」と定められています。Webが「文書」ではなく「体験」を届けるプラットフォームになった今、この0.2秒の壁を突破することはマナーと言えるでしょう。
ボタンを押した後の「無反応な時間」は、ただの空白ではありません。ユーザーを不安にさせ、離脱へと追い込む「ネガティブな体験」そのものです。INPを改善し、0.2秒以内に視覚的フィードバックを返すことが、UXひいてはコンバージョンの担保となります。
「心地よさ」の正体を分解する
「心地よい」と感じてもらうには、単に実行速度を上げるだけが解決策ではありません。以下の工夫で「心理的な納得感」を生み出すことが重要です。
認知のギャップを埋める
サーバーの処理を待つ「物理的な時間」を、デザインで「心理的な納得感」に変える手法。
即時応答（0.1秒以内）
押した瞬間の色変化（Activeステート）押した瞬間の色変化（Activeステート）で、操作を受け付けたことを伝える。
進行状況（0.2秒〜1秒）
ローディング表示やスケルトンスクリーンで、処理中であることを示す。
完了通知（数秒〜）
ースト通知やアニメーションで、処理が完了したことを知らせる。
サーバーの処理を待つ「物理的な時間」を、デザインで「心理的な納得感」に変える——これが「認知のギャップを埋める」手法です。
INP実現に必要なスキル
フロントエンドエンジニア
「非同期」をデザインする力
Optimistic UI（楽観的UI） の実装。サーバーへリクエストを送る前に成功を信じて画面を更新することで、ユーザーのアクションに対して結果をすぐに返した状態となり、ストレスを軽減する。
JavaScriptの断捨離とスケジューリング
単にライブラリを導入するだけでなく、scheduler.yield() などを用いて処理を細かく分割し、ブラウザに「描画の隙間」を与える技術。
デザイナー
フィードバックの設計（マイクロインタラクション）
処理に時間がかかる場合でも、0.2秒以内に視覚的応答を返すデザイン設計能力。エンジニアと「どこで処理を逃がすか」を対話する能力。
エンジニア・デザイナー共通
実機での体感計測
ハイスペックな開発機だけで確認していては不十分。低スペックなモバイル端末で操作ストレスを検知する感性と計測スキルが必要。
まとめ：技術の先にある「ホスピタリティ」
INPという新しい指標が問うものは、単なるパフォーマンスの改善要求ではありません。画面の向こう側にいるユーザーの「時間」と「感情」に、どれだけ誠実であれるかという問いです。
「動く」のは当たり前です。「速い」のも当たり前です。その先にある「心地よい応答の美学」を追求できるスキルこそ、今後のエンジニアに最も求められるものかもしれません。
「フロントエンドエンジニアとしてどのようなスキルを身につけるべきか」迷ったら、まずbluenaに話してみてください。
一度カジュアル面談をしませんか？
株式会社bluenaは「高還元」と「伴走支援」を両立したSES企業です。単価の81〜86%を還元する報酬体系と、専任サポーターによる隔週1on1で、エンジニアが納得できるキャリアを実現します。
まとまっていなくてもOK——まずは現在地を聞かせてください。
カジュアル面談ですので、お気軽にお聞かせください。
