この記事は、「Webサイトのユーザー体験（UX）が壊れるポイントに着目しよう」の子記事として、具体的な失敗事例をカテゴリーごとにまとめました。
ナビゲーションのミスやフォームの使いにくさなど、日常的に遭遇する問題を挙げています。
事例ごとに現象や問題点、回避策を示します。「自社のWebサイトのUXは問題ないだろうか？」と気になったときの参考になれば幸いです。
目次
ナビゲーションと導線
ナビゲーションが複雑だったり不明瞭だったりすると、ユーザーはすぐに目的を見失い、離脱します。ナビゲーションのミスは離脱率を増加させる大きな要因です。
メニュー項目が多すぎる
メニューの数が10項目以上あり、ユーザーが目的のページを選びにくい。
→ 5〜7項目以内に抑え、さらに優先順位を付けると分かりやすい。
ナビゲーションが隠されている
PC画面でもすべてをハンバーガーメニューに隠しており、主要なリンクがすぐに見えない。
→ 主要なリンクは常に視認可能な位置に配置する。
ネストされたドロップダウンが深い
ドロップダウンメニューの中にさらにドロップダウンが複数あり、迷子になりやすい。
→ メニューは2階層以内に抑える。
ラベルが不明瞭
「お問い合わせ」ではなく「Inquiry」など、知られていない英語や抽象的な表現で混乱させる。
→ ユーザーの日常的な言葉（できるだけ日本語）でシンプルに表現する。
サイト内検索がない
サイト内検索がない。入力しても関連結果が出ない。
→ オートコンプリートや絞り込み機能を設ける。
パンくずリストがない・使えない
深い階層のページで現在位置がわからない。
→ 常にパンくずリストを表示する。
ページを見た後の行動が示されない
記事やサービスの説明の後に、ユーザーが行うべきアクションが示されていない。
→ ページの下部や文脈に沿った位置にCTA（Call To Action）を設け、次のページを適切に案内する。
戻る操作で状態が失われる
ページを移動して再び戻ると、元のページで入力していた内容やスクロールの位置が失われている。
→ 元のページの状態を保持する仕組みを実装する。
リンクの視認性不足
テキストリンクが下線なし・色変化なしで、クリック可能かわからない。
→ 色や下線で明確に区別する。
外部リンクと内部リンクの区別がない
外部サイトに遷移したことに気づかずに混乱する。
→ 別タブでの表示や外部リンクアイコンの明示により区別可能にする。遷移前に外部リンクである旨のメッセージを表示する。
モバイルでのスワイプ動作が干渉する
横スワイプで意図せずメニューが開いてしまう。
→ ジェスチャー操作を徹底的にテストする。
入力フォームとインタラクション
フォームは最もストレスを感じやすいコンタクトポイントです。必須項目の多さやエラー処理の悪さが、ユーザーからの印象を悪くします。
必須項目が多すぎる
資料請求で会社名・部署・役職・生年月日・性別・既婚／未婚まで必須になっているなど、入力しなければならない項目が多すぎる。
→ 必須項目はいま必要なものに絞り、それ以外は任意項目とする。
入力エラーの理由が不明瞭
「入力が不正です」だけのエラー表示で、どの入力に問題があるのか分からないなど。
→ 具体的なメッセージを表示する。（例：「メールアドレスの形式が正しくありません」）
オートコンプリート（自動補完）機能が無効
フォームにautocomplete属性が設定されておらず、ブラウザの自動入力機能が使えない。
→ autocomplete属性を適切に設定する。
長いフォームに項目が詰め込まれている
1ページに20項目以上のフォームがあるなど、スクロール量が多い。
→ フォームをステップに分け、画面遷移しながら入力を進められるようにする。
CAPTCHAの過剰に使用されている
簡単なフォームでも複雑なCAPTCHAを用いることが、スムーズな入力を妨げてしまう。
→ reCAPTCHA v3など、ユーザーに負担の少ない認証方式に変更する。
プレースホルダーの使い方に問題がある
入力時に入力例が消えてしまい、ヒントがなくなる。
→ ラベルをフォームの傍らに常時表示する。
エラー発生時に入力内容が消える
送信エラーが発生した際に、すべての入力内容がリセットされる。
→ 送信が完了するまで入力内容を保持するように設計する。
入力途中でセッション切れになる
長時間の入力中にセッションがタイムアウトになり、再入力を強いられる。
→ 十分なセッション時間の確保やデータの自動保存を行う。
キーボード操作が無効
Tabによる移動やEnterによる送信ができず、操作性が悪い。
→ キーボード操作を考慮した実装を行う。
パフォーマンスとロード時間
遅いサイトは即離脱の原因です。3秒以上かかると半数近くのユーザーが去るといわれます。
画像の最適化不足
高解像度画像でロードが遅い。
→ WebP形式の画像を使用し、画面スクロールに応じて画像を表示する「lazy loading」を活用する。
ロード中であることが分からない
ロード開始後に画面が止まったまま変化しない。エラーかどうかも判断できない。
→ プログレスバーを表示して進捗が分かるようにする。画像表示の前に仮の画面を表示する。
アニメーションの多用
ページ遷移ごとに派手なエフェクトで待たされる。
→ 軽量なアニメーションのみに抑える。
動画の自動再生（サウンドあり）
動画がサウンドを伴って勝手に始まることでストレスを感じる。処理がデバイスの負荷を大きくする。
→ 手動再生やミュート状態で始め、ユーザーの意思で再生を開始する仕様にする。
モバイル対応とレスポンシブデザイン
モバイルからのトラフィックが主流の現在では、デスクトップを優先する設計は致命的です。モバイルを優先しましょう。
PC版のページが基本になっている
PC版のページをそのまま表示することで可読性の悪い画面になっている。
→ スマートフォン画面から設計を開始し、レスポンシブデザインによってタブレットやPCの画面に対応させる。
フォントサイズが小さく読みにくい
本文テキストが小さく、ピンチアウトしないと読めない。ピンチアウトができない。
→ 最低16pxのフォントサイズを確保する。
ボタンが小さくタップしにくい
ボタンが小さいことや、ボタンの間隔が狭いことなどによる誤タップが発生する。
→ 最低でも48×48pxのタッチエリアと16pxの間隔を確保する。
横スクロールが強制される
テーブルが横に伸びてスワイプが必須となっている。
→ レスポンシブテーブルを採用する。
固定のバナーやCTAが邪魔になる
スクロール時にバナーやCTAが固定されており、コンテンツやボタンを隠している。
→ スクロール操作での問題を排除する。
ポップアップのモバイルに対応していない
ポップアップが画面全体を覆ってしまい、閉じにくい。
→ モバイルに対応したデザインにする。
入力欄でキーボードが表示されない
電話番号の入力時に数字キーボードが表示されない。
→ input type を適切に設定する。
ダークパターン
ユーザーを騙す設計は信頼を大きく損ない、ブランドイメージを毀損します。
同意の取り方が分かりにくい
「同意する」がデフォルトでONになっている。拒否の選択肢が目立たない。
→ 同意しない場合の選択を明示し、同列で配置する。
解約導線が複雑
解約ボタンがマイページの深い階層に隠されている。ヘルプページのテキストリンクのみで案内される。
→ マイページに分かりやすいボタンを設け、確認画面を1回表示するだけで完了できるようにする。
コンテンツの理解と情報設計
記事の説明不足や構成ミスによって内容が正しく理解されないことはUXにとってマイナスです。
更新日・運営者情報が見つけられない
書き手や公開日・更新日が明記されず、記事の信頼性を欠いている。
→ 日付や運営者情報を明示する。
見出しと内容が一致しない
見出しを見て期待した内容・情報が本文に含まれていない。
→ 見出しの意図に即した本文を記載する。本文の内容に合った見出しを記述する。
専門用語の説明がない
業界用語、専門用語など一般的でない言葉が使用されているが、補足説明がされていない。
→ 最初に使用した時点で補足説明を簡潔に行う。
重要情報が画像内のみに表示されている
料金や条件、注意点などが画像内テキストでのみ記載されている。
→ テキストデータも記載する。
まとめ
上記以外にもユーザー体験が壊れるポイントがあるかもしれません。
全体を通じて、ユーザーがどのようなことに不快感を持つのかをイメージできれば、ナビゲーションやコンテンツの個別の問題に柔軟に対処できるでしょう。
関連記事
Webサイトのユーザー体験（UX）が壊れるポイントに着目しよう