視覚障害を経験しない場合、他の人がどのようにデザインを見るか想像するのは難しいことがあります。 Webflowのビジョンプレビューを使用して、デザインが視覚障害のある人にどのように見えるかをおおよそ推定し、重要な情報を見落とさないようにすることができます。
注意: ビジョンプレビューはSafariでは利用できません。代替として、ビジョンプレビューはFirefoxとChromeブラウザで使用できます。
このレッスンで学ぶこと
レッスンに入る前に、以下の例はおおよそのものであることを覚えておいてください。多くの要因が、他の人があなたのサイトをどのように認識するかに影響を与えます：
- あなた自身の視力
- 照明
- 画面の輝度調整
- オペレーティングシステム
- その他
全体として、正確な視力やハードウェアのセットアップに依存しないベストプラクティスを考えることが重要です。
ビジョンプレビューへのアクセス方法
previewオプションにアクセスするには、Designerの上部にあるCanvas settingsをクリックします。
Canvas settingsモーダルの下部から、プレビューする視覚障害のタイプを選択します。
以下から選択できます：
- 赤緑色盲（Red-green color blindness ）（緑弱、緑盲、赤弱、赤盲のプレビュー）
- 青黄色盲（Blue-yellow color blindness）（青弱、青盲のプレビュー）
- 完全なスペクトルの色盲（Full spectrum color blindness）（色弱とモノクロームのプレビュー）
- 焦点の障害（Focus impairment）（ぼやけたビジョンのプレビュー）
選択した視力障害は、 Canvas settings.の右側にアイコンで表示されます。
視覚障害者の視点からデザインのプレビューを停止するには、Canvas settingsをもう一度クリックし、視覚プレビューを「None」に変更します。
カラー依存のUIを避ける方法
システムが正常に機能している場合は緑色で表示され、システムが故障している場合は赤色の色調で表示されるようなインターフェースを設計したとしましょう。
ビジョン・プレビューを使って、さまざまな視覚障害でこのインターフェースがどのように見えるかをチェックしてみましょう：
- デザイナーの上部にあるCanvas settingsをクリックします。
- Vision previewの下にあるドロップダウンメニューをクリックし、プレビューするビジョン障害を選択します（例：Green blindとRed blind）。
ビジョンプレビューは、カラーに依存したユーザーインターフェイス上で緑盲と赤盲の視覚障害をシミュレートします。
Vision previewを使用した後、緑と赤の色値が互いにそれほど異なって見えないことが明らかになります。これが意味を伝えるために色に依存することの問題です。たとえば、機能と故障を示すためにシンボル（例：「x」または「チェックマーク」）を追加することの方が効果的である可能性が高いです。
シンボルを追加することで、意味を伝えるための色への完全な依存を減少させることができます。
金融トラッカーは、これを非常にうまく行います。彼らは色を使用しますが、株価が上昇または下降したかを示す上向きまたは下向きの矢印（またはプラスまたはマイナス）によって伝える主要なアイデアを強調するためにのみ使用します。
インターフェイスに色は使えないという誤解があります。例えば、インターフェイスに赤や緑の色を使うことはできますが、サイト訪問者に重要な情報を伝えるのに色だけに頼らないことが重要です。その代わりに、テキスト、図形、シンボルも使って（色の選択と一緒に）意味を伝えるようにしましょう。
必要な情報を伝えるために、インターフェイスに色と一緒にシンボルを使うことができます。
色覚異常のシミュレーション方法
色覚異常の訪問者があなたのデザインをどのように認識するかを示すために、以下の例は実用的ではないかもしれませんが、色の違いに依存する意味のあるコンテンツがどうなるかを素晴らしく実演しています。
意図されたコンテンツは数字を明確に表示するはずです。
上の例のように、円の中の数字が読みやすいのが理想的です。
数字と円がカラーで表示されると、数字はカラフルな円の背景にほとんど溶け込んでしまいます。
色覚異常をシミュレートすると、数字は読み取り不可能になります。
グリーンブラインドをシミュレートすると、カラフルな数字や円が判読できなくなります。
カラフルな数字と丸は、赤色失明をシミュレートすると判読できなくなります。
ブルーブラインドネスをシミュレートすると、カラフルな数字や円が判読できなくなる。
そのため、さまざまな視力条件のもとで、画像内のコンテンツがより視覚的にアクセスしやすくなっているかを定期的にチェックすることが重要です。
デザインの読みやすさを評価する方法
また、デザインの読みやすさを近似することも重要です。以下では、読みやすさに関する問題を示す例をいくつか見ていきます。
- 薄いフォント
- ブラウザのズーム時のタイポグラフィスケール
- 不明瞭なUI
薄いフォント
たとえば、初めて見たときには問題ないと思われる薄いフォントの段落があるかもしれません。しかし、それがどのようにぼやけた視界のある人に見えるかを近似すると、薄いフォントは読み取れなくなります。ほとんど消えてしまいます。
段落内の細いフォントは、最初は許容範囲に見えるかもしれないが（左）、ぼやけた視覚をシミュレートすると（右）、判読できなくなる。
判読しにくい段落を修正するには、より判読しやすい太い書体を使う（例えば、フォントの幅を太くする）。
ぼやけた視界をシミュレートしても、太いフォントは読みやすい（右）。
書体を太いものに変えたので、ビジョンのプレビューに戻り、更新された段落が目のかすんだ人にどのように見えるかを概算すると、より読みやすくなります。
ブラウザズーム時のタイポグラフィのスケール
より細いフォント、またはさらに細いUI要素は、時には見やすさに欠けることがあります。実際、多くの人がブラウザでズームの割合を増やして、閲覧体験をより読みやすくしています。
そのため、特に意味のあるコンテンツに関しては、ビューポートの幅に基づいてテキストがスケーリングされるような相対単位である「VW（ビューポート幅）」の使用方法に注意することが重要です。
VWをタイポグラフィに使用する際の目標は、ビューポートの幅に基づいてテキストをスケーリングすることです。次の例では、幅がスケーリングされるにつれて、すべてのテキストが大きくなる（または小さくなる）のが期待されます。
VW単位を使用したタイポグラフィは、ビューポートの幅が縮小または拡大するにつれてサイズが変化します。
ただし、テキストを拡大してテキストをより読みやすくするためにブラウザをズームする場合、タイポグラフィにVWを使用すると問題が発生することがあります。
たとえば、タイポグラフィにVWを使用する場合、ブラウザをズームして他のコンテンツが拡大するとしても（たとえば、画像が大きくなる）、テキストのサイズは変わりません。これは、VWを使用したタイポグラフィがスケーリングを決定するためにビューポートの幅を依存しており、ブラウザのズームはビューポートの幅を変更しないためです。
VWユニットを使ったタイポグラフィは、ブラウザをズームしてもサイズが変わりません。(この例では、ブラウザのズームは100％に設定されています）。
ブラウザがズームされても（例：175％）、VWユニットを使用したタイポグラフィはサイズが変わらないため、ビューポートの幅が変わっていないからです。
ブラウザのズームが増加するにつれてテキストを拡大させるには、タイポグラフィのサイズをEM、REMS、またはピクセルの単位を使用するように設定します（特に意味のあるコンテンツにとって重要です）。
不明確なUI
ユーザーインターフェースもアクセシブルであることが重要です。次の例では、Visionプレビューでぼかしのビジョンがオンになっている場合、サイト訪問者が取る必要がある行動が明確ではありません。
ぼやけた視覚のプレビューをオフにして拡大すると、邪魔なポップアップを閉じるための小さくて薄い「x」が見えます。これは、単に悪いユーザー・インターフェイスを生み出すだけでなく、読みにくい、あるいは使いにくいユーザー・インターフェイスを生み出すデザインの選択の好例です。
