UX
表示速度と待ち時間の体感品質を上げる
速度は実測値だけでなく、待っている理由が分かるかでも評価されます。重い診断処理や生成待ちがあるサービスでは、進捗と期待値の提示が重要です。
ui.design: technicalui.design: llm-visual
まず確認する症状
- 診断中に何が進んでいるか分からない。
- LCP、INP、CLSの悪化で、ページ表示や操作の体感が悪い。
- PCでは整って見えるが、スマホ、ズーム、長い文言、低速表示で判断順が崩れる。
- カードや装飾の量が多く、見出し、本文、CTA、入力欄の役割差が弱い。
なぜ問題か
- Core Web Vitalsは実ユーザー体験の主要指標で、検索のページ体験にも関係します。
- 長い待ち時間でも進捗と成果物の期待値が見えると離脱しにくくなります。
- UXの問題は単一コンポーネントではなく、読む順番、操作順、待ち時間、復帰導線のつながりで発生します。
- AIに画面修正を依頼する場合も、見た目の好みではなく、ユーザーが判断・操作できる条件へ落とす必要があります。
診断で見る指標
LCP
INP
CLS
診断待ち時間
進捗表示
スマホ390px/320pxでの読了と操作
視覚順とDOM順の一致
主CTAまでのスクロール量
エラーや待ち時間からの復帰率
LCP対象要素
INPに影響する操作
CLS発生箇所
処理中の期待値表示
修正方法
最小修正
待ち時間の説明を出す
診断中の処理内容、平均所要時間、結果で得られるものを表示します。
推奨修正
重い要素を遅延させる
ファーストビューに不要な画像、スクリプト、装飾を遅延読み込みします。
さらに改善
Web Vitalsを継続監視する
LCP、INP、CLSの悪化をMonitorやSearch Consoleで追います。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04PC、スマホ、320px幅、長い文言のいずれでも、主要情報と操作が重なりや欠けなく確認できる。
- 05ユーザーが読む順番とTab移動や画面構造の順番が大きく矛盾しない。
- 06重い画像、外部タグ、フォント、初期JSのうち、ファーストビューに必要なものと遅延できるものが分かれている。
- 07診断や生成の待ち時間では、処理内容、見込み時間、完了後に得られる成果物が表示される。
コーディングエージェント向け修正指示
目的: 初期表示と診断待ち時間の体感を改善してください。LCP/INP/CLSに影響する重い処理を見直し、長い処理には進捗と期待結果を表示してください。 追加確認: 数値改善と体感改善を分け、Core Web Vitals、初期表示、待ち時間説明、進捗UIをそれぞれ確認してください。
参考資料
よくある失敗
- スピナーだけ表示し、待つ理由や完了後の価値を説明しない。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- FigmaやPC表示だけで判断し、実際のスマホ幅、キーボード表示、読み込み待ちを見ない。
- 密度を下げるために必要な説明まで削り、判断材料を不足させる。