BAsixs(ベーシックス)

BAsixsは、ビジネス・アーキテクツが運営する
「あたりまえ」をアップデートしつづけるメディアです。

Webサイトのアクセシビリティを考えるーー使いやすいって、誰にとって?【前編】

読了目安 : 12

  • 投稿日 :
  • 最終更新日 :

この記事を書いた人

プロフィールアイコン(イラスト):BAsixs編集部
BAsixs編集部

日々の業務の中で「あたりまえ」をアップデートできた取り組みを発信しています。

Webサイトを「誰でも使いやすく」するために欠かせないアクセシビリティへの取り組み。しかし「何から手をつければいいのか」「どこまで対応すべきなのか」と悩むことはありませんか?

現場でもデザイン・開発・進行など立場によって“使いやすさ”の定義が異なり、判断が揺れることもあります。その課題を解決するカギは、実務での基準への対応にとどまらず、チームや組織として継続的に推進する取り組みへと広げていくこと。法改正や国際ガイドライン(WCAG)を踏まえつつ、“誰のための使いやすさか”を問い直す姿勢が、プロジェクト全体を前進させます。

本記事では、Webサイト制作の現場で活躍するBusiness Architects(ビジネス・アーキテクツ、以下BA)のデザイナー・エンジニア・ディレクターの4名による座談会です。前編では、なぜいまアクセシビリティが注目されているのか、BAが目指すあらゆる使いにくさをなくす設計の考え方を語ります。

使いやすいって、誰にとって?

Webサイトのアクセシビリティを考えるーー使いやすいって、誰にとって?【前編】

インタビューした人

プロフィールアイコン(イラスト):ディレクター 富本
富本セールス&マーケティンググループ/ディレクター(ビジネス・アーキテクツ)

地元・愛知の印刷会社や広告会社にてディレクター・フロントエンドエンジニアとしてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、自社コーポレートサイトやオウンドメディアのマーケティングに携わっている。また、長期にわたりウェブアクセシビリティ基盤委員会(WAIC)のWG4への参加も。好きなキャラクターはリラックマ。

インタビューを受けた人

  • プロフィールアイコン(写真):デザイナー 水戸
    水戸クリエイティブグループ/リーダー/デザイナー(ビジネス・アーキテクツ)

    Web制作会社数社でのデザイン経験を経て2017年にBA入社。入社後はLP〜大規模な案件まで複数案件の情報設計・デザインに携わり、現在はこれまでの経験を活かして客先常駐中。2020年 UD検定初級、2023年 人間中心設計スペシャリストの資格取得。 人に恵まれていることに感謝しつつ、毎日やりがいと面白さを感じながら課題解決のために日々奮闘しています。

  • プロフィールアイコン(イラスト):シニアディレクター、Web解析士 齊藤
    齊藤アカウント&ディレクショングループ/リーダー/シニアディレクター、Web解析士(ビジネス・アーキテクツ)

    Web業界20年。デザイン、コーディング等を経験し、現在は金融系のUI/UX開発のディレクターを担当。NISAやiDeCoの利用で初めて投資をおこなうエンドユーザーにもわかりやすく目的の行動がどれるような情報設計をめざして日々取り組んでおります。

  • プロフィールアイコン(イラスト):ディレクター、WEB解析士 滝沢
    滝沢アカウント&ディレクショングループ/ディレクター、WEB解析士(ビジネス・アーキテクツ)

    IT系企業にてwebデザイン・コーディング・ディレクション・デジタルマーケティングなど幅広く経験した後、2020年BAに入社。webディレクターとしてサイトの制作・運用の他、サイト改善にも携わっている。

  • プロフィールアイコン(イラスト):フロントエンドエンジニア 小宮山
    小宮山Webエンジニアリンググループ/テックリード/フロントエンドエンジニア(ビジネス・アーキテクツ)

    およそ20年フロントエンド実装を専門に活動。一部上場企業のグローバルウェブガバナンス基盤整備を主に手がける。プロジェクトにおいてはテンプレートやコンポーネント開発を中心に担当。ユーザビリティやアクセシビリティ、SEOといったフロントエンド周辺技術に関する造詣も深い。

世界中で進むアクセシビリティへの取り組み

アクセシビリティへの取り組みが、世界中で急速に進んでいます。その背景にあるのは、法律・ビジネス・社会の3つの要因です。アメリカのADA(障害を持つアメリカ人法)やEUのEAA(欧州アクセシビリティ法)、日本の障がい者差別解消法など、各国で法整備が進み、義務化や罰則を伴うケースも増えています。

さらに、世界人口の約16%が障がいを抱えており、顧客拡大や企業価値向上の観点からも対応は欠かせません。近年は「誰もが使えるデザイン」を重視するインクルーシブデザインの考え方が広がり、アクセシビリティへの取り組みは推奨から必須へと変わりつつあります。

いまなぜ、多くのWebサイトで「アクセシビリティ」が求められているのでしょうか?

滝沢:アクセシビリティへの対応は、世界的にもはやデフォルトといってもよく、Webサイトの立ち上げやリニューアルの際に必ず考慮すべきポイントです。

実際に海外ではアクセシビリティ対応が不十分であることに対する訴訟も起きているため、企業のイメージや訴訟リスクも考えると、規模や業態に関わらず、あらゆる企業が対応すべきだと思います。

齊藤:日本でも2024年4月に障がい者差別解消法の改正法が施行され、Webサイトにおける「合理的配慮の提供」が義務化されました。

現時点では、民間企業には法的義務はありませんが、ユーザー体験の向上や社会的責任の観点から、グローバル企業を中心に対応を進める企業が増えています。その際に基準となるのが、国際的にはW3Cが策定した「Web Content Accessibility Guidelines(WCAG)」で最新バージョンは2.2です。また、国内ではそれをもとに標準化した「JIS X 8341-3:2016」があり、WCAG 2.0に相当します。グローバルにビジネスやサービスを展開する場合には、WCAGへの対応が不可欠といえますね。

滝沢:「WCAG」では、アクセシビリティのチェック項目が3段階の優先度に分けられています。優先度1をすべて満たすと「A」、優先度3の項目だと、多くの人にとって使いやすい「AAA」となります。

総務省の「みんなの公共サイト運用ガイドライン(2024年版)」では、WCAG 2.2の適合レベル「AA」への準拠が推奨されていますから、民間企業においても「AA」への対応を目指す所が多くあります。

ディレクター/Web解析士 齊藤が話す様子

なるほど。障がい者への配慮に加え、誰にとっても使いやすいWebサイトを実現するために、アクセシビリティへの対応が奨励されているわけですね。

滝沢:そうですね。障がいの有無にかかわらず、アクセシビリティ対応がされていないWebサイトでは、多くのユーザーが本来得られるべき情報が得られないという状態にもなりかねません。

また、アクセシビリティに対応したことで、Webサイトの構造が整理されSEO面も改善されるケースが少なくありません。「すべての人に対しての見やすさ・使いやすさ」という観点から、ぜひWebサイトのご担当者さまにはアクセシビリティを考慮していただきたいですね。

目指しているのは、あらゆる「使いにくさ」をなくすこと

では、BAが考える「アクセシビリティ」とはどのようなものでしょうか?

水戸:「アクセシビリティ」とは、“障がいの有無を問わず、誰もが快適に利用できる状態”を指します。これまで日本では、“障がい者への配慮”という観点から語られることも多かったのですが、滝沢さんが先ほどおっしゃったように、私たちBAには、単なる「配慮」や「特定の人のための対応」ではないという共通認識があります。

具体的には、UX(ユーザーエクスペリエンス)を支える基本的な要素のひとつとして、「アクセシビリティ」を位置づけています。私たちが大切にしているUXは「誰もがストレスなく目的を達成できる体験」を意味しますが、その実現のためには、ユーザーが抱えやすいさまざまな「使いにくさ」をあらかじめ想定し、解消していくことが欠かせません。

たとえば、視覚や聴覚に制限のある方だけでなく、デバイスの操作に不慣れな高齢者、荷物などで一時的に手がふさがっている方、通信環境が不安定な状況に置かれた方など、「誰もが直面しうる、あらゆる“使いにくさ”に対する設計上の備え=アクセシビリティ」だと捉えています。

対個人だけでなく、ユーザーが使用する環境も踏まえて設計していくんですね。

水戸:そうです。アクセシビリティ対応とは「見た目や操作のわかりやすさ」のみならず、「読み込みの速さ」や「エラーの伝え方」、「目的までの導線のわかりやすさ」など、目に見えにくい部分も含めて体験全体をより良くしていく取り組みです。

こうした細部への配慮を積み重ねることで、誰にとってもストレスの少ない利用体験につながり、サービス全体の信頼性や満足度も高まっていきます。

突き詰めていくと、アクセシビリティを考慮したWebサイトの開発は、「誰のためにデザインしているのか?」という問いに立ち返る作業だと感じますね。

実際にその「ユーザー像」はどのように想定して設計しているのでしょうか?

滝沢:まずは、お客さまが抱えるユーザー層・ターゲット層がベースになります。ただ、それをそのまま同じにするのではなく、社内であらためて「どんな人が見る可能性があるWebサイトなのか」を洗い出していきます。

一方で、公的な機関であれば「国民全体」が対象ユーザーになることが多いので、ありとあらゆるユーザーを考慮して丁寧に設計する必要がありますね。

ほかにも、リニューアル案件の場合は、GA4などのアクセス解析ツールを用いれば既存サイトのデータも活用できます。ユーザーが使用しているデバイス・OSやよく開かれているページを調査して分析します。

齊藤:私は大手証券会社のWebサイト開発に携わっていますが、そこではカスタマーサービスへ寄せられる声を開発に生かすことが多いですね。

たとえば、「注文ボタンの位置がわかりにくい」「文字が読みづらい」など、そうした声からユーザー像が立体的になっていきます。

他にも、サイト内のユーザー行動を分析することで、離脱率の高いページをピンポイントで改修することもあります。。そうした計測データに基づいて改善を行うことで、より多くの人を目的の場所へ導けるよう意識しています。

水戸:私も齊藤さんと同じ証券会社の案件を担当しているのですが、多くのプロジェクトではペルソナやターゲット像がある程度明確に設定されていることが多いですね。そのうえでデザイナーとして設計の際に意識しているのは、“ユーザーの取引経験や金融リテラシーの幅”です。

たとえば、初めてお取引される方と、日常的に投資をされている方とでは、同じ画面でも見え方や理解スピードが大きく異なります。「どれだけ金融用語に慣れているか」「取引中、どこで不安に感じやすいのか」といった、リテラシー差による「つまずきやすさ」を想定した設計を常に心がけています。

また、自分自身がユーザーになったつもりで考えることも大切にしています。「どんな文言なら理解しやすいか」「どこにボタンを配置すれば、迷わずに注文に進めるか」など、利用者の視点に立った判断を大事にしています。

デザイナー 水戸

まずユーザーの立場になって考える。BAではこの基本姿勢を大切にされているわけですね。しかし、プロジェクトを進めていくうちに、「つい自分の感覚に引っ張られすぎてしまった……」ということもあるのではないでしょうか?

小宮山:私は実装フェーズを担当するエンジニアなので、「こうした動きのほうがもっと使いやすいんじゃないか?」などと、自分のエゴのようなものによく引っ張られそうになります。

そうしたときは、WCAGなどの「客観的な指針」と「自分の感覚」をすり合わせるようにしています。自分の思い込みを疑う。これが大切ではないでしょうか。

滝沢:アクセシビリティの対応という点では、「障がい者の方はこのWebサイトは見ないだろう」という思い込みも危険です。全盲の方でもPCでバリバリ仕事をしていらっしゃる方もいるし、色覚異常でもすばらしい絵を描かれている方もいる。

つい先日、とあるイベントで記念冊子を配る際、文字を自分の好みで薄めのピンク色にしたんですが、参加者に色の判別が苦手な方がいたことを知り、修正したことがあります。この経験から、小規模でもアクセシビリティに対する意識は持ち続ける必要があるなと反省しました。

水戸:私自身、デザイナーとして「このUIは直感的に伝わるはず」と思っても、ユーザーテストで多くの人が迷ってしまう、という経験は少なくありません。

ユーザーの状況やリテラシー、利用環境は本当に多種多様です。そのため、自分の感覚だけで判断しないよう、第三者レビューや他職種との壁打ちを積極的に行って、視点の偏りに気づく機会をつくるようにしています。

たとえばエンジニアからは「このUIでは、操作時に不具合が起きるかもしれない」などと操作上の懸念を指摘してもらったり、ディレクターからは「いちユーザーとして読んでいて違和感があった」といった、率直な意見をもらったり。

どちらの視点も、自分一人では気づけなかった引っかかりを教えてくれる貴重なきっかけになります。「自分の感覚だけでユーザーを代表できるわけではない」という前提に立つこと。それが大切だと思います。

標準化された視点と社内の連携で生み出すWeb体験

「個々の思い込み」や「連携ミス」を防ぐために、プロジェクトチーム内でどのようなコミュニケーションを心がけているのでしょうか?

齊藤:私たちのチームでは、お客さまとの打ち合わせの前後で、必ずチーム内でミーティングを行い、そこでプロジェクトがどんな方向で進んでいるのかメンバーで何度もレビューしながら進めていきます。

ユーザーテストも綿密に行い、要件として明文化されていない部分に対しても、「誰かが使いづらい状態になっていないか?」という観点を常に意識し、最低限のユーザビリティを担保しています。

特にフィンテックサービスは、数量や金額の打ち込みミスが金銭的リスクに直結するので、とくに視認性や情報構造、入力のところなどはチーム一丸となって細心の注意を払っていますね。

小宮山:私は実装時に「このUIは使いづらいかもしれない」と思ったら、デザイナーやディレクターに、その意図を確認するようにしています。

それで「今回はUIよりも見た目のインパクトによる訴求力を重視したい」と説明されたら納得して、可能な範囲でUIの改善に努めます。こういった連携のよさもBAの特徴なのかなと思いますね。

職種を横断して気軽に相談できる環境があるんですね。

小宮山:これまで、さまざまな会社でエンジニアとして働いてきましたが、BAは視覚表現とかユーザビリティとか、自分が気にする部分を理解してくれる人が多いと感じますね。感覚が合う人が多いといいますか。

だから話しやすいし、連携もしやすい。アクセシビリティに関しても、メンバーが普段から意識していて、同じレベルで話ができるので品質が担保しやすい環境だと思います。

水戸:たしかに、明確なアクセシビリティ要件がなくても、BAのメンバーひとりひとりが、最低限担保しなければいけない基準を意識しているように思います。

私自身、デザイナーの立場から、日々の設計やデザインレビュー、モック実装確認のなかで、最低限、以下の点を確認するようにしています。

  1. 視認性の高い配色(コントラスト比の担保)
  2. キーボード操作によるフォーカス移動の確認
  3. 視覚情報だけに頼らないフォーム入力エラーの表示
  4. 見出しや情報の階層が適切に整理されているか

どれも基本的なことですが、「このUIは誰にとっても使いやすい状態になっているか?」という視点で見ると、こうした確認がとても重要だと感じます。

滝沢:小宮山さん、水戸さんの言うように、社内のアクセシビリティに対する意識は高いため、ある程度お任せできる安心感があります。その分、ディレクターはお客さまに対しアクセシビリティ対応の必要性や気をつけるべきポイントなどを発信していくことが大事だと思います。

ただし、お客さまによっては「スケジュールや予算の都合でアクセシビリティばかりに注力できない」というご都合もあるので、プロジェクトの規模感に応じて対応範囲を定めていくことも大切です。

齊藤:Webサイト公開後に「やっぱりアクセシビリティにもしっかり取り組みたい」となることも考えられますから、それを前提に素材を用意することも重要ですね。

お客さまからいただいた条件のなかで、できる限りのアクセシビリティ対応をする。それが私たちBAの基本スタンスだと思っています。

対談風景:水戸の話を齊藤が聞いている様子

「誰のため」を問い直すことから始まる

今回の座談会で浮き彫りになったのは、アクセシビリティは「特定の人のため」ではなく、「すべての人の体験を底上げする基準」だという点です。
障がいの有無やデバイス環境、経験値の差にかかわらず、“使いにくさ”は誰にでも起こりうるもの。その前提に立つことで、プロジェクトは「自分の感覚」を超えて、より多様な視点を取り込んだ設計に近づいていきます。

また、国際基準に基づいた取り組みに加え、国内でも法改正をきっかけに注目度が高まっています。BAとしても、チーム内で最低限守るべき基準を確認・共有する姿勢がますます欠かせないと感じています。

続く後編「アクセシビリティ対応をサイト制作の“あたりまえ”にーー使いやすいって、誰にとって?」では、こうした取り組みがどのように制作や運用に反映され、さらにどんな可能性を広げていくのかを掘り下げていきます。