すべての人に届くWebサイトへ。Vol.2｜「見えにくい」「わかりにくい」を、設計で解決する

前回は、Webアクセシビリティの意味と、それがすべての人に向けた設計思想であることをお伝えしました。今回は、その中でも最も身近で、最も改善の効果を実感しやすい課題——「見えにくさ」と「わかりにくさ」を、デザインの力でどう解消できるかを考えていきます。

パソコンの画面をじっと見つめていて、ふと「この文字、なんだか読みづらいな」と感じたことはないでしょうか。あるいは、スマートフォンでWebサイトを開いたら、背景と文字の色が似すぎていて内容が頭に入ってこない、ということも。こうした「見えにくい」「わかりにくい」は、デザインのちょっとした工夫で大きく改善できます。しかも、その工夫は特別な技術や大きな予算を必要としないものがほとんどです。誰かの不便をそのままにしない。私たちは、そうしたやさしい設計の姿勢が、UXデザインの出発点にあると考えています。

色だけに頼らない情報の伝え方

Webサイトにおいて、色は情報を伝えるとても便利な手段です。注意を引きたい箇所を赤くする、成功メッセージを緑で表示する、リンクを青くする——こうした色の使い分けは、多くのサイトで当たり前のように行われています。しかし、ここに小さな落とし穴があります。色だけで情報を伝えてしまうと、色の見え方が異なる方には正確に届かない可能性があるのです。

たとえば、フォームの入力エラーを赤い文字だけで示しているケースを考えてみてください。赤と緑の区別がつきにくい方にとっては、どこにエラーがあるのかがわかりません。これは決して少数の方の話ではなく、色の見え方に特性を持つ方は思いのほか多くいらっしゃいます。

解決策はとてもシンプルです。色に加えて、文字によるメッセージやアイコン、下線、太字など、もうひとつ別の手がかりを添えること。「入力内容をご確認ください」というテキストメッセージを一緒に表示する。エラー箇所にアイコンを添える。リンクには下線をつける。こうした「色プラスもうひとつ」の工夫をするだけで、情報はぐっと確実に届くようになります。色はあくまで補助的な手段であり、唯一の伝達手段にしないこと。この心がけひとつで、サイト全体のやさしさが一段階上がります。

文字サイズと行間が、読みやすさを左右する

Webサイトにおいて、文字は情報伝達の主役です。にもかかわらず、文字の読みやすさが十分に配慮されていないサイトは少なくありません。デザインのスタイリッシュさを追求するあまり、本文の文字が小さくなりすぎているケースは、思いのほかよく見かけます。

文字が小さいとどうなるか。読者はまず「読みたくない」と感じてしまいます。内容がどれほど素晴らしくても、物理的な読みにくさが壁になってしまうのです。特にスマートフォンでの閲覧が主流になった今、小さな画面で小さな文字を追いかけるストレスは、そっとページを閉じてしまう大きな原因になります。

文字サイズと同じくらい大切なのが行間です。文字サイズが十分でも、行間が詰まっていると文章全体が「塊」に見えてしまい、どこを読んでいるかわからなくなります。逆に、ゆとりのある行間が確保されていると、目の動きがなめらかになり、長い文章でも心地よく読み進められます。

また、一行あたりの文字数も読みやすさに影響します。一行が長すぎると、行末から次の行頭への視線移動が大きくなり、読み飛ばしや読み返しが増えてしまいます。文字サイズ、行間、一行の文字数——この三つのバランスを丁寧に整えるだけで、同じ内容の文章でも読みやすさは驚くほど変わります。

コントラストは、見やすさの土台である

背景色と文字色のコントラスト（明度差）は、Webサイトの見やすさを支える最も基本的な要素です。ところが、この基本が十分に守られていないサイトは意外と多く存在しています。

おしゃれな淡いグレーの背景に、わずかに濃いグレーの文字。デザインとしては洗練されて見えるかもしれませんが、少し疲れた目にはとても読みにくいものになってしまいます。画面の明るさや周囲の照明環境によっても見え方は変わりますから、制作者のモニター上では問題なく見えていても、訪問者の環境では読みづらい、ということは十分に起こりえます。

コントラストの確保は、アクセシビリティの中でも最もわかりやすく、最も効果が大きい改善ポイントのひとつです。文字色と背景色の明度差を十分にとること。特に本文のテキストについては、しっかりとした視認性を確保すること。これだけで、サイト全体の「読みやすさ」の印象がまったく変わります。

美しいデザインとコントラストの確保は、決して相反するものではありません。配色の選び方を工夫すれば、洗練された雰囲気を保ちながら、十分な見やすさを両立させることができます。見やすさの土台がしっかりしているからこそ、デザインの美しさが本当の意味で活きてくるのです。

「見えにくい」は視覚障害だけの話ではない

「見やすさ」の改善というと、視覚に障害のある方のための対応と思われがちです。しかし実際には、見やすさの恩恵を受けるのは、もっともっと幅広い方々です。

夕方、疲れた目でスマートフォンを操作しているとき。明るい屋外で画面の反射に苦労しているとき。あるいは、普段は問題なく見えていても、体調や環境によって「今日はちょっと見づらいな」と感じる瞬間。そうした一時的な「見えにくさ」は、誰にでも訪れます。年齢を重ねれば、多くの方が小さな文字への見えにくさを経験されるでしょう。

つまり、見やすさの設計とは、特定の誰かへの配慮ではなく、すべての訪問者に対するやさしさなのです。そしてこのやさしさは、ユーザーの滞在時間を伸ばし、離脱率を下げ、情報をしっかりと届けることにもつながります。

「使いやすいサイトだな」と感じていただけるかどうかは、派手な演出ではなく、こうした地道な見やすさの積み重ねにかかっています。見やすいサイトは、それだけで「丁寧な会社だな」「信頼できそうだな」というあたたかい印象を生むのです。

デザインの美しさと読みやすさは両立できる

「アクセシビリティに配慮すると、デザインが制約されてしまうのでは？」——こうしたご心配の声をいただくことがあります。お気持ちはとてもよくわかります。でも、実際にはその逆で、アクセシビリティへの配慮はデザインの質を高めてくれるものだと、私たちは日々の制作を通じて感じています。

たとえば、コントラストの確保を意識することで、配色の選択がより慎重で丁寧になります。文字サイズと行間のバランスを考えることで、レイアウト全体のリズムが美しくなります。色だけに頼らない情報の伝え方を工夫することで、デザインの表現の幅がむしろ広がります。

制約があるからこそ、創意工夫が生まれる。これはデザインの世界ではよく知られていることです。アクセシビリティの原則は、デザインの自由を奪うものではなく、「本当に良いデザインとは何か」を問いかけてくれるものだと捉えてみてください。

見た目だけが美しいサイトと、見た目も使い心地も美しいサイト。訪問者の心に残るのは、きっと後者ではないでしょうか。デザインの美しさと読みやすさは、対立するものではなく、丁寧に向き合えば必ず両立できるものです。

今日からできる、見やすさの小さな改善

アクセシビリティの改善と聞くと、サイト全体を作り直す大規模なプロジェクトを想像される方もいらっしゃるかもしれません。でも、実際には小さな工夫の積み重ねが、大きな変化を生み出します。

リンクの色を本文の色としっかり区別する。ボタンに十分な大きさと余白をもたせる。画像にやさしい説明文をつける。見出しの階層を整えて、ページ全体の流れをわかりやすくする。こうしたひとつひとつは、どれも大がかりな作業ではありません。

大切なのは、「自分は問題なく見えている」を基準にしないことです。デザインを確認するときに、少しだけ画面から離れて見てみる。文字サイズを拡大した状態でレイアウトが崩れないか試してみる。お手元のスマートフォンで実際に表示してみる。そんな小さな確認を習慣にするだけでも、サイトのやさしさは着実に変わっていきます。

Webサイトは、訪れてくださる方のためにあるものです。その方々が快適に、心地よく情報を受け取れるかどうかは、こうした小さな工夫ひとつひとつにかかっています。完璧を目指す必要はありません。今日できることから、ひとつずつ。それが、見やすく、わかりやすいWebサイトへの確かな一歩です。

記事監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。