いや〜皆さんは牛丼をよく召し上がりになられますか？
私はすき家→吉野家とよく行くようになり、現在は松屋にハマっています。
定食が美味しいですよ！ぜひ注文して見てください！
私が最近なぜ松屋によく行くのかというと、
家の近くにあって、いつ行っても「早く・安く・美味しい」食事を提供してくれるためです。
つまりこれって私にとってのUXがとても高いってことなのでは.........？？
ということで本日はUXという概念の基礎〜関連する法規則・海外のサイトまで見ていこうと思います！
ご一読いただけたら嬉しいです
1. UXとは
UX（ユーザーエクスペリエンス）は、ユーザーが製品やサービスを利用する際に感じる全体的な体験のことを指します。この概念は、1990年代にデザイン研究者であり認知科学者であるドナルド・ノーマンによって提唱されました。
ノーマンはApple社での経験を通じて、ユーザーの感情や全体的な体験を重視する重要性に気づき、この用語を広めました。UXは単なる使い勝手だけでなく、製品やサービスに触れることでユーザーがどのように感じ、どのように行動するか、そして全体的にどのような満足度を得られるかに焦点を当てています。
UXを改善することで得られる具体的なメリット
UXを改善することは、ユーザーと企業の双方に多くのメリットをもたらします。
顧客満足度の向上
ユーザーが直感的に操作でき、スムーズに目的を達成できると、満足度が向上します。
コンバージョン率の向上
使いやすさやナビゲーションの改善により、ユーザーは製品やサービスに対してポジティブな体験を持ち、購入や登録などの行動を起こしやすくなります。
ブランドイメージの向上
よいUXは企業の信頼性や専門性を高め、ブランドに対する好意的な感情を促進します。
コスト削減
サポートへの問い合わせが減少し、修正作業やクレーム対応にかかるコストを抑えることができます。
ユーザーリテンションの向上
ポジティブな体験はユーザーのリピート利用を促進し、長期的な顧客の維持に繋がります。
CX・UX・ユーザービリティ・アクセシビリティ の違い
| 概念 | 説明 |
|---|---|
| CX（顧客体験） | UXをさらに広げた概念で、製品やサービスだけでなく、ブランド全体との接触点（例: サポート、広告）を含む。CXは顧客とのあらゆる接触を最適化し、全体的なブランド体験を向上させることを目指しています。 |
| UX（ユーザーエクスペリエンス） | ユーザービリティやアクセシビリティも含めた全体的な体験。使いやすさだけでなく、感情や満足感も重視。ユーザーが何を求めているのか、どのように製品やサービスを使用し、その結果どう感じるかをデザインするプロセスが重要です。 |
| ユーザービリティ | ユーザーがどれだけ簡単に使えるかを示す指標。操作性や効率性、誤操作の少なさに重点。ユーザービリティは直感的な操作と誤操作の低減に注目しており、ユーザーがストレスなく製品を使用できることが目標です。 |
| アクセシビリティ | 障がいのある方や高齢者を含め、すべての人が平等に利用できるようにすることを目指す設計。アクセシビリティは、物理的な制約を持つユーザーでも支障なくアクセスできることを保証し、Webや製品において普遍的な利用環境を整えることが主な目的です。 |
これらは概念的には互いに重複する部分もありますが、基本的に以下のような階層的概念になっています。
CX > UX > ユーザビリティ > アクセシビリティ
2. UXに関する世界的に定義されている基準
以下は代表的な国際基準です。これらの基準は、UX設計を標準化し、品質を担保するために用いることができます。
- ISO 9241-210: 「人間工学の原則に基づいた人間中心設計」を定義。UXの品質や設計方法論を規定しています。ISO 9241-210は、製品の使いやすさを向上させるための一連のプロセスを定義しており、ユーザーのニーズを中心に据えたデザイン手法を奨励します。
- WCAG（Web Content Accessibility Guidelines）: アクセシビリティの基準として世界的に採用され、UX設計にも密接に関連。Webコンテンツのアクセシビリティを向上させるためのガイドラインとして広く利用され、すべてのユーザーが平等に情報にアクセスできる環境作りを支援します。
- Jakob Nielsenの定義: 「学習しやすさ」「効率性」「記憶しやすさ」など、UXにおける具体的な評価基準。Jakob Nielsenは使いやすさの原則を提示し、ユーザーがどのようにシステムを利用し、どの程度容易に学習・使用できるかを評価するためのガイドラインを提供しています。
3. UXに関する法律がある地域とその地域の法律
各地域では、アクセシビリティやUXの品質向上を目的とした法律が整備されています。法律によって規制があることは、すべてのユーザーが公正に製品やサービスを利用できることを保証するために非常に重要です。
欧州
GDPR（一般データ保護規則）:
データ収集時の透明性を要求し、UXの一環としてプライバシー設計が重要。GDPRはユーザーのデータ保護に強い影響を与え、個人情報の取り扱いに関する透明性を求めています。
EAA（European Accessibility Act）:
アクセシビリティ基準を満たすことを署務付け。欧州ではEAAを通じて、製品やサービスがすべての人に利用可能であることを保証しています。
米国
ADA（Americans with Disabilities Act）
公共施設やウェブサイトのアクセシビリティを署務化。ADAは物理的およびデジタルな製品がすべての人に平等に利用可能であることを目的としています。
Section 508
連邦政府機関向けにウェブコンテンツのアクセシビリティを規定。これにより、政府のウェブサイトはすべてのユーザーにとって利用しやすいものにすることが義務付けられています。
オーストラリア
Disability Discrimination Act（DDA）:
ウェブアクセシビリティを重要視。DDAは、障がいのある人々がオンラインでも平等に情報アクセスを可能にすることを目指しています。
カナダ
Accessible Canada Act:
公共と民間のアクセシビリティを促進。カナダ政府は、障がいを持つ人々が平等にサービスにアクセスできるよう、アクセシビリティの改善に取り組んでいます。
日本
JIS X 8341:
日本独自のウェブアクセシビリティ基準。すべてのユーザーに対して使いやすいウェブコンテンツを提供することを目的としています。
障害者差別解消法:
公共機関のアクセシビリティ確保。日本における障がい者の権利を尊重し、平等なサービス利用を促進するための法律です。
4. 各地域のWebサイトを観察する
ここでは、各地域のWebサイトを軽く観察してみようと思います。
観察方法
今回は具体的なUIデザイン・構造というよりもパフォーマンスなどの観点で見ようと思います。パフォーマンスなどを以下のツールを用いて評価を実施します。
- PageSpeed Insights: サイト速度やパフォーマンスをチェックできます。ページの読み込み速度はユーザー体験に大きな影響を与えるため、UXの重要な要素です
- axe DevTools: アクセシビリティの問題点を検出。アクセシビリティに関する改善点を明確にすることで、UXの向上に繋げます
※今回は無料版を使用するのでWCAG2.1AA準拠です。
※今回は主にPC版&TOPページを見ていきます。
※以下aria属性というものが頻出しますが、詳しくはこちらをご覧ください！
欧州
例: BMW - https://www.bmw.com/ja/index.html
シンプルでグリッド調のデザインがとてもオシャレに感じます。グリッドを多用していることもあり、とても規則的なので、見ていて疲れないなと思います。
PageSpeed Insightsの測定結果としては、安定感抜群の良さでした。
指摘されてた点としては、以下がありました。ただ使用している感じはキーボード操作も問題なくできますし、とてもストレスフリーだった感触です。
- 画像フォーマット
- 背景の動画や画像の読み込み
- キャッシュの保存期間
- 不要なScriptやCSS
axe DevToolsでの結果もそこまで悪くないように感じます。ただTOPページにh1タグが無かったの少し気になりました。私の見間違いですかね
ただデザイン的にもTOPページは、これっ！という見出しがないと感じるので、headerのBMWロゴに入れるのが無難な気はしましたが、どうなんだろう...
米国
例: アップル - http://www.apple.com/
アップルのサイトは、画面一杯に画像があるのでやはりインパクトがすごいですね
ページ内にカルーセル（スライドショー形式のUI）があるのですが、ファーストビューではなく、ページ下部に配置しているのが、とても意図的と言うか、訴求したい内容ファーストでしっかりページを組まれている感じがしますね〜
以外にパフォーマンスは高くないのですね。指摘点はBMWと概ね同じでした。サイト大規模になるほど、画像などコンテンツが多くなるほど、そもそもパフォーマンスを満点にすること自体がとても難しいなと思います。
ただし、その他の点数はとても高く、アクセシビリティに富んだサイトだなと感じました。
axe DevToolsでの結果はBMWよりさらに高くてすごいなと思いました。
指摘点は主にaria属性の誤った利用やコントラスト比でした。
オーストラリア
例: アトラシアン - https://www.atlassian.com/ja
Jiraなどでお馴染みの企業です。これそういえばオーストラリアでしたねぇ。
装飾やオブジェクトの形・要素にクリエイティブさを感じます！
ECサイトみた後だと高く感じます。主にJavaScirpt関連の点でパフォーマンスが下がっているようです。
こちらもやはりaria属性の取り扱いに関して指摘されていました。本日取り上げたサイトはaria属性関連の指摘が多いですが、裏を返せばそれだけアクセシビリティの改善やaria属性の使用に取り組んでいると言うことなのかもしれません。
カナダ
例: カナダグース - http://www.canadagoose.com/
次はカナダといえばでお馴染みカナダグースです。アパレルっぽくビジュアルがとてもオシャレなサイトですね。
Oh〜点数は高く無かったです。ただ、私も最近知ったのですが、ECのようなタイプのサイトはコンテンツが桁違いに多く、点数を上げるのが難しいっぽいです。日本で言うとZOZOTOWNなども少なくともパフォーマンスの点数は高く無かったです。
使用している感じは、表示遅いとか特に思わなかったので、普通に使う分には問題ないのかもしれません。
axe DevToolsでの結果もかなり指摘がありますが、aria属性+画像のaltに関するものでした。コンテンツ量が多い分修正する場合は大変そうです
日本
例: 三井物産 - https://www.mitsui.com/jp/ja/index.html
現在円安につき絶好調の三井物産です。
コーポレートサイトなので、ビジュアルがスッキリしていてみやすいですね。
点数もいい感じな気がします。指摘点は他サイトと同じく画像・JavaScript関連でした。
axe DevToolsの結果はコントラスト比やaタグの使用方法に関する問題が指摘されていました。
5. まとめ
今回はUXの視点から国内外の法律やサイトを見てみました。
UXは単なるデザインや使いやすさだけではなく、アクセシビリティや法律への準拠も含む包括的な概念です。特に、法規制が厳しい地域では、海外は既にUXに関する問題で訴訟されているケースも多々あるため、基準に適応することで信頼性を高めたいという観点もあると思います。
また、取り上げたサイトはそれぞれ系統や規模が異なるので一概には比較できないですし、UXの評価観点やツールは他にもあるのであくまで一例としてへぇ〜と思っていただければと思います。
最後に、各々実現したいUIはあると思いますが、デザインとアクセシビリティなどのバランスをしっかり担保してUXフルなアウトプットを心がけていきましょうー！
本記事をご一読いただきありがとうございました！