【レポート】デジタルマーケターズサミット2024 Winter

伝わるWebサイトをつくる! ユニバーサルデザインの基本と具体的な改善方法

より多くの人に伝わるWebサイトにするために、どのような改善を行えばよいのか? ユニバーサルデザインの基本知識とともに、具体的な改善方法を解説する。

Webサイトやバナーにとって「読みやすさ」「わかりやすさ」は重要事項。そこで、majima DESIGNの間嶋沙知氏が「デジタルマーケターズサミット 2024 Winter」に登壇。すべての人のためのデザインとして体系化された「ユニバーサルデザイン」の基本知識に加え、色や文字、UIのチェックポイントや改善方法など、具体的な実践方法について解説した。

majima DESIGN 間嶋沙知氏のプロフィール画像
majima DESIGN 間嶋沙知氏

誰にとっても利用しやすい「ユニバーサルデザイン」の考え方

Webサイトのページを作成したものの、「わかりにくい」「使いにくい」ということはないだろうか。さまざまな要因があるが、ぜひ知っておきたいのが「ユニバーサルデザイン」という考え方だ。

ユニバーサルデザインとは、文化・言語・国籍や年齢・性別などの違い、障がいの有無や能力差などを問わずに利用できることを目指した、建築・設備・ 製品・情報などの設計(デザイン)を指す。

バリアフリーが、主に障がいがある人の問題を解決するために専用の補助を加えることにフォーカスしているのに対し、ユニバーサルデザインはあらゆる人や状況を対象として、はじめからバリアをつくらないよう設計する。「アクセシビリティ:使える状況の幅広さ」を高め、その上で「ユーザビリティ:ある状況での使いやすさ」を高めていくという考え方だ。

アクセシビリティ、ユーザビリティとユニバーサルデザインの概念を表した図。
だれもが使いやすいデザインを指す「ユニバーサルデザイン」

このアクセシビリティとユーザビリティは重なることもあり、アクセシビリティを意識することでユーザビリティが上がることがある。

たとえば、腕を怪我している人、片腕の人にも対応すれば、多くの荷物を持っている場合などでも使いやすい商品になる。ロービジョンの人や白内障の人の「見えにくさ」を解決すれば、健常者も眩しい場所で閲覧しやすくなるだろう。

人によって見え方は異なる

色には、イメージや情報を直感的に伝えられるという利点がある。一方、年齢や状況、色覚特性などによって見え方が異なることに注意が必要だ。日本人の男性では20人に1人、女性では500人に1人の割合で多数派とは異なる色の見え方をしているという。

また、次図のように、濃い赤と黒、オレンジとグリーンのように、見分けにくい色の組み合わせがある。

8種類の色の組み合わせ。濃い赤と黒、赤と緑、橙とグリーン、赤と焦茶、黄緑とオレンジ、青緑とグレー、水色とピンク、紫と青。
見分けにくい色の組み合わせの例

加齢によって発症する白内障の場合は、「明度が似た色の組み合わせ」が見分けにくくなる。そこで間嶋氏は、色覚特性によって見分けにくい色を簡単に確認できるアプリ「色のシミュレータ」を紹介した。

自分が進行中のデザインにおいて、こうした見分けにくい色の組み合わせに気づいた時、改善方法として次の3つがあるという。

色の改善法①色味をずらす

赤と緑、濃い赤と黒など見分けにくい色同士では、一方の色味をずらすことで見えにくさを改善する方法がある。たとえば次図のように黒が背景の場合、濃い赤をオレンジ寄りにすると少し見えやすくなる。

黒い背景に白いベル型の通知アイコン。アイコンの右肩に通知数を表す赤い丸数字がついている。赤をオレンジ寄りにずらすと、P型色覚でも赤い部分が目に入りやすくなる。
色味をずらすことで見分けやすくする例
(図中、下は赤と黒が区別しにくいP型色覚シミュレーション)

さらに見分けにくい色と色が隣り合わないように境界線を追加しても、見た目の印象を変えずにより多くの人が見分けやすい改善できる。

なお、色数の多いグラフや地図の色分けなどでは調整が難しくなるため、「カラーユニバーサルデザイン推奨配色セット ガイドブック」を利用する方法もある。

色の改善法②コントラストを高める

情報を伝える要素と背景との色の明るさの“差=コントラスト”を調整するのも有効な方法だ。たとえば「黄色い背景と白い文字」のように、背景と文字の色の明るさの差が小さい=「コントラストが低い」場合、光が散乱して眩しく感じられる症状のある「ロービジョン」の人、白内障の症状がある高齢者には見分けにくい。また、屋外の直射日光の下や薄暗い部屋などのように、ユーザーの状況次第では見えにくくなる。

黄色い背景に白い文字を組み合わせたバナー。焦点がずれたり光量過多の症状があるロービジョンでの見えにくさや加齢による白内障での見えにくさをシミュレーションした図。
コントラストが低いために見分けにくい例

コントラストについては、「WCAG(Web Content Accessibility Guidelines:Webコンテンツ アクセシビリティ ガイドライン)」で基準が定められている。また、「Contrast Ratio」のようなコントラスト比を確認できるツールもある。

間嶋氏は、こうしたツールを使うことについて、「個人の感覚ではなく、客観的な数値をもって見やすさ読みやすさを評価できる」と語る。そして、テキストやアイコン、UI、背景など、それぞれの役割に応じて、コントラストを確保できる配色に調整し、イメージカラーを残しつつも見やすさを改善した例(次図)を見せた。

乗り換えアプリの配色を改善した例
コントラストの基準値を確保した配色に調整して改善(右)した例

色の改善法③色以外の情報を加える

テキストや形、大きさ、アイコンなど色以外の情報を加えるという方法も、見分けにくさを改善する方法の1つだ。

テキストを併記したり、大きさ、太さ、アイコンや線など形にも変化をつけたり、色を情報を伝える唯一の手段にしない。
色が情報を伝える唯一の手段ではない。色以外の情報を加えることも重要だ

情報は画像ではなく“テキスト”で伝えよう

Webサイトは、「誰でも・いつでも・どこからでも」アクセスできて、見る人の状況やデバイスに合わせて情報を得られるという大きなメリットがある。

たとえば、ロービジョンの人が画面を拡大したり、色を反転して見たり、視覚障害のある人は、「スクリーンリーダー」で画面の内容を音声で読み上げたり、文字情報を点字に変換する「点字ディスプレイ」を使ったりすることもできる。また、ディスレクシア(読字障害)がある場合も、文字組みを読みやすく変更したり、音声メディアやアクセシブルブックなどを使ったりすることで、コンテンツにアクセスしやすくなることもある。

しかし、いずれも画像情報ではなく、テキスト情報でなくてはならない。テキスト情報であることで、デバイスの大きさに応じて折り返し表示ができ、コピー&ペーストや機械翻訳などもしやすくなるわけだ。

テキストの活用法①基本の文字組み

情報をテキストで提供した上で、テキストを有効に活用できるようにするには、「基本の文字組み」が整っている必要がある。これについても、前述した「WCAG」に明確な基準が設けられている。

テキストの活用法②画像の代替テキスト

「画像の代替テキスト」も意識すべきことだ。HTMLのimg要素にalt(オルト)を設定することで、画像が表示されない時や音声として読み上げる時にも、情報をもれなく伝えることができる。

お申し込みの仕組みを表した図の代替テキスト:お客様からお申し込みがあると、スタッフに受付メールが届き、お客様には確認メールが届きます。
画像に代替テキストをつける例

テキストの活用法③リンクのテキストライティング

ユーザーはWebサイト上で、リンクをたどりながら目的の情報を探す。リンクのテキストやボタンが「こちら」「詳しくはこちら」では、どこに行くのか、行き先がわかりにくい。そこで、行き先のページタイトルや「よくある質問」「お申し込みはこちら」など行き先が予測できる情報をテキストに含めることが大切だ。これはボタンやフォームにも同じことがいえる。

テキストの活用法④見出しの活用

長い文章なのに「見出し」がないと、伝えたい情報が伝わりにくい。欲しい情報が書かれているのかも予測できないため、読む気にもならない可能性がある。そこで、情報のまとまりごとに区切って、各ブロックに見出しをつけることで、書いてあることをスピーディに伝えることが大切になる。

見出しレベルで階層をつくり、文章の構造を表すことが大切です。装飾目的で見出し要素を使うと情報を混乱させるのでやめてください。正しく要素を使うと、次図のようにリーダーモードなどで見た目が変わっても、見出しが見出しとして機能します(間嶋氏)

見出し要素を使った場合と、テキスト装飾のみで見出しを表現した場合の比較。
見出し要素を正しく使うと、リーダーモードでも見出しとして機能する

なお、こうした見出しの付け方や代替テキストの付け方はデジタル庁が公開している「ウェブアクセシビリティ導入ガイドブック」の中で解説されている。

UIのよくある失敗と改善例

最後は、UIの使いやすさの解説とともに、よくある失敗例と改善例が紹介された。そもそも「使いやすさ」には、さまざまな要素が複雑に関係している。たとえば「ボタンを押す」という操作1つとっても、「知覚:ボタンの存在を知覚する」「理解:ボタンだと認識する」「操作:実際にボタンを押す」「反応:反応が起きたらまた知覚する」と分解できる。このプロセスのどこかに問題があれば、使いにくいものになる。

使いにくさを解消するには、「知覚・理解・操作・反応」を通して「できること=予測」と「起きること=結果」を一致させることだ。そうすることで、直感的で使いやすい有線UIへと改善することができる。では、具体的にどうすれば、UIの失敗をリカバリできるのだろうか。

よくある失敗①マウス操作を前提としたUI

たとえば、スマートフォンやタブレットなどのタッチデバイスからのアクセスが増えている今、ユーザーはパソコンのマウスを使っているとは限らないため、マウスオーバーしてリンクがわかる仕様は使わないようにしたい。

また、リンクテキストは青字に下線が基本となっているので、普通の文章に下線をひくと混乱するので避けるのがベター。また、同じ見た目でも押せたり押せなかったりするとユーザーが戸惑うため、リンクのデザインは一貫していることが望ましい。

マウス操作を前提としたUIの失敗例。リンクテキストか文字の装飾か、マウスオーバーしないと伝わらない。下線をひくなど、マウスオーバーしなくてもリンクであると伝わるように改善すると良い。
リンクテキストの失敗例

また、小さなボタンだったり、リンクが密集していたりすると、意図していないものをタップする可能性があるので注意が必要だ。物理サイズで9mm程度の大きさを確保するとタッチデバイスでも使いやすくなるという。

よくある失敗②キーボードで操作できないUI

Webサイトを開いた状態で、キーボードのTabキーを押していくと、リンクやボタン、フォームなど、操作できる部分が強調される機能がある。これは「どこにフォーカスが当たっている」のかを表す「フォーカスインジケーター」である。

これがアクティブになっていないと、どこが選択されているのかがわかりにくい。そこで、コーディングなどの際に、このフォーカスインジケーターを意図せずに消してしまっていないかを確認しておくことが大切だ。

よくある失敗:キーボードで操作できないUI。
キーボードで操作できるフォーカスインジケーターは消さないようにする

また、サイトを開いた時に表示することの多い「お知らせ」などの「モーダルダイアログ」も操作上の問題が起きやすいUIだ。たとえば、開いたモーダルの上にフォーカスされず、キーボード操作で閉じることも、リンク先に移動することもできなくなってしまうことがある。マウスやタップだけでなく、キーボードでの操作ができるかをチェックする必要がある。

よくある失敗③勝手に動くUI

勝手に動いたり、音が鳴ったりするUIは、集中して閲覧することの妨げになることがある。文章を読んだり操作したりするスピードは人によって異なるため、コンテンツが次々に変わって読み終わる前に流れていくと、意図しない部分をクリックしたり、自分が読みたいコンテンツに集中できなかったりすることが起きる。

またスクロールアニメーションなどのように、意図しない動きが画面全体に出てくると、画面酔いを起こす人もいる。

画面に動きを取り入れる場合は慎重に行ってください。まずはコンテンツを動かさずに表示する方法を検討しましょう。

ニュースでは新着分をリスト表示したり、グリッドレイアウトで複数のコンテンツを見せたり、カルーセルを採用する場合は見る人が自分のタイミングでコントロールできるようにしてほしいです(間嶋氏)

なお、Webサイトギャラリー「AAA11Y(Accessible Website Gallery)」では、動きやモダンな技術を使いつつ、アクセシブルで魅力的なサイトが多数掲載されている。

ユニバーサルデザインやアクセシビリティに対応しようとすると、デザインがダサくなるという声も聞かれますが、『AAA11Y』に掲載されているデザインを見ていると、より多くの人に魅力的かつ確実に情報を伝えるための工夫はまだまだできると感じられます。

使う人が自分の特性や状況に合った使い方を選べるのは、Webやデジタル媒体の大きな強み。マウスでの操作だけでなく、タッチデバイスやキーボードなどでも意図した操作ができるかを確認してみてほしいです(間嶋氏)

インタラクティブなUIを実装する際のデザインは、「わかりやすさ」がおざなりになりがち。より伝わりやすい表現がないか、ユーザーが自分のタイミングで自分の使いたい方法できちんと操作ができるか、客観的な視点から確認することが大切だ。より多くの人に伝わりやすく、使いやすいものにするためにも、ユニバーサルデザインの視点を取り入れてみてはいかがだろうか。

\参加無料 11/19火・20水 リアル開催/
「Web担当者Fourm ミーティング 2024 秋」全50講演超!

Web担主催イベント

資生堂、ビックカメラ、セガ、デジタルハリウッド大学などが登壇! セミナーイベント開催

「これから求められるBtoBマーケティング」「ビックカメラが語る“成功するオウンドメディアの構築術”」「GA4でワンランク上の解析術」など全50講演超を11/19火・20水に開催。
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

DRM
「DRM」は主に以下2つの略語のこと。 ■ダイレクトレスポンスマーケティン ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]