事例で学ぶ！今日から使えるWebサービスUI改善ポイント

「Webサイトの離脱率が高い」「業務システムが複雑で使いにくい」「サービスの使い方に関する問い合わせが多い」といったユーザビリティに関する課題をお持ちではありませんか？
昨日まで革新的だったユーザビリティが、今日は当たり前となり、明日には時代遅れになっている。そんな変化のスピードが加速する今の時代において、「使いやすさ」は常に進化し続ける必要があります。

本ウェビナーでは、UI改善が現在のサービスをより良くするだけでなく、未来のユーザビリティを向上させ、競争優位性を維持する重要な手段であることに着目します。そして、Webサイトなどの具体的な事例を交えながら、早速今日から実践できるUI改善のポイントをわかりやすくご紹介します。

主な内容
・ユーザーがストレスなく操作できるUIの考え方
・悪い例から学ぶUI改善ポイント
・ユーザーの習熟度や使用頻度から考えるUI設計の方法　　ほか

こんな方におすすめ
・自社サービスや業務システムの使い勝手に課題を感じている方
・UIの改善方法を知りたい方
・UIの改善検討中、またはその相談先を探している方

Transcript

1. 事例で学ぶ！今日から使える Web サービス UI 改善ポイント NCDC Online Seminar 2025 / 05 / 27 NCDC株式会社
2. 講師紹介 2 主に業務システムのUX/UIデザインを担当。要件定義の段 階からプロジェクトに参画し、ユーザー分析やサービス内容 の深い理解に基づいて、最適な画面設計を行う。 経歴 WEB地図サービス会社にてtoB、toC双方のサービスでUIデ ザインの経験を積む。より多種多様な事業サービスのUX/UI デザインを手掛けたいという思いから、NCDCに参画。 NCDCでは、測定結果の管理・閲覧に関わるWebアプリケー ションや、土木工事の進捗管理システムのUI/UXデザインに 携わる。 UX/UIデザイナー 南部 枝李
3. こんな課題はありませんか ⚫ 「Webサイトの離脱率が高くて困っている…」 ⚫ 「業務システムが複雑で、操作に時間がかかる…」 ⚫ 「サービスの使いにくさに関する問い合わせが多い…」 ⚫ 「もっと直感的に操作できるサービスにしたい…」 3
4. 本セミナーで得られること ⚫ 「なぜ、あのサイトは使いにくいのか？」その根本原因が、UI/UXの観点 から理解 ⚫ あなたのサービスに潜むUIの課題を、具体的な5つの改善ポイントに 照らして見つけ出すヒント ⚫ コンテンツや機能の特性に応じた、最適なUI設計の考え方 ⚫ 現状の業務システムが「使いやすい」設計になっているかを確認し、 今日から実践できる具体的なアクションプラン 4
5. 本日のウェビナーの流れ ⚫ UI改善の必要性とは？ ⚫ 例から学ぶ！UI改善ポイント ⚫ 事例1 不自然な操作フロー ⚫ 事例2 視覚的な非操作性 ⚫ 事例3 コントラストの不足 ⚫ 事例4 非効率な情報配置 ⚫ 事例5 認識性の低下 ⚫ 事例6 不十分な検索機能 ⚫ 事例7 すべて戻ってしまうようなUI ⚫ 最適なUI設計 タスクベースとオブジェクトベース ⚫ まとめ 5
6. UI改善の必要性とは？
7. 日々進化するユーザビリティ、陳腐化するUI 7 2005年のGoogleマップ 2025年現在のGoogleマップ
8. 日々進化するユーザビリティ、陳腐化するUI ⚫ 目新しいユーザビリティは、時代とともにありきたり＝陳腐化する ⚫ UIを細かく改善していくことは、目先のサービスをより良くするだけでなく、 未来のユーザビリティを向上させ、競争優位性を維持するために不可欠 8 2025年現在のGoogleマップ
9. 例から学ぶ！UI改善ポイント
10. UI改善の5つのポイント 10 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール ユーザーの「道のり」を明確にするステッパー • 多層構造を避ける • ステッパー 情報の「見え方」を最適化 • 大きさ • 要素の配置 • 余白 • 整理 情報の「メリハリ」で理解を促進 • シェイプ • 色 • サイズ • フォント 利用者の「気持ち」に寄り添う • 記憶負荷の軽減 • 直感的な操作フロー • 入力補助 一貫した「品質」を担保 • ガイドラインルール • コンポーネントルール • プラットフォームルール
11. 本セミナーにおける事例紹介について 11 ⚫ 本日の事例は、UI改善の可能性を探るためのものです ⚫ UIは時代や制約で変化します ⚫ あくまで「一画面」から見た改善案としてご覧ください ⚫ 特定のサービスやUIを否定するものではありません
12. 不自然な操作フロー 12 地方税の申告や申請、納税 ができるサービス 事例 1
13. 不自然な操作フロー 13 事例 1 ⚫ 閲覧したいメールをチェックボックスで選択→「表示」を押す→閲覧できる
14. 不自然な操作フロー 14 操作方法を長い文章で書いてもあ まり読まれない。読んで理解するこ とにストレスがかかる。 画面上部のファーストビューに当た る箇所は重要な情報を簡潔に示す ことが望ましい。 事例 1
15. ユーザーの期待に応える操作感 15 ⚫ ユーザーが「ここを見たい」と思ったものは、直感的にクリック可能に ⚫ チェックボックスは複数選択の用途に限定し、単一の項目を開く操作には 別の分かりやすいUIを採用 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール UI 改善策
16. 視覚的な非操作性 16 ハローワークのトップページ 事例 2 ⚫ 見出しのように見える「仕事をお探しの方」が、実は押せるボタン
17. 視覚的な非操作性 17 ⚫ 似たような要素を並列 に並べると情報の視認 性が落ちる 事例 2’
18. UI 改善策 ボタンの視認性向上 18 ⚫ 「ボタンらしさ」の明確化（角丸や影） ⚫ イラストやアイコンによる視覚的な明示 ⚫ 画面遷移の明示（「＞」アイコンで遷移を表す） 大阪万博チケット購入画面 マイナンバーカード申請画面 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール
19. 見た目で「押せる」とわかるUIに！ 19 ⚫ ボタンの形を明確にする ⚫ 単なる四角いブロックではなく、角丸にしたり、わずかに影をつけたりするだけでも、「ボタンらしさ」が 増します ⚫ アイコンの追加 ⚫ ボタンの機能を表すシンプルなアイコンを添えることで、文字を読まずとも直感的に操作を促せます 今日から使える UI改善チップス アイコンを見るだけで、そのボタンが 「カートに入れる」機能を持つことが、直感的に理解できる。 「＞」アイコンがつくことで 遷移先があることが、直感的に理解できる。
20. コントラストの不足 20 ⚫ 視覚的なコントラストと情報の強弱の 欠如 ⚫ ブランドカラーと機能色の混同 事例 3
21. 色の戦略的活用 21 ⚫ モノトーンを基調にし、視覚的なノイズを減らす ⚫ 赤の限定的な使い方（行動を促すボタン、注意喚起、強調したい情報など） 赤や赤と青がメインカラーのサイト 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール UI 改善策
22. 非効率を生むUIデザインの失敗例 22 旧画面（〜2024/12) 事例 4
23. 非効率な情報配置 23 日付が入れられることが 直感的に理解しにくい。 テキストを手動で入力の 場合、日付の書式 （例：YYYY/MM/DD、 YYYY-MM-DDなど）がわ からない。 選択肢とその 操作ボタンが 離れている 開封/未開封の イラストが見分け がつきにくい 頻度高く使用するボタン の横に破壊的なボタン （削除）を置くと、誤操作 を誘発する 事例 4
24. アイコンの視認性 24 ⚫ 開封・未開封の状態を、視覚的に明確に区別できるように設計 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール eL TAX お知らせページ（YAMAP） Gmail UI 改善策
25. メッセージの「既読/未読」を一目で判別可能に！ 25 ⚫ 色や形状の明確な区別 ⚫ 開封済みと未開封で、アイコンの色をはっきりと変える（例：未読は赤、既読はグレー）、またはアイコン の形状を大きく変えることで、視覚的に明確に区別できるように設計しましょう ⚫ 未読バッジの活用 ⚫ 未開封のメッセージに、数字入りの赤丸バッジなどを表示すると、未読件数が一目で分かり、視認性 が向上します 今日から使える UI改善チップス
26. 日付入力フィールドの直感性 26 ⚫ 日付入力フィールドの横にはカレンダーアイコンを配置し、クリックでカレン ダーピッカーが表示されるようにする ⚫ 入力フィールド内には「YYYY/MM/DD」のようなプレースホルダーテキスト や入力例を表示することで、ユーザーの入力ミスを減らす eL TAX 宿泊予約サイトの日付指定 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール UI 改善策
27. 入力フィールドは「何を入れればいいか」を明確に！ 27 ⚫ プレースホルダーの活用 ⚫ 入力フィールド内に「YYYY/MM/DD」のような期待する書式の例や説明を薄い文字で表示しましょう ⚫ カレンダーアイコンの設置 ⚫ 日付入力フィールドの横には、必ずカレンダーアイコンを配置し、クリックするとカレンダーピッカーが表示され るようにすると非常に便利です ⚫ 適切な入力補助 ⚫ 16桁の数字であれば、自動的に4桁ごとにスペースが挿入される、あるいは入力が完了すると次のフィールド に自動で移動する、といった補助機能も有効です 今日から使える UI改善チップス
28. 破壊的アクションボタンの配置 28 ⚫ 破壊的なアクションボタンは、他の通常の操作ボタンとは視覚的に区別し、 十分に距離を離して配置する ⚫ 色を変える（例：赤色にする）、アイコンを変える、確認ダイアログを挟むなど の工夫も有効 GitHubのリポジトリ削除フロー 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール UI 改善策
29. 破壊的アクションボタンの配置 29 ⚫ 破壊的アクションのデザインは、そのアクションの「不可逆性」と「ユーザーに とっての重大性」によって使い分ける Gmailの削除フロー 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール UI 改善策
30. 破壊的なボタンは「離して」「目立たせて」配置！ 30 ⚫ 物理的に距離を離す ⚫ 破壊的なボタンは、他の通常操作ボタンとは十分に距離を離して配置しましょう ⚫ 視覚的に区別する ⚫ 他のボタンと色を変える（例：警告色である赤色にする）、アイコンを変えるなどの工夫を凝らしましょう ⚫ 確認ダイアログの導入 ⚫ 誤操作防止のため、クリック後に「本当に削除しますか？」のような確認ダイアログを挟むことも非常に 有効です 今日から使える UI改善チップス 設定
31. チェックボックスとその操作ボタンの距離 31 ⚫ チェックボックスやラジオボタンなど、選択を促すUI要素に付随するアクション ボタンは、できる限りその選択肢の近く、あるいは選択状態になった時に視覚 的に現れるように配置する 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール eL TAX Gmail UI 改善策
32. t 関連するボタンは「近く」に配置！ 32 ⚫ 近接の原則 ⚫ 選択肢（チェックボックスなど）に付随する「表示」や「実行」ボタンは、できる限りその選択肢の近く、あ るいは選択された時に視覚的に現れるように配置しましょう ⚫ スクロール不要な配置 ⚫ 特に小さい画面では、選択後にスクロールが必要になるような配置は避けるべきです 今日から使える UI改善チップス 選択すると削除できる
33. 該当箇所と離れると認識性を欠く 33 ねんきんネット メールアドレスで登録する画面 エ ラ ｜ 表 示 事例 5
34. エラーメッセージは該当箇所に近く、具体的に 34 ⚫ エラー箇所を視覚的に明確にする ⚫ エラーメッセージを該当箇所に近く表示する ⚫ エラーメッセージの内容を具体的に、かつユーザー目線に記載 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール ねんきんネット メールアドレスの登録画面 航空会社 予約画面 UI 改善策
35. 貧弱な検索・フィルタリング機能 35 ⚫ 大阪万博のパビリオン・イベントの検索サイトが、ユーザーが本当に知り たい情報に効率的に辿り着けないと話題に 事例 6
36. 貧弱な検索・フィルタリング機能 36 ⚫ 「今」この瞬間の状況に基づいて柔軟に探したいというユーザーの ニーズに応えるような検索が困難 事例 6 • 「今から予約が取れそうなパビリオンはどこだ ろう？」 • 「今の待ち時間が短いパビリオンはないか な？」 • 「現在地から近い場所で、 楽しめるイベントは何だろう？」
37. 「その時々で最も重視する情報」で絞り込めるような機能 37 ⚫ 多種多様なフィルタリングオプション ⚫ ファセット検索（絞り込み軸）と該当件数の表示 潤沢なファセット検索例 絞り込んだ場合の該当件数が 表示されている例 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール UI 改善策 開催場所や日付に特化した検索例
38. すべて戻ってしまうようなUI 38 画 面 遷 移 ⚫ 送付先を選ぶシーンで、送付先の住所を変更することができない 事例 7
39. すべて戻ってしまうようなUI 39 ⚫ 送付先住所を編集するには 4 画面遷移する必要がある 事例 7
40. ユーザー行動に寄り添う設計 40 住所の編集ができない 「住所を編集する」がある 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール ⚫ オブジェクトの振る舞いを考慮 ⚫ 特定の情報（オブジェクト）に接している時に、「それに対する変更」という 自然な行動を促すUIを提供する ⚫ 多様なユーザーシナリオを想定する UI 改善策
41. 最適なUI設計 タスクベースとオブジェクトベース
42. ⚫ UI設計の際に、情報の整理や操作の流れを考える上で重要な2つの異なるアプローチ ⚫ サービスの性質やユーザーの利用頻度、習熟度によって最適な選択が変わる タスクベースとオブジェクトベース 42 使用頻度が低く、習熟度が上がらないケース （マネーフォワード年末調整） 使用頻度が高く、習熟度が高いケース （受注システムの登録画面） タスクベース オブジェクトベース
43. ⚫ ユーザーが達成したい「目的（タスク）」を中心にUIを設計するアプローチ。ユーザーはまず行いたい 「操作（タスク）」を選択し、そのタスクを完了するために必要なステップを順に進める • 一度特定のタスクに入ると、 途中で別の操作をしにくい（自 由度が低い） • 頻繁に使うタスクの場合、ス テップが多いと煩わしさを感じ る可能性がある デメリット タスクベースUI： 「目的」を中心に考えるデザイン 43 • 「何をしたいか」を明確にする ことに重点を置く • ユーザーは、定められた順序 に従って必要な情報を入力し たり、選択したりしていく • 手順が明確で、ユーザーが迷 うことなくタスクを完了できるよ うなウィザード形式がよく用い られる • 利用頻度が低いタスクや、手 順が複雑なタスクに適する • オンラインショッピングの購入 手続き • 新規会員登録フォーム • オンライン予約システム（例： 航空券予約） • 新規従業員オンボーディング • SUUMOのトップ画面で借りる か買うかを選ぶ 具体例 • ユーザーが迷いにくい • 入力ミスを防ぎやすい • 使用頻度が低いタスクや、 ユーザーの習熟度が低い ケースに適している メリット 特徴
44. ⚫ ユーザーが操作したい「モノ（オブジェクト）」を中心にUIを設計するアプローチ。ユーザーはまず対 象となる「モノ」を選び、それに対してどんな「操作（アクション）」ができるかを選択する • 複雑なタスクや、複数のオブ ジェクトにまたがるタスクには 向かない場合がある • 初めて使うユーザーには、ど のオブジェクトをどう操作すれ ば良いか分かりにくいことが ある デメリット オブジェクトベースUI： 「モノを」中心に考えるデザイン 44 • 「何に対して」操作するかを明 確にすることに重点を置く • ユーザーは画面上で「モノ （データや要素）」を見つけて から、それに対して行える操 作（編集、削除、共有など）を 探す • 情報が階層的に整理され、 ユーザーは特定のオブジェク トの詳細に深く潜っていくこと ができる • 日常的に繰り返し使うシステ ムや、特定の「モノ」を管理す るシステムに適する 特徴 • ファイル管理システム（例： Google Drive、Windowsのエク スプローラー） • メールクライアント（例：Gmail） • ECサイトの商品登録画面 • プロジェクト管理ツール 具体例 • 直感的で探索的な操作がしや すい • 情報の一覧性が高い メリット
45. ハイブリッドUI ⚫ オブジェクトベースUIを基本としつつ、複雑なタスクはタスクベースUIを組み合わせるUI 45 入 力 後
46. 最適なUI設計のための2つの軸 46 使用頻度 が高い ユーザー の習熟度 が低い 使用頻度 が低い ユーザー の習熟度 が高い マネーフォワード 年末調整 タスクベースUIが適している オブジェクトベースUIが適している 新規会員登録 フォーム 新規従業員 オンボーディング 航空券予約 Windowsの エクスプローラー オンラインショッピ ングの購入手続き プロジェクト 管理ツール Google Drive Gmail スマートフォン のカメラアプリ 駅の券売機 ATMの操作画面 企業の「経理システム」に おける「四半期決算処理画面」 システム管理者向けの 「サーバー設定画面」 受注システム の登録画面 SUUMOの トップ画面
47. まとめ
48. まとめ 48 3. コントラスト 1. レイアウト 2. 階層 4. ユーザー思考、習熟度 5. ルール • 色の戦略的活用 • アイコンの視認性 • 期待に応える操作感 • 破壊的アクションの配置 • 日付入力フィールドの直感性 • ボタンの視認性向上 • チェックボックスとその操作ボタンの距離 • エラー表示の位置 • その時々で最も重視する情報の検索 • ユーザー行動に寄り添う設計
49. 終わりに 49 ⚫ UI改善の5つのポイントと、具体的な事例を通して、「なぜ使いにくいUIが生まれ るのか」、そして「どうすればユーザーに寄り添ったUIを設計できるのか」につい て掘り下げてきました。 ⚫ これらのポイントを意識し、実際に存在するサービスでの「なぜ使いにくいのか」 を分析することで、UI/UXデザインの奥深さと重要性を実感いただけたのではな いでしょうか。 ⚫ 重要なのは、UI/UXデザインに「完璧な正解」はありません。しかし、ユーザーの 立場に立ち、彼らの行動や思考パターンを理解しようと努力し、継続的に改善を 重ねていくことが、成功への唯一の道です。 ⚫ 本日紹介したデザインポイントは、ノンデザイナーの方でも取り組むことが可能 です。例え小さな改善でもユーザー体験の向上や、業務効率の向上に繋げら れます。