アクセシビリティとユーザビリティの違いと、制作で先にやること

「アクセシビリティ対応、やっといて」と言われて固まった経験、ありませんか。

ユーザビリティと似た意味に見えるので、混ざったまま使っている人が多い言葉です。でも2つは順番が決まっていて、先にやるべき方がはっきりしています。
このレッスンでは、ユーザビリティ・アクセシビリティ・アフォーダンス・人間中心設計の4つを、制作でどう使い分けるかまで整理します。最後にキーボードだけでサイトを触る練習もしますよ。

ユーザビリティとアクセシビリティの違い

アクセシビリティは、そもそも使える人がどれだけいるかの話です。目が見えにくい人、耳が聞こえにくい人、マウスを使えない人、日本語が母語ではない人。その人たちが内容にたどり着けるかどうかを指します。

ユーザビリティは、たどり着いた人にとって使いやすいかの話です。国際規格のISO 9241-11が「特定の利用者が、特定の目的を、有効さ・効率・満足度をもって達成できる度合い」と定義しています。目的を果たせたか、時間がかかりすぎないか、嫌にならなかったか。この3点です。

アクセシビリティは土台、ユーザビリティはその上の階です。読み上げソフトで開けないページは、どれだけ操作しやすくても、その人には届きません。

2つは対立しません。表にすると、見ている場所の違いがはっきりします。

	アクセシビリティ	ユーザビリティ
問い	使える人はどこまで広がるか	使う人はうまく目的を果たせるか
対象	全員（状況が悪いときの自分も含む）	想定した利用者
やること	代替テキスト、キーボード操作、字幕、拡大対応	導線の整理、言葉づかい、入力の手間を減らす
できていないと	内容に到達できない	到達はできるが、時間がかかって嫌になる

アクセシビリティを簡単に言うと「届く人の幅」

難しく考えなくて大丈夫です。同じ内容に、いろいろな条件の人がたどり着けるようにしておく。これだけです。

スマホやパソコンの設定にも「アクセシビリティ」の項目がありますよね。文字を大きくする、色を反転する、画面を読み上げる、音声を字幕にする。あれは使う人の側の道具です。
ここが大事なところで、作る側が対応していないと、その道具は空回りします。画像に代替テキストがなければ読み上げソフトは「画像」としか言えませんし、文字を画像にしていたら拡大してもぼやけるだけです。

YouTubeの字幕ボタンが分かりやすい例です。音を出せない場所でも内容が届きますし、聞き取りにくい人にも届きます。作り手が字幕を用意しているから成り立っています。

Web制作で最初に手をつける4つを挙げます。どれも今日からできます。

どれも登録なしで読めます。自分で決めるのが難しい部分は、先に決めた人の判断を見るのが早いです。あなたの制作でも、迷った項目だけ開いて見比べる使い方ができますよ。

文字と背景の明度差や文字サイズの数値はユニバーサルデザインの回でまとめています。あわせて読むと、数字で判断できる範囲が広がりますよ。

ユーザビリティは5つの観点で見る

「使いやすい」は感想のままだと直せません。ヤコブ・ニールセンが挙げた5つの観点に分けると、どこが悪いか言葉にできます。

1番の分かりやすい例がGoogleの検索画面です。真ん中に入力欄が1つあるだけで、初めての人でも何をすればいいか迷いません。
逆に4番と2番を優先しているのがAmazonの商品ページです。情報は多いのに、購入ボタンの位置と手順は毎回同じ。慣れた人が少ない手数で終われる形になっています。

この5つは全部を最大にできません。学びやすさを上げると説明が増えて、慣れた人の効率が落ちます。
だから先に「誰の、どの観点を優先するか」を決めます。初回利用が中心のサービスなら学びやすさ、毎日使う業務画面なら効率。ここを決めずに「使いやすくして」と言われると、直しても評価が定まりません。

アフォーダンス：見た目が操作方法を伝える

アフォーダンスは、もともと心理学者ギブソンの言葉で、環境がその人に与える行為の可能性を指します。デザインの現場では、「見た目そのものが操作方法を伝えている状態」の意味で使う場面がほとんどです。

分かりやすいのはドアです。平らな板が付いていれば押す、縦の取っ手が付いていれば引く。説明書きが要りません。逆に、引き戸なのに取っ手が押す形をしていると、みんな押します。「押す」と貼り紙が出ているドアは、デザインで負けた印です💡

LINEのトーク画面も同じです。下にある細長い枠を見れば、そこへ文字を書けると分かります。説明は要りません。

画面でも同じことが起きます。ボタンに見えない四角は押されません。下線のない青文字はリンクだと気づかれません。入力欄に枠がないと、そこへ書けると分かりません。
装飾を削ってフラットにするほど、この手がかりが減ります。削るときは、影・枠・下線のうち少なくとも1つは残す。これで押せる場所が伝わります。
GoogleのMaterial Designを開くと、押せる部品に影で高さをつける考え方を図つきで説明しています。AppleのHuman Interface Guidelinesも、押せる範囲の最低サイズまで決めています。どちらも無料で読めるので、自分の判断に迷ったら見に行ってください。

人間中心設計：使う人から決める進め方

人間中心設計は、使う人の状況を出発点にして設計を進めるやり方です。ISO 9241-210がまとめていて、4つの活動を順に回します。

1. 利用状況を理解する：誰が、どこで、どんな気持ちで使うのかを調べる
2. 要求を決める：その人が何をできれば成功なのかを書き出す
3. 解決策を作る：ワイヤーフレームや試作を作る
4. 評価する：実際に使ってもらって、詰まった場所を見つける

ポイントは4番から1番へ戻るところです。1周で終わらせません。評価で見つかった詰まりを直して、また使ってもらう。この繰り返しが本体です。
個人の制作でも縮小版ができます。友人1人に触ってもらって、迷った場所をメモする。それだけで、自分では気づけない詰まりが2〜3個出てきます。

ミニ実践：キーボードだけでサイトを操作する

10分ほど。マウスから手を離すだけで、道具は要りません。自分のサイトかポートフォリオを開いてください。まだ無ければ、好きなサイトで大丈夫です。

1. マウスとトラックパッドから手を離す。ここから最後まで触りません
2. Tabを押して進み、Shift+Tabで戻る。押すのはEnter、チェックはSpace、閉じるのはEsc
3. トップから、問い合わせフォームの送信ボタンまで進んでみる
4. いま選ばれている場所が目で見て分かるかを毎回確認する（枠が光る、色が変わる）
5. 途中で行方不明になった場所、順番が飛んだ場所をメモする

Macでうまく進めないときは、システム設定のキーボードで「キーボードナビゲーション」をオンにしてください。標準では一部の部品を飛ばします。

終わったら、この4つを確認します。

選択中の場所が見えない（フォーカスの枠を消している）サイトは、この時点で操作できません。CSSで枠を消しているなら、代わりの見せ方を必ず用意してください。

10分でここまで分かります。ツールを入れる前に、まずこれをやってみてくださいね◎

よくある質問

アクセシビリティとは簡単に言うと何ですか？

同じ内容に、いろいろな条件の人がたどり着けるようにしておくことです。目が見えにくい、音を出せない、マウスを使えない、片手がふさがっている。条件が違っても内容が届くなら、アクセシビリティが確保できています。特別な人のための配慮ではなく、条件が悪いときの自分にも効く設計です。

スマホやパソコンのアクセシビリティ設定はどこにありますか？

iPhoneは「設定」→「アクセシビリティ」、Androidは「設定」→「ユーザー補助」にあります。Windows 11は「設定」→「アクセシビリティ」（Windows 10は「簡単操作」）、Macは「システム設定」→「アクセシビリティ」です。文字を大きくする、色を反転する、画面を読み上げるといった機能が入っています。作る側の人は、一度自分の端末で読み上げをオンにして、自分のサイトを聞いてみてください。

ユーザビリティとアクセシビリティ、どちらを先にやりますか？

アクセシビリティが先です。たどり着けない人には、使いやすさを届けようがありません。代替テキスト、キーボード操作、明度差。この3つを確保してから、導線や言葉づかいの調整へ進んでください。順番を逆にすると、作り込んだ画面を土台から直すことになります。

個人サイトでも対応は必要ですか？

やっておくと得をします。代替テキストと見出しの順番は検索エンジンの読み取りにも効きますし、キーボード操作の確認は無料です。制作の仕事を受けるときにも、この観点で説明できる人は強いです。全項目を完璧にする話ではなく、上に挙げた4つから始めれば十分ですよ。

次に学ぶこと

アクセシビリティは届く人の幅、ユーザビリティはその人たちの使いやすさ。土台から順に積みます。アフォーダンスは見た目で操作を伝える手がかり、人間中心設計は使う人から決めて回す進め方。この4つが、UIを作るときの判断の言葉になります。

次はワイヤーフレーム・モックアップ・プロトタイプの違いへ。今回の「評価する」を、どの段階でやるかが分かります。

数値の基準を先に固めたい方はユニバーサルデザインへ戻ってください。全体の並びはデザイン基礎コースの目次から確認できます。