Webデザインでも気にしたい。「みんなに伝わる」ユニバーサルデザイン入門


Webデザインでも気にしたい。「みんなに伝わる」ユニバーサルデザイン入門

こんにちは、ディレクターのあゆみです。いきなりですが、

クライアント「いろいろな人が閲覧できるサイトに」

ええ、わかります。でも、これだけ多種多様な環境がある中で、全てに対応するのは無理な話で……。って経験、ありませんか? ありますよね。

ぶっちゃけてしまうと、IE9以下はできるだけ対応ブラウザに入れたくないのですが、(Web制作に携わるみなさんの頷く声が聞こえる……)わたしがそう感じてしまうのは、「その人がアップデートしたら問題なく見られる」という、ユーザ側の対策案があるからです。
JSアニメーションやCSS3に影響があるかもしれませんが、もちろんサイト自体は見れるようにはなっていますし。(プログレッシブエンハンスメント対応での許可をいただいています)

ただ、もっと別の環境で閲覧する人もいるわけです。
例えば、耳が遠かったり、色覚異常だったり、老眼だったり、近視だったり。

今回はそれらの環境も含めた、「みんなに伝わる」ユニバーサルデザインについてご紹介します。

ユニバーサルデザインとは?

「ユニバーサルデザイン」。ちょこちょこ耳にしませんか?

ユニバーサルデザインとは

ユニバーサルデザインとは、ユニバーサル=普遍的な、全体の、という言葉が示しているように、「すべての人のためのデザイン」を意味し、年齢や障がいの有無などにかかわらず、最初からできるだけ多くの人が利用可能であるようにデザインすることをいいます。

引用元:三重県 ユニバーサルデザインのまちづくり

すなわち、多くの人に優しいサイトであることです。

ユニバーサルデザインそのものをいい感じに説明しているページを探してたら、なんとわたしの故郷、三重県のサイトの説明がいい感じでした。ぜひ読んでみてください。

Webサイトで気をつけたい「色」のこと

ユニバーサルデザインを意識するあまり、「らくらくホン」みたいになるのはまた違いますが(とはいえ、あれはUIを突き詰めてるなと感じます。潔くてよい!ので、らくらくホンならあれこれつけないほうがいいんじゃ、と思ってるタイプです)、サイトを作る上でも、少しの気遣いで「みんながちょっと使いやすくなる」工夫は大切だなあと思います。

今回はその中でも、に着目します。
Webサイトはそもそも情報の置き場であって、それをブラウザで見る以上、「画面上で情報を問題なく受け取れるかどうか」が重要になるからです。その観点で色味はとても大切です。

そして、この記事を書くにあたって色覚異常のことをちょっと調べたのですが、男性の20人にひとりは色覚異常とのこと。もはや異常と言うのがはばかられるくらい、「身近に存在すること」です。

簡単!Photoshopで視認性をチェック

Photoshopを使えば、色覚タイプを変更することができます。
色覚異常の場合、サイトがどのように表示されるのか、視認性を確認してみましょう。

 
kosei

表示→校正設定から、P型かD型を選択します。

 
nomal

こちらがいつものLIGブログ。……以下のようになります!

P型(1型)

p型

D型(2型)

d

P型/D型とは、以下の通りです。

P型色覚(Protanope)
3種の錐体のうち赤い光を主に感じるL 錐体が無い人(P型強度) と、L錐体の分光感度がずれてM錐体と似通ってしまっている人(P型弱度) がいます。P型強度の人は右図のようにC型との見え方の差が大きく、P型弱度の人はC型との中間になります。

D型色覚(Deuteranope)
緑の光を主に感じるM 錐体が無い人(D型強度)と、M錐体の分光感度がずれてL錐体と似通ってしまった人(D型弱度)がいます。

・色弱者のほとんどはこの4タイプ(P型強度・P型弱度・D型強度・D型弱度) で、合計で男性のほぼ5 %を占めます。

引用元:色弱・色盲・色覚タイプの特徴|NPO法人カラーユニバーサルデザイン機構

ほぼほぼがP型かD型に分類されるということなので、Photoshopのこの機能でチェックしておけば問題ないでしょう。

さて、LIGブログのサンプルを見てなにか気づきませんか?

  • 赤と緑の色が出ていない……
  • モノトーンはほぼ変化なし(上部のナッツに変化なし)

あたりがわかりやすい変化ですね。文字が読めない、ということはありません。

例えばですが、瑞々しいお肉が特徴的なこちらの写真もこうなります。

oniku

こうやって見てみると、このお肉の美味しさをちょっとでもわかってもらうために

  • ツヤ感のある写真を選んだほうがいいかも
  • 盛り付けもきれいにしたほうがいいかも

など、色以外の要素で補足をしよう、と気づけます。

 
momiji

さらに、こうした紅葉の写真も、

 
momiji_p

新緑の季節になります。

そぎ落としたミニマルなデザインも素敵ですが、こうやって見てみると、まわりに「紅葉の〜〜〜」といった補足が必要かもしれないですね。(そもそもが紅葉のサイトだったらわかるからいいとして……)

デザイナーのテクニックとして、グレースケールでデザインするというひともいますが、ちょっとその感覚に近い気がします。

「本当にこのデザインでみんなわかる? 使いやすい?」
たった5秒のチェックで新しい視点が見つかるので、さくっと確認してみるといいと思います。

さいごに

色の話で長くなっちゃったので、今回はここまで。
デザインはユーザの使いやすさのために存在していると思うので(よくある「アート」と「デザイン」の違い、的な……デザインは課題解決であるべきだと、わたしも思っています)、できる限り多くの人がストレスなく情報を得ることができて、なおかつワクワクするようなサイト作りをしていきたいなあ〜と気を引き締めた次第です。

それでは。

おまけ

伝わるデザイン 研究発表のユニバーサルデザイン
こちらも参考になりますよ。

シニアが使いやすいWebサイトの基本ルール
こちらは本ですが、この題材って究極のUIだと思う。


この記事を書いた人

あゆみ
あゆみ ディレクター 2013年入社
制作部のディレクターをしています。好きなもの:音楽 / お酒 / 飛行機 / フェス / 登山 / カメラ / キャンプなどなど。週末はほぼ都内にいません。3DCGに興味があるのでC4Dとか触りたいです。