UX
表示速度と待ち時間の体感品質を上げる
速度は実測値だけでなく、待っている理由が分かるかでも評価されます。重い診断処理や生成待ちがあるサービスでは、進捗と期待値の提示が重要です。
ui.design: technicalui.design: llm-visual
まず確認する症状
- 診断中に何が進んでいるか分からない。
- LCP、INP、CLSの悪化で、ページ表示や操作の体感が悪い。
なぜ問題か
- Core Web Vitalsは実ユーザー体験の主要指標で、検索のページ体験にも関係します。
- 長い待ち時間でも進捗と成果物の期待値が見えると離脱しにくくなります。
診断で見る指標
LCP
INP
CLS
診断待ち時間
進捗表示
修正方法
最小修正
待ち時間の説明を出す
診断中の処理内容、平均所要時間、結果で得られるものを表示します。
推奨修正
重い要素を遅延させる
ファーストビューに不要な画像、スクリプト、装飾を遅延読み込みします。
さらに改善
Web Vitalsを継続監視する
LCP、INP、CLSの悪化をMonitorやSearch Consoleで追います。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: 初期表示と診断待ち時間の体感を改善してください。LCP/INP/CLSに影響する重い処理を見直し、長い処理には進捗と期待結果を表示してください。
参考資料
よくある失敗
- スピナーだけ表示し、待つ理由や完了後の価値を説明しない。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。