WEBデザインの考え方「ユニバーサルデザイン」
はじめに
初めまして、福岡事業所のNAOYAです。
決められた設計や提供されたデザインで開発のみ行ってきた過去の現場ではあまり問題になりませんでしたが、
現在の現場では、「デザイナーさんがいない、外注もしない」という環境であり、
顧客からの大雑把な機能の要望から伺い、顧客・プロジェクトメンバーとディスカッションを繰り返して仕様を決定していくため、
画面デザイン、技術的な設計、DB構成、テスト方法など、考えなければならないことが広くあります。
その中で、特に画面デザインに関する知識が現在不足していると感じているため、今期は、
プライベートではそのあたりを整理・学習しましたので、まとめておきます。
デザインしたものが、「オシャレでイケイケなのか」についても、可能な限り精進していきたいところですが、
まずは1歩目というところで、「ダサいかどうか」ではなく、「使うことができるか」「使いやすいか」といったラインを保証するために、
「UI/UXデザイン」と、「ユニバーサルデザイン」について主に学び始めました。
今回は、案件の性質上、現場での開発でもすぐに必要だった「ユニバーサルデザイン」についてまとめていきたいと思います。
「ユニバーサルデザイン」
定義：特別な製品や調整無しで、最大限可能な限り、すべての人々に利用しやすい製品、サービス、環境のデザイン
原文：The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
WEBデザインに限った話ではなく、様々な製品などのデザインに用いられる考え方のようです。
要望によるのかもしれませんが、基本的にWEBサイトは、世界中から、好きな時間に、好きなデバイスで閲覧できるものだと思いますので、
この考え方は抑えておいたほうがよさそうですね。
WEBでの「ユニバーサルデザイン」
WEBサイトにおけるユニバーサルデザインとして考えるべき部分は、
・文字のデザイン
・色のデザイン
の大きく2つになるようです。
具体的なデザイン方法については、「WCAG 2.0 1* 」などのドキュメントが参考になりそうです。
*Webアクセシビリティを確立することを目的として、12項目のガイドラインと達成基準等で構成されるドキュメント
文字のデザイン
・フォント
フォントを選択する際には、前提としてそのフォントの使用のに関するライセンス条件に従っているかなどの問題もありますが、
可読性の高さがウリのフォントなども提供されているようです。
また、ブラウザなどの機能によってフォントを変更したり、ソフトを利用し読み上げなどを行う場合があるため、
そういった変更が可能になるようにし、文章は画像などではなくテキストで表示しておくべきです。
・フォントサイズ
ストレスなく読めるサイズにするため、最小16px程度で僕はイメージしています。
・行ごとの文字数
これも多すぎると読みづらいパターンがあるため、30文字前後を目安に折り返しや省略表示などを考えます。
コンテンツの内容によっては、更に長く表示してもよいケースももちろんあると思います。
そのほかにも、WCAG 2.0によると、行間なども考慮したほうがいいようです。
行間などの参考：達成基準 1.4.8 を理解する
色のデザイン
色については特に難しいと感じました。僕自身があまりそういった配色デザインに自信がないというのもあり…
配色がその製品のイメージにあっているか、などもとても重要なのですが、
ユニバーサルデザインとして特に意識すべき点からまとめると、
簡単に言うと「見やすいかどうか」になると思います。
その、「見やすいか」が、色覚異常や高齢者など、色弱者にとっては、
一般的な色覚を持つ人と変わってくるため、主観や感覚での判断ではなく、
データに基づいて、できる限りそれに沿う形で決定すれば、少なくとも、「なんか読みにくい…」みたいなことにはならないわけですね。
例えば単純に背景色と文字色の組み合わせとして、以下の画像でいうと、おそらく上の青文字のほうが読みやすいのではないかと思います。
ただし、そもそもその色を使用する部分が、
「文字があるからそれを読みやすくしたい」場合と別に、
「デザインとして使用するので、文字など読み取る必要のある情報はなく、よみやすさを意識する必要がない」場合なども考えられます。
目的に沿ったデザインを考える必要がありますね。
また、WEBサイトの配色を考える上で、色弱者からの見え方を確認できる拡張機能などもあるため、
開発時はそちらも活用していきます。
例として、Chromeでの使用をテストする場合
1⃣ChromeのDevToolsを開き、More Toolsから、
2⃣Renderingをクリックすることでタブが開きます
3⃣このRenderingタブにある、Emulate vision deficienciesを変更すると…
4⃣このように、各種色覚タイプの見え方を確認できます。
おわりに
今回の学習、本来は細かく分割していくつもりだったのですが、、
調べだすとデザイン関連は情報が多すぎて沼でした…
が、ここに書ききれていない部分も含めて、今後開発を行う際にデザインを考える基準が、自分の中に確実に増えたと思います。
いや、まあ、デザイナーじゃないんですけど。まあ。無駄ではない。
UI/UX関連の学習も行っているので、そのうちアウトプットできればいいなと考えております。
ALHについて知る
↓ ↓ ↓ 採用サイトはこちら ↓ ↓ ↓
↓ ↓ ↓ コーポレートサイトはこちら ↓ ↓ ↓
↓ ↓ ↓ もっとALHについて知りたい？ ↓ ↓ ↓