2024レポート① 対話を通して自分の問いを見つける

演習「自分のアートプロジェクトをつくる」は、これからの時代に応答するアートプロジェクトのかたちを考えるシリーズ「新たな航路を切り開く」の一環として開催している、ゼミ形式の演習です。ナビゲーターはP3 art and environment統括ディレクターの芹沢高志さん。アートプロジェクトを立ち上げたい方やディレクションに関心のある方を対象としています。

2024年度は10月初旬から翌年2月初旬までの約4ヶ月にわたって行いました。
この演習の様子を、3つの記事でレポートします。

演習「自分のアートプロジェクトをつくる」は、興味や問い、向き合うテーマなど、一人ひとり異なる背景を持つ人々が出会い、対話を通して自分自身の考えや視点に気づき、あらためてその考えや問いを軸に「自分のアートプロジェクト」の企画構想に取り組むプログラムです。対面講座でのディスカッションや受講生それぞれの発表に加え、講座以外の場としてオンラインツールを活用したコミュニケーションの場を設けています。
受講生は、他の受講生やナビゲーター、マネージャーとの対話や意見交換を通して、「自分の考えるアートとは何か」「なぜ、いまこの企画に取り組むのか」「アートプロジェクトを通して何を実現したいのか」といった、自らの問いを深めていきます。

演習は、全8回の対面講座(うち、最終回は2日連続で開催)で、ナビゲーターによる講義のほか、ディスカッション回や中間発表回があり、その間に3回のゲスト回を挟む構成です。今年度のゲストは、梅田哲也さん(アーティスト)、矢野淳さん(株式会社MARBLiNG代表)、阿部航太さん(デザイナー/文化人類学専攻/一般社団法人パンタナル代表)の3名。ゲスト回では、それぞれのゲストの経験を手がかりに、受講生はさまざまな視点からアートやアートプロジェクトの実践のあり方について考えていきます。さらに、各ゲストが、いまこの時代をどのように捉え、何をどのように表現しようとしているのかを知る回となっています。これらの講座を通じて、受講生は自分のなかにある問いを発見し、あらためて向き合っていきます。

受講生同士、初めての顔合わせ

2024年10月6日(日)、今年度最初の演習がスタート。例年通り、初回はナビゲーターの芹沢さんから、この演習の目的や内容について説明し、その後、受講生たちの自己紹介を行いました。なぜこの演習に参加したのか、現段階で構想している企画やアイデアについて共有しながら、一人ひとりの興味関心を軸に自己紹介が展開されました。

今年度の受講生もとてもバラエティ豊かな方々でした。海洋環境に興味を持ち、海と人の関わりをテーマに創作活動を進めている方、喪失体験や悲しみをテーマに表現活動を模索している方、日本の伝統音楽や民謡の作曲のデータベース化に取り組もうとされている方など、非常に具体的なテーマを設定し、実際に企画を始動している方もいました。

また、福祉事業に携わっている方やアーティストとして活動している方は、それぞれの活動のなかで、あらためて自分自身の取り組みを見直しながら、次の取り組みの一歩を探っている方も。さらに、映画制作や展覧会企画などさまざまな実践を積み重ねている高校生の受講も。

このように世代も興味関心も幅広く、それぞれバックグラウンドが異なる受講生たち。一人ひとりの自己紹介には、アートに対する可能性や期待、そして、まだかたちの見えないことに向き合おうとする際のドキドキと戸惑いの気持ちが滲んでいました。だからこそ、この演習を通して「きっかけを掴みたい」「何ができるのか、何をしたいのか考えたい」という受講生の強い想いが伝わってきました。

日々の習慣から企画の問いが見つかる

10月19日(土)第2回の演習では、ナビゲーターの芹沢さんより、まずは自身のアーティストとの出会いやP3 art and environment設立の経緯、これまで20年以上に渡り手がけられてきた国内の芸術祭について具体的な事例を交えて紹介されました。

また、1927年にホワイトキューブの概念が生まれ、その後、ランドアートやハプニング、リレーショナルアートなど、アーティストの表現活動の場がストリートへと展開し、現在のアートプロジェクトにもつながっていく系譜についても解説。さらに、「アートはよくわからない」という言説にも触れ「アートは誰にとっても『わからない』という特質を持っていること、アートの前では、わたしたちは常に平等である」という視点が共有されました。

その後、森司(アーツカウンシル東京 東京アートポイント計画ディレクター)による企画構想のためのグループワークが行われました。ワークでは、「アートプロジェクトを企画構想するにあたって、自分の企画のなかで最も大事にしたいのは何か?」という問いかけからはじまり、「その場で、明日にでもすぐできる小さなプロジェクトを考えてみよう」「そのプロジェクトを実現させるために必要な技術と習慣を考えてみよう」といった、企画を考える前段の準備運動のようなワークが展開されました。

アートプロジェクトをつくる、企画を考えると言うと、アーティストをはじめ、さまざまな人がかかわる規模の大きな企画をつい想定しがちですが、「自分の」アートプロジェクトを考える場合、もっと身近なところからはじめてもよいのか、と気づきを得た受講生のみなさん。とはいえ、「自分の」アートプロジェクトとなると、はてさて何からはじめたらいいのかわからなくなってしまう人も多いでしょう。

森は、アートプロジェクトをつくるためには、「習慣と技術」が要になってくると言います。「アートやアートプロジェクトには、こうすれば正解だというルールがありません。自由すぎてわからなくなってしまう。だからこそ、自分にとっての羅針盤が必要です。それが自分自身の習慣と技術です」。繰り返し、繰り返し習慣化されているものがあるからこそ、日常のなかで不意に出会う違和感や機微にハッと気づいたりする。それが企画の出発点である「問い」になっていきます。また、自分が惹かれるアートプロジェクトを見つけた時は、どこが良いと感じるのか、それはどういった方法(技術)で行われているのかを分析し、学び続けることが大切です。

「みなさんが、これから取り組む演習は、自分がやりたいことをやるための『準備』。そして実は、その準備自体がアートプロジェクトとして成り立っていく可能性もあるんですよ」と森は言います。アートプロジェクトのイメージや規模について、受講生も意識をほぐされた時間となったようで、その後も活気のあるディスカッションが各グループで行われていました。
受講生同士で対話し、ゲストやナビゲーターたちとも議論を深めながら、自分のアートプロジェクトのかたちを探る演習は、こうしてスタートしました。

>>2024レポート② 3人のゲストの実践の風景

Artpoint Radio 東京を歩く

わたしたちの暮らすまちには、数多くの「拠点」があります。そこは日常的に人々が集う場になっていたり、展覧会を企画していたり、アトリエや倉庫として活用したりと、さまざまな姿を見せています。そして、そうした数多くの拠点には、その運営者たちの社会への眼差しが映し出されているのではないでしょうか。

本企画では、都内に設立された拠点をめぐりながら、その運営メンバーにインタビューを実施し、その様子をラジオとレポート記事の2つの形式で公開します。拠点の運営に関わるひとびとの言葉から、東京の現在の姿をともに考えます。

レポート(全8回)

  1. 第1回:OGU MAG+(齊藤英子さん)
  2. 第2回:亀戸アートセンター(石部巧さん、石部奈々美さん)
  3. 第3回:Hand Saw Press(安藤僚子さん)
  4. 第4回:STUDIO322(赤羽佑樹さん、いしかわみちこさん、佐久間茜さん)
  5. 第5回:東葛西1-11-6 A倉庫(髙橋義明さん)
  6. 第6回:コウシンキョク-交新局(平山匠さん)
  7. 第7回:水性(前澤秀登さん)
  8. 第8回:WALLA(大石一貴さん、大野陽生さん、前田春日美さん、吉野俊太郎さん)

ラジオ(全8回)

第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける | わたしたちの“ウェブアクセシビリティ”を考える

このレポートでは、複雑で多様化する現代のユーザー環境と、ウェブサイト制作のプロセスを見つめ直しながら、ウェブアクセシビリティの“いま”を捉え直します。

全5回を通じて、ウェブサイトづくりのこれからや、わたしたち一人ひとりができることを探ります。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. (この記事) 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

最終回では、これまでを振り返りながら、ウェブアクセシビリティについて、わたし自身がいま感じていること、そして、これからさらに深く考えたいことをご紹介しつつ、それぞれの視点について自分なりにもう一歩踏み込んでみたいと思います。

マルチバーサルの時代(かも)

イラスト。奥と手前に2つの木があり、たくさんの人がそれぞれ木の実を取りに来ている。奥の木には『contents』と書かれた大きな林檎が1つだけあり、3人がそれにかじりついている。手前の木には、小さくさまざまな形の林檎が実っており、3人がそれぞれ収穫している。そのうちの一人は車椅子に乗り、もう一人はメガネをかけている。

「ユニバーサルデザイン」はもともと建築の分野から生まれた概念で、アメリカの建築家ロナルド・メイスが提唱しました。誰にでも使いやすい、普遍的なデザインを目指すもので、物理的な空間や素材を扱う建築分野において、「どうすればすべての人にとって使いやすく、開かれたものにできるか」という課題から導き出された考え方だといえます。

これはウェブアクセシビリティにもつながる重要な視点です。しかし、情報空間では「すべての人にできるだけ共通するものを提供する」だけでなく、ユーザーごとにカスタマイズすることが可能です。たとえば、ウェブサイトの画面においても言語は好きなように翻訳できますし、色はユーザーの設定に応じて変更できます。文字サイズやレイアウトも、好みの環境に合わせて最適化することができます。

ウェブサイトのスクリーンショット。中央に『DOCUMENTA FIFTEEN』の文字と日付が表示されている。上部にはメニューがあり、『Easy Read』『IS』『Contrast』『Simple Design』などの選択肢が並んでいる。
ドクメンタ15のウェブサイトのトップページ、Easy Read、手話、シンプルデザインなど、ユーザーが選択できる表示オプションが用意されている。DOCUMENTA FIFTEEN(2022)、DOCUMENTA、https://documenta-fifteen.de/en/

こうした考え方を取り入れた例として、ウェブデザインの世界でも新しい取り組みが出てきています。たとえば、ドイツの芸術祭「ドクメンタ15」のウェブサイトは、通常版とは別に、シンプルな英語で読みやすさを重視した「シンプルデザイン版」など、いくつかのオプションを提供しています。また、「国立アートリサーチセンター」のウェブサイトでは、「文字色・背景色変更機能のご紹介」というページで、ユーザーが自分の環境に合わせて閲覧設定を最適化するためのヒントを提示しています。これらは「ユニバーサルデザイン」を目指しつつも、ユーザーが自分の好みや環境に合わせて表示を調整できる柔軟性を取り入れた事例だといえるでしょう。

個別最適化の流れが強まる中で、ウェブアクセシビリティはデザイナーやエンジニアだけの課題ではなく、クライアント、ブラウザ開発者、OSやハードウェアのメーカーなど、情報環境をつくるすべての関係者が考え、連携していくものになっていくのかもしれません。

AIによる情報変換の可能性

ウェブサイトのスクリーンショット。大見出しに「GTP-4.5が登場」とある記事の詳細ページ。
記事本文の上に、「記事を音声で聴く 9:53」とかかれたボタンとプレイヤーのユーザーインターフェイスが設置されている
Open AI のウェブサイトでは記事を音声とテキストで提供している。Open AI(2025)、https://openai.com/ja-JP/index/introducing-gpt-4-5/

さらに、近年のAI技術の発展によって、情報の届け方も変わりつつあります。たとえば、ChatGPTの開発を行うOpenAI社のウェブサイトでは、記事の内容をテキストだけでなく、生成音声でも提供しています。このように、情報を「固定のフォーマットで一律に提示する」のではなく、ユーザーが「必要に応じて適切な形でアクセスできる」仕組みが整いつつあるのです。音声、文字、画像、映像といった情報がAIによって自在に変換され、より多様な方法でアクセスできる未来が、すでに現実になりつつあります。

これは、ウェブデザインにおけるアクセシビリティ向上という枠を超えた話かもしれません。しかし、情報が多様な形に変換できる時代において、私たちは「ひとつの完成されたデザインを提供する」だけではなく、「環境やニーズに応じた柔軟な選択肢をデザインする」ことを考えるべきなのかもしれません。マルチバーサルという概念は、そうした時代の変化に対応する、新しいデザインの方向性として提案できるのではないでしょうか。

アクセスしやすさだけでは楽しさに行きつかない(かも)

正直にいえば、ウェブアクセシビリティについて考えれば考えるほど、どうしたらいいのかわからなくなることが増えます。小さな組織で取り組み続けることに限界も感じています。

さまざまな身体感覚を持つ人たちがさまざまな環境でウェブサイトを利用しています。実際にお話を聞いてみると、それぞれに複雑な経験や人生や想いがあり、「アクセスしづらい」と感じる背景もさまざまだということがわかります。そうした人の存在を知り、できる限り一緒によいウェブサイトを目指したいと思う一方で、すべてのユーザーを想定し、向き合いながら情報発信を継続することの難しさも痛感しています。

だからこそ、100点を目指そうとすると、どこまでも課題が広がり、沼にハマってしまう。一つのデザインですべてを解決しようとするのではなく、ときには「ポジティブなあきらめ」も必要なのかもしれません。

これまでに紹介してきたプロセスを踏めば、「アクセスしやすい状況」はある程度達成できるはずです。しかし、その先にある「楽しくて、満足できる状況」は、どうすれば実現できるのでしょうか。そのためには、それぞれのユーザー環境に応じた体験設計が不可欠ではないかと考えています。

ウェブアクセシビリティの専門家の伊敷さんは「スクリーンリーダーでアクセスしやすいサイトはあるけれど、楽しいと感じるサイトには、まだ出会ったことがない」と話していました。また、ある弱視のスクリーンリーダーユーザーは「(本を読むなら)機械音声の読み上げよりも、人間の声による朗読のほうが好き」と言います。

こうした言葉を聞くと、「情報にアクセスできること」と「その情報を楽しめること」は別の話なのだと、改めて気づかされます。目で見るユーザーと同じ情報を、スクリーンリーダーを通じて音声で得られるようにすることは大切です。しかし、それだけでは「楽しい」と感じるには至らないのかもしれません。

では、どのような視点があれば、より満足できる体験につながるのでしょうか。ここで、ヒントになりそうな事例とエピソードをご紹介します。

1. オーディオ(音で)で楽しむゲーム

オーディオゲームセンター」という「音」を活用したゲームの可能性を広げる取り組みがあります。この展示会でわたしが体験したのは、車のエンジン音などの効果音と実況ナレーションを聞きながらハンドルを操作して順位を競うレーシングゲームです。それは普段は視覚から多くの情報を得ているわたしにとっても新鮮で、楽しい体験でした。

オーディオゲームセンターの展示会や取り組みを紹介 。CCBT(2025年)、視オーディオディスクリプション版 オーディオゲームセンター + CCBT|ショーケース・プログラム [動画]、 YouTube

これは音からゲームをつくる「オーディオゲーム」に特化したからこそ実現できた表現です。こうしたアプローチをウェブ制作に活かすにはどうすればいいのか、まだ明確な答えを持っているわけではありませんが、自分なりに考え続け、さまざまな人とともに探求していきたいと思います。

2. CUI(キャラクタユーザインターフェース)

:黒い画面に白い英字がたくさん書かれている。ところどころに緑や青の文字で『grep』などのコンピューターへの指示を出すコマンドが打たれている。
CUIは「文字」で構成されるインターフェース、いまも多くのエンジニアがコマンドプロンプトやターミナルとして利用している。Emx(2006)、File:Bash screenshot.png、Wikimedia Commons、https://commons.wikimedia.org/wiki/File:Bash_screenshot.png

スクリーンリーダーに向けたデザインを考える上で、ヒントになりそうなエピソードがあります。視覚に障害があり、普段はスクリーンリーダーを利用する方々と話していたとき、昔のコンピューター環境の話題になり、スクリーンリーダーの変遷について教えてもらいました。

スクリーンリーダーの歴史は意外と古く、1980年代には国産のスクリーンリーダー「BRPC」が存在していました。当時のコンピューターは「Windows」以前の時代であり、画面にはアイコンやボタンがなく、文字だけで操作する「CUI(キャラクタユーザインターフェース)」が主流でした。マウスを世に広めたのはMacだと言われていますが、当時普及していた「MS-DOS(エムエスドス)」などのOS(オペレーティングシステム)では、キーボードを使って文字のみで操作するスタイルが一般的でした。

1990年代に入ると、WindowsやmacOSの普及によって、コンピューターの操作は「GUI(グラフィカルユーザインターフェース)」というマウスやタッチパネルなど視覚的に操作できるシステムが主流になっていきます。それまでのCUI環境が、視覚的な2次元空間へと変化したことで、スクリーンリーダーにも大きな転換期が訪れました。1995年には「95Reader」、1998年には「PC-Talker」がリリースされ、GUI環境でも音声による操作が可能になったといいます。

当時を振り返る中で「MS-DOSが主流だったときには、コマンドを覚えれば視覚障害があってもワープロ機能を使ったり、PCの操作ができた」という話を聞きました。現在のGUI環境では、画面上の情報量が増え、マウスによる操作が求められる場面も多くなりましたが、CUIはテキストベースである分、構造がシンプルで、コマンドさえ習得すれば一定の操作が可能になるという側面があったのです。

実は現在でもエンジニアの多くがCUIでコンピューターを操作することからもわかるように、CUI独自の操作性や機能的な魅力があります。ウェブデザインにおいて、CUI的な「シンプルで直感的な操作性」を取り入れる可能性については、まだ十分に模索されていないのかもしれません。スクリーンリーダーユーザーのお話を聞く中で、GUIとは異なるコンピューターの使い方にもこれからのアクセシビリティと表現のヒントが隠れているのかも、と感じました。

「目安箱」なら始めやすい(かも)

イラスト。ブラウザの枠が窓に見立てられている。その窓を挟み、駅の窓口のような穴の空いたガラス越しに2人が会話している。手前の人物は身振り手振りで話し、内側の人物は『I see』と言っている。どちらも若干焦った様子をしている。窓ガラスの手前右端にオレンジ色の「SUGGESTION BOX」という文字の書かれた意見箱がおいてある。

これまで、多様なユーザーの声を制作に取り入れることの重要性を考えてきました。それと同時に、そういった制作フローを確立することの難しさについても触れてきました。

実際のユーザーの声を聞く手立てとして、「ご意見・ご要望」や「アンケート」「お問い合わせ」などを収集するフォームを活用するのはどうでしょうか?

多くのウェブサイトにはすでに「お問い合わせ」ページが設けられていると思います。お問い合わせフォームはユーザーが困ったこと、聞きたいことを情報発信側に伝えるシンプルな手段です。そこで、お問い合わせに限らず、アンケートフォームや、ご意見・ご要望を集める「目安箱」のような仕組みを整えるだけでも、ウェブサイトはすこしひらかれたものになるはずです。今回のプロジェクトを進めるなかでも、「お問い合わせ」に関する対応について、ユーザーから興味深い話をいくつか伺いました。

エピソード1:スクリーンリーダーユーザー用にCAPTCHAを無効化する金融機関

スクリーンリーダーを使う視覚に障害のあるユーザーが、ウェブサービスにログインするときに起こった困りごとについての話です。

とある金融機関のウェブサイトでは、マイページにログインするときのセキュリティ対策としてCAPTCHA(スパム対策のために人間とロボットを判別する仕組み)が設置されていました。

CAPTCHAは「車」や「信号機」などが写っている画像を選択するような視覚に依存した形式が多く、意図的にユーザーにわかりづらい選択を迫るように設計されているため、アクセシビリティの観点ではしばしば課題に挙がります。その金融機関のサイトでは音声版のCAPTCHAも提供されていましたが、パソコンが読み上げる英語のスペルを即座に正確に認識し、入力する必要があり、そのユーザーは認証に失敗してログインできなくなってしまったといいます。

行き詰まって問い合わせ窓口に連絡すると、担当者の方がそのユーザーのアカウントに対してCAPTCHAを無効化する対応をとってくれたそうです。このように、ユーザーの状況を把握したうえで柔軟な対応があると、アクセスしづらいと感じているユーザーにとっての精神的な負担は大きく軽減されます。

エピソード2:問い合わせすらできないオンライン配信サイト

お笑いライブを見ることが趣味だというスクリーンリーダーユーザーの方からは、ある大手のチケット販売兼イベント配信サービスのウェブサイトでの困りごとを聞きました。事前にチケットを購入し、いざ配信を視聴しようとウェブページをひらいたところ、配信ページがスクリーンリーダーに対応しておらず、操作ができなかったといいます。

そこでサポートを求めようと問い合わせのページを探しましたが、窓口となる情報が一切見つけられなかったそうです。その結果、チケットを持っていたにもかかわらず、視聴を諦めるしかありませんでした。

エピソード3:「問い合わせ」への制作者側の期待

わたしの友人でもあるウェブデザイナーの方は、ウェブアクセシビリティの向上に取り組みたいと考えていたものの、クライアントにそれを優先事項として理解してもらえず、もやもやとした気持ちでいました。

残念ながら、現実にはアクセシビリティの向上が企業にとって直接的な利益にならないと考えられ、ほかの課題と比べて優先度が上がらず、予算化や実行に至らないケースがあります。

実施されたとしても、WCAGなどの規格準拠のスコアを高めることが目的化し、一部のページや機能を意図的に診断対象から除外するなど、課題を感じながらも形式的な対応にとどまることがあります。また、多様性に触れるブランディングの一環としてアクセシビリティが捉えられることも少なくありません。もちろん、それでも一歩前進していることには違いありませんが、本来の目的を見失い、手段が優先されてしまっているともいえます。

そこで、彼が期待を寄せていたのが「ユーザーからの問い合わせ」です。「この機能を使ってウェブサイトを操作できると嬉しい」「こうすると、わたしの環境でもアクセスがしやすくなる」といった声が企業に直接届くことで、ウェブアクセシビリティを向上することの大切さを企業担当者が実感する機会が増え、対応の優先度が上がるかもしれない。と、期待を話してくれました。

もちろん、本来であれば企業側が主体となって取り組むべき課題ですが、現実には、企業内でも情報発信に関するさまざまな課題が存在します。アクセシビリティの向上に向けた社内調整が難しく、動きづらさを感じている担当者もいるかもしれません。そうした場合、具体的な「お問い合わせ」が最後の一押しとなり、制作の現場でも期待されているのです。

接点をつくりフィードバックを得る

以上のエピソードからも、「お問い合わせ」が、クライアントはもちろんウェブサイトを制作するチーム全体側と多様なユーザーをつなぐ重要な接点になり得ることがわかります。一方で、昨今では「カスタマーハラスメント(カスハラ)」という言葉が広がっているように、顧客と企業(ウェブサイトの窓口)が直接やり取りをすることに抵抗を感じることもあれば、お互いにとって少なからぬ負担になる場面もあるでしょう。

たとえばその負担を減らすためには、ウェブアクセシビリティについてのアンケートフォームを常設するなど、直接的なやりとりではなく、まずはユーザーの意見を集めて現状を確認することから検討してもいいでしょう。段取りや工夫次第で、ユーザー(顧客)の気持ちを運営側(企業)が知る機会を少ない負荷で増やすことができるのではないでしょうか。

こうした「目安箱」や「アンケートフォーム」は、現在運用中のウェブサイトであっても比較的気軽にユーザーとの接点を持つことにつながり、ウェブアクセシビリティの向上について考え合う機会になるでしょう。

ユーザーにはそれぞれの生活や文化がある

 さまざまな障害のある方に話を聞くと、ウェブサイトの利用方法は実に多様でした。地域情報を調べる、生協のネット通販を利用する、乗換案内で交通情報を調べる、YouTubeで動画をみる、ライブ配信を視聴する——それぞれの目的や習慣に応じて、さまざまな人がさまざまな方法で活用しています。当事者団体を通じて仲間と最新情報を共有できる状況の方もいれば、そうしたつながりが見つからず、インターネット上で同じような境遇の仲間やコミュニティを探している人もいます。

今回お話を聞いた視覚障害のある方のなかには、読書が趣味という方が多くいました。点字の本、墨字(印刷された文字)の本、DAISY(デイジー)(注1)と呼ばれる音声朗読の本など、それぞれ自分に合う方法で読書を楽しんでいました。

話を聞くうちに、「ユーザー」ではなく「○○さん」として具体的な姿が見えてきます。かれらの存在や考えを知ることで、「この人たちと一緒にアクセシビリティを考えてみたい」と思うようになりました。

ウェブサイトをつくるとき、画面の向こうの人の姿を思い浮かべるのは簡単ではありません。アクセス数やコンバージョン率といったデータの中で、「ユーザー」という言葉にまとめられた存在が、一人ひとりの生活や文化を持つ実在の人であることを、つい忘れてしまいがちです。

わたしはまだまだ、その方々のことや、かれらの属する文化的な背景を十分に理解しているとは言えません。それでも、知らないままにウェブサイトをつくらなければならない状況があるからこそ、自分たちの作り出すコード(デザインやプログラムなどの仕組み)がどのような人に届いているのかを知りたいと感じます。

「ユーザー」という抽象的な概念ではなく、「○○さん」として具体的に思い浮かべながら、かれらならどう考えるか、どう感じるかを想像し、これからのウェブデザインやアクセシビリティの向上に取り組みたい。それは、とても創造的な思考のプロセスだと信じています。

おわりに

イラスト。黒と白がグラデーションに混ざる雲を前に、立ち尽くす後ろ姿の人物。手前には長く影が伸びている。

全5回にわたり、ウェブアクセシビリティについて考えてきました。わたし自身、まだ整理しきれていないことも多く、経験や知識も十分ではないため、はっきりしない物言いが多かったかもしれません。それでも、ここまで読んでくださった方がいて、「ユーザー」や「ウェブアクセシビリティ」について、少しでも深く考えるきっかけになったとしたら、それはとても光栄です。

高度に情報化されていく社会の中で、ウェブサイトやアプリケーション開発の現場は年々そのプロセスが複雑化し、分業も進んでいます。その一方で、アクセシビリティの向上に全体感をもって取り組む人材が十分にいるとは言えない状況です。

デザイナー、エンジニア、編集者、クライアント、そしてユーザー。情報に関わる立場の異なるあらゆる人が、ユニバーサルにもマルチバーサルにも、さまざまなレベルで「アクセスしやすさ」を考えて取り組むことが理想です。ですが、現実には簡単なことではありません。わたしたちが、それぞれにできることをやるしかない中で、「本当に良くなっているのだろうか」「自分だけが頑張っても意味があるのか」など、全体感が見えないアクセシビリティへの取り組みには不安がつきものです。

だからといって、ただ無心に「〇〇障害の方にはこれが必要」「レベルAAに準拠するためにはこの配色」といったように、与えられた枠組みに従うだけでは、多様な環境からアクセスするユーザー一人ひとりが感じているリアリティがこぼれ落ちてしまいます。

こうした状況に悩みながら、社会全体に向き合ってウェブアクセシビリティ向上への取り組みをどう進めていけるのか。それを立ち止まって考えたいと思い、この企画を進めてきました。

このプロジェクトの実行と執筆にあたり、さまざまな環境でウェブサイトを利用する多様なユーザーの方々にお話を伺いました。日々の暮らしや個人的な感じ方のリアリティ、情報社会におけるアクセシビリティへの想いなど、つぶさに共有してくださった方々、貴重なフィードバックを寄せてくださった方々、推進役としてともに歩んでくださったチームの皆さま、ご協力いただいた関係者の皆さまに、心より感謝申し上げます。

そして、日本語・英語・パソコン・スマホ・スクリーンリーダーなど、多様な環境からこのテキストを読んでくださったユーザーのみなさま、本当にありがとうございます。

文: 萩原俊矢, イラストレーション: Maya Numata

訳注

注1

DAISY(デイジー)はDigital Accessible Information Systemを略したもの。日本語では「アクセシブルな情報システム」と訳される。印刷物を読むことが困難な方のためのデジタル録音図書の国際標準規格。

目次

このレポートは全5回でお届けしました。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. (この記事) 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

第4回:ユーザーが多様であるという気づき | わたしたちの“ウェブアクセシビリティ”を考える

このレポートでは、複雑で多様化する現代のユーザー環境と、ウェブサイト制作のプロセスを見つめ直しながら、ウェブアクセシビリティの“いま”を捉え直します。

全5回を通じて、ウェブサイトづくりのこれからや、わたしたち一人ひとりができることを探ります。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. (この記事) 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

ユーザーの感想は気づきをもたらす

イラスト。左上に描かれたきれいな球体の中に『DESIGN』の文字がある。球体から伸びた矢印の先に、さまざまな漫画の吹き出しに囲まれた『Design』の文字が描かれている。

これまでも述べてきたように、ウェブサイトを閲覧・操作するユーザーの多様な視点から意見をもらうことで、制作者では気づけないアクセスしにくさが浮かび上がります。特に、「一般的」とされている設計では考慮されにくい環境で利用するユーザーの感想は、貴重な気づきをもたらします。こういった方々はUX(ユーザー体験)デザインの世界において「エクストリームユーザー(注1)」と呼ばれます。

制作者がどれだけ意識的にウェブアクセシビリティを考え、工夫を凝らしてデザインしても、実際のユーザーが感じるアクセスしづらさは、つくり手の意識の外側からやってきます。よかれと思って実装した機能が、あるユーザーにとってはむしろアクセスの妨げになったり、便利だと思って加えた演出が、別のユーザーにとっては先に進めなくなる要因になってしまうことがあるのです。

制作者が多様なユーザーのアクセスのしかたを的確に想像しながらデザインできれば理想的ですが、経験を積まないとその勘所をつかむことは難しいでしょう。だからこそ、ユーザーとの接点を増やし、実際の声を聞くことが重要になります。

ここでは、わたしがこれまでに経験したユーザーによるレビューの中で、よく意見をもらうポイントを紹介します。

ポイント1:キーボード操作で開けないメニュー

「マウスカーソルを乗せたとき」にメニューが展開するようなインターフェースが、キーボードでは操作できないことがしばしば起こります。また、「Tabキー」で画面上のボタンなど操作可能な要素を選択した際に、強調表示するフォーカスリング機能が無効化されていると、いまどの要素を選択しているのかがわからず、操作ができなくなります。

これらは、実際にキーボードだけで操作してみると、すぐに気づくことができるポイントです。開発者からすると比較的手軽にアクセシビリティ向上に繋げられるポイントと言えます。

ポイント2:操作の「手応え」は大切

ユーザーがボタンをマウスカーソルでクリックしたり、タッチパネルでタップしたときに、その操作に対してインターフェースが適切な反応を示すことは、些末なようで実はとても大切なポイントです。

もし、マウスカーソルをボタンに乗せても、ボタンをクリックしても反応がないとしたら、操作している側はほんの少しだけ不安な気持ちが残ります。多くの人にとっては気にならない程度の違和感かもしれませんが、こうした小さな不安の積み重ねが漠然としたアクセスしにくさを感じさせます。

少し話はそれますが、「ストリートファイター」という格闘ゲームをご存知でしょうか?

この作品は近年、情報のアクセシビリティの観点からも注目されています。このゲームでは、プレイヤーがキャラクターを操作し、攻撃や防御をするたびに、効果音やコントローラーの振動による反応が起こるため、視覚に障害がある方でも楽しめるようです。実際に、ゲームが好きな全盲のスクリーンリーダーユーザーの方から「ストリートファイターは、攻撃や防御、一挙手一投足の動きに対して音や振動のフィードバックがあり、遊んでいてとても臨場感がある」という話を聞いたことがあります。

ウェブサイトのデザインにおいても、ユーザーの操作に対しての反応・手応えを意識的に設計することで、多様な人に、操作できている実感を生み出すことができるのです。

ポイント3:読みやすさは相対的なバランス

色のメリハリは、ウェブサイトの見やすさに大きく関わるポイントです。一般的にウェブアクセシビリティの規格では、背景色と文字色のコントラスト比は「4.5:1」以上が「レベルAA」として推奨されています。

「コントラスト比」という言葉に耳慣れない方もいるかもしれません。たとえば、白い背景に黒い文字を配置すると、最大のコントラスト比である「21:1」になります。一方で、薄いグレーの背景に濃いグレーの文字を使うと、コントラスト比が低くなり、視認性が低下して文字を判別しづらくなります。

しかし、コントラスト比の基準を満たしているからといって、必ずしもすべての人にとって読みやすいとは限りません。逆に、コントラストを強くしすぎると、別の問題が生じることもあります。たとえば、真っ白で広い面積の背景の上に黒い文字を小さく配置すると、「眩しくて読めない」と感じる人がいます。

また、色に関係なく、文字サイズが小さすぎたり、密度の高くアキが均一ではない書体では、文字が潰れて読みにくくなることがあります。

「読みやすさ」とはコントラスト比だけでなく、画面全体の明るさ、文字の大きさ、書体の種類、さらには文章の書き方など、さまざまな要素が絡み合って決まります。そのため、一概に「正解」を定義するのは難しいものなのです。

気づきを分類し「担当者」と「ゴール」を決める

こうした小さな改善を積み重ね、ウェブサイトが不便になることはまずありません。きっと多くの人にとって快適な状態に近づいていくはずです。

しかし、実際にユーザーにウェブサイトをレビューしてもらうと、そこで指摘される内容はもっと曖昧で、不確かで、感覚的です。複数の課題が混在していたり、課題なのかも漠然としていて、「それって個人の好みでは?」とツッコミをいれたくなるようなこともあるかもしれません。そうした多様で自由なコメントを前に混乱しそうになったら、まずは次のように分類してみることをおすすめします。

  • 設計関連:サイトの構造や導線など
  • デザイン関連:色やレイアウト、意匠など
  • 実装関連:操作性や挙動、技術的な不具合など
  • コンテンツ関連:情報の伝え方、文章の表現など

たとえば、このようなカテゴリーに分けて整理すると、誰が主に対応を検討すべきかが明確になります。たとえば、「文字が見にくい」というユーザーの意見に対して、「デザイナーが担当し、リンクテキストを区別しやすくするために色や装飾を見直す」といった具体的なゴールを設定できます。「課題の担当者」と「何をもって解決したといえるのか」の二つの観点を明確にすることで、チームで分担しながらアクセシビリティの向上に取り組みやすくなります。

ウェブアクセシビリティは広がり続ける

イラスト。筒の上部に『ゴール』と書かれた看板がついており、その中にはハートが積み上がったオブジェが奥にある。手前には、いくつものハートがゴロゴロと自由に積み重なり、山になっており、『ゴール』と書かれた看板が転がっている。

多様なユーザーにウェブサイトを見てもらうと、コントラスト比が低く見えにくい、スクリーンリーダーで適切に読み上げられない、一貫性のないデザインが気になって先に進もうと思えないなど、ユーザーの知覚の特性によって共通する課題があるように感じることがあります。しかし、だからといって「〇〇に障害のある人はこう見る」と決めつけてしまうと、ユーザーや環境ごとの感じ方の違いや、一人ひとり異なる繊細な感覚を見落としてしまうことにもなります。

実際のところ、色の見え方は人それぞれで、わたしが出会った人たちの中でも感じ方はさまざまでした。色覚の多様性は奥深く、一律に「これが最適な配色」と言えるものは存在しません。アクセスのしづらさは単純に「ある・ない」で分けられるものではなく、グラデーションのようにつながっています。固定された枠組みに当てはめることで分かりやすくなることもありますが、実際はもっと複雑で、一つのルールで単純に捉えられるものではないということです。

一方で、より効率的にウェブアクセシビリティの向上に取り組みたい企業や組織からは、ウェブアクセシビリティの指針や対応チェックリストを求められることも多く、わたし自身もそうした資料の作成に携わった経験があります。組織が大きくなればなるほど、ウェブサイトに関わるステークホルダーは増え、一貫して継続できる仕組みとするためにも基準となるものを明確にしたいと考えます。

たとえば、ウェブサイトを管理・運営する担当者からは「委託先の制作会社に伝えるための対応チェックリストがほしい」と言われることがあり、受託側のエンジニアやデザイナーからは「どこでも利用できるベストなメニューの実装方法を教えてほしい」と相談を受けることがあります。

たしかに、チェックリストやWCAGのような規格は、何をすべきかを明確にし、対応状況を把握する上でとても有用です。しかし、それだけでは結局ユーザーの姿がみえず実感を伴わない対応をせざるを得ません。チェックリストの背後には、一律に定義できないユーザーそれぞれの思いや感じ方があるのですが、そのグラデーションは捉えづらく、「型にはめること」と相反することでもあります。

アクセシビリティに100点満点はない

つまり、ゴールを設けられないウェブアクセシビリティに「100点満点」はありません。どれだけ工夫を重ねても、すべてのユーザーにとって完璧にアクセスしやすいデザインを実現するのは不可能です。しかし、部分的な調整を続けることは着実にアクセシビリティの向上につながります。

繰り返しになりますが、まず何から手を付けていいかと悩んだら、まずはガイドラインを参考に、実際にウェブサイトをキーボード操作だけで動かしてみる、スクリーンリーダーで読み上げを試してみるなど、いつもとは異なる環境でウェブサイトを操作してみましょう。それだけでも新たな気づきが生まれます。さらに、自分とは異なる環境でウェブサイトを利用するユーザーに直接意見を聞くことができれば、より具体的な改善のヒントが見えてくるでしょう。

チェックリストや規格の背後にある「一般的と括られてこなかったユーザー」のさまざまなウェブサイトのアクセスしづらさに気づくことで、アクセシビリティは単なるチェックリストを達成するためのものではなく、さまざまな環境に対して改善を繰り返す継続的な取り組みに発展していくのではないでしょうか。

文: 萩原俊矢, イラストレーション: Maya Numata

訳注

注1

Extreme Users、 Wikipedia (英語版)、https://en.wikipedia.org/wiki/Extreme_users (2025)

続きを読む

このレポートは全5回でお届けします。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. (この記事) 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

第3回:ウェブアクセシビリティ向上に取り組む | わたしたちの“ウェブアクセシビリティ”を考える

このレポートでは、複雑で多様化する現代のユーザー環境と、ウェブサイト制作のプロセスを見つめ直しながら、ウェブアクセシビリティの“いま”を捉え直します。

全5回を通じて、ウェブサイトづくりのこれからや、わたしたち一人ひとりができることを探ります。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. (この記事) 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

TARLウェブサイトのリニューアルとアクセシビリティ向上のプロセス

イラスト。手前から奥へと連なる山々が広がる。それぞれの山の頂上へと続く道があり、山頂には旗が立っている。

このレポートを掲載している「Tokyo Art Research Lab(TARL)」のウェブサイトは、2022年から2023年にかけて大幅なリニューアルを行いました。わたしはTARLサイトの制作を担当しており、このプロジェクトでは、さまざまなユーザーが直感的に各コンテンツを活用できるように、導線づくりや情報の整理、ウェブアクセシビリティの向上に取り組んでいます。

TARLサイトに限らず、一般的にウェブサイト制作の流れは、次のような段階に分けられます。

  1. 企画:ウェブサイトの目的やペルソナ(主たるターゲットとなるユーザー)、コンテンツの方向性を決定する
  2. 設計:ユーザ体験やウェブサイトの構造を検討する
  3. デザイン:設計をもとに、インターフェースをデザインする
  4. 実装:デザインに基づき、システムを構築する
  5. テスト:完成したサイトを確認し、必要に応じて修正を行う
  6. 公開:ウェブサイトをリリースする
  7. 運用:ユーザーからのフィードバックやアクセス解析の結果をもとに、継続的な改善を行う

各段階の詳細については、拙著『アートプロジェクトのためのウェブサイト制作 コ・クリエイションの手引き』(2023年)で詳しく解説しています。より具体的に知りたい方は、ぜひご覧ください。

早い段階からアクセシビリティ向上に取り組む

図。上部に青いグラデーションで『アクセスしやすい』と書かれた折れ線グラフ。横軸には『企画』『設計』『デザイン』『実装』『テスト』『公開』『運用』の文字が均等に配置されている。各エリアに置かれた点は徐々に上昇し、『公開』で頂点を迎え、『運用』で少し下がる。
筆者の考える「アクセスしやすい」ウェブサイト制作のプロセス。ウェブサイト制作の早い段階からユーザーを巻き込むことでアクセシビリティを向上できる。

まず、ウェブアクセシビリティの向上を目指すには、すべての段階を多様なユーザーとともに進め、検証と実験を繰り返すことが理想です。しかし、実際の制作現場では、費用や時間、人材などに限りがあるので、そうした体制を実現することは簡単ではありません。

限られた条件下で取り組むのであれば、できるだけ早い段階で多様なユーザーの意見を可視化する機会をつくることをおすすめします。

わたしの経験上、ウェブサイト制作の早い時期に多様なユーザーに意見をもらったり、制作チームでアクセシビリティに関する意識合わせを行ったりすると、その後の各段階でアクセスしやすさを意識した制作に繋がる印象があります。

「実際に稼働するテスト段階でまとめて確認すればいいのでは?」と思う方もいるかもしれません。しかし、図にもあるとおり、実装のあとになにか根本的な課題が見つかると、その修正には膨大な時間がかかり、改善できないままリリースせざるを得ないことがあるのです。早い段階で気づくことができれば、わずかな修正でアクセシビリティを向上できることがあります。

TARLウェブサイトでの取り組み

TARLウェブサイトでは、初期段階の「3.デザイン」で、ウェブサイト全体の構成をさまざまなユーザーに見てもらい、感じたことや気になることを共有してもらうレビューの機会を設けました。その際には、伊敷さんに紹介していただいた「サニーバンク」のみなさんが協力してくださいました。レビューではさまざまな意見をいただきましたが、一例として次のような課題が明らかになりました。

レイアウトに関すること

  • ナビゲーションのデザインが分かりづらい
  • 離れた場所に配置されたボタンの存在に気づきにくい

配色に関すること

  • テキストが小さい、または色が薄くて視認性が低い
  • キーカラーの配色がビビッドでまぶしい

言葉づかいに関すること

  • 英語やカタカナを多用した文言が読みづらい
  • ボタンに書いてある文言の意味が直感的ではない

これから実装する際に気をつけること

  • 複雑なインターフェースで、キーボード操作が困難な箇所がある
  • 問い合わせフォームのエラー表示が、スクリーンリーダーで適切に通知されない可能性がある

こうした課題をデザインやプログラムをつくり込む前に発見できると、修正の手間を最小限に抑えることができます。レビューを経て、デザイン面ではウェブサイト全体のカラーパターンや、直感的に操作できないレイアウトを修正。さらには実装上の懸念点をあらかじめ洗い出すことで、次の段階に自信を持って進むことができました。

テスト段階でないと、わからないこともある

とはいえ、デザインや実装が完了した「5.テスト」の段階にならないと発見できない課題も多くあります。特に、スクリーンリーダーが読み上げる内容が、視覚的に得られる情報とどれだけ一致しているのかは、プログラミングの構造と、画像やアイコンに設定される代替テキストによるところが大きく、この段階でのチェックが欠かせません。

TARLウェブサイトでは、視覚に障害のあるスクリーンリーダーユーザー3名に実際に操作してもらい、使いやすさを確認しました。また、わたしもNVDAという無料で高性能のスクリーンリーダーを導入し、最低限の動作をチェックしています。

見た目がデザイン通りに整っていても、HTMLのコーディング(コードの記述方法)によっては、見た目の通りに読み上げられるとは限りません。そのため、実際にスクリーンリーダーで試して確認することは、ウェブアクセシビリティ向上の重要なプロセスとなります。スクリーンリーダーに初めて触れる人はショートカットキーの一覧表を見ながら、閲覧の仕方をYouTubeなどで調べるとよいでしょう。

一方で、パソコンやスマートフォンへの対応に加え、スクリーンリーダーの確認まですべてをエンジニアに求めると「大変すぎる」「負担が大きい」と言われることもあります。実際に、個々の確認や実装までには多くの手数がかかるため、制作チームでデバッグ(テストと修正の作業)の役割を分担できるように体制を考えることや、あらかじめ予算やスケジュールに余裕を持っておくことも重要です。

これまでよりも制作プロセスは複雑かつ大変になることは避けられません。しかし、多様なユーザーに見ていただく段階をつくり、さまざまな環境で確認しながら開発を行うことで、制作チームだけでは気づけなかったアクセスのしづらさが明らかになり、メンバーそれぞれが実感を伴いながらアクセシビリティ向上を進めることができます。

TARLウェブサイトのリニューアルについては、制作チームによる振り返り座談会のレポートも公開しているので、ぜひご覧ください。

ターゲットを絞っても、アクセスは開こう

図。中央が高く盛り上がった山の形をしたグラフ。中央には「ペルソナとして意識されやすいユーザー層」とある。山の裾野は左右に広がっていて両端6分の1程度の領域には「エクストリームユーザー層(想定外の使い方をする層)」とある。
ペルソナは基本的に中央に位置する人を想定し情報発信を組み立てる手法。実際のユーザー層の裾野は広く、想定外の使い方をするユーザーのことをエクストリームユーザーともいう。

ここで、さらにウェブサイト制作の初期段階にまで立ち返り、ウェブアクセシビリティ向上の要点に目を向けてみます。ウェブサイトの設計をはじめる際には、「ペルソナ」と呼ばれる架空のユーザー像を具体的に設定し、その人物に届くように情報設計を行うことがあります。ペルソナは、クライアントとチーム間で情報発信の軸がぶれないようにする「ものさし」として機能するため、設計段階では役に立つ手法といえるでしょう。

一方で、ウェブサイトの強みは「誰もが気軽にアクセスできること」です。事実として画面の向こうには多様なユーザーが存在します。

ユーザーの多様さには精神や身体の特性、年齢、ネット環境といった条件だけでなく、性格や価値観、趣味・嗜好の違いも含まれます。それぞれが異なる世界を持つことが当たり前で、美術が好きな人、ファッションが好きな人、スポーツが好きな人、読書が好きな人、そこには本来垣根はありません。SNSやウェブサイトを通じて、アートシーンの動向を追ったり、気になるブランドの新作コレクションをチェックしたり、試合結果の速報を気にかけたり、誰しもがインターネットを通じて自分の欲しい情報にアクセスしようとしています。

自分たちのウェブサイトにどんなペルソナが設定されていようとも、情報そのものは誰にでもひらかれた状態を目指すこと。

それは当たり前のことですが、ペルソナを重視していくと見落としがちなポイントです。先進的なファッションブランドのウェブサイトであれ、自治体のウェブサイトであれ、どのようなペルソナを想定しても、それがウェブアクセシビリティの検討を無視してよい理由にはなりません。

ユーザーを制作現場に招き入れるには

イラスト。もやもやとしたオレンジ色の背景の上に、ノートパソコンが描かれている。ディスプレイにはZOOM通話画面があり8人の人物が映っている。話す人、腕を組む人、考えごとをする人、カメラをオフにする人などが描かれている。

では、どうやって「ユーザーの声」を制作現場に取り入れることができるのでしょうか。

一つの方法として、専門サービスや専門家に依頼する手段があります。前述のサニーバンクのように、障害のある当事者にレビューをお願いできるサービスが、多くはありませんが存在します。こうしたサービスを活用すれば、フィードバックを得られる場を制作過程に円滑に組み込むことができるでしょう。ただし、費用や時間がかかるので、プロジェクトの企画段階で予算やスケジュールを確保しなければなりません。

そうしたリソースを確保できない、準備が間に合わない場合は、あなたの身近にいる「自分とは異なる感覚や特性・属性を持つ人」に声をかけてみるのはどうでしょう。年齢や身体感覚、言語、情報リテラシー、デザインの好みが異なる人にウェブサイトを使ってもらい、率直な意見を聞くだけでも、制作チームでは気づけなかった課題が見えてくることがあります。

あなたがディレクターやエンジニアだとすれば、クライアント側にもユーザーを巻き込むことの重要性を理解してもらうことが必要です。実装やデザインの領域でアクセシビリティを向上しても、クライアントから提供される文章やバナー画像、PDFファイルがそもそもアクセスしづらい、ということもあるからです。

ただし、ユーザーからのフィードバックをクライアントや制作者が直接受けることは、精神的な負担が大きい場合もあるので注意が必要です。制作者へのリスペクトがないままに「アクセスしづらい」「こうしてほしい」と厳しい意見をぶつけられることもあれば、その逆に、制作チームが無意識のうちにユーザーへプレッシャーを与えてしまうこともあります。

同じ意見であっても、チームが共有する姿勢や、事前の心構え、場の設計によって受け止め方は大きく変わります。そのため、「前向きに発言する」「お互いを責めず、課題に感じることに対して話をする」といったグラウンドルールをチーム全体で合意し、共有しておくことが大切です。こうしたルールがあることで、制作者とユーザーが安心して率直な意見を交わし、建設的なフィードバックのやり取りがしやすくなります。

多様な視点を交えることで、ウェブサイトはより良くなる(ことが多い)

さまざまな視点から得た気づきをもとにウェブサイトのアクセスしやすさを向上させると、ほとんどの場合、より多くの方にとって理解しやすいものになっていきます。それはウェブサイトの制作者側が無意識に「このくらいは分かるだろう」と判断していた部分が浮かび上がるからです。こうした積み重ねはアクセシビリティの向上にとどまらず、ウェブサイトそのものの品質向上につながります。ただし、すべての課題がそのように解決できるわけではありません。情報を発信する側と、ウェブサイト利用者の立場が相反する場面もあります。

たとえば、スパム対策として導入されるロボットと人間を区別し認証する機能「CAPTCHA」は、不正利用を防止する一方で、視覚に障害のある方やコンピューターの操作に慣れていない方にとって大きな障壁となります。また、収益のために表示されるバナーやポップアップ広告は、閉じるボタンが非常に小さく、コンテンツにかぶさるように次々と表示され、すぐに外部サイトに誘導される罠のような仕組みでユーザー体験を大きく損ないます。こうした広告に関しては、エンジニアやデザイナーの立場からも導入を望まない声が多いにもかかわらず、運営の収益化のために入れざるを得ないケースがある、という意見が今回のリサーチの中でも多く聞かれました。

手軽に導入でき、サイトの閲覧数が収益に直結することから、近年では多くのウェブサイトが広告ツールを利用しています。しかし、そこで配信される広告の内容やバナー表示の仕組みは広告会社が管轄しており、広告を導入した側は「広告会社の仕組みを利用しているだけ」という認識を持っているのかもしれません。責任の所在が曖昧になりがちな構造の中で、広告はアクセシビリティとの共存が特に難しい要素のひとつです。簡単には解決できない、複雑な課題だと言えるでしょう。

ウェブサイトで良質なコンテンツを発信し続けるために、収益が重要になるのは当然のことです。しかし、広告が多くのユーザーにとってスムーズな閲覧を妨げる要因になっていることもまた現実です。このように、現在の複雑なネット社会には、アクセシビリティと相性のよくない構造上の障壁も存在しています。

「わかりやすさ」だけが正解ではない

もう一つ、陥りやすいこととして、ウェブアクセシビリティの向上に取り組むと、チーム全体が「わかりやすさ」を重視しすぎてしまうことがあります。デザインにとって「わかりやすいこと」がすべてではない、という視点も大切にしたいです。

デザインの世界にはさまざまな価値観があります。たとえば、建築家のルイス・サリヴァンは「形態は機能に従う」と述べ、機能性を重視する考えを示しました。また、デザイナーでありコンピューター科学者でもあるジョン・マエダは、「シンプリシティの法則」を提唱し、シンプルで直感的であることの重要性を説いています。

一方で、インダストリアルデザイナーのエットレ・ソットサスは、「デザインはたった一人のためにあれば良い」といい、個性や感情を重視しました。また、バウハウス出身の画家のジョセフ・アルバースは、色は絶対的なものではなく、相対的なものという「色彩の相互作用」の理論を打ち立て、配色に絶対(的な正解)はないと考えました。

このようにデザインの表現に一つの答えはなく、つくり手の多様な価値観が反映されることが魅力でもあります。わたし自身、まだ試行錯誤の途中ですが、斬新なインターフェースデザインであっても、アクセスしやすさを損なわずに成立させる方法があるのではないかと感じています。一つのデザインですべてを満たすのは難しいかもしれません。しかし、デジタルのデザインはユーザーの環境に応じて変化できるものだからこそ、新しい表現を活かしながらアクセシビリティを高める方法を模索していきたいと考えています。

アクセシビリティは、これまでのデザインの歴史や挑戦を否定するものではなく、デザインの可能性を広げるものでもあるはずです。「理解しやすさ」「新規性や華やかさ」、そして「アクセスしやすいこと」。これらのバランスを考える過程そのものが創造的な試みになるはずです。

新しいバランスを目指すうえで、多様なユーザーとのコラボレーションはインスピレーションをもたらし、より豊かな表現を生み出すきっかけになり得ます。アクセシビリティ向上において、わかりやすさだけが価値のすべてではないという視点を併せ持つことで、楽しみながら新たなアイデアを導き出すことができるはずです。

少しずつでも変えてみよう

今回は多様なユーザーをウェブ制作の現場に招く必要性とその効果について取り上げました。しかし現実としては、その必要性が十分に認識されて「当たり前」になるまでには、まだほど遠いという印象があります。

しかし、だからこそ、いまのチームや状況のなかでできることを模索し、多様な視点が交わるタイミングや方法を少しずつ増やしていくことが、これからの、わたしたちのウェブサイト制作の可能性を広げるために大切なのではないでしょうか。完璧なやり方にこだわらなくても、一歩ずつ試しながら、新たな気づきを得て、より開かれた制作のあり方をつくっていける時期なのかもしれません。

文: 萩原俊矢, イラストレーション: Maya Numata

続きを読む

このレポートは全5回でお届けします。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. (この記事) 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

第2回:ウェブアクセシビリティの現状を整理する | わたしたちの“ウェブアクセシビリティ”を考える

このレポートでは、複雑で多様化する現代のユーザー環境と、ウェブサイト制作のプロセスを見つめ直しながら、ウェブアクセシビリティの“いま”を捉え直します。

全5回を通じて、ウェブサイトづくりのこれからや、わたしたち一人ひとりができることを探ります。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. (この記事) 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

ウェブアクセシビリティへの注目が高まる

イラスト。暗い舞台の上に『A11Y』の文字があり、スポットライトが当たっている。手前では劇場のカーテンが開いている。
アクセシビリティは、ウェブやエンジニアの業界ではA11Yと省略される。これは、”Accessibility”の”A”と”Y”の間に11文字があるため。

2024年4月、改正障害者差別解消法の施行により、民間企業においても合理的配慮(注1)の提供が努力義務から義務へと変更されました。これは、障害のある人たちが積み重ねてきた不断の働きかけによって実現した大きな変化である、と本で読んだことがあります(注2)。

一方で、情報を発信する側には、「具体的に何をどう進めればよいのかがわからない」という不安を抱えている方もいるのではないでしょうか。今回の施行によって、全てのウェブサイトはアクセシブルでなければならないと規制されるわけではありません。しかし、ユーザーからの「操作できない」といった問い合わせに向き合う機会も増えるでしょうし、多様なユーザーを想定したウェブサイトへの改修作業がはじまる場合もあるでしょう。

こうした状況のなか、公的機関の取り組みも活発です。内容の詳細は後述しますが、デジタル庁による「ウェブアクセシビリティ導入ガイドブック」の発表や、総務省による「みんなの公共サイト運用ガイドライン2024年版」の公開など、つくり手を支援する資料の整備が進んでいます。法改正や公的機関の働きかけが広がる現代は、情報を発信する側にとってもウェブアクセシビリティ向上への取り組みをはじめる好機といえるでしょう。

近年、ウェブサービスのプラットフォームを開発する企業、特にインターネットを介してユーザーにソフトウェアを提供するSaaS(Software as a Service)と呼ばれる領域のエンジニアやデザイナーの間でも、アクセシビリティへの関心が高まっています。多くのユーザーが同じサービスを利用する仕組みだからこそ、より多様な人がアクセスしやすい環境を整える必要があり、開発者たちはアクセシビリティに関する取り組みやノウハウをウェブ上で公開しているほか、勉強会も活発に開催しています。

法改正を機にアクセシビリティへの注目が高まると同時に、SaaSなどのITテクノロジーを活用する企業にとっては、ウェブアクセシビリティの向上が自社製品の品質向上に直結する重要な要素と認識している面もあるのかもしれません。

三角形の図。下から順に『アクセスしやすい』『利用しやすい』『安心しやすい』『満足しやすい』の順で階層構造になっている。
坂本貴史(2012)、 『Evaluation method of UX “The User Experience Honeycomb”』、 blog / bookslope、https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

坂本貴史(さかもと・たかし)さんが作成したユーザー体験の評価軸を示す図をご存じでしょうか。ウェブサイト制作におけるユーザー体験の評価の段階を示しており、デジタル庁のガイドブックにも掲載されています。

まず、「アクセシブル=情報にアクセスしやすい状態」が最下層となり、その上に「利用しやすい」「安心しやすい」「満足しやすい」といった評価軸が積み重なります。

「満足するユーザー体験」とは何かについては、第5回でも考えますが、それは一足飛びに達成できるものではないことが、この図からもよくわかります。つくり手としてどこを目指すにせよ、まず「あらゆる人にとってアクセスしやすい状態」が、ユーザーにとっての良質な体験の土台となることは確かでしょう。

規格やルール

イラスト。『W3C』『AA』『WCAG』『ARIA』『2.0』『JIS-8341』などの文字が書かれたブロックがごちゃごちゃに散らばっている。周囲には、はてなマークが点在している。

多様なユーザーにとってアクセシブルな環境を実現するために、制作の現場ではさまざまな規格やルールが整備されています。法律のような強制力はありませんが、国際的・専門的に検証された指針として、多くの場面で活用されているものです。ここでは、その代表的なものを紹介します。

WCAG(ウェブコンテンツ・アクセシビリティ・ガイドライン)

WCAG」は、ウェブアクセシビリティに関する国際的なガイドラインであり、W3C(ワールド・ワイド・ウェブ・コンソーシアム)が策定しています。達成基準には「A」「AA」「AAA」の3段階があり、たとえAであってもすべてに準拠することは簡単ではありません。多くの企業や団体では「AA準拠」を「目標とする」ことが一般的です。「目標とする」という表現は曖昧ですが、準拠することが簡単ではないことの裏返しでもあります。

2025年現在の最新版は「WCAG 2.2」で、2023年10月に正式に公開されました。日本国内でも、WCAG 2.2を基準にする動きが広がっています。

このガイドラインは、「知覚可能」「操作可能」「理解可能」「堅牢」という4つの原則に基づいていて、より多くのユーザーに適したウェブ環境を実現するための指針となっています。たとえば、次のような基準が設けられています。

  • 知覚可能
    • 文字と背景の色のコントラスト比が十分か
    • 画像や動画には代替テキストや字幕が提供されているか
  • 操作可能
    • すべての機能がキーボード操作でも利用できるか
    • ボタンやリンクが押しやすい設計になっているか
  • 理解可能
    • ナビゲーションが統一されているか
    • エラーメッセージが明確で分かりやすいか
  • 堅牢
    • スクリーンリーダーなどの支援技術と互換性があるか
    • 標準仕様に準拠した正しいコードで構築されているか

このように、デザインや実装に関することだけではなく、文書表現や全体の統一感などその範囲は多岐にわたります。このように、WCAGは、情報発信をする側にとって重要な指針ですが、内容が専門的なため、技術に明るくない人や初めて読む人は難解に感じるでしょう。実際に取り組みをはじめる際には、後述する「ウェブアクセシビリティ導入ガイドブック」と併用すると理解がしやすいです。

JIS X 8341-3:2016

JIS(日本産業規格)は日本国内向けに策定された基準で、ウェブアクセシビリティに関する規格として「JIS X 8341-3:2016(正式名称は高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ)」があります。「8341」は「やさしい」とも読めることから、「JISやさしい」と覚えると親しみやすいかもしれません。

この規格は、WCAG 2.0と内容が完全に一致しています。ただ、WCAG2.0が公開されたのは2008年で、当時はスマートフォンやタブレットの普及が現在ほど進んでおらず、モバイル対応が十分ではないという課題が指摘されていました。そのため、2025年現在ではJIS X 8341-3の改定が検討されており、最新のWCAG 2.2を基に、新たな達成基準の追加やモバイル対応の強化が予定されています。(注3)

みんなの公共サイト運用ガイドライン(総務省)

総務省が発表した、公共機関のウェブサイト向けの資料が「みんなの公共サイト運用ガイドライン」です。2024年に新しいバージョンが公開され、「JIS X 8341-3」改正の動向や、求められる取り組みの解説、公的機関による事例の紹介、関係法令や参照文書の最新版などが盛り込まれています。

このガイドラインでは、特に新しくウェブサイトをつくる際の基本的な考え方や注意点が整理されています。公共機関だけでなく、規模の大きなウェブサイトや情報提供を目的とするウェブサイトの運営者にとっても参考になる内容です。

約180ページとボリュームがありますが、ウェブ運営に関わる人は一度目を通しておくとよいでしょう。

ウェブアクセシビリティ導入ガイドブック(デジタル庁)

デジタル庁が発表した「ウェブアクセシビリティ導入ガイドブック」は、ウェブアクセシビリティの基本的な考え方や導入手順をまとめた資料です。このガイドブックは、JIS X 8341-3やWCAGに基づいていますが、専門的な用語が多いこれらとは異なり、初心者にも理解しやすいように画像や具体例を交えて解説されています。

ウェブアクセシビリティに取り組みはじめたばかりの方は、まずこの資料を読むことでスムーズに全体感が理解できるでしょう。ただし、技術の話やデザイン面での工夫、コンテンツ制作における視点まで、対象とする範囲は多岐にわたるため、自分一人ではなく情報発信を行うチーム全体で共有し、一緒に学ぶ機会を持つことをおすすめします。

APG(ARIA オーサリング・プラクティス・ガイド)

ARIAは、スクリーンリーダーやキーボード操作を利用するユーザーが、ウェブサイトをより操作しやすくするための仕様です。その具体的な実装方法をまとめたものが「APG(ARIA オーサリング・プラクティス・ガイド)」です。

一般的にウェブサイトには、ナビゲーションメニューやポップアップウィンドウ、ボタンなど、さまざまなインターフェースの要素があります。これらが技術的に適切につくられていないと、スクリーンリーダーを使うユーザーや、キーボード等で操作するユーザーにとって、使いづらいものになってしまうのです。

APGでは、そうした課題を解決するために、具体的な解説とともに汎用的に適用できる実装方法の事例集などを用いて解説しています。ウェブ開発者にとっては、実際に動くサンプルを解説付きで確認できるため、とても参考になる資料です。

ウェブアクセシビリティ向上に取り組む側の不安

以上のように、インターネット上にはウェブアクセシビリティの向上を支援するさまざまな資料が公開されています。とはいえ、初めて取り組む場合は不安もあるし、資料を読む順番もわからないし、実際にどうやってはじめればよいのかわからないかもしれません。多くのウェブサイト制作の現場では、「ウェブアクセシビリティ向上に取り組む」というときに、次のような進め方で実践しているようです。

  1. axe DevTools(注4)やLighthouse(注5)などのツールを使い、自動診断を行う。または、JIS X 8341-3:2016 や WCAG 2.2 に基づく評価・診断を専門業者に依頼する
  2. 指摘された大量の問題点(数十から数百個)の中から、なんとなく重要そうで数が多いものを修正する
  3. 専門業者が再診断し、目標とする規格への準拠具合をA、AAなどのスコアとして評価する
  4. 診断結果のスコア表とウェブアクセシビリティ方針をウェブサイトで公開する

このような進め方が間違っているとはいいませんが、あまりに数多くの問題点が指摘されるために、「なぜそれが課題となるのか」を一つひとつ十分に理解できないこともあるでしょう。またスコアを公表するにあたって、それぞれの問題の背景や事情と向き合うよりも、AAを一つでも増やせるように指摘項目をつぶす作業に尽力してしまいがちです。

そうして多様な環境やユーザーの実態がつかめないままアクセシビリティ向上を進めていると、「この対応は本当に意味があるのだろうか……?」という不安を抱えたままひたすら課題をこなす状況に制作者が陥ることがあるのです。

次回は、実際の取り組みを例に挙げ、ウェブサイトにおける「実感」をともなうアクセシビリティ向上について考えてみましょう。

文: 萩原俊矢, イラストレーション: Maya Numata

訳注

注1

合理的配慮については、次の記事がわかりやすく参考になります。

星加良司, 石村研二 (2024)、「合理的配慮」を考える:その1:「合理的」な「配慮」って何?[ウェブ記事]、 DIVERSITY IN THE ARTS TODAY、https://www.diversity-in-the-arts.jp/stories/47810

注2

松波めぐみ(2024)、「社会モデルで考える」ためのレッスンーー障害者差別解消法と合理的配慮の理解と活用のために、生活書院、50

注3

中村直樹(2024)、JIS X 8341-3の改正に関する準備──ウェブアクセシビリティ基盤委員会作業部会6、 ウェブアクセシビリティ基盤委員会、 https://waic.jp/news/ciaj-column-13/

注4

axe(アックス)は、ウェブアクセシビリティの自動テストツール。ウェブサイトがアクセシビリティ基準(WCAGなど)に適合しているかをチェックすることができます。https://www.deque.com/axe/

axe DevToolsを用いたチェック実施方法の例はfreeeアクセシビリティー・ガイドラインも参考になります。
https://a11y-guidelines.freee.co.jp/checks/examples/axe.html#check-example-axe

注5

Lighthouseは、Googleが提供するウェブページのパフォーマンスやアクセシビリティを分析できる自動テストツール。
https://developer.chrome.com/docs/lighthouse/overview/

続きを読む

このレポートは全5回でお届けします。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. (この記事) 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

第1回:ウェブサイトのユーザーに出会う | わたしたちの“ウェブアクセシビリティ”を考える

このレポートでは、複雑で多様化する現代のユーザー環境と、ウェブサイト制作のプロセスを見つめ直しながら、ウェブアクセシビリティの“いま”を捉え直します。

全5回を通じて、ウェブサイトづくりのこれからや、わたしたち一人ひとりができることを探ります。

  1. (この記事)第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

はじめに

イラスト。やさしいオレンジ色のふわふわした背景の上に、VRゴーグルを着けた人、液晶タブレットで作業する人、イヤフォンで音楽を聴く人、翻訳されたウェブサイトを閲覧するノートパソコンのユーザー、大型のワイドモニター、AI搭載のスマートスピーカーなど、さまざまなデバイスとそれを使う人々が描かれている。

日本のインターネット普及率は85%を超え、情報を得る手段やデバイスの使い方は多様化しています。現代は、さまざまな感覚や特性をもつ人々が、さまざまな環境からインターネットに接続し、「ユーザー」という言葉が指す範囲も広がっている時代です。

このプロジェクトでは、「ウェブアクセシビリティ」を改めて考え直すことを目的としています。ウェブアクセシビリティと聞くと、障害のある人に絞ってウェブサイトを利用しやすくする取り組みだと捉える方もいるかもしれません。かつて、わたしはそう考えていました。しかし、実際にウェブアクセシビリティの向上に取り組むうちに、「そもそも障害とは何だろう」「アクセスできるとはどういうことだろう」「規格やチェックリストは何に基づいているのだろう」と、もやもやすることが増えていきました。

今回のプロジェクトは、「そもそもウェブアクセシビリティとは何か?」という疑問から再出発し、障害の有無にかかわらず多様な環境からアクセスするユーザーと対面して伺ったお話を振り返りながら、これからのウェブサイトのあり方を探る試みです。

とはいえ、わたしはウェブアクセシビリティの専門家ではなく、研究者でもありません。ウェブサイト制作の経験は豊富にありますが、アクセシビリティについてはまだ学びの途中で、日々悩みながら実践している技術者の一人です。ウェブディレクターとして活動するなかで感じた、アクセシビリティの向上をチームで持続的に行うことの難しさや、ユーザーの情報体験を設計する立場だからこそ生じる葛藤をふまえ、「よいウェブデザイン」とは何かを、自分の経験やユーザーから見聞きしたことをもとに考えてみたいと思います。

わたしについて

わたしは萩原俊矢(はぎわら・しゅんや)といいます。ウェブデザイナー・エンジニア・ディレクターとして、ウェブサイトやアプリの開発をしています。2000年代初頭からウェブサイト制作をはじめ、当時流行していたFlashを使い、インタラクティブな作品やウェブサイトを数多くつくってきました(いま思えば、それは非常にアクセスしづらいものだったと思います……)。ここ15年ほどは、企業や大学、美術館、アートプロジェクト、デジタルアーカイブのウェブサイトに携わり、企画・設計・構築・運用を行っています。このTARLのウェブサイトの制作や運用も担当しています。

本業のかたわら、友人たちとメディアアート関連のプロジェクトも手がけてきました。もともと「メディアと人の関係性」や「新しいメディアを用いた表現」に関心があり、その延長で、多様なユーザーとメディアの関わりをなめらかにする取り組みであるウェブアクセシビリティに興味を持つようになりました。

最近は、ウェブサイトをつくる際にさまざまな障害のある方にデザインやプログラムの「レビュアー」として参加していただき、感じたことを共有してもらいながらウェブサイトへのアクセスのしやすさを向上させる取り組みに力を入れています。このような方法にいたるきっかけは、10年ほど前に、自分がつくったウェブサイトがどのように使われているのかを目の当たりにしたことでした。

わたしとは異なる方法でウェブサイトをみるユーザー

伊敷さんがウェブサイトをブラウジングする様子。総務省(2012年)、視覚障害者(弱視)のホームページ利用方法 [動画]、 YouTube

2015年ごろ、とあるウェブサイトの勉強会で、視覚に障害のあるユーザーがどのようにウェブサイトを操作するのかを実際に見る機会がありました。そこで、ウェブアクセシビリティの専門家である伊敷政英(いしき・まさひで)さんと出会います。

伊敷さんは弱視(当時)で、Windowsのアクセシビリティ機能を活用し、画面の色を白黒反転させたり、一部を大きく拡大したりしながら、ディスプレイにぐーっと顔を近づけて情報を得ていました。

また、別の参加者には全盲の方もいました。その方はスクリーンリーダー(画面の情報を合成音声で読み上げるソフト)を使用し、キーボード操作のみでウェブサイトにアクセスしていました。コンテンツを読み上げる速度は驚くほど速く、最初はそれが日本語であることもわからないほどでした。

つまり、制作者がデザインや表現を慎重に考えてつくったウェブサイトが、実際にはその想定とは大きく異なる形で利用されていたのです。お二人が自分の使いやすいように環境をつくっている様子を目の当たりにし、わたしは強い衝撃を受けました。

当時わたしの制作したウェブサイトは、お二人のような閲覧環境を考慮した検証をまったく行っていなかったために、情報が取得しづらい場面が多くありました。それにもかかわらず、伊敷さんは「ここを調節すればもっと良くなりますよ」と前向きに改修方法を指摘してくださり、その姿勢には頭が下がる思いでした。

“ユーザー”不在のままつくることへの違和感

視覚に障害のある方によるウェブサイトのレビューを体験してから、わたしはウェブサイト制作に向き合うときに何かもやもやとした違和感を覚えるようになりました。

これまでデザイナーとしてユーザーの情報体験を設計するとき、「ナビゲーションではユーザーが迷わないように」「ページを開いたときにちょっと驚きがあるように」といった工夫を重ねてきました。でも、そこで想定していた「ユーザー」とは、わたしがこれまで出会ってきた人々の印象から生まれたもので、出会う機会の少なかった視覚障害のある方のことは、想像すらできていなかったのです。

わたしたちが「かっこいい」「便利に違いない」と思ってデザインしたものが、実際にはまったく違う方法でアクセスされている。あるいは、そもそもアクセスすらできないのかもしれない。そしてそういった多様なユーザーのことをわたしは想像すらできていないと知り、ウェブデザインの前提が大きく揺らぐような感覚を覚えました。

それは当時のわたしにとってショッキングな出来事であると同時に、メディアと人の関わり方は自分が思うよりも多様であることを実感し、新たな可能性を感じる体験でもありました。それ以来、ウェブサイトをつくるときには、できる限りさまざまなユーザーにレビューをお願いするよう制作体制を見直すようになっていきました。もちろん、予算やスケジュールによってはそういった状況をつくれないこともあるのですが……。

ユーザーそれぞれの環境

その後、伊敷さんから「サニーバンク」という障害者専門のクラウドソーシングサービスを紹介してもらいました。サニーバンクでは、多様な障害特性のある方が実際にウェブサイトを利用し、その体験をレポートとして提供する「ウェブサイトアクセシビリティ診断サービス」を行っています。

わたしもこのサービスを何度も利用し、普段なかなか出会えない多様なユーザーにウェブサイトを見てもらっています。そこでは、つくり手が想像もしていなかった「アクセスしづらさ」があることに気がつくことができます。たとえば、次のような状況です。

  • スクリーンリーダーでメニューが正しく読み上げられず、先に進めない
  • マウスでの細かい操作が難しく、小さなボタンが押しづらい
  • 文字を拡大するとデザインが崩れ、操作ができなくなる
  • 音を出せない環境では、字幕やキャプションがないと動画の内容がわからない
  • 明るい配色や眩しい画面が苦手な方にとっては、派手な色づかいがつらい
  • 自動再生される動画に驚き、止めようとしても停止ボタンが見つからない
  • ロボットか人間かを判定するシステム(CAPTCHA)で歪んだ文字が読めず、AI文字認識アプリを使って突破する(突破できていいのかはさておき……)

これらはほんの一例にすぎません。実際には、ここで挙げきれないほど数多くの「アクセスしづらさ」がみつかります。そして、その多くは、ウェブサイトをつくる側が想定するユーザー像のなかに、かれらが置かれた多様な環境を含めていないことが原因ではないかと気づきました。

わたしたちつくり手の権限が大きくないか?

イラスト。ユーザーとデザイナーがぶら下がる天秤。デザイナーのほうが重く、傾いている。

アメリカの法学者のローレンス・レッシグは、著書『CODE VERSION 2.0』の中で「コードは法である」と述べています。ここでいう「コード」とは、コンピュータープログラムやソフトウェア、ハードウェアを含むシステム全体のことです。つまり、ユーザーはシステム上ではあらかじめ決められたルールに従うしかなく、コードは「法」のようにわたしたちの行動を左右する力を持っているのです。

たとえば、ウェブアンケートの入力項目に「男・女」の選択肢しか用意されていなかったとします。しかもそれが必須項目だった場合、ユーザーは「どちらかを選ばなければ送信できない」という状況に陥ります。対面であれば「答えたくない」「他の選択肢がほしい」と伝えることもできますが、システムではそうしたやりとりの余地がありません。情報発信側が意図していようといまいと、デザイナーやエンジニアがつくる「コード」は、ユーザーができること・できないことを決めてしまう強い力を持つのです。そしてそれが、ときに大きな負担を強いることもあります。

ユーザーの姿は見えにくい

これは、階段やエレベーターがないビルのようなものです。物理的な環境では、こうした構造的な問題が目に見えやすく、また実際に危険も伴うため建築基準法などを運用することによって共通のルールが定められています。しかし、ウェブの世界ではどうでしょうか。コードによってユーザーの行動が制限されていることに、制作者もユーザーも気づきにくいのではないかと思います(注1)。

ウェブサイト全体のマップとなる「グローバルメニュー」がマウスで使うことしか想定されていなければ、キーボードで操作する人はページ移動ができなくなります。動画プレーヤーやスライドショーが自動再生されるエリアに停止ボタンがなければ、ユーザーは自分の意思でそれらを止めることができません。感覚過敏のある人のなかには、激しい動きが苦手で、画面の照度を極端に下げて閲覧せざるを得ない方もいます。こうした状況下では、ユーザーが自分自身でなんとか対処するか、あきらめるしかありません。

ウェブサイトをつくる側からはユーザーの姿が見えにくいものですが、コードが影響を及ぼすのは無機質なマウスカーソルではなく、それを操作している多様な知覚や身体をもち、異なる人生を歩む人たちなのです。

つくり手が固定しすぎないデザイン

もちろん、あらゆる環境のすべての困りごとを完璧に把握することはできません。しかし、つくり手として「自分たちのコードがどのようにユーザーの行動を左右しているのか?」を意識することは、とても大切でしょう。

ウェブデザイナーの多くは、パソコンやスマートフォンの画面サイズを基準にデザインを行いますが、実際の閲覧環境はそれに留まりません。フォントサイズを大きくしたり、色をモノトーンにしたり、スクリーンリーダーを使ったり、外国語に翻訳していたり——ウェブサイトは本来、こうした多様な変化を受け入れられる懐の深いメディアです。プログラミングを用いたデザインの強みは、その柔軟性にあるのです。

わたしは、デザイナーがデザインを100%コントロールするのではなく、ユーザーに40%くらい、ゆだねてみるのもいいのかなと考えています。文字を大きくしたってかまわない、モノトーンだって理解しやすい、キーボードでも操作しやすい。そういう余白をユーザーに渡せないでしょうか。ただ、それはデザイナーが100%思いのままにつくるよりも、デザイン面でも実装面でも、ずっと実現することが難しい高度な表現技術ではあるのですが……。

ウェブサイトの可能性をさらに考えるために、次回はまず、ウェブアクセシビリティの現状についてあらためて確認していきます。そして、ウェブデザインの特性や可能性を軸に、ウェブアクセシビリティの向上について引き続き考えていきたいと思います。

文: 萩原俊矢, イラストレーション: Maya Numata

訳注

注1

情報へのアクセスしやすさを高めるための法律として、「情報アクセシビリティ法」があります。ただ、わたし自身の不勉強もありますが、こうした法律の存在を意識して情報設計をすることはほぼなく、今回のリサーチを通じてその存在を知りました。情報アクセシビリティの重要性を認識することはあっても、それを法律という枠組みで考える機会は少なく、実際の制作現場ではあまり意識されていないのが実情です。

続きを読む

このレポートは全5回でお届けします。

  1. (この記事)第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける