インターネットといえば、若者が利用しているイメージが強いかもしれませんが、実は若者と同じくらいシニアの方も利用しています。
モバイル社会研究所の2024年度における“シニア世代のスマホ所有率”調査では、60代の9割超、70代の8割超、80代前半の6割超がスマホを所有しており、これは、わかりやすいWebサイトやサービスを制作する人がいてこその結果ともいえるでしょう。
では、シニア世代にも使いやすいWebサイトとはどのようなものなのでしょうか？ 今回は、シニアにも子どもにも使いやすい“ユニバーサルデザイン”について解説します。
この記事はこんな人に向いています
この記事では、ユニバーサルデザインを考慮したWebサイトについてお伝えしていきます。
- 仕事で初めて会社のWebサイトを作成することになった人
- 幅広い年代に向けたwebサイトをつくりたい方
- 公共性の高いサービスを扱う企業のwebサイトをつくりたい方
- ユニバーサルデザインの基本を復習したい方
- そもそも、ユニバーサルデザインって何？という方
ユニバーサルデザインとは
ユニバーサルデザインとは「特別な製品や調整無しで、最大限可能な限り、すべての人々に利用しやすい製品、サービス、環境のデザイン」と定義され、下記の７原則が掲げられています。
- どんな人でも公平に使えること
- 使う上での柔軟性があること
- 使い方が簡単で自明であること
- 必要な情報がすぐに分かること
- 簡単なミスが危険につながらないこと
- 身体への過度な負担を必要としないこと
- 利用のための十分な大きさと空間が確保されていること
なぜWebサイトにユニバーサルデザインが必要なのか
前述した通り、シニア世代もほとんどの方がインターネットを利用しています。趣味で利用する場合も多いかと思いますが、生活するうえで欠かせないものになりつつあるというのも事実です。実際にコロナ禍においては、ネットショッピングの機会も増えたという方も多いことでしょう。
また、今までは対面での手続きでよかったものが、インターネットでの手続きに変更されたものもあると思います。 趣味や好みでのショッピングであれば、他のサービスを利用するなどの選択肢もありますが、公共のサービスや代替がないもので「使いづらい」となってしまっては、フラストレーションがたまりますし、それでは済まされない事態となり得るでしょう。
ユニバーサルデザインの７原則
特定の誰かのためではなく、年齢、身体能力、性別、国籍、文化などの違いにかかわらず、すべての人が使いやすいように製品や環境を設計するという考え方です。ユニバーサルデザインには7つの原則があり、これらは、あらゆるデザインにおいて考慮すべき重要なものといえます。
Webサイト制作においても、この原則を適用することで、より多くの人々にとって使いやすいデジタル体験を提供することができるでしょう。
①誰にでも公平に利用できること
②使う上で自由度が高いこと
③使い方が簡単ですぐわかること
④必要な情報がすぐに理解できること
⑤うっかりミスや危険につながらないデザインであること
⑥無理な姿勢をとることなく、少ない力でも楽に使用できること
⑦アクセスしやすいスペースと大きさを確保すること
（出典：国立研究開発法人 建築研究所「ユニバーサルデザイン7原則」）
それぞれ以下で解説していきます。
①公平な利用
どのような能力を持つ人でも公平に、そして等しく利用できるようにすることを目指します。特定のグループが排除されたり差別されたりすることなく、誰もが同じようにアクセスし、利用できるデザインが求められます。
例：
・視覚障がいのある方のために、画像に適切な代替テキスト（alt属性）を設定し、スクリーンリーダーが内容を読み上げられるようにする。
・キーボード操作のみでサイト内のすべての機能にアクセスできるように、タブキーによるフォーカス移動やエンターキーでの操作に対応する。
・聴覚障がいのある方のために、動画コンテンツに正確な字幕や文字起こしを提供するなど
②利用の柔軟性
利用者の多様な能力や好み、ペースに合わせて柔軟に利用できるように設計することです。利用者が自分にとって最適な方法で情報を取得し、操作できる選択肢を提供します。
例：
・文字サイズの変更機能を提供し、利用者が読みやすい大きさに調整できるようにする。
・ダークモード、ハイコントラストモードなど、背景色と文字色のコントラストを調整できるテーマ切り替え機能を提供する。
・音声読み上げ機能や、コンテンツの表示方向（縦書き・横書き）を選択できるオプションを提供するなど。
③簡単で直感的な利用
利用者の経験、知識、言語能力、集中力に関わらず、誰にとっても理解しやすく、直感的に操作できるようにすることです。複雑な操作や専門知識を必要としないシンプルなデザインが重要になります。
例：
・一貫性のあるナビゲーション構造と、分かりやすいアイコンを使用し、利用者が迷わずに目的のページにたどり着けるようにする。
・専門用語の使用を避け、平易な言葉でコンテンツを記述する。
・フォームの入力項目は必要最低限にし、分かりやすいプレースホルダーやヒントを提供するなど。
④分かりやすい情報
これは、利用者の感覚能力（視覚、聴覚、触覚など）に関わらず、必要な情報が効果的に伝わるようにすることです。情報が複数の方法で提示されることで、より多くの人がアクセスできるようになります。
例：
テキストと背景のコントラスト比を十分に確保し、色覚多様性を持つ方や高齢者でも読みやすくする。
・重要な情報は色だけでなく、アイコンや太字、下線など、複数の視覚的要素で強調する。
・動画コンテンツには、音声情報に加えて、同期した字幕や手話通訳を提供するなど。
⑤間違いの許容
利用者が誤操作を最小限に抑え、万が一誤操作した場合でも、その影響が重大な結果につながらないように設計することです。エラーからの回復を容易にし、利用者のストレスを軽減します。
例：
・入力フォームでエラーが発生した場合、具体的なエラー内容と修正方法を分かりやすく表示する。
・重要な操作を行う前に確認画面を表示し、利用者が意図しない操作を防ぐ。
・「元に戻す（Undo）」機能や、操作履歴からの復元機能を提供し、誤操作によるデータ損失を防ぐなど。
⑥少ない身体的負担
利用者が効率的かつ快適に、そして疲労を最小限に抑えて利用できるように設計することです。繰り返し行う操作や、長時間の利用による身体的な負担を軽減するようにします。
例：
・クリックやタップしやすい十分なサイズのボタンやリンクを提供し、誤操作を防ぐ。
・ページのスクロール量を減らすために、コンテンツを適切に分割したり、アコーディオンメニューなどを活用する。
・フォーム入力の際に、自動補完機能や入力補助機能を提供し、入力の手間を省くなど。
⑦利用のためのサイズと空間
利用者の身体サイズ、姿勢、移動能力に関わらず、適切にアクセスし操作できるようなサイズと空間を確保することです。物理的な環境だけでなく、デジタルインターフェースにおいてもこの原則は重要になります。
例：
・レスポンシブデザインを採用し、スマートフォン、タブレット、PCなど、あらゆるデバイスの画面サイズに適応させる。
・タッチ操作を考慮し、ボタンやリンクの間隔を十分に確保し、誤タップを防ぐ。
・コンテンツの行間や文字間隔を適切に設定し、視認性を高めるなど。
ユニバーサルデザインが必要なWebサイトとは
「完全に趣味などでしか利用されない」「ターゲットが若者だけ」とわかっているようなWebサイトであれば、そこまでユニバーサルデザインを意識しなくてもいいかもしれません。
ただ、ターゲットが全世代のネットショップやサービス、ホームページなどでは配慮が必要になります。利用せざるを得ない公共サービスに至っては、ユニバーサルデザインが意識されてないWebサイトは、本来は論外ですよね。
例えば、シニア世代である親が、一人で北海道へ行ってマラソンのイベントに参加し、観光と食事も楽しんだことをSNSで共有したとします。その際、老眼鏡をかけて、スマホを前後させながら一生懸命に画面を覗きこんでいる姿を容易に想像することができます。
さて、このとき、どれくらいインターネットを利用していたかというとー
- マラソンの申し込み
- 宿泊先の申し込み
- 空港までの交通手段
- 現地での交通手段
- 観光地の検索
- SNSにアップ
ざっと、少なくともこれぐらいは利用することが想像できます。では、それぞれにユニバーサルデザインがどのくらい必要か考えてみましょう。
・マラソンの申し込み
マラソンのイベントに参加するためには、インターネットで申し込みを行います。親御さん自身が申し込みを行なっている場合もあるのですが、競争率の高い大会ですと申し込み完了までの時間勝負があり、娘にお願いして申し込みを行なったとしましょう。
マラソンは趣味なため、ユニバーサルデザインがそこまで必要なwebサイトではないのかもしれません。しかし、マラソンのイベントは、意外にシニアの方の参加も多いそうなので、シニアでも使いやすいデザインを意識した方がよさそうです。
・飛行機や宿泊先の申し込み
旅行に慣れている方は、スマホのアプリを使ってサクッと申し込みができると思いますが、シニア世代の方でイマイチ慣れておらず、旅行代理店の店舗で申し込んでいる方も多いかもしれません。
たしかに店舗へ行くと、交通手段と宿泊先をセットで手配してくれるため、とてもラクなことでしょう。 シニア世代に限らず、若い方でも旅行の申し込みとなると、どの予約サイトが便利なのかがわからず、ブラウザで検索するところからスタートするという方もいらっしゃるかもしれません。
広告で表示されるものがよいのか、自然検索で表示されるサイトがいいのか、いろいろチェックした後に「わからない！」となってしまいまったことはありませんか？
「旅行の予約サイトって、どのサイトも似たような構造でわかりづらい印象」ということを何度が耳にしたことがあります。
・空港までの交通手段と現地での交通手段
これは調べることが単純なぶん、スマホのアプリもわかりやすいため、そこまで困ることはないかと思われます。初めての土地でも、現在地から目的地まで地図アプリで検索すれば、おすすめの交通手段まで表示されることでしょう。
ブラウザで目的地の名前を検索すれば、その場所の地図や経路の案内も簡単に見られるようになりました。
・観光地の検索
今となっては、「観光ガイドを片手に、観光する」なんて、ちょっと懐かしく感じるものです。それはそれで趣がありましたが、ガイド本は荷物になるため、スマホでなんでも検索できるようになった今、便利な時代になりました。
ほとんどのショップやサービスがwebサイトを持つようになり、ユーザー側からすると便利な世の中になったものの、運用側からすると“競争率の激化”で大変な時代ともいえます。
ユニバーサルデザインへの対応は、優良なWebサイトだと認識されやすくなり、SEO対策にもなります。ターゲットや利用シーンだけを考えると、必ずしもユニバーサルデザインが必要ではないように思われますが、SEO対策にもなると考えると積極的に取り組みたいものです。
ユニバーサルデザイン対応Webサイトのポイント
では実際に、どのようなポイントに気をつけたら使いやすいWebサイトになるのでしょうか。
・文字の大きさ
文字や文章の読みやすさは、可読性や視認性、判読性という３つの要素で構成されています。文字の大きさはこれらの要素に大きく関係しているため、一般的に本文の文字サイズは14〜16pxがよいと言われています。
・フォントの種類
大きければそれだけで読みやすいかというと、そうではありません。パッと見て文字を視認できるか、文字を誤認することなくスラスラ判読できるかがとても大切です。
そのためにユニバーサルデザインを考慮してつくられたUDフォントというものがあります。日本語は特に似たような文字が多いため、なるべく視認、判読しやすいフォントを選びましょう。
・色
加齢によって、小さい文字を読みづらくなるというのはイメージしやすいかと思うのですが、実は色の見え方にも変化があると言われています。
また、加齢に関係なく、色の見え方が一般とは異なる方もいらっしゃいます。そのような方たちも見やすいように、こちらもユニバーサルデザインを考慮した「カラーユニバーサルデザイン」というものがあります。
自治体がガイドラインを作成し、公共施設の使いやすさに取り入れています。カラーユニバーサルデザインに向けた取り組みや工夫なども書かれてあるので、ぜひ一度ご覧ください。
・色の見え方チェック
色について、カラーユニバーサルデザインというガイドラインがあるとお伝えしましたが、Photoshopを使用すれば「表示」→「校正設定」から「P型（1型）色覚」もしくは「D型（2型）色覚」を選択するだけで、P型色覚者、D型色覚者に見えている世界を簡単に再現することができます。
ホームページを制作する際は、すべての人が読みやすいWebサイトづくりができているか、しっかりとチェックすることが大切です。
・わかりやすいナビゲーション
初めて見るWebサイトだと「使い方がわからない」ということもあるかと思います。目的のページを見るのにどのボタンを押せばいいのか、サイト内の遷移や外部サイトへのリンクなどを探さなければならないことも…。
誰もが使用しなければならないような公共サービスのwebサイトはもちろんのこと、少しでもユーザーを増やしたいWebサイト運用者は、わかりやすいナビゲーションを意識する必要があります。
・過度なカタカナ語は避ける
日本語には、たくさんの外国語がカタカナで表現されて日常になじんではいますが、話し言葉だとわかるものの、カタカナ表記だと読みづらく、判読するのに時間がかかったり意味を理解するのに時間がかかったりすることがあるかもしれません。
読みづらさはWebサイトの離脱に繋がります。一般的なカタカナ語以外の使用は避け、できるだけ視認、判読しやすい常用漢字を使用しましょう。
また、お子さま向けのサイトであれば漢字を避け、ひらがなにしたりなどの配慮も必要です。
ユニバーサルデザインのWebにまつわるよくある質問
Q.ユニバーサルデザインとアクセシビリティの違いって？
よく混同されますが、両者は似て非なるものです。ユニバーサルデザインは「年齢・障害・環境にかかわらず、最初から誰もが使いやすい設計を目指す考え方」で、アクセシビリティは「障害や制約のある人が利用できるように工夫する取り組み」です。Webサイトではこの2つを組み合わせることで、より多くの人にとって快適な体験を実現できます。
Q.SEOや集客にも効果がある？
実は大きくあります。検索エンジンは「きちんと意味づけされたテキスト情報」を重視するため、代替テキストや見出し構造の最適化はSEOに直結します。また、わかりやすく使いやすいUIは直帰率を下げ、サイトの滞在時間を延ばし、結果としてコンバージョンにもつながります。
Q.どんな工夫をすればよい？
ユニバーサルデザインといっても難しい特別対応ばかりではありません。例えばこんな工夫はすぐに始められます。一見細かいことですが、積み重ねが大きな差を生みます。
- 読みやすい文字サイズと余白の設定
- 色覚多様性に配慮した配色（色だけで強調しない）
- 画像に代替テキスト（alt）を入れて内容を説明する
- キーボード操作だけでも使えるメニュー設計
- スクリーンリーダー対応を意識した見出しタグの構造化
「シンギ」へお気軽にご相談ください！
今回は、さまざまな例を挙げながら、Webサイトのユニバーサルデザインについてお伝えしました。とにかく「誰にでも見やすい！使いやすい！」ことは、とても大切です。とはいえ、これだけのことに配慮しながらWebサイトを制作・運用していくには、自社内のみで行うのは大変です。
シンギでは、ユニバーサルデザインに配慮したデザインのご相談も承っています。
新たな事業をはじめるにあたり、Webサイトの制作を予定されている方、既存のWebサイトのスマホ対応を早急に進めたい方など、お客様の状況に合わせて対応できるよう、Webサイトやオンラインシステムの企画・制作・運用をプロジェクトベースで行なっております。
また、初期費用なしで月額15,000 円〜で始められる「定額Web制作サービス」を提供しておりますので、ご相談・お見積もり・ご質問等ございましたら、お気軽にお問い合わせください。
