Web関連

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

0

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

近年、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デザイン

0

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

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

ピックアップ記事

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

関連記事

  1. AIさくらさん

    GAFAは知ってた。じゃあBATHは?

    GAFA(ガーファ)ってすごいですよね。「Google」「Amaz…

  2. Web関連

    実現も目前!?人工知能が活躍する時代!

    今回は世界的な家電や情報通信などの総合展示会で知られる「CES2016…

  3. Web関連

    騙されるな!ネットのデマで人が死ぬ時代。デマに振り回されないために

    大量買いしましたか?トイレットペーパー。26度の白湯飲んでみちゃっ…

  4. Web関連

    動画コンテンツは一般ユーザーには響いてなかった!

    いきなりですが、御社はホームページに動画コンテンツを取り入れようと考え…

  5. Web関連

    web制作会社が提案する最適なweb動画配信方法

    最近就寝前に世界遺産の風景映像を見ることにハマっております!就寝前…

  6. Web関連

    2015年夏流行る?おしゃれな手法を使ったサイト

    今回は今年流行するかも?という新しい手法を使ったおしゃれなWebサイト…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    DMPと3PASってなんだろう
  2. Web関連

    売れるキャッチコピーを作る法則とは…
  3. AI関連

    大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. Web関連

    最近流行のゴーグルみたいなアイツ
  5. Web関連

    テレワークはじめてみた
PAGE TOP