webデザインで気を付けること。
こんばんは、さじです。
年末からwebデザインの勉強をしています。
技術的なキーポイントは本で学んでますが
webデザイナーが気を付けるべきことを学ぶと
よりユーザーの満足度の高い仕事ができると
新人webデザイナーは考えました。
デザインというと視覚的なテクニックや
見た目新しさに気を持っていかれがちです。
これらが健常者目線が中心なのに気づき
一旦立ち止まってしまいました。
障がいを含む社会的弱者に対してはどうなのか？
大企業はどう考えているのかを知ることで
何が必要なのかを学びます。
Appleが提唱しているガイドライン
「Human Interface Guidelines」では
アプリ開発ではこんなことに気をつけてねと
システム設計はもちろんデザインまで
Appleが通達を出しています。
こちらで出てくるアクセシビリティ* に
関する項目にヒントがありました。
*Accessibility（アクセシビリティ）＝直訳は近づきやすさ、アクセスのしやすさ。あらゆるユーザーが機器やサービスを利用できるようにする工夫のこと。
デザインが関わってくるアクセシビリティ。
英語の原文を日本語翻訳で読むので
きっちり正解なのかわからないものの
自分なりに読み解いたことをメモしたのですが
せっかくなので共有したくなりました。
Google先生の和訳を日本語らしくしてます。
前書き
機能（各人が行う自分好みにする設定）やデバイスに左右されることなく全てのユーザーが満足できるサービスを提供します。
世界の7人に1人は様々なやりとりやデバイスの利用に環境的な障害または身体的な障がいをすでに持っており、誰もがその立場になる可能性があります。
障害を4つのカテゴリに分けた際、全ての人が満足できるサービスになるよう設計します。
Vision
（ビジョン、視覚）
失明、視力低下、色覚異常などの視力障がい。
Hearing
（ヒアリング、聴覚）
聴覚障がいのほか、TPOにより音を出したくない場面。
Physical and Motor
（フィジカルとモーター、身体と運動）
細かい操作が難しい身体的な障がい。
Literacy and Learning
（リテラシーとラーニング、読み書き能力と学習）
発話や読解、複雑な事柄の理解、集中力の維持が難しい障がい。
これらに配慮したサービスを用意し、提供してください。
この後は細かな説明が続きますが
たくさんあるのでデザイン関連を抜粋します。
●44×44ptのヒットターゲット。
操作ボタンなどの触れる部分には44pt四方をとる。
●フォントサイズに連動するグリフ。
ユーザーの設定により文字の拡大表示をした場合でもグリフは同様に拡大表示する設定にする。
●フォントの太さはレギュラーと太字。
Regular、Medium、Semi-Bold、Boldを使用し、UltraLight、Thin、Lightは使用しない。
●カスタムフォントの注意点。
見やすさを損なうフォントは避ける。（ブランディング、没入型ゲームを除く）
●左揃え（日本語、英語などの左から右に書く言語）。
本文のジャスティフィケーション（両端揃え）は使用しない。
●斜体、太字。
読みにくくならないよう全文への使用、多用は避ける。
●オブジェクトの区別。
情報を伝える場面など、赤と青など色の違いだけで区別させず、テキストやグリフを添える。
●システムカラー優先。
UIカラー、またはNScolorを用いる。（ユーザーの設定にも反映させられる）
●色覚異常への配慮。
色覚異常の方が区別しにくいとされる青とオレンジ、および赤と緑の組み合わせは避ける**。
●強く対照的な色を使用。
読みやすく、また認識しやすくするため色のコントラストは上げる。
●アニメーション。
アニメーションにより目眩、吐き気を引き起こす人に配慮し、「モーションを減らす」を実行した際に動きを制限することができるようにする。具体的には、Z軸の変化をさせない、スライドではなくフェードを用いる、など。
●自動再生。
ユーザーが視覚を制御できるように自動再生は避ける。
●点滅要素の注意。
発作を起こす可能性のある点滅は避け、情報を伝える唯一の方法としない。
●コピーは簡潔に。
**色覚異常についての組み合わせ例は以下のリンクで確認できます。
10.見分けにくい色の組み合わせ例 | 色覚異常といわれたら | 目についての健康情報 | 公益社団法人 日本眼科医会
以上が少し拡大解釈したデザイン関連です。
アクセシビリティについては以下のサイトに
非常にわかりやすいイラストがあったため
補助的な参考にしました。
高齢者や障がい者を含む全てのユーザーに
最高の満足を、という概念を基に
設計されているのが現在のApple製品と
アプリであることに納得できます。
自分は開発ではありませんが
デザインに関しても非常に勉強になりました。
Googleにもマテリアルデザインについて
優れたガイドラインがありますので
こちらも近いうちにご紹介します。
こういったことにも配慮しつつ、
サイトやバナー、動画のwebデザインを
素敵に作成できるデザイナーになりたいですね。
さじ
