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

関連記事

  1. Web関連

    【Webマーケッター必見】Webサイトへの流入数が増えるとお問い合わせ数が減った?

    #目次___- Webサイトへの流入数が増えるとお問い合わせ数…

  2. SNS関連

    【オラクルSRM】SNSを活用して自社の売上アップ

    「ソーシャルリスニング」という言葉を皆さんご存知ですか?日本で…

  3. Web関連

    とっても効果的!Facebook広告の活用メリット

    超有名SNSのFacebook。ページを開設する企業側のメリッ…

  4. Web関連

    ブランドの力ってスゴイ ~百味ビーンズに見る、ハリー・ポッターのブランド力

    突然ですが、「百味ビーンズ」ってご存知でしょうか。かの有名な「ハリー・…

  5. Web関連

    ア ナ タ ハ ソ コ ニ イ マ ス カ? ネット上にさまよう死者のアカウント

    亡くなった後もTwitterで上でツイートし続けるといった、怪奇現象…

  6. Web関連

    アクセスログ解析が苦手な人に朗報!?簡単に解析&改善が出来てしまうサービスを紹介します

    Web担当者なら誰しもが通るであろう道、アクセスログ解析。それをきち…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Webシステムを安く、早く、便利に使えるASPサービス
  2. Web関連

    こんなのあったの・・!?驚愕のアプリ集
  3. AI関連

    スマホサイズの翻訳機など、AI(人工知能)を活用した最新自動翻訳サービス
  4. Web関連

    【Web制作会社が教える】10分でわかる!?フラットデザイン実践のポイント
  5. Web関連

    採用希望者数を増加させたい
PAGE TOP