はじめに
アプリやWebサイトにおいて、「ローディング」「エラー」「警告・削除確認」といった状態別のUIを設計することは、今や当たり前となっています。
しかし、その際に意外と見落とされがちなのがアクセシビリティの観点です。
色やアニメーションだけに頼った表現は、一部のユーザーにとっては「何も起きていない」のと同じ体験になってしまう可能性があります。
本記事では、コントラスト比への配慮はもちろんのこと、それ以外の見落としがちなポイントに焦点を当て、よくあるNG例と改善策（OK例）を比較しながら誰にとっても分かりやすいUIについて考えていきます。
ローディング（Loading）
ローディングは、ECサイトでの商品検索や決済処理中、あるいはゲームの読み込み時など、様々な場面で表示されます。
NG例
- スピナーだけが延々と回転している
このデザインは頻繁に目にしますが、ユーザーは進捗を把握できず、「フリーズしたのでは？」と不安に感じることがあります。
また、アクセシビリティの観点では、スクリーンリーダーが情報を読み上げないため、視覚に頼れないユーザーは状況を全く理解できません。
OK例
- 「読み込み中です…」といったテキストを併記する
- プログレスバーで進捗状況を視覚的に示す
このようにテキストや進捗バーを加えることで、どのような環境のユーザーにも「処理が進行中である」ことを明確に伝えられます。
エラー（Error）
エラー表示は、フォームへの入力画面などでよく見られます。
NG例
- 「エラーです」とだけ表示する
- 色だけに頼り、エラーの理由や解決策を示さない
OK例
- 「メールアドレスを正しい形式で入力してください」のように、エラーの原因と解決策を具体的に伝える
- 赤色だけでなく、アイコンやテキストを併用し、多角的に情報を伝える
このように色以外の要素を組み合わせることで、色の判別が難しいユーザーにもエラーを確実に認識してもらえます。
さらに、ユーザーが次に何をすべきかが明確になり、スムーズな問題解決につながります。
色だけに頼った情報伝達は、状態別UI以外にも思わぬところで問題を引き起こします。
例えば、色の判別が苦手なゲーム実況者は、タスクの完了（緑）と未完了（赤）が色だけで表示されていたため、ゲームを進められずに困っていました。
このように、日常のふとした場面にもアクセシビリティへの配慮は不可欠です。
警告・削除確認（Warning / Confirmation）
管理画面などでよく見られる警告や削除確認は、ユーザーにとって不利益につながる可能性のある操作のため、より一層丁寧な設計が求められます。
NG例
- 削除ボタンを押すと、確認なく即座にデータが消えてしまう
- 状況の変化をスクリーンリーダーが認識できない
OK例
- 「本当に削除しますか？」といった確認ダイアログを表示する
- ダイアログに role=”alertdialog” 属性を付与し、スクリーンリーダー環境でも確実に情報を伝える
ワンクッションを置くことで、ユーザーの誤操作を防ぎ、安心してサービスを利用してもらうことができます。
ボタン（button）
ボタンはユーザーがアクションを起こすための重要な要素です。
NG例
- 「ここをクリック」のような、目的が分からないテキスト
- 画像だけで作られており、代替テキストがない
OK例
- 「送信する」「次へ進む」など、目的が明確に分かるテキストにする
- 影や枠線などを使い、クリック可能な要素であることを視覚的に示す
- キーボード操作（Tabキーでのフォーカス、Enter/Spaceキーでの実行）に対応する
ボタンのテキストは、具体的な行動を促し、ユーザーが次に何が起こるかを予測できるようにすることが重要です。
また、見た目だけでなく、キーボード操作にも対応することで、マウスを使わないユーザーやスクリーンリーダー利用者にも配慮したデザインとなります。
まとめ
デザインをする際、つい見た目の美しさを優先したくなることもあるでしょう。
しかし近年、アクセシビリティを考慮したデザインは、特別な対応ではなく「標準」であるという考え方が主流になっています。
これまで当たり前のように使ってきたデザインが、本当にすべてのユーザーにとって使いやすいものなのか、改めて見直す視点が重要です。
「すべての人が、どのような環境やデバイスを利用していても、同じように情報を得て操作できる」そんなデザインが今、求められています。
見た目の美しさとアクセシビリティを両立させること。それが、これからのデザイナーに求められる重要なスキルと言えるでしょう。
簡単30秒