![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/212e7696947a47648f50bc49be05c384/Group%20541.png?w=1200&fm=webp)
デザイン
更新日: 2024/3/1
アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!
![character_balloon](/media/character/blue_normal_left.png)
アクセシビリティって何か知ってる?
もちろん、知ってるよ!
![character_balloon](/media/character/yellow_normal_right.png)
アクセシビリティっていうのは、サービスとか製品の使いやすさを表す言葉だよ!
![character_balloon](/media/character/yellow_normal_right.png)
じゃあ今回は、アクセシビリティについて解説していこうかな
![character_balloon](/media/character/yellow_inspiration_right.png)
概要や実際の例、Webサイトのアクセシビリティを高める場合に、どこを改善した方がいいかについても紹介するから、参考にしてみてね!
![character_balloon](/media/character/yellow_inspiration_right.png)
アクセシビリティとは
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/b7502b1af08b44458ce6042ed847f7e0/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%92%E3%82%99%E3%83%AA%E3%83%86%E3%82%A3%E3%81%A8%E3%81%AF.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
アクセシビリティとは、サービスや情報がどれだけ使いやすいかを示す指標ってところかな!
![character_balloon](/media/character/yellow_normal_left.png)
アクセシビリティを高めることで、どんな人でも平等に情報やサービスにアクセスできるようになるから、お客様に情報やサービスを提供する企業は、取り組む必要があるんだよ
![character_balloon](/media/character/yellow_inspiration_left.png)
たとえば、障害を持つ人や高齢者などにもサービスが行き届くようになる感じ!
なるほど!アクセシビリティを高めることで、どんな人にも最高のサービスを提供できるんだね!
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_inspiration_left.png)
あとは「使いやすいサービスを提供している」っていう印象を与えられるから、アクセシビリティの高いサービスや情報を提供している企業は、それだけで競合との差別化が図れるね
なるほど!
![character_balloon](/media/character/blue_normal_right.png)
アクセシビリティの例
なるほど、アクセシビリティについてはなんとなく理解できたけど、実際、どんなふうにアクセシビリティを意識して商品、情報、サービスが提供されているのかわからないなぁ
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_down_left.png)
そうだよね、そしたら、実際にどんな風にアクセシビリティが使われているのか、具体的な3つの例を紹介するよ!
例1:文字拡大機能
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/4f4d216e2e204049a8f3178c388f90c7/%E4%BE%8B1%EF%BC%9A%E6%96%87%E5%AD%97%E6%8B%A1%E5%A4%A7%E6%A9%9F%E8%83%BD.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
スマートフォンやパソコンで、画面の文字を拡大できる機能があるよね
![character_balloon](/media/character/yellow_normal_left.png)
あれもアクセシビリティの1つだよ
本当だ、あんまり気にしたことなかったけど、画面を120パーセントに拡大したりできるんだね
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
この機能は、「文字拡大機能」といって、視覚障がいのある人や小さい文字が読みにくくなった高齢者の方向けに提供されている機能だよ
![character_balloon](/media/character/yellow_normal_left.png)
文字サイズを調整して読みやすくすることで、どんな人でも必要な情報にアクセスできるんだ!
確かに、災害とかの緊急事態に必要な情報が読めなかったら大変だもんね
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_inspiration_left.png)
そう、だから、公共施設のデバイスとかWebブラウザとかには必ず文字拡大機能がついているんだよ
例2:ピクトグラム
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/cf934dd007664d20a184b7476d5ee2cb/%E4%BE%8B2%EF%BC%9A%E3%83%92%E3%82%9A%E3%82%AF%E3%83%88%E3%82%AF%E3%82%99%E3%83%A9%E3%83%A0.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_inspiration_left.png)
トイレの入り口や電車のいたるところに表示されているアイコン「ピクトグラム」もアクセシビリティを意識した結果の1つだよ
ピクトグラムって、シンプルな形で構成されている模様のこと?
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_inspiration_left.png)
そう、ピクトグラムは、図やアイコンを使用して情報を伝えることができるから、文字が読めない人とか、日本語がわからない外国の方とかにも情報を伝えられるよ
ピクトグラムってあんまりじっくりみたことなかったけど、今度、アクセシビリティの勉強に、みてみよう!
![character_balloon](/media/character/blue_inspiration_right.png)
例3:点字ブロック
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/c6d92e8a416046a09ed5f38f5b573a3a/%E4%BE%8B3%EF%BC%9A%E7%82%B9%E5%AD%97%E3%83%95%E3%82%99%E3%83%AD%E3%83%83%E3%82%AF.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
点字ブロックもアクセシビリティの1種だよ!
![character_balloon](/media/character/yellow_normal_left.png)
点字ブロックは、視覚に障がいのある人々が歩行時に安全に移動できるようにするための設備だけど、それがあると、警告やナビゲーションを理解できるから、視覚障害者は安全に移動ができるんだよ
![character_balloon](/media/character/yellow_down_left.png)
たとえば、多くの人が行き交う公共施設や交差点で、何もナビゲーションがないと、視覚障害者は目的の場所に行くことができないよね?
![character_balloon](/media/character/yellow_down_left.png)
点字ブロックは、社会全体のバリアフリー化を促進し、視覚に障がいのある人々が自立して移動できるという点で、アクセシビリティの1種だと考えられるよ
Webサイトのアクセシビリティを高める場合に改善すべき箇所
![character_balloon](/media/character/yellow_normal_left.png)
じゃあ次は、Webサイトのアクセシビリティを高める場合に改善したい箇所を紹介するよ!
ありがとう、多くの人が使いやすいWebサイトを作りたいと考えてたから、詳しく知りたい!
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_inspiration_left.png)
ちなみに、アクセシビリティを高めるために何をすべきかについては、デジタル庁が提供する「ウェブアクセシビリティ導入ガイドブック」を参考にしているよ!
わかりやすいタイトルをつける
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_14枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/3ef1e682b6ff4f90922bee461dfe0a71/%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_inspiration_left.png)
まずは、目的の記事に到達できるようにするということで、わかりやすい記事のタイトルをつけることが大事だね
わかりやすいタイトルって?
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
例えば、この記事なら「アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!」っていうのがタイトルだけど、このタイトルをみて、どう思った?
アクセシビリティの事例と、改善すべきポイントが書かれているんだって思った…
![character_balloon](/media/character/blue_normal_right.png)
そうか、タイトルを見るだけで記事に書かれている内容がざっくりわかるんだね!
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_inspiration_left.png)
そうだよ、わかりやすいタイトルっていうのはそういうこと!
![character_balloon](/media/character/yellow_inspiration_left.png)
読者が検索しているであろうキーワードを盛り込んで、タイトルを作るのがWebサイトのアクセシビリティを高めるために重要なんだよ
![character_balloon](/media/character/yellow_normal_left.png)
あと、ちょっと難しいから簡単に紹介するけど、GoogleがWebサイトの記事を検索結果に表示させるときにも「本文内容をタイトルに反映させる」というのがものすごく重要になるんだ
![character_balloon](/media/character/yellow_normal_left.png)
SEOの観点で重要ってことだね!
なるほど、とりあえずタイトルに本文の内容を含めておくと、多くの人にみてもらいやすいってことだね?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
そういうこと!
アンカーリンクにはわかりやすく色をつける
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_16枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/f4da6fc65a70420dbeee75fc673fa51b/%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%99%E3%81%AB%E3%81%AF%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%8F%E8%89%B2%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_question_left.png)
ページから他の記事にリンクを貼るときには、わかりやすく色をつけて表示するのも、アクセシビリティの観点で重要だよ!
なんで重要なの?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_question_left.png)
間違えてテキストをクリックして、他のページに遷移するのを防ぐためだよ
![character_balloon](/media/character/yellow_inspiration_left.png)
せっかく、記事をじっくりと読みたいと考えているのに、間違って他のページに飛ばされたらイライラするでしょ?
![character_balloon](/media/character/yellow_inspiration_left.png)
そういう誤作動を防ぐために、アンカーテキストにはわかりやすく色をつけた方がいいんだよ!
じゃあ、何色をつければいいの?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_down_left.png)
リンクには青色をというのが、Webサイトの昔からの慣習だから、基本的には青色で表示すればいいよ!
![character_balloon](/media/character/yellow_down_left.png)
デフォルトでも青色のリンクだから、そのままで大丈夫!
モバイルにも優しいデザインを意識する
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_18枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/6bc92be082ef47e88f47f3f384d84cae/%E3%83%A2%E3%83%8F%E3%82%99%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%82%E5%84%AA%E3%81%97%E3%81%84%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B3%E3%82%92%E6%84%8F%E8%AD%98%E3%81%99%E3%82%8B.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
次に大事なのは、モバイルからのアクセスを考えて、しっかりと対応させることだよ
![character_balloon](/media/character/yellow_normal_left.png)
これを「モバイルフレンドリー」っていうんだけど、最近はほとんどのユーザーがモバイル端末で検索するから、対応させた方がいいんだ!
![character_balloon](/media/character/yellow_inspiration_left.png)
もし、モバイル対応させていない状態で読者がWebページに訪れると、パソコンの画面に写っている情報をそのまま切り取ったような状態で表示されてしまうから、画面いっぱいに文字が表示されたり、逆に文字が小さく表示されたりするから気をつけてね
視認性の高い色味を使う
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_20枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/403dd646b6a04405b5b52c1be91c1999/%E8%A6%96%E8%AA%8D%E6%80%A7%E3%81%AE%E9%AB%98%E3%81%84%E8%89%B2%E5%91%B3%E3%82%92%E4%BD%BF%E3%81%86.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
また、視認性の高い色味を使うことも重要だよ
視認性の高い色味って?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
薄い色じゃなくて、誰もが理解できる濃い色味にするってこと!
![character_balloon](/media/character/yellow_inspiration_left.png)
特に、色盲と呼ばれる色の判別が困難な人や、視覚障がいのある人は薄い色だと何が書かれているか全くわからないから、視認性の高い色味を使おうね!
なるほど!
![character_balloon](/media/character/blue_inspiration_right.png)
画像には代替テキストを設定しておく
![アクセシビリティとは?事例やWebサイトの改善ポイントを紹介!の画像_22枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/c1732a3af3c0445ea7b378db12ee978b/%E7%94%BB%E5%83%8F%E3%81%AB%E3%81%AF%E4%BB%A3%E6%9B%BF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8F.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_inspiration_left.png)
代替テキストもアクセシビリティを高める上で重要だよ
代替テキストって?
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_inspiration_left.png)
代替テキストは、画像が電波障害などによって表示されない場合に、代わりに表示させるテキストのことなんだ
![character_balloon](/media/character/yellow_normal_left.png)
たとえば、遊んでいる犬の画像をサイトに貼り付ける場合に「遊んでいる犬」というように画像の説明を簡潔に文章にするんだ!
![character_balloon](/media/character/yellow_normal_left.png)
そうすると、画像が表示できない場合に、画像の代わりに「遊んでいる犬」って文字が表示されて、読者はそこに表示されていた画像がわかるという仕組みだよ
なるほど!
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
あとは、画像を見れない視覚障害者に対しても、代替テキストは役立つよ!
![character_balloon](/media/character/yellow_inspiration_left.png)
スクリーンリーダーのような文字を代わりに読んでくれるツールを使用した場合に、代替テキストも一緒に読んでくれるから、読者は内容を理解できる!
![character_balloon](/media/character/yellow_inspiration_left.png)
最後に、アクセシビリティについてまとめるね
まとめ
◆アクセシビリティはすべての人が情報やサービスにアクセスしやすくするよう、意識しなければならないポイント
◆アクセシビリティについて考えることで、サービスの質が向上し、多くのお客様に喜んでもらえる可能性が高い
◆文字拡大機能やピクトグラム、点字ブロックはアクセシビリティを高めるために考案されている
◆Webサイトのアクセシビリティを高めることでどんな方でも閲覧しやす句なり、サービスの質が向上する
![character_balloon](/media/character/yellow_inspiration_left.png)
今回は、アクセシビリティについてまとめてきたけど、ブルーはわかった?
うん、わかったよ!
![character_balloon](/media/character/blue_inspiration_right.png)
アクセシビリティを意識することで、サービスの質が高まるから「どうすればお客さんに喜んでもらえるか」を考えるべきってことだね!
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/yellow_inspiration_left.png)
そういうこと!
![character_balloon](/media/character/yellow_normal_left.png)
特に、Webサイトのアクセシビリティを高める方法は今回紹介した以外にもたくさんあると思うから、どうすればお客さんに喜んでもらえるかを自分で考えることが大事なんだ!
![character_balloon](/media/character/yellow_normal_left.png)
ぜひ参考にしてみてね!
![character_balloon](/media/character/yellow_writer.png)
イエロー
インフルエンサーマーケティングやSNSマーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR