UXUI Design

誰もが迷わず使えるeラーニングサービスへ。アクセシビリティ改善の取り組み

株式会社日本能率協会マネジメントセンター
OVERVIEW
本プロジェクトでは、eラーニングサービスにおけるUXにおけるアクセシビリティ課題の抜本的な解決を目指し、全盲者・健常者の双方を対象にしたユーザビリティテストから改善設計、再検証に至るまで実施しました。 再テストでは、Windows環境のNVDAおよびiOSのVoiceOverを活用したスクリーンリーダー検証も実施。全盲者・健常者の両者から、「迷いなく操作できた」「次のアクションがすぐ分かった」といったポジティブな反応が多数寄せられ、実装の確かな手応えを得る結果となりました。
TERM

2025年1月〜2025年6月

ISSUE
既存のeラーニングサイトにおいて、視覚障害者を含むすべてのユーザーにとっての「使いやすさ」が担保されておらず、アクセシビリティ対応やUIの一貫性に課題がありました。また、ガイドライン未整備による運用の属人化も課題視されていました。
SOLUTION
  • アクセシビリティとユニバーサルデザインを考慮したUI改善
  • 健常者・視覚障害者のユーザビリティテストを実施し、実態に基づいた改善方針の策定
  • 中長期運用も見据えたデザインガイドラインの策定
OUTCOME
  • 全盲者・健常者が直感的かつ安心して学習することのできるUI/UXを設計
  • デザインガイドラインを新たに策定し、運用の属人化を防止。中長期的なUX品質の維持と改善の再現性を担保する体制を構築

01.

ユーザーインタビューで明らかになった、アクセシビリティを含むUX課題

サービス改善の第一歩として、全盲のユーザー1名、一般ユーザー1名、それぞれを対象としたユーザビリティテストを実施しました。一般ユーザーにおいては、eラーニングの基本的な受講はスムーズに操作できた一方で、想定外の挙動や迷いを生む仕様が多々存在し、ストレスを感じるシーンが散見されました。
一方、全盲のユーザーにとっては、アクセシビリティへの配慮がほぼなされておらず、そもそも「操作が成立しない」状況が多く確認されました。本質的な課題は、機能の有無ではなく利用者の目線に立った設計になっていないことでした。

02.

“つまずき”の背景を掘り下げ、構造からUXを再設計

テストで得られた声の多くは、情報構造や文言の曖昧さによる「認知のギャップ」に集約されました。例えば、現在位置が把握しづらい画面構成や直感的でないラベルなどが、ユーザーの迷いを招いていました。そこで、ヘッディング構造を整理し、スクリーンリーダー対応のラベル設定や文言修正を行い、情報の流れと操作意図の一致を図りました。
一方、視覚的なシンプルさを追求するとスクリーンリーダーの情報提示が不足する場面もありました。そのため、健常者・視覚障害者ともに違和感なく目的を達成できるよう、視覚と音声両面で情報を補完し、ボタンや見出し一つまで多様な環境を考慮した設計を実現しました。

03.

アクセシビリティに配慮しつつ、受講意欲を高めるようなUIを実現

ターゲットであるビジネスパーソンに向けて、誠実さと信頼感を伝えるため、JMAMブランドの世界観を踏襲しつつ、落ち着きと明瞭さを兼ね備えたデザインへ再構築しました。 誠実さを軸にしながらも堅苦しさを避け、講座視聴からレポートへ進む画面にはイラストを挿入。受講者の心理的負担を軽減すべく視覚的にモチベーションを高め気軽に受講できる雰囲気を目指し、自然と次のステップに進みやすい体験を設計しました。 また、アクセシビリティの観点からは、色覚特性にも配慮しつつ、背景色と文字色のコントラスト比率を調整し、誰もが安心して使えるデザインに落とし込みました。

※本内容は、今後実際のサービスへ反映予定です。

04.

プロトタイプで検証し、改善効果を実現

UI改修後、全盲のユーザー・色覚特性ユーザー・一般ユーザーを対象にプロトタイプを用いたユーザビリティテストを実施し、改善内容が実際の操作体験においてどのように機能したかを定性的・定量的に検証しました。
併せて、Windows環境のNVDAとiOS環境のVoiceOverを用いたスクリーンリーダー検証も実施しました。
その結果、初回テストで指摘されたすべての課題(影響の大きいものから細かな改善点まで)が解消されました。また、テスターからもポジティブなフィードバックが多数寄せられ、改善の効果がユーザーの実感としても明確に確認されました。本取り組みにより、単なるUI改修ではなく、誰にとっても使いやすく、迷わず学べる設計が確実に実現されたと言えます。

無料相談を申し込む