webアクセシビリティをUP│web制作会社のwebデザイン関連コラム

Columnコラム

Webデザイン

webデザイン目線で、webアクセシビリティをUP!させましょう

webデザイン目線で、webアクセシビリティをUP!させましょう

2016/02/02
このエントリーをはてなブックマークに追加

こんにちは。
育児に家事に大忙しのディレクター、望月です。

近年、Webアクセシビリティが再度注目されるようになってきました。今からちょうど7~8年前には、障害者向け・高齢者向けの対応が主な目的という印象が強かったと思います。

現在のWebアクセシビリティは、どちらかというと、スマホやタブレット普及によるマルチデバイス対応、アプリケーションのインターフェース対応が主流になってきています。 それぞれ、利用するユーザーの年齢や環境は異なりますが、基本的な考え方は同じだと思っていますので、ここで再度、基本のアクセシビリティについて、Webデザインのポイントを挙げていきたいと思います。

Webアクセシビリティの考え方

Webアクセシビリティとは、誰にとっても使いやすいサイトを目指すための「わかりやすさ、使いやすさ」のことです。

日本では、以前から JIS X 8341-3 という規格がありましたが、現在は WCAG(Webコンテンツアクセシビリティガイドライン)にのっとった形でガイドラインを制定しています。

アクセシビリティを高める方法はたくさんありますが、今回のコラムでは、WebアクセシビリティのうちWebデザインに絞って、解説していこうと思います。

Webデザイン制作する上で、Webアクセシビリティを意識するポイント

今回は、WebサイトをWebデザインする際に注意すべきポイントを、以下の4つの要素で考えていこうと思います。

・配色 ・フォント ・ネーミング、ラベリング ・画面構成

配色

まずは配色です。情報の重要度を差別化する場合や、文字の視認性を高めるには、配色がとても重要になります。 また、一見問題無さそうな色の組み合わせも、色盲の方が見ると見えづらいというパターンも起こりえます。

Photoshopの最近のバージョンには、色盲の方から見える色のシミュレーションが出来る機能が標準でついています。病院や、様々なユーザーが利用する公共団体のサイトでは、このあたりの検証もひととおり行っておいた方が良いでしょう。

また、iPhone などのスマートフォンで簡単にチェックできるアプリもあります。こちらもオススメです。

2015_1220_1.png

フォント

Webデザインの個性を出す上で、フォントは重要な要素となります。 ただし、Webデザインコンセプトに適切なフォントでも、小さかったり線が細かったり、そもそも読みづらくなってしまっては意味がありません(あえてそういう効果を出すという場合もあるかもしれませんが、それは文字というよりWebデザイン上の演出ですね。)

一般的に、小さい文字はゴシック体の方が適していると思います。特に、10~12pxなどの小さい文字を表現する場合は、最終的に標準のフォントを使った方が実は見やすい、という形に落ち着くことが多いです。メイリオ、ヒラギノ(昔はMSゴシック)などです。

スマートフォンでは、とても高精細なモニタが搭載されているので、細かい文字もはっきり表示しますが、PCの場合、小さくて細い線は潰れてしまいます。明朝体は、文字の中に太さの強弱が発生しますので、ゴシック体に比べると可読性は落ちます。

また行間も大事です。文字がはっきり見やすくても、行間が詰まっていると、目線の動きが定まらず、読みづらいテキストになってしまいます。

ネーミング・ラベリング

ネーミング・ラベリングも大事な要素です。Webはインタラクティブなメディアなので、ユーザーがどう利用するかを考えたラベリングを考慮する必要があります。

コンテンツ内容とタイトルが違っていてはそもそも使いづらいですが、例えば、ナビゲーションに「会社概要」とあるのに、クリックして中に入るとサービスや製品に関する情報しか掲載されていないのであれば、不親切です。確かにサービス内容も会社の情報には違いないですが、コーポレートサイトの場合、通常イメージする会社概要とは違います。
また、外部サイトへのリンクは「外部サイトへ移動します」などの説明が必要であったり、ユーザーの手間を省くガイドが必要な箇所もあります。

画面構成

Webサイトの場合、コンテンツをレイアウトする際、通常は左上から右下に向かって重要なコンテンツを順番に掲載します。ブログやコラム、論文や解説などの読み物の場合、読み進める順番に掲載していきます。

ただしここで気をつけるのは、ソースコード上でも、順番どおりに記載するという点です。

画面構成の都合上や、Webデザインの演出によって、意図的にコンテンツの配置を、順番とは違った形(もしくは並列)に配置するデザイナーもいるかもしれません。またSEO対策として、ソースコード上と見た目の順番を変えている場合もあると思いますが、読み物としてのWebでは、読み進める順番どおりにコンテンツやソースコードを記載するようにしましょう。

音声読み上げソフトやブラウザで表示する場合も、ソースコードの上から順番に読み上げていきます。そういった面でも、きちんとした順番で情報を掲載することを心がけていきましょう。


いかがでしょうか。デザイナーはつい、見た目のこだわりや自分の考えを第一に考え、ユーザーの使い勝手を後回しにしてしまいがちですが、Webサイトのゴールや、ターゲットユーザーを考慮し、使いやすくわかりやすいWebデザインを心がけていきたいと思います。

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

text_totop