ビジュアルデザイン

開発・運用

要件定義とデザインガイドラインなどのレギュレーション、情報設計のワイヤーフレームに基づいてデザインコンセプトを設計し、配色・フォント・画像などのビジュアル要素や、ページのレイアウト、インタラクティブな要素を具体化したモックアップを作成する工程です。

まず前提として全盲など視覚的情報を享受できないユーザーがいることを念頭に置きます。 加えて、色覚特性やロービジョン、識字障害など、視覚や認知特性によって、視覚から充分に情報を得られなかったり、認知することが難しいユーザーを考慮することが必要です。 また、このような視覚的情報を得にくいユーザーがスクリーンリーダーなどの支援技術を利用しているとは限りません。代替テキストなどを用意するだけでは、こうしたユーザーが情報にアクセスできないままになりがちなことに注意してください。
注意点をまとめると以下のようになります。

• カラーコントラスト比を適切に確保し、配色する
• 色のみによって情報を伝えない
• 画像化されたテキストを使わない
• アニメーションを含む動きのある表現を適切に扱う
• フォーカスなど操作に関わる表現を隠したり消したりしない

文字と背景、またはボタンなどのインタラクティブ要素と背景の境界でカラーコントラスト比を一定以上に満たすことで、それらが識別しやすくなります。

WCAGの計算式に基づいたコントラスト比を計測するチェックツールとしては、Colour Contrast Analyzerがあります。ほかにもさまざまなチェックツールがありますが、WCAGの計算式とは異なる方法で計測しているものもありますので、ツールを選択する場合には注意しましょう。

文字が画像化されていると、文字の色の変更やフォントの変更が出来ません。HTMLとCSSでビジュアルが再現可能な場合は文字は画像化せず、テキストとして扱うようにしてください。ただし、ロゴなどのように特定の色やフォントでないと表現が成り立たない場合はこの限りではありません。

ウェブページにアクセスすると自動的に開始し、5秒以上続き続けるアニメーションや動画など動きのある要素には、ユーザーが自由に操作できる一時停止ボタンや再生ボタンを用意します。
注意欠陥障害を持つユーザーが、動きのある要素以外を見たくても注意がそちらに向かってしまうことを防ぐためです。また、アニメーションや動画、カルーセルなどは大量の情報を持つことが多くあります。ユーザーが情報を確認する速度にあわせてコンテンツを表示できるようにするためにも、再生・停止する機能は必要です。

ビジュアル表現で閃光や点滅の効果を用いる場合は、より注意が必要です。光過敏性発作をもつユーザーにとって閃光や点滅は見た瞬間に症状を引き起こすため、回避することはほとんどできません。そういった表現を用いる場合は、慎重に検討する必要があります。