エラー状態と復帰導線を設計する

エラーは例外ではなくサービス体験の一部です。何が起きたか、ユーザーが直せるのか、時間を置くべきか、相談すべきかを短く示します。

ui.design: scan-blockerui.design: llm-growth

まず確認する症状

診断に失敗した理由が分からず、再試行すべきか判断できない。
支払いキャンセルやWebhook処理待ちの状態から戻れない。
PCでは整って見えるが、スマホ、ズーム、長い文言、低速表示で判断順が崩れる。
カードや装飾の量が多く、見出し、本文、CTA、入力欄の役割差が弱い。

なぜ問題か

失敗時に復帰できると、初回利用の信頼を失いにくくなります。
自動運用では、人間対応が必要なケースを早く切り分けられます。
UXの問題は単一コンポーネントではなく、読む順番、操作順、待ち時間、復帰導線のつながりで発生します。
AIに画面修正を依頼する場合も、見た目の好みではなく、ユーザーが判断・操作できる条件へ落とす必要があります。

診断で見る指標

原因表示

再試行導線

問い合わせ導線

状態別の文言

スマホ390px/320pxでの読了と操作

視覚順とDOM順の一致

主CTAまでのスクロール量

エラーや待ち時間からの復帰率

状態別メッセージ

再試行条件

代替導線

ユーザー責任/サービス責任の切り分け

修正方法

最小修正

原因と次アクションを分ける

例: bot判定の可能性、時間を置いて再試行、別URLを試す、相談する。

推奨修正

状態別に戻り先を用意する

processing、cancel、failed、rate limitedでCTAを変えます。

さらに改善

自動診断不能ケースを商品導線へつなぐ

ログイン後画面やリッチサイトは、許可済みステージングや手動Review Packへ案内します。

受け入れ条件

01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
04PC、スマホ、320px幅、長い文言のいずれでも、主要情報と操作が重なりや欠けなく確認できる。
05ユーザーが読む順番とTab移動や画面構造の順番が大きく矛盾しない。
06失敗、処理中、キャンセル、期限切れ、上限超過の各状態で、原因と次アクションが分かる。
07復帰できない状態では、相談、再送、別URL、時間を置くなどの代替行動が示されている。

コーディングエージェント向け修正指示

目的: エラー画面と通知文に、原因、ユーザーができる次アクション、必要なら相談導線を表示してください。技術的な詳細だけを出さず、復帰できる行動に変換してください。追加確認: エラー文は技術ログをそのまま出さず、『何が起きたか』『ユーザーができること』『運営側が見るべきこと』に分けてください。

参考資料

よくある失敗

赤いエラー文だけを表示し、次に何をすればよいか書かない。
見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
FigmaやPC表示だけで判断し、実際のスマホ幅、キーボード表示、読み込み待ちを見ない。
密度を下げるために必要な説明まで削り、判断材料を不足させる。