webデザインで気を付けること。2

こんばんは、さじです。

前回記事、
「webデザインで気を付けること」の結びで書いた
Google マテリアルデザインについて紹介します。
Appleのアクセシビリティへの配慮にも書きましたが
大企業の社会的弱者への考え方を学び
より良いwebデザインを行うための
個人的勉強のメモになります。
今回もGoogle先生の翻訳を日本語らしくしながら
自分の解釈でまとめた内容となっています。

webブラウザ Chromeの仕様に照らし合わせた内容と
各種ツールを利用した場合の具体的な事例が
掲載されています。

こちらの「Material Design」より
アクセシビリティの項目を中心にまとめます。

material.io

アクセシビリティを理解する

アクセシビリティの改善によって次のことが期待でき、すべてのユーザーの使いやすさが向上します。
低視力、失明、聴覚障がい、認知障がい、運動障がい、または状況障がい（腕の骨折など）。

原則

Googleのアクセシビリティの原則は次の3つ。

Clear（くっきり）*
クリアーなデザインレイアウトにより、ユーザーのアクションを促す。

Robust（しっかり）*
さまざまなユーザーに対応できるようにアプリを設計する。

Specific（はっきり）*
ユーザー各々のプラットフォームを最適で明確な支援技術でサポートする。

*直訳ではClear（クリアー）、Robust（壮健）、Specific（明確）

＊主にモバイルUIデザインに適用する内容となります。前回同様、このあとは具体的にデザインに関わる事柄を抜粋します。一部デザイン以外の項目を参考として抜粋しています。

●階層

ボタン、画像、文章は増えれば増えるほど複雑化する。これを防ぐため、以下のことを配慮する。
・はっきり見えること
・コントラストとサイズ
・重要な項目の階層順位
・重要な情報は一目でわかるように

アクションはページの最上部（ヘッダー）または最下部（フッター）に設置する。他のコンテンツ要素と混ぜない。

●フォーカスの順序
画面上の視線の動きは通常、上から下、左から右へ流れることを前提とし、配置に配慮する。

●色とコントラスト
ユーザーにアクションを促すには色とコントラストに注意することが重要。

＊GoogleのColor Toolでは色とコントラストの組み合わせをテストすることができます。ページ内右のパレットの色を選ぶと、左には文字と背景色のサンプルを見ることができ、文字が見えない背景色が選ばれた際には警告のマークが出ます。

material.io

●色以外の要素による識別
さまざまなタイプの色覚異常を想定し、色の違いだけでなく以下を組み合わせる。
・ストローク（変化）
・インジケーター（進行具合）
・パターン
・テクスチャ（質感）
・テキスト
これらの要素で、情報やユーザーが必要なアクション（ボタンを押すなど）を識別できるようにする。

●タッチターゲット（ボタンなど）
48×48dp（画面サイズに関係なく約9mm四方）
注：アイコンなどを48dpに目一杯大きくする必要はなく、タッチした場合に反応する仕様のこと。例として、24x24dpのアイコンを中心に配置した48dpのタッチターゲット（周囲に無色の余白がつく）。ボタンも同様。

（参考）
●代替えテキスト
画像を文章で変換する機能を利用した際に使うテキストを入力しておく。（読み上げ機能、画像を表示できないブラウザ向け）
・キーワードを3つ以上含む文章がSEO改善にもなる。
・125字以内で、短く簡潔に。
　（良い例：東京都港区芝公園の夕方のスカイラインビュー）
・SEO改善目的の代替えテキストは読み上げ機能を利用するユーザーを混乱させるため行わない。
　（悪い例：東京、tokyo、日本、japan、ジャパン、寿司、タワー、夕方、夜、建物、建物、空、スカイライン、ビュー）
・「の写真」や「の画像」という言葉は不要。

●画像、キャプション、本文の関係性
画像に関する重要な情報はアクセシビリティを考慮し、画像の近くに載せる。
・画像の長い説明にはキャプション、代替えテキストには125字以内。
・画像の説明を兼ねた本文がある場合、代替えテキストは不要。その場合はaltタグは空のままでよい。（画像のファイル名が入っている場合は読み上げ機能のユーザーが混乱するため消しておく）
・代替えテキストとキャプションは画像に写り込んだ内容（色、サイズ、場所の説明など）が望ましい。
・ユーザーの読者速度を落とさないよう、明確で短い本文を書く。

＊このほか、制御やアイコンに対する代替えテキストも推奨していますが省略します。

●コントラスト比
本質的な要素（重要、必須）と本質的でない要素（非必須）のコントラスト比を考慮する。必須要素はコントラスト比3:1~4.5:1。*

*コントラスト比についてはhttps://calculator.jp/science/contrast/などで計算することができます。（Google Material内で紹介されているリンクではありません）

●モーション（動き）**
モーションに敏感なユーザーが快適に利用できるよう制御機能をつけたり次のような配慮を行う。
・自動で移動、スクロール、点滅するコンテンツが5秒以上続く場合、制御できるようにする。
・フラッシュは1秒間に3回以下。
・広い中央領域を点滅させない。

**モーションについては以下のガイドラインが用意され、動画コンテンツの豊富な利用アイデアが掲載されています。

https://material.io/design/motion/understanding-motion.html

●タイポグラフィー
文字に関するアクセシビリティについてはMaterial Designも参照。
・4dpグリッド（天地）を利用し、4で割り切れる値にする。
・フォントの太さ、書体の違いを理解する。

＊テキストの読みやすさについての詳細はこちらです。
https://material.io/design/color/text-legibility.html

配色は読みやすさを損なわないよう配慮する。
・アプリに明るい色と暗い色の両方の背景を用意する場合はどちらも強いコントラストの色を用いる。
・色背景にグレー文字を使う場合は、黒の不透明度を用いる。
・色付きのテキストは大きな見出しかつ簡潔な短い文に使う。（長文には用いない）

●表の数字
数値が主な表では等幅の数字を用いる。（数字の字幅により単位がずれ、読みにくいため）

●本文（英語の場合）
・通常40〜60字（デスクトップなど幅にゆとりがあり、1行が長くなる場合は行の高さを20sp~24spに増やす）
・行送りはフォントのサイズに比例する。
例：フォントが14spの場合、行送り20dp
　　フォントが20spの場合、行送り28dp
・段落の間隔はフォントサイズの75~125%に保つ。
・配置は左揃えを基本とし、右揃え、中央揃えは本文以外の印象的なシーンのみに用いる。
・システムフォントは14sp未満のテキストに用いる。
（Android：Roboto、iOS：San Franciscoなど）
・GoogleフォントではRobotoでカバーされない言語はデフォルトとしてNotoファミリーが用いられる。

＊こちらでNoto Sansのファミリー書体をダウンロードできます。（日本語Noto Sans JPのサンプルも表示できます。表示例を作成しました。）

fonts.google.com

（参考）
●音
音はユーザーの満足度を向上しながら情報を伝えるのに役立ちます。

以下が音に関するガイドラインになります。
https://material.io/design/sound/about-sound.html

音には効果音、音楽、音声（ボイス）の3つの種類がある。効果音は、特定の要素に特定の音を関連づけることで視覚情報を補足する役割を持つ。音楽はブランド（価値）を向上し、ストーリー性を持たせ、ユーザーの共感を引き出す。ボイスを用い、複雑な内容を簡潔に表現したり、会話や対話を提供する。

以上、参考とした「代替えテキスト」と
「音」に関する項目以外が
デザインに関するものとなります。
内容が幅広いため原文とリンク先の内容が
ひとまとめになってしまいました。

現在世界ブラウザシェアトップのChromeですので
多くのアイデアと幅広い対応力は目を見張りました。
Appleを先に学習したことが大きいですが、
こちらのガイドラインは理解しやすく感じます。

また、気づいたこととしては
アクセシビリティ本来の目的を邪魔する可能性のある
SEO対策があるということです。
マーケティング視点とアクセシビリティ視点との
用途のギャップがあることが残念に感じました。

いちからデザインを起こす際にはこれらを根底に置き
ターゲットユーザーのUXの向上とともに
アクセシビリティの配慮を行いたいと思います。

今回はアクセシビリティ配慮の目線からの
デザインの注意点を中心にまとめましたが
本来、Googleのマテリアルデザインは
UI、UXの向上を目的とした膨大かつ
高クオリティの無償公開情報です。
興味のある方は、ぜひ一度ご覧になっては
いかがでしょうか。
新しいアイデアのきっかけになるかもしれません。