はじめに
本記事にアクセスいただき、ありがとうございます。
Webサイトを作りたいと思った時、「ユーザーフレンドリー」「アクセシビリティ」という言葉に出会ったことはありませんか？
Webサイトにおいてこの2つへの対策は年々重要視されています。
なんだか似たような響きで混同されやすい存在ですが、実は異なった意味を持っています。
そこで今回は、それぞれの違いと対策について
「ユーザーフレンドリーとアクセシビリティの違いは？」
「どんな対策をすればいいの？」
について、本記事ではご紹介していきます。それぞれを知って言葉を使い分けられるようにしたいですね！
ユーザーフレンドリーとは？
ユーザーが目的を達成しやすい使用感
IT分野で使い勝手などを表す言葉に「ユーザビリティ」があります。
Webサイトに訪れるユーザーは、情報収集や欲しいものがある、問い合わせをしたいなど、何かしらの目的がありますね。
このようなユーザーが持っている目的に対し、
ユーザーフレンドリーはWebサイトにおいて重要な要素で、常にユーザーの検索意図を汲み取ってサイト作りをしなければなりません。
ユーザーフレンドリーの一部に
「モバイルフレンドリー」がある
最近では多くの方がスマホで情報を検索するようになりました。
ユーザーフレンドリーで求められることは時代によって異なり、スマホが普及する昨今では「モバイルフレンドリー」は重要な要素です。
「UI/UX」は、
ユーザーフレンドリーを目指すもの
近年「UI/UX」の分野も注目されています。
UIとは？
UIは、User Interface（ユーザーイン一ターフェイス）の頭文字を取った言葉です。ユーザーと情報を繋ぐ接点となる機器であったり情報を指します。
Webサイトの場合は購入ボタンや画像・文字などのユーザーが目的を達成しやすいように用意された情報のことです。
UXとは？
一方UXは、User Experience（ユーザーエクスペリエンス）の略で、ユーザーがサービス利用時に感じる体験を指します。
Webサイトの場合はユーザーが「使いやすい・分かりやすい・センスが良い」などを感じる表示スピートやアニメーション・情報の見せ方などを指します。
両者の目的が「ユーザーフレンドリー」
いずれもユーザーにとって分かりやすくてストレスのない操作ができ、目的が達成できることが根底にあります。つまりユーザーフレンドリーを目指すということですね。
アクセシビリティとは？
一方、アクセシビリティとは
例えば
Webサイトの場合はレスポンシブサイトと言われるPCやスマホ、タブレットなどの異なる画面範囲に情報が最適に表示されるように対応するWebサイトを制作することです。
また、回線速度の遅いWi-Fiと回線速度の早いWi-Fiのどちらでも問題なく表示されるWebページを制作したり、誰が見てもシンプルで分かりやすいコンテンツなどさまざまな仕様を指します。
アクセシビリティの定義
- 世界基準の『WAI（Web Accessibility Initiative）』
- 日本では『JISX8341-3』
でそれぞれ定義づけられています。
※『JISX8341-3』の正式名称は以下のようになっており、誰でも公平に利用できる原則を掲げています。
『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ』
- 1 知覚可能の原則
- 2 操作可能の原則
- 3 理解可能の原則
- 4 堅ろう（牢）（Robust）の原則
- 5 適合
（参照：ウェブアクセシビリティ基盤委員会ページより抜粋）
「ユニバーサルデザイン」もアクセシビリティ
『JISX8341-3』の序文やユニバーサルデザインの原則には以下のような内容があります。
『JISX8341-3』の序文
高齢者や障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく、ウェブコンテンツを利用することができるようにすることを目的としている。
（引用元：ウェブアクセシビリティ基盤委員会より抜粋）
ユニバーサルデザインの7原則
- 1 公平な利用
- 2 利用における柔軟性
- 3 単純で直感的な利用
- 4 認知できる情報
- 5 失敗に対する寛大さ
- 6 少ない身体的な努力
- 7 接近や利用のためのサイズと空間
（引用元：UD資料館『ユニバーサルデザインの7原則』より抜粋）
ユニバーサルデザインは、全ての人が使いやすく誰でも公平に使用できるようデザインすることが根底にあり、アクセシビリティを配慮した取り組みと言えます。
ユーザーフレンドリー・アクセシビリティの違いとは？
ユーザーフレンドリーは
アクセシビリティは
それぞれの関係
「Webサイトを使いやすくする」ということです。
両者は細かく言えば多少の違いがありますが、
アクセシビリティの中に、様々なユーザーの使いやすさの定義が同居しているとイメージすると理解しやすいです。
対策について
ユーザーフレンドリーとアクセシビリティの対策について、「Webサイトを使いやすくする」という点において必然と同じものになってきます。
具体的な対策方法5選
- 画像に代替テキストを入れる
- 文字サイズの変更をできるようにする
- モバイル用のviewportを設定する
- 背景色と文字色のコントラストを適切にする
- 色だけで区別しない
それぞれの対策について詳しくご紹介していきます。
1.画像に代替テキストを入れる
画像に代替テキスト（alt属性）を入れることはSEO対策でもよく用いられる方法ですが、視覚障害のある方が使用する「スクリーンリーダー」が画像も読み上げることができるようになるというメリットもあります。
2.文字サイズの変更をできるようにする
Webサイトでは文字のサイズが決められている場合が多いですが、大・中・小の文字から文字サイズを選べるようにすることはユーザーフレンドリーとアクセシビリティにおいて大切です。
スマホやタブレットでWebサイトを閲覧する方が多いので、使用頻度は低くなりつつありますが、あるに越したことはないでしょう。
3.モバイル用のviewportを設定する
「ビューポート」と呼ばれる表示領域の設定です。viewportはレスポンシブ対応に必要です。
レスポンシブ対応していないホームページは、スマホから開いた際にPCと同じデザインで表示され、情報を獲得しづらいサイトとなってしまいます。
モバイル用に最適化されたWebページが表示されるようにviewportの設定は欠かせません。
4.背景色と文字色のコントラストを適切にする
背景色と文字色が同じような色の場合、目を凝らさないと読めなかったり、そもそも読むことができないといった問題が生じる可能性があります。
一般的なWebサイトでは白背景に黒文字である場合が多いですが、中にはブランディングなどで色合いを変えたい場合もあるでしょう。
そんな時は、『JISX8341-3』に基づいてコントラスト比を「4.5：1」以上の差になるよう設定することが必要になります。
5.色だけで区別しない
例えば、お問い合わせの入力エラーで赤枠で囲まれてエラーを伝える場合もありますが、これでは色の判断ができない方はエラーが起こっていることに気づきません。
ですので、赤枠に加えて「※入力エラー」などの注意書きも一緒に記載されるように設定しましょう。
まとめ
この記事ではユーザーフレンドリーとアクセシビリティについて、それぞれ違いと対策についてご紹介していきました。
今ではほとんどの方がインターネットを使う時代ですので、どんな人でも使いやすいWebサイトを作ることが重要視されています。
ユーザーにとって使いやすいホームページづくりなら
今回紹介しました対策も、専門的な知識がないと取り組むことが難しい部分もあります。
ぜひこれからWebサイトを作ろうと考えている方や、ホームページを作ったけれど、当初目指していた効果が得られないなどお悩みがありましたらお気軽にご相談ください。
設計からデザイン〜開発、そして運用までワンストップで行えるのか当社のWeb制作の強みです。
本記事がWebで悩むあらゆる方の参考になりましたら幸いです。
関連記事
UI/UXって何？
ウェブを作るときに知っておきたいこと
新着記事
サーバーの種類と違い
インボイスとは？使える補助金はあるの？
当社の実績はこちら
ここまでお読みいただき、誠にありがとうございました！
今後も多摩地域・立川にあるホームページ制作会社として地域の皆様、 ホームページに関わる皆様に向けてお役に立てる有益な情報発信ができるよう努めて参ります。