「ウェブサイトの離脱率が高い」「業務システムが複雑で時間がかかる」「使いにくさに関する問い合わせが多い」。こうしたUIの課題を解決するには、継続的な改善が不可欠です。
なぜなら、ユーザーが求める「当たり前品質」のレベルは年々高まっており、改善されないUIは「使いにくい」と認識され、すぐにユーザーの離脱を招いてしまうからです。
本記事では、2025年5月27日に開催したNCDCのオンラインセミナー『事例で学ぶ！今日から使えるWebサービスUI改善ポイント』の内容を一部アップデートして、WebサービスのUI改善に役立つ5つのポイントを、事例を交えながら解説します。
目次
UI改善の5つのポイント
本セミナーで紹介された5つのUI改善ポイントは以下の通りです
- レイアウト
情報の「見え方」を最適化します。
要素の配置、余白、大きさなどを調整します。 - 階層
ユーザーの「道のり」を明確にします。
ステッパー（進捗状況を示す表示）の活用や、多階層を避けることが重要です。 - コントラスト
情報の「メリハリ」をつけて理解を促進します。
色、サイズ、シェイプ、フォントなどを効果的に使い分けます。 - ユーザー思考、習熟度
利用者の「気持ち」に寄り添います。
直感的な操作フロー、入力補助、記憶負荷の軽減などを考慮します。 - ルール
一貫した「品質」を担保します。
コンポーネント、プラットフォーム、ガイドラインなどのルールを定めます。
事例から学ぶUI改善
ここからは、具体的な事例をもとに、5つの改善ポイントに沿って解説します。
本コラムでご紹介する事例は、UI改善の可能性を探るためのものです。
UIは時代や制約で変化するため、あくまで 「一画面」から見た改善案 としてご覧ください。
特定のサービスやUIを否定するものではありません。
事例1: 不自然な操作フロー
該当ポイント：ユーザー思考、習熟度
地方税の申告・申請・納税ができるサービス「eLTAX」のメッセージ一覧画面では、閲覧したいメッセージをチェックボックスで選択し、「表示」ボタンをクリックする必要がありました。
これは一般的なメールソフトの操作（クリックで開く）とは異なり、ユーザーにストレスを与えやすい不自然な操作フローと言えます。
ユーザーが「ここを見たい」と思ったものは、直感的にクリックできるようにすることが重要です。
件名をクリックすれば内容が表示されるようにするなど、ユーザーの期待に応える操作感を目指すべきです。
また、チェックボックスは複数選択の用途に限定して使用しましょう。
事例2: 視覚的な非操作性
該当ポイント：コントラスト、レイアウト
ハローワークのトップページでは、「仕事をお探しの方」といった見出しのように見える要素が、実際にはクリックできるボタンとなっています。
また、大阪・関西万博のチケット購入画面では、複数の赤いボタンが並列に配置されていて、「何ができる」のか、あるいは「何が違うのか」が一見してわかりにくくなっています。
このように、見た目と機能が一致しないUIは、ユーザーを混乱させ、情報の視認性を低下させます。
この問題を解決するためには、ボタンの「ボタンらしさ」を明確にすることが重要です。
単なる四角いブロックではなく、角丸にしたり、わずかに影をつけたりするだけでも、「ボタンらしさ」が増します。
また、ボタンの機能を表すシンプルなアイコンを添えることで、文字を読まずとも直感的に操作を促せます。画面遷移があることを明示するために「＞」アイコンをつけるのも有効です 。
事例3: コントラストの不足
該当ポイント：コントラスト
大阪・関西万博チケット購入画面では、ブランドカラーである赤色が多用されており、強調したい情報やアクションを促すボタンとの区別がつきにくいという課題があります。
色による区別を行うためには、色の戦略的活用が重要です。
モノトーンを基調にすることで視覚的なノイズを減らし、赤色は行動を促すボタン・注意喚起・強調したい情報など、限定的な場面でのみ使用することで情報のメリハリをつけ、ユーザーの理解を促進できます。
情報に「メリハリ」をつけ、ユーザーの注意を適切に誘導するために、シェイプ・色・サイズ・フォントのコントラストを効果的に使い分けましょう。
事例4: 非効率な情報配置
該当ポイント：レイアウト、ユーザー思考、習熟度
eLTAXの旧画面(〜2024/12)では、以下の複数の課題がありました。
- アイコンの視認性の低さ：開封済み/未開封のアイコンが見分けにくかった
- 日付入力の不便さ：手動入力の場合の書式が不明確で、直感的に理解しにくい
- 破壊的ボタンの配置の問題：頻繁に使うボタンの隣に、誤操作を誘発する「削除」ボタンが配置されていた
- 操作ボタンの配置の問題：選択肢（チェックボックス）と操作ボタンが離れていた
重要な意味を持つ情報は視覚的に明確に区別できるように設計しましょう。小さいアイコンで状態を示すような場合はとくに注意が必要です
開封済みと未開封で、アイコンの色をはっきりと変える（例：未読は赤、既読はグレー）、またはアイコンの形状を大きく変えることで視覚的に明確に区別できるように設計します。
未開封のメッセージに数字入りの赤丸バッジなどを表示すると、未読件数が一目で分かり視認性が向上します。
ユーザーに入力書式を伝えたい場合は、フィールド内に「YYYY/MM/DD」のような期待する書式の例や説明を薄い文字で表示するプレースホルダーの活用が有効です。
また、日付入力フィールドの横には必ずカレンダーアイコンを配置し、クリックするとカレンダーピッカーが表示されるようにすると非常に便利です。
誤操作により大きな影響を与えてしまうような破壊的なアクションボタンは、他の通常の操作ボタンとは視覚的に区別し、十分に距離を離して配置するのが効果的です。
例えば、GitHubではリポジトリの削除ボタンを、設定画面の通常の操作フローから離れた画面下部に配置し、ユーザーが意図的にアクセスしないとたどり着けない設計にしています。削除ボタンは通常の文字色とは異なる赤色で表示され、押すと最終確認のダイアログが表示されるなど、慎重な操作を促す工夫がされています。
一方でGmailの削除ボタンは、チェックボックスを選択すると他のボタンと一緒に表示され、色も通常の色です 。
これは、メールの削除が日常的な操作であり、毎回警告色を出すと画面の圧迫感やアラート疲れにつながるためと考えられます。
Gmailではその代わりに、削除直後に「元に戻す」ボタンを表示する取り消し機能や、削除されたメールを一時的に「ゴミ箱」に移動し、一定期間復元可能にする隔離されたゴミ箱の設計を採用しています。
真の破壊的アクションであるゴミ箱を空にする操作は、別の場所で行われます。
したがって、破壊的アクションのデザインは、そのアクションの 「不可逆性」と「ユーザーにとっての重大性」 によって使い分けることが重要です。
GitHubのように一度実行すると元に戻せない操作には「赤色」や「厳重な確認」が最適であり、Gmailのように一時的な削除で済む場合は、そこまでの強調は不要となります。
チェックボックスやラジオボタンなど選択を促すUI要素に付随するアクションボタンは、できる限りその選択肢の近く、あるいは選択状態になった時に視覚的に現れるように配置しましょう。
特に小さい画面では、選択後にスクロールが必要になるような配置は避けるべきです。これは「近接の原則」に基づいた配置であり、情報の整理（レイアウト）の観点からも重要です。
事例5: 認識性の低下
該当ポイント：レイアウト、ユーザー思考、習熟度
ねんきんネットのメールアドレス登録画面では、エラーメッセージが該当箇所から離れた上部に表示され、具体性に欠けるため、ユーザーがどこを修正すべきか分かりにくいという問題があります。
エラーメッセージは、エラー箇所に近く、具体的に表示すべきです。
エラー箇所を視覚的に明確にし、ユーザーがどこをどう修正すれば良いのかを具体的に示すことで、スムーズな問題解決を促せます。
事例6: 貧弱な検索・フィルタリング機能
該当ポイント：ユーザー思考、習熟度
大阪・関西万博のパビリオン・イベント検索サイトでは、「今から予約が取れるパビリオン」や「現在の待ち時間が短いパビリオン」など、ユーザーが「その時々で最も重視する情報」に基づいて柔軟に探したいというニーズに応えられない検索機能が課題として挙げられます。
ユーザーは多様な検索ニーズを抱えています。ユーザーに欲しい情報が見つからないというストレスを与えないためには多種多様なフィルタリングオプションを提供し、「ファセット検索」（絞り込み軸）と該当件数を表示することで、ユーザーが求める情報に効率的に辿り着けるようにすることが重要です。
イベントの場所や日付、時間帯など、ユーザーがその場で知りたい情報で絞り込める機能は特に有効です。
事例7: すべて戻ってしまうようなUI
該当ポイント：階層、ユーザー思考、習熟度
某大手配送会社のウェブ集荷サービスでは、集荷依頼中に送付先住所の誤りに気づいても、その場で修正するボタンがありません。
このような設計だと送付先住所を変更するためにユーザーは一度集荷設定をキャンセルし、サービスのトップページに戻り、ユーザー画面からアドレス帳を開いて住所を修正してから、再度集荷依頼の最初からやり直す必要があります。
これは、ユーザーに不必要な手間を強いる、まさに「すべて戻ってしまうようなUI」の典型例と言えます。
この問題を解決するためにオブジェクトの振る舞いを考慮した設計が重要です。
特定の情報（オブジェクト）に接している時に、「それに対する変更」という自然な行動を促すUIを提供しましょう。
例えば、住所が表示されている箇所に直接「編集」ボタンを配置するなど、ユーザーが直感的に操作できる設計にします。
多様なユーザーシナリオを想定することで、ユーザーの離脱を防ぎ、スムーズな操作を可能にします。
UI設計の考え方：タスクベースとオブジェクトベース
上記の「事例7」で見たように、ユーザーが特定の情報（オブジェクト）に接している時に、「それに対する変更」という自然な行動を促すUIを提供することが、使いやすさの鍵となります。
これは、UI設計における「オブジェクトベース」と「タスクベース」という二つの異なる考え方と密接に関わってきます。
UI設計におけるオブジェクトベースとタスクベースのアプローチは、システムの利用頻度やユーザーの習熟度によって、最適な選択が異なります。
タスクベースUI
ユーザーが達成したい「目的（タスク）」を中心にUIを設計します 。
手順が明確で迷いにくいため、利用頻度が低いタスクや手順が複雑なタスクに適しています。（例：新規会員登録フォーム、航空券予約）
オブジェクトベースUI
ユーザーが操作したい「モノ（オブジェクト）」を中心にUIを設計します 。
直感的で情報の一覧性が高いため、日常的に繰り返し使うシステムや、特定の「モノ」を管理するシステムに適しています。（例：ファイル管理システム、メールクライアント）
実際の多くのサービスでは、これら2つのアプローチを組み合わせています。これを「ハイブリッドUI」といいます。
先ほど事例に挙げた集荷サービスを改めて見てみると
ユーザーが「荷物というオブジェクト」を選択・確認した上で、その荷物に対する「集荷依頼というタスク」を段階的に進める設計になっているため、オブジェクトベースとタスクベースの両方の要素を組み合わせたハイブリッドUIであると言えます。
オブジェクトベースUIを基本としつつ、複雑なタスクはタスクベースUIを組み合わせる、というのは非常に有効な方法です。
ハイブリッドUIは、先ほど確認したそれぞれのメリットを組み合わせることで、より柔軟で使いやすいUIが実現できます。
より適切なUI設計のために
UI設計において、オブジェクトベースとタスクベースのどちらのアプローチを選択すべきか迷った時に確認しやすいよう、2つの軸を用いて解説します。
縦軸が使用頻度、横軸がユーザーの習熟度です。各象限には例となる画面名を入れてます。
- 使用頻度が高く、ユーザーの習熟度も高い場合＝オブジェクトベースが最適（右上の象限）
この象限では、ユーザーは効率性を重視します。そのため、ファイル管理システムやメールクライアントのように、ユーザーが「モノ（オブジェクト）」を直接操作し、多くの情報を一覧で効率的に扱えるオブジェクトベースのUIが適しています。 - 使用頻度が低く、ユーザーの習熟度も低い場合＝タスクベースが最適（左下の象限）
この象限では、ユーザーが迷わずに操作を完了できることが最優先されます。オンラインショッピングの購入手続きや新規会員登録フォームのように、ユーザーが達成したい「目的（タスク）」を中心に、ステップバイステップで明確な指示を出すタスクベースのUIが適しています。 - ユーザーの習熟度が低く、使用頻度が高い場合＝「学習コスト低減」が最重要（左上の象限）
ユーザーが日常的に使うが、操作を「覚えていない」「覚えられない」状況です。スマートフォンのカメラアプリや駅の券売機、ATMの操作画面のように、直感性と分かりやすさを徹底し、ガイド付きのタスクベースUIの要素を多く取り入れつつ、オブジェクトベースの要素もアイコンやラベリングで役割を明確にすることが求められます。 - ユーザーの習熟度が高く、使用頻度が低い場合＝「効率性」と「正確性」が重要（右下の象限）
特定の専門家やヘビーユーザーが稀にしか使わないが、操作は熟知している状況です。企業の経理システムにおける四半期決算処理画面やシステム管理者向けのサーバー設定画面のように、効率的な操作（ショートカット、高度なフィルター）と正確性の確保が重要です。ユーザーが管理する「モノ」を効率的に扱えるオブジェクトベースの要素を多く取り入れ、複雑なタスクも習熟度を前提にシンプルなフローで提供することが可能です。
まとめ
本コラムでは、WebサービスUI改善のポイントを具体的な事例と共に解説しました。
UI/UXデザインに「完璧な正解」はありませんが、ユーザーの行動や思考パターンを理解し、継続的に改善を重ねることが成功への唯一の道です。
今回ご紹介したデザインポイントは、ノンデザイナーの方でも今日から取り組むことが可能です。
たとえ小さな改善でも、ユーザー体験の向上や業務効率の向上に繋がります。
UX/UI設計・改善のご相談はNCDCへ
NCDCは、業務システムからコンシューマー向けモバイルアプリまで、多岐にわたる分野で豊富なUX/UIデザインの実績を有しています。
今回ご紹介した「不自然な操作フロー」や「視覚的な非操作性」の改善、適切な「コントラスト」の適用、ユーザーの習熟度や使用頻度を考慮した「最適な情報配置」、そして「タスクベース」と「オブジェクトベース」を組み合わせた「ハイブリッドUI」の設計まで、お客様のサービスに潜むUIの課題を深く分析し、ユーザーに本当に寄り添った最適なソリューションをご提案します。
新規プロダクトのUX/UIデザイン、既存プロダクトのUI改善、ユーザーテストの導入、さらにはお客様自身でUX/UI設計ノウハウを習得されたいといったご要望まで、UX/UIデザインに関するあらゆるお悩みは、ぜひNCDCへお気軽にご相談ください。
