デザイナーとして日々考えるウェブアクセシビリティとデザインの関係

はじめに

こんにちは！
株式会社コムデのデザイナー丹野です。

この度は記事作成を担当させていただくにあたり、初心に立ち帰り、デザイナーとして心がけていることを具体的に記録することにいたしました。
普段行っているデザイン業務において、絶対に考え続けるべきことは何なのか。
ありとあらゆる案件に対応しなければならない中、必ず気をつけるべきことは何なのか。

私は使用者の目線に立つことだと考えています。
そのうちの一つに、ウェブアクセシビリティという言葉が存在します。
今回はウェブアクセシビリティとデザインの関係と両立について考えていることを記事にさせていただきました。

ウェブアクセシビリティとは

高齢者や障がい者を含め、誰もがウェブ上のサービスを利用できること

あらゆる人々がウェブサイトで提供されている情報やサービスを利用できること、またその到達度を意味します。デジタル庁によるガイドラインも発行されており、下記より確認することが可能です。

デジタル庁発行　ウェブアクセシビリティ導入ガイドブック

上記にて細かく説明されている通り、ウェブアクセシビリティは現在多くの人に必要とされ、その実現に向けて各企業、各クリエイターの努力が求められています。

では上記に従って制作を行えば、顧客やユーザーが満足するデザインが完成するのか？というのが難しい問題となっています。
具体的にデザイン面ではどのような工夫がなされているのかを一部、ご紹介いたします。

具体的な実践内容

コントラスト比の確保

主に視力に障がいを持つ方や高齢者の方にとって、画面上の情報にまず求められるものが「可読性」です。しかし、さまざまな色で構成されるデザインにおいて一体どうやって可読性を常に確保するのか。それを解決するためによく私が利用しているのが「コントラストチェッカー」です。
ブラウザ上で使用でき、カラーコードを入力するだけで隣接する色の可読性が基準値に達しているのかをチェックしてくれます。例えば下記の2色では十分な可読性が確保できないと表示されています。

ALT要素の正しい活用

次に、デザインから少し外れますが、ALT要素の正しい活用により、コンテンツリーダー（視覚障がい者向けの読み上げ機能）を利用するユーザーにコンテンツの詳細情報を音声でより正確に伝えることができます。
ウェブページにおいては画像タグに付随してALT要素を追記することで、画像を視力によって確認できない方のために「何が表示されているか」を説明することができます。
SNSでも一部利用できる場合があり、投稿した画像に対する情報を文字で登録することが可能です。こちらはデザイナーではない人にも今日から始めることのできるアクセシビリティへの第一歩ですので、ぜひご活用ください。

リンクのわかりやすさ

リンクテキストやボタンの部分については、クリックできるということがわかりやすい状態（クリッカブル）にすることを求められます。
リンクテキストに下線を引くだけではなく、そのリンク先が何を示すものなのかをテキストや、マウスオーバー時のテキスト表示などによっても説明します。
特に商品の注文や契約に直接関与するリンクについてはよりわかりやすく、何のための要素であるのかを理解してもらう必要があります。

ヒートマップ

マーケティングの要素も含みますが、ウェブページのアクセス解析方法の一つに「ヒートマップ」と呼ばれるものがあります。
公開したページのアクセスを解析する方法の一つで、よりクリックやタップ、カーソルや指で触れられることの多かった部分が赤くなって表示されます。温度変化の可視化と同様の見え方になるため、ヒートマップと呼ばれます。

下記のようにページの中でよく触れられている＝アクセスされている部分が赤く表示されるため、リンクを設置しているのにこうした反応が薄い部分は、リンクの視認性が低い可能性があります。

フォームの利便性

お問い合わせフォームなど、ユーザーからの入力など多くの操作が必要になる画面では、より視覚的、感覚的なわかりやすさが必要とされます。さらには、ユーザーがかける手間を少しでも少なくするための工夫を考慮しなければなりません。
例えば、住所は郵便番号を入れることである程度自動入力されたり、選択肢の限られる回答についてはプルダウン式やチェックボックス、ラジオボタンなどを用いて極力キーボードによる直接入力の手間を減らします。
また、入力エラーが発生した箇所にはわかりやすく何がエラーになってしまったのかを見やすい文字で視認できるような画面表示が必要です。

障がいを持った方や高齢者の方に関わらず、こうしたアクセシビリティの向上・改善はサービスにおいて利益創出につながります。「ストレスなく使用することができる」当たり前のように思えることですが、そのために凝らされている工夫は多岐に渡り、とても複雑です。
デザイナーはサービスの目的を踏まえた上でこうした基本的な構造について「使う人の目線に立って」デザイン制作を行うことを求められる時代となりました。

最後に　デザインとアクセシビリティの間にあるもの

今回ご紹介させていただいたウェブアクセシビリティへのアプローチはほんの一例に過ぎず、またガイドライン上で紹介されていることだけが正解ではありません。
私たちは日々さまざまなお客様と出会い、それぞれがユーザーに届けたい思いを受け取って形にしています。コミュニケーションの取り方ひとつとっても絶対の正解というものはなく、日々学びながらより良いものを作っていくためにできることを模索しています。

その中で直面することの多くが「使いやすさだけがデザインではない」という事実です。ユーザーのために用意されているものなので一定の利便性を当然確保しつつ、それぞれのクライアントの持つ理想とは、使いやすさだけではありません。

それはブランディングやマーケティングといった領域にも関する話となり、別の機会にまたお話できればと思いますが、アクセシビリティだけを追い求めるのがデザイナーの正解ではないということが、私たちの日々の課題の一つです。

ブランドの特色を尊重したり、ユニークな視覚効果を用いたり、「表現」の幅は無限にあるようでいて、それをクライアントの思う通りの形で享受できる人を少しでも多く増やすことは決して簡単なことではありません。
議論を重ねた結果、ビジュアルのクォリティよりアクセシビリティを重視してデザインの希望を変更されるお客様もいらっしゃいます。しかし、デザイナーとしての知識や立場に頑なになって、お客様に寄り添うことができなければお客様は理想を形にできないまま不満を持ってしまうかもしれません。
互いに持っている視点を合わせて目的の達成へ向けて進んでいくのは、一人でできることではありません。

ディレクターやエンジニア、クライアントの皆様にももちろん支えられながら、ひとつのサービスが形となっていくことを改めて実感します。

私たちは「誰の思い」を「どんな人たち」に「どんな形」で届けようとしているのか。
コムデとしてそのためにどんなことができるのか、それを考えるために必要なのは多くの人の視点であると見つめ直す良い機会となりました。

今回お話したこともまた、ひとつの視点として読んでいただいた方にとって何かを感じられるものとなっていれば幸いです！