Web関連

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

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

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

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

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

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

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

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

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

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

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

配色

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

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

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

 

フォント

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

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

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

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

ネーミング・ラベリング

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

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

画面構成

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

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

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

もう利用した?「omni7(オムニセブン)」から学ぶ前のページ

バレンタイン? なにそれ、美味しいの?次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. AIに求められているものは、実は意外な物だった
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    良い事だらけ!リスク管理は目から鱗ものなのです!

    仕事をしていると失敗をすることがあると思います。同じ失敗を何度かしてし…

  2. Web関連

    切っても切れないデザインと色の話

    こんにちは、デザイナーの角田です。毎年こっそり楽しみにしていること…

  3. Web関連

    メディアミックスとMA(マーケティングオートメーション)の 可能性を考えよう

    皆様は、メディアミックスというワードはご存知でしょうか?ビジネス形…

  4. Web関連

    スマホ利用で注意!新たなフィッシング詐欺

    最近新手のフィッシング詐欺が流行っています。いきなりこのような言葉が目…

  5. Web関連

    イラスト制作における時短への取り組み ~イラストのディレクションをしていて気づいた事~

    働き方改革が謳われるようになってから、様々な業務の効率化が急がれたり、…

  6. Web関連

    作成する資料をちょっと良くできる!デザインの2ポイント

    最近は自粛&自粛で運動不足に拍車がかかっている、デザイナーの松…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    ブログネタがない時におすすめのブログネタ10選
  2. Web関連

    ECサイトの売上を向上させたい 第3回目
  3. Web関連

    【CMS構築】サーバレンタル~WordPress導入編。
  4. Web関連

    アプリを使ってタイムスリップ!昔の上田を見てみよう
  5. Web関連

    Web制作会社ティファナが伝授!飲食店の集客増加のためのWebマーケティング手法…
PAGE TOP