[日本語]マテリアルデザイン 『Text legibility』#15
はじめに
今回は『マテリアルデザインガイドライン』の『Text legibility(テキストの読みやすさ）』について解説していきます。なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。
読みやすさの基準
マテリアルデザインにおける全てのテキストは、WCAG(Web Content Accessibility Guidelines)2.0と呼ばれるWebサイトのアクセシビリティのガイドラインの「レベルAA(ダブルエー)」の基準を満たしている必要があります。
WCAGでは、以下の画像のように「テキストと背景のコントラスト比」など、マテリアルデザインにおける「Accessibility」の詳細について詳しく書かれています。詳しくはコチラをご確認ください。
テキストの背景について
カラー背景の上に表示するテキスト
マテリアルデザインでは、「明るい背景には黒のテキスト」、「暗い背景には白のテキスト」を使用することが推奨されています。
アプリにライトテーマとダークテーマの両方がある場合は、テキストが各テーマに対して対照的な色であるかを確認します。
テキストの不透明度
カラー背景では、グレーのテキストやアイコンを使用せず、不透明度を下げた「ブラック」もしくは「ホワイト」のテキストやアイコンを使用することが推奨されています。
たとえば、緑の背景に 75% の不透明度で表示された黒のテキストは、緑がかった黒の外観になります。
また、不透明度を使用せずにテキストカラーを反映する場合は、
次のようにしてテキストの色を計算できます。
① 緑の背景の前に、不透明度を下げた黒を配置します。
② 表示された濃い緑色のカラーコードの値を特定します。(スポイドツールなどを使用)
③ 特定したカラーコードの値をテキストに反映します。
明るい背景上の暗いテキスト
明るい背景上に表示する暗いテキストには、次のように、「強調度」に応じて、不透明度を適用します。
強調度の高いテキストの不透明度は 87%
中程度の強調テキストの不透明度は 60%
操作無効なテキストの不透明度は 38%
カラーテキストと背景
「カラーテキスト」は、注意を引き、内容を強調するためには効果的ですが、「読みやすさ」を考慮し、慎重に検討する必要があります。
(右)カラーテキストは、長い本文では読みにくい場合があります。
テキストの種類
Helper text | ヘルパーテキスト
ヘルパー テキストは、『入力するエリアにどのように何を入力すればよいか』を示します。
「Helper text」には以下のようなカラールールがあります。
ブランド カラーも使用できますが、その際はWCAG 基準で定められているように読みやすいものにする必要があります。
強調: 87% の不透明度で #000000 を使用
デフォルト: 60% の不透明度で #000000 を使用
エラー : 100% の不透明度で #B00020 を使用
選択したテキスト
「選択状態のテキストカラー」は、読みやすく、背景色と対照的である必要があります。
コントラストについての詳細については、こちらをご覧ください
アイコンとその他の記号
アイコンやその他の要素は、WCAG の読みやすさの基準を満たす必要はありませんが、機能を示したり、情報を伝えたりするために、できるだけ目立つようにする必要があります。
マテリアルデザインではアイコンを見やすくするために、以下のような不透明度の適用が推奨されています。
アクティブなアイコンの不透明度は 87%
非アクティブなアイコンの不透明度は 60%
無効化状態のアイコンの不透明度は 38%
まとめ
今回は、マテリアルデザイン 『Text legibility』についてまとめました。
テキストの読みやすさについて考慮した配色はUIデザイナーにとって、とても大切な知識だと思うのでしっかり頭に入れておきたいですね。
いつか、WCAG2.0(Webサイトのアクセシビリティのガイドライン)についてもまとめていけたらと思います!
今回も最後まで読んでいただいた皆様、ありがとうございました!⭐️
何かしらお役に立てましたら幸いです。