【実務で役立つUIUX改善例】現役デザイナーがUIUX改善のプロセス・コツを具体的に解説

競合分析を行うことで、自社のサービス、目標、さらには市場についてより良く知ることができます。何が成功して何が成功していないか、現在の流行りやユーザーが求めている物をより理解することにより、アイデアをさらにブラッシュアップできます。

UX改善で重要なことは、ターゲットに設定するユーザーを絞って明確にすることです。ユーザーを明確にすることで、ユーザーの顕在的なニーズだけでなく、潜在的なニーズも踏まえた改善が可能になります。さらに、ユーザー自身が気付いていないニーズに踏み込むことで「特定の人に刺さる価値」の提供が実現できるといえるでしょう。

競合他社との「差別化はどんな所」か、「ユーザーに求められていることはどんなことか」などを深堀して調査・分析することが重要です。

現状把握・課題整理に多くの時間をかけるほど、解決すべき問題が詳しくわかり、より良い解決策が見つかります。ユーザーの立場でサービスを使ってみて、分かりづらい・使いづらい部分を洗い出し、現状を把握することが必要になります。

洗い出されたすべての課題を一挙に解決できることがもちろん理想ですが、予算やリソース、プロジェクト期間など現実的な条件も加味し、解決すべき問題点の優先度を決めて取り組むことが重要です。

課題整理したものを、簡単なデザインやワイヤーフレームに落とし込み改善案の検討をします。情報設計が上手くできていないとその魅力がユーザーに届かず、離脱の原因となってしまいます。そのため、UXデザイナーはユーザーが簡単に操作できるように適切なレイアウト・情報やナビゲーションを組み合わせ情報設計することが重要になります。

改善案を見える化することで、クライアント・制作メンバーの認識齟齬を防ぐこともできます。

ユーザー視点で下記のポイントをチェックしましょう。

• 操作がシンプルであること

  操作の手順そのものが簡単であることはUIデザインで大切な要素です。UIの情報量や見た目が分かりやすくても、操作手順が多かったり複雑だったりすると使いにくくなってしまいます。

• ユーザーに見やすく構成されていること

  ボタンや操作画面などが見やすく構成されていることが重要です。情報量が適切であっても、レイアウトや文字サイズなどに問題があると、UIが見にくくなってしまいます。

実際にあるニュースアプリのUIUX改善を例に解説していきます。

現状のアプリは、機能が分散されていたり、読みたい記事までの導線に不便を感じます。 ニュースアプリは記事数が多いため、通勤時間や隙間時間に求めている記事にスムーズにたどりつけるかを改善する必要があります。 現状のアプリ全体の構造やページ設計を把握し、情報の設計を的確に改善することがポイントです。

問題点・改善点は以下になります。

• 問題点

  • 有料会員の機能が分散されている
  • 日経新聞ビューアー アプリを追加する
  • 読みたい記事ににスムーズにたどりつかない

• 改善点

  • フッターのMyニュースをトップカテゴリータブへ移動
  • Myニュース内のフォロー、保存記事をトップカテゴリータブへ移動
  • トップカテゴリータブに音声/動画、ダウンロード追加
  • フッターに日経新聞ビューアーアプリ追加

フッターのMyニュースをトップカテゴリータブへ移動、Myニュース内の保存記事をトップカテゴリータブへ移動することで読みたい記事を探すストレスを軽減します。別アプリとしてある日経新聞ビューアーアプリをフッターに設置することで、2つのアプリを開き行き来することなく利用できます。

詳しく知りたい方は「 UX分析改善例「日経電子版アプリ編」」をお読みください。

実際にある旅行予約サイトのUIUX改善を例に解説していきます。

現状のサイトは、情報量が多く複雑で視認性が高くありません。旅行の計画は考えることが多くなり、複雑になりがちです。ユーザー目線で情報設計をすることでさらにUXを改善できます。ユーザーが簡単に利用できるように、視線誘導を意識し、ユーザーに見せたい情報の順序を意図的にコントロールし情報を整理していきます。

問題点・改善点は以下になります。

• 問題点

  • 情報設計の見直し
  • 左にある絞り込みフィルターが使いづらい
  • 地図で見るが重複している
  • 無駄な余白が存在する

• 改善点

  • 左にある検索サイドバーを削除しヘッダーに設置
  • 中カテゴリーにアイコンつけ視認性を向上
  • コロナ関係のお知らせは一度確認した後は不要
  • ヘッダーの余白を埋める

左にある検索サイドバーを削除し2カラムを1カラムにすることで、情報が整理され重要度の高い画像の視認性が向上しホテルを選びやすくなります。ヘッダーの余白にサイドバーにあった検索を設置することで、優先度の高い情報をユーザーに伝えられます。

詳しく知りたい方は「 Booking.comの分析編」 「 Booking.comの情報設計編」 「 Booking.comのワイヤーフレーム編」 「 Booking.comのデザイン編」をお読みください。

実際にある自動車保険サイトのUIUX改善を例に解説していきます。

自動車保険見積りページは選択項目数が多く、不明点があると途中離脱に繋がってしまいます。全ての選択項目を完了するまでに複数のページがあるので、「選択忘れはないか」「現在なんの項目を選択中なのか」「シンプルな構造になっているか」などをユーザーに伝えられるかがポイントです。選択項目数によってはページが縦に長くなってしまうので、離脱を防ぐための情報設計、レイアウト配置、導線などを改善していきます。

問題点・改善点は以下になります。

• 問題点

  • 情報設計の見直し
  • 選択項目が多く縦に長くなるのがみずらくなる
  • 項目を選択できるのかわかりずらい

• 改善点

  • お見積りページのレイアウト変更（サイドバー追加）
  • 見出しの背景色変更
  • 選択項目のボタンわかりやすく
  • フォントサイズ大きく

サイドバーを追加することで、選択項目の完了・未完了をユーザーが簡単に状況を把握することができ、不明点も解決することができます。見出しの背景色、選択ボタン、フォントサイズなどのUIデザインを改善することで、視認性が高まり40~60代の方のストレスを軽減できます。

詳しく知りたい方は「 アクサダイレクトの分析編」 「 アクサダイレクトの情報設計編」 「 アクサダイレクトのワイヤーフレーム編」 「 アクサダイレクトのデザイン編」をお読みください。