心地いいホームページとは？アクセシビリティを高めて離脱率を低くするための5つのポイント

更新日: 2018年01月31日

CMS・サイト制作

インターネットの世界では、日々、数え切れないほどたくさんのコンテンツが生まれています。
しかし、Webの世界が複雑になればなるほど情報量も多くなり、ある人には使い勝手がいいホームページでも、別の人にはそうではないことも出てきます。

今回は、誰もが自分の欲しい情報を得るためにWebデザイナーが考えるべきキーワード「アクセシビリティ」について解説していきます。

「サラッとでも意識していればいいかな」という程度でアクセシビリティについて捕らえている人もいるかもしれませんが、UXを考える上でとても重要なキーワードです。今一度、この記事を読んで、改めてその大切さを感じてみてはいかがでしょうか。それでは早速確認していきましょう。

アクセシビリティとは何か？

アクセシビリティに関する5つのアイデアを紹介する前に、まずは「アクセシビリティとは何か」について説明します。

LinkedInのUI/UXディレクターでアクセシビリティについて詳しいJennison Asuncion氏によれば、ユーザビリティの定義は次のようになります。

「アクセシビリティとは、障碍(しょうがい)を持った人も含めて、誰もが触れるUIをデザインしたり開発したりすること」

時としてアクセシビリティは障碍者にフォーカスが当てられることもありますが、本当にフォーカスを当てるべきは「誰もが」という部分です。つまり、教育を受けてきたかどうかや、年齢や性別などあらゆるものとは関係なく、ホームページに触れる全員が使いやすいホームページにするということを考えなければなりません。

アクセシビリティを考える上で知っておきたい5つのアイデア

それでは、実際にアクセシビリティに関する5つのアイデアを見ていきましょう。

1. ボタンやリンクをわかりやすく意味のあるものにする

わりとよくある話ですが、コンテンツの概要が述べられた後に、「もっと学ぶ」「もっと読む」「もっと見る」があらゆる箇所に点在しているWebサイトを見たことはないでしょうか。
もしかしたら、こういうリンクやボタンに出会う度にげんなりしてしまう人もいるかもしれません。

音声読み上げ機能を使っているユーザーにとっては、ページ遷移をそれほど意識せずにページ移動が行える一方で、見えない分コンテンツを見逃してしまっているのではないかという恐怖もあります。視覚障がいを持つユーザーが音声読み上げで「もっと学ぶ」という言葉に出会った時に、果たして「もっと」とはどういうことなのかを理解するのは簡単ではないかもしれません。

同様に、「リンク先はこちら」「詳細はこちらのページ」という形でリンクを貼るのもアクセシビリティを低下させます。また、リンク先のURLをそのまま貼る行為（例：https://ferret-plus.com/）も、なぜリンクがそこにあるのかが文脈上明確でなければ、できるだけ避けるべきです。音声読み上げでは、短くても長くても、そのままURLが読み上げられてしまうからです。

一方で、ユーザビリティが確保されたホームページを考えてみましょう。リンク先のテキストは、はっきりと具体的な言葉で、リンクを押せばどこに飛ぶのかがわかる言葉を選びましょう。また、リンク先がPDFやビデオである場合は、そのことを「リンク内で」明示しましょう(リンク内であるべき理由は、音声読み上げ機能を使った時にも音声でそのことが伝わるからです)。

2. 画像に明確で便利なalt属性をつける

Alt属性についてもあまり意識をしていないかもしれませんが、ホームページ上で音声読み上げ機能を使うユーザーにとっては重要な役割を担います。
もちろんAlt属性はページを表示しているだけでは見えません。

しかし、視覚に障がいを持ったユーザーにとって、Alt属性がなければ、その画像やインフォグラフィックなどの内容を理解することは難しくなります。
一方で、Alt属性を付けることで、円グラフやヒーロー画像、インフォグラフィックなどのイメージが伝える情報を誰もが逃さないように工夫することができます。

最近は減りましたが、ブラックハットSEOと呼ばれる、HTMLタグの改変で検索順位を上げていたかつての時代では、Alt属性はページのキーワードをいくつも羅列するだけのために使われていました。もちろん音声読み上げ機能を使っているユーザーにとっては大迷惑でした。

Alt属性を誤った形で使ったせいで、検索エンジンはそうしたページの検索順位を落として、中身のある情報を提供するホームページを優先的に検索結果の上位に上げました。

リンクテキストと同様に、Alt属性も簡潔で、十分に説明していて、自然な言葉で表現することが大切です。

画像にスマートフォンの利用状況を示した棒グラフのような便利なデータがあるのであれば、Alt属性にもできるだけそのグラフからわかるものを表記しましょう。

例
「スマートフォンユーザーの93％は同じホームページを複数のデバイスで見ている傾向があります」

以前よりも画像をふんだんに取り入れたホームページが多くなっています。ぜひもう一度Alt属性を見直してみてください。

3. 何をすればいいのかわかりやすいエラーメッセージにする

アクセシビリティの高いフォームをデザインする時に気を付けておきたいことは山ほどあります。しかし、コンテンツ制作者やユーザーにとって最も大切なことがあります。それが*「エラーメッセージ」*です。

例えば、フォームを入力した時に、*「有効」や「無効」という言葉が出てくると、ユーザーにとっては抽象的でわかりにくいかもしれません。「このパスワードは無効です」と言われても、どういう条件を満たしたら有効になるのかを探さなければいけなくなります。挙句の果てに、「『性別』が無効です」「『氏名』が無効です」*と返ってきた時には、ユーザーは困り果ててしまいます。

ホームページにおけるアクセシビリティのガイドラインを掲載しているWebAIMによれば、エラーメッセージに関してこのように指摘しています。

「エラーメッセージでは、現在エラーが発生していて、解決するためにどのような行動を取るべきかを明確に伝える必要があります。例えば、『講座番号の入力方法が誤っています』よりも『講座番号は3ケタの半角数字で入力しなければなりません』のほうがユーザーにとっても親切でわかりやすいメッセージです」

エラーメッセージを表示する際には、単に問題が起きたことを伝えるのではなく、どうすれば解決するのかも伝えるようにしましょう。たいていの場合は、エラーについてだらだらと指摘しなくても、端的に解決方法を書いてあげれば大丈夫です。

4. 印象的で簡潔なヘッダーメッセージにする

ホームページを見る時には、ユーザーはコンテンツをじっくりと読む前に見出しをスキャニングして、自分の興味のありそうな情報を見つけます。では、本文の中身やリンクを見ずに、見出しだけでホームページの情報を伝えることはできるのでしょうか。半分くらいの人は「たまにかな？」くらいに答えるでしょう。

見出しだけで情報を伝えるための例として最適なのが、決済システム「SQUARE(スクエア)」のホームページです。

例えば、下記のSQUAREの機能紹介のページを見てみましょう。

「SQUAREの機能紹介」：とても明快です。ページをスキャニングしてSQUAREの機能を知りたいユーザーは、このセクションを時間をとって読むでしょう。
「数分で設定終了、決済手数料以外の隠れた費用は一切なし」：やや長いですが、2つの特徴をシンプルにまとめています。
「主要クレジットカードを受付可能」：対応しているクレジットカードが多いことはわかります。「主要クレジットカードって何？」という人はその下の本文を読むことで解決します。
「オフラインでもカード決済」：非常に明快です。インターネットに接続していなくても決済ができることが見出しだけでわかります。

ちょっとしたエクササイズとして、ぜひご自身のホームページの見出し以外の部分を消してみても理解できるかどうか試してみてください。Photoshopで加工しても、pタグを背景色と同じにしてみてもいいでしょう。

見出しのhタグだけを見ても、明確にわかりますか？もしそうでなければ、書き直してみましょう。

ただし、見出しをもっと明確にするとなると、どうしても語数が多くなりがちです。語数が多くなり過ぎると、シンプルさに欠けてしまうことがあります。難しいところでもありますが、ユーザーが必要な情報を手に入れながら、短く分かりやすく伝えられるコピーはどんなコピーだろうか、常に自問自答してみてください。

5. 入力フォームを最適化する

フォームをプロダクトデザインの究極的な形として捉える人もいます。正しく設計すればするほど、あらゆるユーザーの利便性、そしてもちろんアクセシビリティも高めることができるからです。それゆえに、フォームの設計は、Webデザイナーの考え方が直接現れます。

それでは、どんなフォームを設計すればいいのでしょうか。
プレイスホルダーを設定しているだけのテキストボックスほど利便性の悪いものはありません。プレイスホルダーは、テキストボックスをクリックした途端に消えてしまうからです。Googleのページでよく使われていますが、プレイスホルダーを設定しておいて、クリックしたらラベルがテキストボックスの上に表示される、といった方法は改善方法の一つです。

また、すべてのフィールドのうち、どれが必須でどれがオプションなのかを明確にしましょう。また、送信ボタンの文字を単に「送信」とデフォルトのままにするのではなく、「入力した項目を確認する」などより具体的な言葉で書くようにしましょう。

入力する際にユーザーに役立つ情報も添えておくとよいでしょう。
例えば、パスワードを9文字以上にしなければならない場合、大文字や特殊記号を使った例を添えておけば、たいていはユーザーも大文字や特殊文字を使ったパスワードを入力します。このような情報をツールチップなどで隠さないようにしましょう。

入力するフィールドはできるだけシンプルなほうがいいですが、もし多くなる場合には関連性のあるフィールドをグループ化しましょう。