topよく耳にする「ユニバーサルデザイン」とは具体的にどういったものかご存知でしょうか。なんとなく知っている方も多いとは思いますが、実際のWeb制作にも取り入れられる要素をご紹介したいと思います。設計(デザイン)のことを言います。“あらかじめ全ての人にとって使いやすいものとしてデザインする”という考え方です。年齢や能力、状況などにかかわらず、できるだけ多くの人が利用できるように『最初から』デザインすることを基本コンセプトとしています。身近なもので言うとピクトグラム、例えばトイレの男女のマークなどが挙げられます。ユニバーサルデザインの重要性このように、なぜ多くの企業がユニバーサルデザインに取り組むのかご存じでしょうか。今では多くの国でユニバーサルデザインが求められており、その背景には、国際社会における「ダイバーシティ=多様性」の確立が挙げられます。ダイバーシティはSDGsの目標に深く関係していますが、SDGsが目指す「誰一人取り残さない持続可能で多様性と包摂性のある社会の実現」を行っていくためにも、ユニバーサルデザインは今後ますます重要となり注目されていくでしょう。「ユニバーサルデザイン」と似たような言葉の一つに「バリアフリー」というものがあります。同じような意味で使われている印象ですが、実はその考え方には違いがあります。かかわらず多様な人々が利用しやすいよう都市や生活環境をデザインする考え方。すべての障壁の除去という意味でも用いられるここまで、ユニバーサルデザインについてお話してきましたが、Webデザインとユニバーサルデザインの関連性と、実際にWebサイトへのユニバーサルデザインをどう取り入れるのかを見ていきましょう。WebデザインとユニバーサルデザインWebサイトは、世界中の誰もが、自分の好きな場所で、好きなデバイスで、好きな時にアクセスすることができる。それは他の媒体や施設、モノにはない本質的な特徴です。今重要視されているウェブアクセシビリティの観点からもまた読み上げ機能など、技術を組み合わせることで目の見えない人にも情報を届けられるなど、Webサイトはその存在そのものが、ユニバーサルデザインなのです。Berners-Lee(ティム・バーナーズ=リー)氏の言葉ウェブの力はその普遍性にある。障がいの有無にかかわらず、誰もがアクセスできることがその本質である。今や老若男女たくさんの方が閲覧しているWebサイト。日本では、小学校でもデジタルデバイスでの授業が導入されたり、高齢化社会においてシニア世代の方のインターネット利用も増えていることから、老眼や近視の方が見ている場合も増えていると考えられます。色覚異常などの障がいをお持ちの方の場合もあります。https://www8.cao.go.jp/kourei/whitepaper/w-2023/gaiyou/05pdf_indexg.htmlさらにその閲覧している端末が、パソコンかスマートフォンか、の違いはもちろんのこと、例えば、パソコンの画面のサイズ、ブラウザ環境など、端末の設定でも見え方は異なってきます。見る人が変われば見え方が異なるのが当たり前となった現代で、あらゆるユーザーが不便を感じることなくサイトを見える使えるデザイン設計が必要不可欠といえます。それを叶える一つが、ユニバーサルデザイン設計なのです。ユニバーサルデザインとアクセシビリティ・ユーザビリティWebサイト制作では「アクセシビリティ・ユーザビリティ」という言葉がよく使われますが、「全てのユーザが情報にアクセスでき、さらに使いやすいようにデザインする」と言う”考え方”が、ユニバーサルデザインです。アクセシビリティもユーザビリティも全てを包括している考えがユニバーサルデザインとなります。ユニバーサルデザイン「7つの原則」ユニバーサルデザインには、その考え方を実現するための「7つの原則」が定められています。ユニバーサルデザイン7原則は、建築家や工業デザイナー、技術者、環境デザイン研究者などからなるグループが、協力しあってまとめたものです。Designさらに詳しくみてみましょう原則1:誰にでも公平に利用できること定義:誰にでも利用できるように作られており、かつ、容易に入手できること。ガイドライン1a.誰もが同じ方法で使えるようにする。それが無理なら別の方法でも仕方ないが、公平なものでなくてはならない。1b.差別感や屈辱感が生じないようにする。1c.誰もがプライバシーや安心感、安全性を得られるようにする。1d.使い手にとって魅力あるデザインにする。https://www.kotsu.metro.tokyo.jp/bus/kanren/barrierfree.html原則2:使う上で自由度が高いこと定義:使う人のさまざまな好みや能力に合うように作られていること。ガイドライン2a.使い方を選べるようにする。2b.右利き、左利きどちらでも使えるようにする。2c.正確な操作がしやすいようにする。2d.使いやすいペースに合わせられるようにする。関係なく、使い方がわかりやすく作られていること。ガイドライン3a.不必要に複雑にしない。3b.直感的にすぐに使えるようにする。3c.誰にでもわかる用語や言い回しにする。3d.情報は重要度の高い順にまとめる。3e.操作のためのガイダンスや操作確認を、効果的に提供する。エレベーターのボタンなど原則4:必要な情報がすぐに理解できること定義:使用状況や、使う人の視覚、聴覚などの感覚能力に関係なく、必要な情報が効果的に伝わるように作られていること。ガイドライン4a.大切な情報を十分に伝えられるように、絵や文字、手触りなど異なった方法を併用する。4b.大切な情報は、(例えば大きな文字で書くなど)できるだけ強調して読みやすくする。4c.情報をできるだけ区別して説明しやすくする(やり方が口頭で指示しやすくなるように)。4d.視覚、聴覚などに障がいのある人が利用しているさまざまなやり方や道具でも、情報がうまく伝わるようにする。点字ブロックなど原則5:うっかりミスや危険につながらないデザインであること定義:ついうっかりしたり、意図しない行動が、危険や思わぬ結果につながらないように作られていること。ガイドライン5a.危険やミスをできる限り防ぐ配慮をすること:頻繁に使うものは最もアクセスしやすくし、危険なものはなくしたり、隔離したり、覆うなどする。5b.危険なときやミスをしたときは警告を出す。5c.間違っても安全なように配慮をする(フェイルセーフ)。5d.注意が必要な操作を意図せずにしてしまうことがないように配慮する。駅のホームドアなど原則6:無理な姿勢をとることなく、少ない力でも楽に使用できること定義:効率よく、気持ちよく、疲れないで使えるようにすること。ガイドライン6a.自然な姿勢のままで使えるようにする。6b.あまり力を入れなくても使えるようにする。6c.同じ動作を何度も繰り返すことを、できるだけ少なくする。6d.体に無理な負担が持続的にかかることを、できるだけ少なくする。自動ドアなど原則7:アクセスしやすいスペースと大きさを確保すること定義:どんな体格や姿勢、移動能力の人にも、アクセスしやすく、操作がしやすいスペースや大きさにすること。ガイドライン7a.立っていても座っていても、重要なものは見えるようにする。7b.立っていても座っていても、あらゆるものに楽に手が届くようにする。7c.さまざまな手や握りの大きさに対応する。7d.補助具や介助者のためのスペースを十分に確保する。多目的トイレなどWebデザインにおけるユニバーサルデザイン実践編7つの原則に基づいて考えていくと、Webサイトを制作する上であらゆることに配慮が必要になりますが、Webデザインにおいて留意できる点としては大きく以下の3点が挙げられるでしょう。・ウェブアクセシビリティそれぞれを詳しくみていきましょう。タイポグラフィ視力がある人にとって、日常で最も目にする情報は文字です。Webサイトの大部分を占めるのも文字。文字は、情報が伝わるかどうかを左右する最も重要な要素といえます。文字の読みづらさとして以下が挙げられます。3つの種類があります。Webデザインの際にこのポイントに留意して、フォント選定やサイズ定義、レイアウトを組んでいきましょう。UDフォント読みやすさに加えて、わかりやすく読み間違いがないように、可読性や視認性、判読性が高くなるようにデザインされのが「UDフォント」です。日本初のUDフォントはフォントメーカーのイワタとパナソニックの共同開発で作られました。UDフォントにはこういった特徴があります。・文字の形がわかりやすく、読み間違えにくいシンプルさや、アキの確保、似ている形をいかに差別化させるかがポイントとなっています。UDフォント」になります。Fontsからダウンロードできます)UDフォントを使わない場合明朝体よりゴシック体UDフォントを使用しない場合でも、明朝体よりゴシック体を選びましょう。視力が悪い人にとっては明朝体は線が細すぎて見えにくいですし、視覚過敏の人にとっては明朝体の細い部分を認識しづらかったり、縦横の線の太さの違いやはらい、ハネなどが刺激となるようです。文字組み一行あたりの文字数:40文字まで(半角の場合80文字まで)フォントやその大きさだけではなく、文章を認識するエリアにも課題があります。日本語本文の場合は、1行あたり10字以上、35〜40字くらいまでの文字数が視線の移動が大きくならずに読みやすくなります。行間:段落中の行送りは少なくとも1.5文字分。Initiative)によって策定されます。色について前述したように多様な色覚を持つ人がいることに配慮し、情報が正しく伝わるように色の設計をする「カラーユニバーサルデザイン」という言葉があります。カラーユニバーサルデザイン(CUD)とは、「カラー」=「色(可視光線が目から入り脳で起こる色知覚を示す言葉)」+「ユニバーサルデザイン」=「普遍的な、全体の」を示します。人間の生まれつきの色の感じ方(色覚)は、大きく5つの型(タイプ)に分けることができ、色の感じ方は異なります。色覚は病気や老いによって変わることもあります。した人間の色覚の多様性に対応し、より多くの人に利用しやすい配色を行った製品や施設・建築物、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン(略称CUD)」と呼びます。目のしくみを理解し、それに基づいて配慮していくことは、ウェブデザインやコンテンツのアクセシビリティを向上させる上で非常に重要です。以下に、目のしくみを知り、配慮していくためのポイントを詳しく見ていきましょう。目のしくみ人は目から入ってくる光によって色を認識しています。目の一番奥にある網膜には、暗いところではたらく桿体(かんたい)と、明るいところではたらく錐体(すいたい)の2種類の視細胞があります。それぞれ光に反応して、桿体は明暗の、錐体は色の感覚をもたらします。桿体は1種類ですが、錐体にはL錐体、M錐体とS錐体の3種類があります。L錐体は長波長付近の光(赤)、M錐体は中波長付近の光(緑)、S錐体は短波長付近の光(青)に高い感度で反応する視物質をもっています。それらが光を吸収して興奮すると、その刺激が信号となって視神経を通って脳に伝わり、色として認識されるのです。錐体の種類や状態、刺激の程度によって見分けにくい色は異なり、似ている人を集めると5つの色覚タイプに分類することができます。日本人男性の約20人に1人、女性の約500〜600人に1人が色弱者といわれています。色弱には、赤・緑・青のどの錐体に問題があるかによって3つのタイプがあります。青に問題がある場合を3型(T型)色覚といいます。このように色覚に障がいのある場合に、色の差を見分けられなかったり、配色の意図を正しく認識できない場合があります。1型(P型)の人は濃い赤と黒の見分けがつきづらく、2型(D型)の人は赤と緑の見分けがつきづらいのが特徴です。それらにに配慮したカラーパレットを作成するためのツールをいくつかご紹介します。Edge、Opera、Braveなどの一般的なブラウザーに直接プラグインすることで、デザインにユニバーサルデザインやアクセシビリティを簡単に組み込むことができるようになっています。Starkのチームの大半が身体に障がいを持っており、彼らはより良いサービスを構築しています。Starkを活用することで以下の確認を簡単に素早く行うことが可能となり、デザインプロセスの一部としてユニバーサルデザインを取り入れることができます。代替テキスト注釈タイポグラフィ分析タッチ・ターゲット色覚シミュレーション:色のシミュレータhttps://asada.website/cvsimulator/j/色覚障がいの場合の見え方をシュミレーションできるツールがあります。「色のシミュレータ」というスマホアプリでは、カメラを通してリアルタイムで色の見え方をシミュレーションしたり、写真やスクリーンショットにシミュレーションをかけることができます。IllustratorやPhotoshopでも、以下のようにシュミレーションすることができますので、見え方を確認しながらカラー設計をするようにしましょう。高齢者にとっては次のような配色が見分けづらくなります。狭くて歩きにくい」など日常生活での不自由さをきたしている状態**)の人にも見分けづらい**配色です。ここを改善することで、利用者全体への伝わりやすさも向上させることができます。コントラストを確保する事で配色の改善ができるWebサイトを見る人の環境や視力は様々で、一般色覚者であっても例えば外でスマホを見るとき画面が暗いと感じる時があります。見る人や環境はさまざまなので然るべきコントラスト比がなければ、情報を正確に伝えることのできない事もあるでしょう。背景と要素が同じ色のときは1:1、白と黒の組み合わせがコントラスト最大で21:1になります。Webサイトを見る人の環境や視力は様々で、例えば外でスマホを見るとき画面が暗いと感じる時があります。見る人や環境はさまざまなので然るべきコントラスト比がなければ、情報を正確に伝えることのできない事もあるでしょう。以上のコントラスト比を確保するようにという基準値が定められています。基準値を満たせていないことが分かります。コントラスト比は重要な要素になりますが、目視だけでは判断しきれないものですので、こちらもツールを用いて確認しながら、制作すると良いでしょう。Colorhttps://color.adobe.com/ja/create/color-contrast-analyzer▼Contrasthttps://usecontrast.com/▼Starkhttps://www.getstark.co/カラーパレット設定Webサイトをデザインしていく上で、カラー設計を行う場合は、あらかじめコントラストを確保できる組み合わせをパレットにしておくと、効率よくデザインへ展開することができます。パレットの考え方1まずブランドカラーなどのメインの色のコントラストを確保2次に文字の白黒を反転させてコントラストが確保できる背景色を決定こうしておけば、あとは明るい色・暗い色のバリエーションを増やしても、いずれもコントラストが確保されたパレットを作ることができます。カラーユニバーサルデザイン機構が推奨している配色セットがあります。いうタスク管理ツールでは、色でラベル分けをすることができます。「色覚バリアフリーモード」をオンにすると、色だけではなく模様でもラベルを識別できるようになっています。このように背景色に模様やパターン、柄を組み合わせることを「ハッチング」といいます。https://support.atlassian.com/ja/trello/docs/adding-labels-to-cards/色+枠ボタンなど特に操作が必要なパーツには、フチを付けるだけでも、識別しやすくすることができるでしょう。グラフなどカラーが隣接するものも同様に認識しやすくなります。色+カタチ3色で色分けされた折れ線グラフを改善してみましょう。色覚シミュレーションをかけてみると、D型色覚の人には非常に分かりづらい配色になっていることが分かります。これを改善するために、色の組み合わせを赤・青・グレイに変更しました。線を太くして色の面積を増やすことで、色を認識しやすくしました。色だけでなく線の種類とマーカーでも3つのグラフを識別できるようにしました。グラフの外に凡例として示されていたラベルを、グラフの中に直接書くようにしました。このように、グラフひとつとっても、様々な改善方法が考えられます。色以外の情報による改善テキスト補助このお問い合わせフォームでは必須項目を文字の色だけで表しているため、赤が認識しづらい人には分かりにくい表現になっています。必須項目を色だけで表現するのではなく、ラベルにテキストで「必須」と明記することで、より伝わりやすい表現にできます。ウェブアクセシビリティとユニバーサルデザインユニバーサルデザインには、ウェブアクセシビリティのように明確なガイドラインはありません。ウェブアクセシビリティの評価項目を対応することで、ユニバーサルデザインという考え方を実行することに繋がります。まとめユニバーサルデザインを意識する事により、様々なバックグラウンドを持つ人々が同様に利用できるだけでなく、一般ユーザーへのユーザビリティの向上も狙うことができます。デザイン現場ではよく耳にする「ユニバーサルデザイン」。取り入れていけば良いか、またツールは何が適切なのかなどを考えると壁は高く感じ、腰が重くなりがちです。どんな人にも優しいデザインを目指していくことは世の中を少しずつ良くすることができることだと考え、日々のデザイン業務に取り入れていきたいものです。今回ご紹介したツールなどを活かしてぜひ「ユニバーサルデザイン」、取り入れていただけたら嬉しいです。株式会社デパートでは、表層面のみならず、Webサイトを通して得た全ての体験が、優れたUXになることを目指したWeb制作を行っています。お気軽にお問い合わせください。小さいweb制作会社へデザイナーとして約5年ほど経験を積みました。その後、さらに経験を積む為転職活動を経て、デパートに入社させていただく事になりました。