新たに制作依頼をしたり、リニューアルをしたりするWebサイト。せっかく作るのだから多くの方に見て欲しいですよね。
そこで、デザインする際に心がけたいWebの「ユニバーサルデザイン」について見ていきましょう。
あらゆる国籍、性別、年齢、たくさんの方が利用しているインターネット。スマートフォンの普及率は日本国内でも7割を超え、かなり身近になったと言えるインターネットの世界。
日々利用している中、時々「このサイト、なんか見にくいな・・・」なんて思った経験、ある方も多いのではないでしょうか？
Webサイトの見え方は、1つではなく様々な条件下で変化します。Webサイトを見ている端末が、パソコンか、タブレットか、スマートフォンかの違いはもちろん、パソコンの画面のサイズ、画面の明るさの設定、ブラウザの環境など、端末の設定でも見え方は異なります。
そういった違いと同じ様に「見る人が変われば見え方が異なる」ということもデザインする上で気にかけたいポイントです。近年はシニア層の方のインターネット利用も増えていることから、老眼や近視の方が見ている場合も増えていると考えられます。取り扱っている商材によってはターゲットがシニア層であることもあります。また、色の判別が得意でない方もいらっしゃいます。
そこで、Webでの「ユニバーサルデザイン」の課題となるのは、できる限り多くの人たちにとって「見やすいサイト」であることを目指すことです。
では「ユニバーサルデザイン」とは、どういったものを示すのでしょうか。
ユニバーサルデザイン（Universal Design、UD）とは、障害（ハンディキャップ）の有無，年齢や性別，国籍や民族などにかかわりなく，誰もが等しく使いやすいように，安全で便利な都市や建物，製品や道具を実現しようとする考え方のことです。
上記のように、「多くの人にとって優しいデザイン」であることを「ユニバーサルデザイン」といいます。「障がいを持っている人のための対策」ではなく、「障がいの有無にかかわらず、誰もが使いやすいことを目指す」ということ。デザインしていく上で意識していきたいですね。
では、具体的にはどのような対策ができるでしょうか。
やるべき対策はたくさんありますし、その制作するWebデザインが「誰のための」ものかによってその詳細は決まってきます。
そこで今回はどんなデザインでも共通して取り入れることができるポイントを紹介していきます。
この「ちょっとした心がけ」ひとつで、「多くの人にとって優しいデザイン」に近づけることができます。
Webデザインで気をつけられるポイントは、下の3つです。
１.文字サイズは、読みやすい大きさに設定する
２.色の使い方の違いに気を配る
３.「色の見え方」をチェックしよう
次の章で、３つのポイントをさらに詳しく考えてみましょう。
ユニバーサルデザインを目指す際に、まず気をつけたい１つ目のポイントは、Webサイトの「文字サイズ」です。シニア層の方のインターネット利用者も増えていますので、あらかじめ読みやすい大きさの文字サイズにしておくことをおすすめします。
これは例えばTOPページを含めて5ページくらいのwebサイトを作成するのであれば、TOPページがある程度できた段階で実機で確認するのが一番でしょう。
また、実機で確認する際もパッと見てOKにすると後から「実は読みにくかった」なんてことも起こりかねません。理由はデバイスによって実際に持って使う位置が異なるからです。
スマートフォンなら目の前、タブレットならある程度目から離した距離に持ってくるかと思います。
ちょっとしたことですが、これによって「伝わるデザイン」に一歩近づくことができます。
また、気をつけたいのはテキストの量によって同じフォントサイズでも見やすさが異なるという点です。
例えばニュースサイトのように文字数の多いWebページでは、文字サイズを大きくしすぎると1行に入る文字数が少なくなり、視点移動が多くなるため、読みにくい印象になる可能性があるので、注意が必要です
他の人にチェックしてもらうと客観的な意見が聞けていいかもしれませんね。
他にも、人により程度はあれど、加齢に伴いどうしても文字の視認性は低下していきます。シニア向け商品やサービスなど、シニア層の方が見ることがあらかじめ想定されるサイトなどは普段のデザインより大きめのサイズにしておくことも良いかもしれません。さらに、「フォントサイズを変更するボタン」をサイトに設置することも有効な対策です。なお、ボタンそのものが気づきにくい位置にある、という残念なデザインのこともあります。このようなボタンは、ヘッダーエリアなどのわかりやすい場所に設置することがポイントです。
ユニバーサルデザインで気をつけたい2つめのポイントは、「色の使い方」です。
上記でも加齢による文字の視認性低下について指摘しましたが、一般的には加齢により色彩識別能力も低下するといわれています。これにより、文字を大きくしたとしても色の組み合わせによって視認性が悪くなる可能性もあります。
上記は、加齢による色覚の変化を表したイメージです。彩度が下がり、黄色みが増えることで、色によっては判断が難しいほど似た色に見える印象です。色の組み合わせによっては文字などの視認性が落ちる可能性もあります。このような問題に対してできる対策は「色のコントラストを上げる」ことです。
例えば、上の「いろはにほへと」と書かれた文字の色の組み合わせは、下のように色のコントラストを上げることで、シニア層の方にも読みやすくすることができます。
このように、色の組み合わせに気を使うことでできる対策もあります。
また、あわせて気にかけたいのが、色覚障がいのある方の見え方です。
ユニバーサルデザインで気をつけたい3つめのポイントは、「色の見え方」をチェックすることです。色の見え方はシニア層に限らず、人により異なることも忘れてはなりません。例えば、「色覚障がい（色覚異常・色弱）」を持つ人は、男性の約20人に1人、女性の約500人に1人、日本全体では320万人以上いると言われています
上の図は、色覚の加工できるアプリで作成した写真です。P型、D型、T型と呼ばれる見え方があり、それぞれに色の見え方が異なります。例えば、P型やD型の方が上図左下の時刻表を見たときに、どのように見えるのでしょうか。上図右下の時刻表のように、黒、赤、緑の色の見分けは難しく、色を変えただけで「特急・急行」「準急」「それ以外」の違いを示されても理解することは困難です。このように、違いを示す場合は色だけでなくマークを付けるなどの工夫も必要なのです。
しかし、見え方の違いは実際に見てみないとわかりません。
今回使用したアプリは色のシミュレータと呼ばれるアプリです。
他にもPhotoshopの「表示」→「校正設定」→「P型（1型）色覚」もしくは「D型（2型）色覚」を選択するとシミュレーションができます。
ぜひ参考にしてみてください。
いかがでしたでしょうか？
Webデザインにちょっとした工夫をするだけ、色々な人に優しい、伝わるデザインになります。
読みやすさ、伝わりやすさなどを考慮して、弊社ではWEBページやチラシの作成を行なっております。
お気軽にお問い合わせください！
スリーカウント株式会社
〒430-0919 静岡県浜松市中区野口町501 2F
TEL：053-581-8781 （平日9:00～18:00 （土･日・祝日休み））
メールでのお問い合わせはこちら
