コンテンツデザインから始めるWebアクセシビリティ

理解という名のアクセシビリティ

Web アクセシビリティの課題には大きく分けて 2 種類あります。ひとつは、色、形状、動きといった視覚に関わること。そしてもうひとつは、マークアップをはじめとしたマシンリーダブルに関わることです。マークアップが正しく記述されていて、視覚的にも分かりやすいことは Web アクセシビリティの確保において必須ですが、これらとは別に『第三の課題』のようなものがあると考えています。

それは利用者が理解できるコンテンツを制作・配信するという課題です。正しくマークアップされていたとしても、そのマークアップされたコンテンツが人にとって理解しにくいものであればどうなるでしょう。利用者はタスクを達成することができないでしょうし、情報を求めて彷徨うことになるかもしれません。

単に情報へアクセスできるだけでなく、意味のある情報へアクセスできるようにする必要があります。利用者の目的が達成されないという結果になってしまえば、たとえ Web サイトに情報があったとしても、利用者の視点からは「情報へアクセスできなかった」という評価になります。JIS X 8341-3:2010 でも WCAG でも「理解しやすい情報を提供する」ことの重要性がガイドラインとして書かれているので無視できません。

では、どのように考え、実践すれば良いのでしょうか。その例として、世田谷区の Web サイトをつかって、簡単なWeb コンテンツの検査と設計を 2 年前に試みました。今回はさらにもう一歩踏み込んで、世田谷区の Web サイトのコンテンツについて考えてみました。利用者が求めている情報を利用者の文脈に適した形状で提示するコンテンツデザインを実践するとしたらどうなるでしょうか。

利用者のニーズの理解

世田谷区 Web サイト全体ではあまりにも大き過ぎるので、今回は「マイナンバー（社会保障・税番号）制度について」ページを中心にマイナンバーに関係するコンテンツを見ていきます。

コンテンツデザインは、いきなり現存のコンテンツの再設計をするのではなく、利用者のニーズを把握するところから始まります。今回は時間の都合上ユーザーインタビューをすることができなかったので、代わりに Google 検索や Google トレンドを活用して、関連キーワードを交えながら、幾つかの Web サイトから利用者の声を集めました。

集めた利用者の声には幾つかの傾向が見つかったので、それらを付箋紙をつかって分類することにしました。単に利用者のニーズを書き出すのではなく、「Job-to-be-done フレームワーク」を参考にしてまとめることにしました。この手法を用いることで、マイナンバーの何に悩んでいて、何を達成したいのかが明確に表現できると考えたからです。

利用者のニーズ（仮説）を付箋紙にまとめました

今回は 7 つのニーズを書き出しました。付箋紙には上から利用者は「どのような状況にいるか」「何をしたいのか」「結果的に何を得ることができるのか」を順に書きました。

世田谷区の Web サイトをはじめとした自治体サイトへ訪れる利用者は、具体的なタスクを達成するために訪れることが多いと考えられます。それらは主に 5 つのタスクに分類されます。

• 申請する
• 要請する
• 支払う
• 問い合わせする
• 請求する

Job-to-be-done フレームワークのような手法で利用者ニーズを探るメリットは、そもそもなぜ利用者が Web サイトへ訪れているのかを考えやすくなるところです。例えば「マイナンバーについて知りたい」はニーズと呼べるかもしれませんが、真の目的はマイナンバー知ることではありません。マイナンバーへの不安を解消して、自信をもって家族に伝えたいなど、明確な目的があります。そもそもなぜ知りたいのかまで深堀すると、コンテンツの見せ方や、具体的なアクションへ導きやすくなります。

書き出された利用者の 7 つのニーズは、「申請する」「要請する」「問い合わせする」のいずれかに該当すると仮説しました。

コンテンツの見直し

利用者のニーズを把握した時点で、改めてサイトのコンテンツをみるとどうでしょうか。現在、世田谷区 Web サイトには「マイナンバー（社会保障・税番号）制度について」ページを起点に 30 以上のマイナンバー関連コンテンツがあります。書き出した利用者の 7 つのニーズに応えるコンテンツは、このページのどこかにあることが判明しましたが、幾つかの課題が見つかりました。

マイナンバー関連のコンテンツをまとめたインベントリー

• 「くらしガイド」という世田谷区公式コンテンツと、広報からのコンテンツ（ニュース？）が別々に存在しているため、どちらを参考にして良いか分からない。
• 様々な資料・書類がダウンロードできるものの、具体的にそこから何をしたら良いのか分かり難い。
• 詳しくは問い合わせてくださいと書かれているものの、ページによって問い合わせ先の課が異なる。なぜページによって連絡先が異なるのか把握しにくい。
• よくある質問は簡略版と詳細版と2つ用意されている。一見便利そうだが、コンテンツが重複しているものが多いため、利用者の混乱を招くだけでなく、管理コストが 2 倍になる。
• 障害のある方のマイナンバー申請など、一部のコンテンツは世田谷区ではなく内閣官房、特定個人情報保護委員会のサイトへアクセスする必要がある。
• リンク先に何があるか判断できない「詳しくはこちら」という表記が多く、利用者が具体的なアクションをとれるまで『たらい回し』が続く印象を受ける。
• 「音声コードリーフレット」「委任状様式」など、明確に何をするための情報なのか分からない場合がある。

こうした課題から以下のような対策が必要だと考えられます。

利用者のニーズに合わせた分類

「マイナンバー（社会保障・税番号）制度について」のサブヘッダーを読むと、マイナンバー申請に関わる様々な情報が分類されているのが分かります。しかし、マイナンバーにまつわる課題や状況を説明しているだけで、答えが明確ではない場合があります。例えば「事業者の皆様へ」ではなく、「事業者の皆様が必要な手続き」とすると、何かしなければならないことがあることが一目で分かります。

また、利用者のニーズを文書のヘッダーにするのではなく、ナビゲーションとして扱うことで自分の目的に合うものが何かを見つけやすくすることができそうです。

タスク完了へ導くタイトル作り

ページタイトルを読めば、どのような情報が記載されているのか分かるものの、結局このページを読むことで何ができるのか不透明な場合があります。そこで、利用者が具体的に何ができるのか分かるようなタイトルに書きかえると良さそうです。例えば「マイナンバー制度に便乗した不正な勧誘や個人情報の取得にご注意ください」というページがありますが、これもタイトルを「不正な勧誘や問い合わせが来た場合」と書き換えれば、このページに相談・問い合わせ先があることがすぐに理解できます。

ゴールはどこにあるかを提示する

大多数がスマートフォンを利用している今、これからも書類を PDF で配布することを考え直したほうが良いかもしれませんが、課題は他にもあります。例えば、通知カードを再送付するための申込書が PDF でダウンロードできますが、書き込んだ書類をどこへ提出すれば良いか分からなかったり、提出後に何か別の手続きがあるのかも明確ではありません。

現在、各ページの下に PDF 書類のダウンロードができるリンクが用意されているケースが多いですが、これらはユーザーのゴールではなく、ゴールへ向かうための途中段階です。もし利用者のニーズに合わせてページを分類することができるのであれば、各ページ下にはゴールはここにあるということを示すようなコンテンツが必要になるでしょう。

情報の目的や種類によって分類する

マイナンバーの情報とひとことで言っても、申請や変更に関する情報と、マイナンバー制度の成立までの流れが分かる情報の 2 種類あります。ストックしておくべきコンテンツと、フローとして流れる（流れたのでアーカイブしておきたい）コンテンツが混在しているため、どれが最新の情報か分からなかったり、別階層のページへ移動しているという現象が発生しています。

広報誌にある重要な情報はストックしておく場に移動させて、「ここにアクセスすればひとつにまとまっている」という状態を作る必要があります。情報が開示されているだけでなく、情報を利用者のニーズに合わせて組み替えると『たらい回し』を防ぐことができるでしょう。

どのような見た目になるかを仮説

以上のことを踏まえて、マイナンバーに関するコンテンツを整理するためにシングルカラムで情報設計をしたのが下図。マイナンバーに関する情報でも「マイナンバー」という言葉がタイトルに含まれていない場合があります。そこで「マイナンバー（社会保障・税番号）制度について」という大トピックを設けて、その下にユーザーニーズに応えるためのコンテンツが並ぶという構成にしました。

おおまかな情報構成

具体的に文字を入れると、「マイナンバー（大トピック）」の「何を解決したいか（ナビゲーション）」という流れが分かりやすくなったと思います。長い文言を避け、なるべく簡略かつ明確にすることも重要なポイントです。

ナビゲーションの下にある通知カードの配達に関する情報は、今のタイミングで見せなければならない重要な情報を記載するエリア。現存サイトでも通知カードが届いていない方向けのコンテンツはありますが、配達が終わっているのに配達予定表の PDF へ誘導したり、過去のことが現在進行形になっている表現が見つかりました。配達完了して間もない今だからこそ優先的に見せたい情報を切り抜いて表示させることにしました。状況に合わせてコンテンツの見せ方を変えたり、更新を加えることも運用には欠かせません。

通知カードの再送付申請も、どの書類に記入して何をするのかを明確に示す方法があるはずです。同じファイルのダウンロード URL を点在させるのではなく、一箇所にして、そこから次のアクションを示します。※印や注意書きもあちこちにありますが、これらを編集するだけでも説明文が明瞭になるはずです。

まとめ

今回の提案は 2 年前にしたものと同様、制約を無視したものなので現実味がないですし、考慮が足りていないところもあります。しかし、利用者が必要としている情報を彼等にとって解りやすい形状に整理する流れは見えたかと思います。コンテンツをデザインするということは、情報を開示するだけでなく、情報を利用者にとって意味のあるかたちに設計することを指します。

Webアクセシビリティは技術的な解決だけでなく、人間性を考慮した解決案を組み合わせることで、より質の高いものになると考えています。宣伝文句や過剰な注意書きが入り混じった情報より、目的を達成するための近道が分かる簡潔な文章のほうが誰にとってもやさしいはず。Webアクセシビリティに関わるひとつの切り口としてコンテンツに注目してみませんか？