ブランドを毀損しないためのウェブアクセシビリティ ~攻守でバランスよく実現するブランド価値~
突然ですが、「合理的配慮」というキーワードをご存知ですか? 合理的配慮とは、障害者差別解消法に関連する、近年重要視されている概念の一つです。障害がある人もない人も、互いにその人らしさを認め合いながら共に生きる社会を実現することを目指して、令和6年(2024年)4月1日より、「合理的配慮の提供」が事業者に義務化されました。物理的環境や意思疎通への配慮、これまでのルールや慣行の見直しなど、各事業に合わせて、柔軟な対応が求められています。
この施策に伴い、Webサイト制作の現場では、アクセシビリティへの対応がますます求められるようになってきています。誰にとっても使いやすいWebサイトは、UXやブランドイメージの向上など、企業の社会的価値を高めます。反対に言えば、アクセシビリティへの対応が不十分だと、機会損失やブランドのイメージダウンも招きかねません。
今回のFont College Open Campusでは、株式会社デパートの取締役 CCO モチマス ミサ氏と、シニアフロントエンドエンジニア 吉田 圭吾氏を講師にお迎えし、アクセシビリティ改善によってユーザーが等しく情報を得られるということ、また、ブランドの毀損も防ぐために必要なポイントなどを解説していただきました。
株式会社デパートは、「イイDesignでイイ社会を実現する」をビジョンに掲げるWeb制作会社です。社名の由来を語ってくれたのはモチマス氏。モチマス氏は、ブランド認知向上やUXリサーチ、UIの設計などを得意領域としています。
「デパートという社名の由来は、まさに百貨店から来ています。さまざまな専門家たちが、ユーザーのお悩みに対してそれぞれの解決方法を提示し、解決した後に待つ『イイね!』の世界を創り続けたいという想いを持っています。ユーザーや顧客の“体験”に重きを置いた設計を重要視して、なんだか面白いな、と思ってもらえるようなWebが作れるように、日々励んでいます」
吉田氏は、アクセシビリティやコンポーネントの設計、ガイドライン策定などが得意領域。アクセシビリティという言葉が話題に上がりだしたのはごく最近のことですが、吉田氏は以前より「当たり前のこと」として、よりユーザーに近い立場に立った実装に取り組んできたといいます。
そんなお二人から、ウェブアクセシビリティを考える上での必須ポイントを教えていただきました。
1. 選ばれるための、ブランド認知
ブランドとは、企業や商品、サービスの価値を伝え、それらに対しての「好き」を集めていく(ファンを作っていく)役割を持っています。そして、共感してくれるファンを増やし、認知度を上げていくことが「ブランド認知」という考え方。「ブランド認知」「ブランディング」という言葉は、かつては広告代理店など一部の企業で使われていた用語でしたが、今やどの企業にも必要不可欠な考え方であり、ビジネスシーンではあらゆる業種において、当たり前のように出てくるキーワードとなりました。
一般社団法人日本能率協会が示す「日本企業の経営課題2022」によれば、2020年から日本企業が抱える経営課題として、「人材の強化」、「売上・シェア拡大」、「働きがい・従業員満足度・エンゲージメントの向上」、そして「株主価値向上」などが挙げられています。また、今後増えていくであろう課題として、「企業のミッション・ビジョン・バリュー浸透や見直し」、「ブランド力の向上」、「コーポレート・ガバナンスの強化」、「CSR・CSV事業を通じた社会課題の解決」などが上位に挙げられています。
採用や人材育成、サービス・商材・事業、コーポレート・ガバナンス、社会課題への参入といった、あらゆる側面において、その企業がどういった取り組みをしているのか正しく認知してもらうこと。
モチマス氏曰く、こうした経営課題解決には、ブランディングやブランド認知が不可欠だといいます。また、社内におけるエンゲージメントの向上について言えば、インナーブランディングという考え方も手段の一つ。このように、錯綜する企業課題を解決するために、ブランド認知は重要な鍵を握っているのです。
ではまず、何から取り組んでいったらいいのでしょう。
「ブランド認知や興味喚起を促進するためには、まず企業や商品・サービスの魅力を定義することが最も重要です」とモチマス氏。商品のスペックや価格といった事実だけでなく、それを取り巻く歴史や文化的背景、情緒性や社会的役割など、さまざまな情報の総合的な分析にパワーをかける必要があると言います。ただスペックを伝えるだけでは、ユーザーにとって有益ではなかったり、「素敵だな」と思ってもらえる接点として不十分な場合があります。一つの商品にまつわるさまざまな情報をしっかりと理解した上で、その核となる部分を定義しなくてはなりません。
核となる部分が定まってからは、どのように発信するかを考えるフェーズに移ります。リアルタイムに膨大な情報が溢れ、多様化が当たり前に定着しつつある昨今、ブランドの定義を一方的に表現し続けるだけでは認知されづらい傾向にあります。時代や市況、ターゲットに合わせて、悩み続け、その時々でアジャストを繰り返し続けることが重要です。
「一度定義するだけでブランディングは終わりません。時代に合わせて変化し、定義し直し、動かし、攻め続ける姿勢が、ブランド認知にとって重要なのです。では次に “攻め続ける方法”を、もう少し紐解いていきましょう」
攻めの企業努力として効果的な考え方の一つは、「サステナビリティを意識する」ということです。Googleのあるレポートによれば、インターネットで製品を検索する際に「サステナブル」というキーワードを使う人が2015年から2020年の間の5年間で10倍に増えたといいます。
この事実は、商品やサービスのスペックのみの訴求や、短絡的な売上を得るためのみの売上戦略だけでは不十分であるということを示しています。今や、自社が生み出す影響に対して責任を持ち、環境や社会の課題を解決しながら、自社にしかできない価値を掘り下げている企業が求められている時代なのです。
サステナビリティを意識することは、たとえ表層的に見えない部分での戦略だったとしても、ブランド認知促進に大きく影響すると言えるでしょう。
二つ目の考え方は「Web上での情報発信」です。今やインターネットはインフラ化しており、インターネット上での情報発信は必須。あるアンケートによれば、企業からの情報を受け取る手段として最も選ばれているのは「公式Webサイト(ホームページ)」であると言います。
ユーザーにとって、公式の情報が最もファクトに近く、企業が発信したいメッセージを最も正確に受け取れる手段、と認知されていると言えます。また、Web上での情報発信といっても、SNSやメールマガジンなど、ユーザー特性に合わせて適した発信方法の取捨選択も欠かせません。
こうした検証はまさにマーケティングそのもの。つまり、ブランディングだけでなくマーケティングも意識して、届けたい人に適切な方法での情報発信を行うことで、ようやく選ばれるブランドになっていくのです。
「今回はさらに踏み込んで、一方的に攻め続けるだけでいいの? ということをお伝えします。現代のような多様な時代に、適切に認知され、届けたいユーザーに届くブランドになれているかどうか。間違った戦略がブランドを毀損してしまうことのないように、Webがどのような影響をもたらすのかを、改めて確認していきましょう」
2. 何もしていないとブランドの価値が下がる? Webが与える影響
ここからは吉田氏にバトンタッチです。ブランド認知において「Webによってブランドイメージを下げてしまっているかも?」という視点のもと、さまざまなケースを検証していきます。
「Webは、さまざまな人がさまざまな使い方をしています」と吉田氏。色覚の判別が難しい方はコントラストを変更して閲覧している場合もあるでしょうし、近くのものしか見えないという方は拡大鏡ツールを利用する場合もあるでしょう。音声読み上げ機能や点字ディスプレイなど、さまざまなツールも開発されていますし、そもそも閲覧するデバイスやOSも人によって異なる環境で利用しています。
「こうした、Webの使い方に関する話題は、初めて見聞きした人もいるかもしれません。私は日頃から、アクセシビリティに対する捉え方は、発信する側と受け手にギャップがあると感じてきました。こうしたギャップを解決しないと、ユーザーにとっては情報が正しく得られない、ということになりかねません。つまりユーザーにとって“おもてなしができていない”ということになってしまうのです」
ここで一枚の画像を見てみましょう。
「depart」と書かれた二つのボタンがあるとします。どちらがより見やすいと感じますか?
色覚に障害がある人にとっては、左の方が見やすいとされています。
また、どちらのボタンも、当初の色合いより暗く見えているのがわかるでしょうか。もしこの右側のベースがもっと暗い茶色だったとしたら、コントラストがわかりづらい視力の方にとっては、文字が全く見えないボタンになってしまうのです。
色覚に限らず、伝える側の認識と受け取る側の態勢にはギャップが生じている場合があります。そのギャップがある限り、伝えたい情報が等しく全員に正しく届くことはありません。内閣府が発表している「令和5年障害者白書」によると、令和5年度における日本の障害者数は約116.2万人に上るとされ、これは、総人口の約9.2%にあたります。
また、高齢者人口の増加に伴い、視覚や聴覚、運動能力が低下する人々の数も増えることが予想されています。このように、障害や加齢に伴った生活のしづらさを感じている人は年々増加しており、今後も増えていくことが予想されます。
こうした現状を踏まえ、Webを運営する側は、誰でも使えるように配慮すべきことがたくさんあります。例えば音声読み上げの機能を使用する人たちのためにキーボード操作だけで使えるような仕様にしたり、視覚障害がある人への配慮としては、色だけではなく模様や文字のコントラストによって情報を区別したり。
他にも、上肢障害の方のためにクリック可能領域を広くとる、聴覚障害の方のために動画には字幕をつけるなど、細かく挙げればたくさんの「合理的配慮」が見えてきます。
年齢や身体条件、使用する場面にかかわらず、Webで提供されている情報に誰もがアクセスできるということがまさに「アクセシビリティ」。ここで重要なのは、アクセシビリティは決して障害者や高齢者のためだけの対応ではないということ。
例えば、いつもしている眼鏡を忘れてしまったり、怪我をしていてうまく手指が使えなかったりといった一時的な身体の不調や、電車の中で音が出せなかったり、強い日差しの中で淡い色がよく見えない時など、自分ではどうすることもできない状況も訪れます。
そう考えると、一時的な障害は誰にとっても起こり得るものなのです。つまり、アクセシビリティの考え方を無視してしまうと、状況によっては誰もが利用できなくなる可能性もあるというわけです。
ウェブアクセシビリティに対応すべき理由をもう少し細かく考えみましょう。
まず一つ目は、障害者差別解消法の改正です。今年の4月に改正・施行されたもので、これまで行政機関のみが義務化されていた「合理的配慮の提供」が民間事業者においても義務化されました。ウェブアクセシビリティそのものが合理的配慮の提供といえるわけではありませんが、合理的配慮の提供をよりスムーズに実施するためには、ウェブアクセシビリティの対応がとても重要になってくる、ということです。
二つ目の理由としては、海外では訴訟問題に発展するケースもある、ということ。海外は日本に比べてアクセシビリティに関する法整備が格段に進んでいます。アメリカでは、アクセシビリティを十分に確保していなかったことが原因で企業が訴訟される件数が、年間4600件を超えており、アメリカ国内で売上高第5位を誇る小売業者「ターゲット・コーポレーション」は、2006年に全米視覚障害者連合によって訴訟され、600万ドルの和解金を支払いました。
また、カナダや韓国では、公的機関だけでなく民間企業もウェブアクセシビリティ対応が法的義務になっています(「従業員が50人以上の企業」など条件付)。こうした法整備は今後日本でも同様に求められる可能性が高く、海外の基準に合わせて取り組むべき課題の一つといえます。
三つ目の理由としては、企業に求められる社会的責任、SDGsと言う観点です。ウェブアクセシビリティの根源である「すべての人が公平にアクセスできる環境を整備する」と言う考え方は、SDGsの理念である「誰一人取り残さない」と一致しています。
昨今の企業におけるサステナビリティ活動においても「人権の尊重」や「多様性・公平性・包括性」といったテーマが重要視されており、こうした近年のムードとウェブアクセシビリティの概念は同じ価値観を持っているといえます。
「私自身も、Webに限らずあらゆる商品やサービスにおいて、企業の皆様がアクセシビリティを意識されているという印象を受けます。過去のお客様では、Webサイトの中で“サステナビリティ”と言うカテゴリを設け、その中にアクセシビリティに対する考え方を提示されている企業もありました。つまり、サステナビリティにおける活動の一環として、アクセシビリティに取り組む企業が増えてきた、と捉えることができるかと思います」
以上を踏まえると、やはり時代は、「ウェブアクセシビリティ対応は当たり前」の時代へと徐々に移り変わってきています。すべての人が等しくWebサイトを使うことができ、Webを介して取得できる情報の格差を無くさなくてはなりません。伝えたいブランドの価値を正しく伝え、育ててきたブランドの価値を守るためにも、ウェブアクセシビリティの取り組みはより一層重要視していく必要があります。
3. 積み上げたブランドを毀損しないアクセシビリティ
では、具体的なアクセシビリティ対応の方法を考えてみましょう。
まず法的な位置付けについて整理していくと、ウェブアクセシビリティの対応自体は法的義務ではありません。そもそも「合理的配慮の提供の義務」とは、“障害のある方から社会的障壁を乗り越えたいという要望があった際に、負担になりすぎない範囲で対応する”と言う意味合いを持っています。
例えば、駅で車椅子を使って登るのが困難な段差があった場合、利用者から要望があった際に、駅員が携帯スロープなどを使って補助する、といった対応が考えられるかと思います。これはWebにおいても当てはめることができます。ある申し込みサイトにおいて、視覚障害のある方から“Web上での申し込み手続きができない”という意見が挙がった場合の合理的配慮としては、電話やメールといった別の対応策を設ける、ということが挙げられます。
こうした個別の対応が義務化される一方で、環境の整備に関してはあくまで「努力義務」。環境の整備とは、“より多くの人に合理的配慮の提供ができるように、その環境をスムーズに整える”という意味合いを持ちます。
先ほどの駅のケースでいうと、そもそも車椅子では登れないような段差をなくし、スロープなどバリアフリーな設備を整えるということ。申し込みサイトにおいては、スクリーンリーダーを利用する方も含め、すべての方が申し込み手続きをできるよう、ウェブアクセシビリティを改善するということ。
つまり、法的な位置付けで考えてみると、ウェブアクセシビリティは個別対応に特化したものではなく、環境全体を整えるものなのです。
「ここで忘れてはならないのは、いくら努力義務とはいえ、ウェブアクセシビリティを怠ったために合理的配慮の提供をせざるを得なくなった、というケースも考えられるという事です。そうした事態を防ぐ前段として、ウェブアクセシビリティ対策を万全に行っていただきたいです」
ウェブアクセシビリティを考えていく上で、自社サービスに関する利用者状況や、さまざまな障害者特性を把握する必要がありますが、一つの企業がいちから確認していくのはなかなか困難なこと。
そこで、一つの拠り所として、Web技術の標準化を推進するW3C(World Wide Web Consortium)が策定している「Web Content Accessibility Guideline(WCAG)2.2」というガイドラインを活用してみましょう。現在はこのガイドラインが事実上の国際標準となっており、ISO規格やJIS規格などのベースになっています。ただ、WCAGの最新版は2.2ですが、JIS規格と内容が一致しているのは2.0になるため注意が必要。そうした細かな知識も頭に入れておくと安心です。
「では、ガイドラインに掲載されている具体的なウェブアクセシビリティ対応を見ていきましょう。今回はFCOCに合わせてテキストに関するものをいくつかピックアップしてみました」
まず、画像に代替テキストを設定することです。スクリーンリーダーで取得できる情報と、視覚的に取得できる情報に差がないようにする必要があります。あとは先述の通り、テキストと背景のコントラストを十分に確保することや、文字サイズを拡大できるようにすること。
また、テキストの行送りや行間をユーザー自身が任意で変更しても表示が崩れないような工夫や、情報が機械的に解析できる(マシンリーダブル)ように実装するなど、細かな項目が挙げられています
また、ガイドラインには「文字を画像化しない」という項目もあります。デザイン性を確保するために、見出しなどの文字が画像化されていることがありますが、そうすると拡大表示や行間調整などができず、マシンリーダブルでもないためコピーや翻訳もできなくなってしまいます。そのような場合に、Webフォントの活用が有効になってくるのです。
もう一つ、フォントによって解決できるアクセシビリティがあります。それは「読みづらい文字を減らす」ということ。ディスレクシア[1]やロービジョン[2]を抱える方たちは、字の形によっては認識するのが困難な場合があり、もちろんこれは環境や状況によって誰にでも起こり得ます。こうした状況はUDフォントの活用によって解消されることが多く、重要なアクセシビリティ対応の一つです。
現在、ガイドライン上ではフォントに関する明確な規定はありません。ですが、規定にないからといって検討から外してしまうのではなく、フォントを考えることがさまざまなアクセシビリティ向上につながるということを頭に入れておきましょう。
4. 攻守で実現するブランド認知
モチマス氏による、本日のまとめに入ります。
ブランド認知について戦略を練っていくと、つい攻め続ける方にばかり目がいって、思った通りに情報が届いていない、という状況に陥ってしまうことも少なくありません。ここで大切なのはバランス。ウェブアクセシビリティに限らず、ユニバーサルデザインやインクルーシブデザインも意識して、きちんと届くこと、つまり“情報発信性”も担保したブランド認知に取り組むことが重要になってきます。
「マーケティングや企業戦略を“攻め”の姿勢と捉えるならば、情報発信の適性を意識することはいわば“守り”といえるでしょう。攻守バランスよく実現することで、誰一人取り残さないブランド認知を叶えることができるのではないでしょうか」
また、「アクセシビリティ対応を意識すると、自由な表現ができなくなるのでは」という声を聞くこともあるそう。こうした意見が出る一方で、吉田氏はアクセシビリティを“制限”とは捉えていません。
「私は、ウェブアクセシビリティの対応は、デザインの機能的な部分の改善だと考えています。アクセシビリティを考慮したデザイン設計をすることでUX(ユーザーエクスペリエンス)の向上につながり、そうしたユーザー体験はブランドの価値を守ること、そしてファンを増やすことにもつながっていくと信じています」
5. Q&A
本編終了後、両氏に寄せられた質問に答えていただきました。多くの質問の中から今回は3つをピックアップします。
デパートさんでは、制作したWebサイト・ウェブアクセシビリティを設定したものを最終的にどのように確認されていますか?
(吉田氏)
段階的になりますが、まず最初はテストツールなどを使って問題を検出してもらうとか、機械にできることは機械に任せるという方針です。ただ、機械で検出できるものって、アクセシビリティ全体の問題で言うと3割程度だったりするんです。結果的に残り7割は人の目で確認することになりますね。
アクセシビリティの要件があるプロジェクトの場合は、情報設計やデザインの段階からアクセシビリティに精通したエンジニアが参加していて、最終チェック段階で大きな問題が出ることはあまりないですね。
(モチマス氏)
最初の企画段階が鍵になってきますね。人の目でのチェックというのも、誰でもできるわけではなく、やはりやや専門的な知識が必要なので、社内でも知識がある特定の人間に力を借りることがあります。
アクセシビリティ観点で参考になるサイトがあれば教えていただきたいです
(モチマス氏)
社内で勉強会を行うときに活用している書籍やサイトはいろいろありますね。
(吉田氏)
個人的に一番参考にしているのは、デジタル庁から出ている『アクセシビリティ導入ガイドブック』ですね。WCAGって実は、初見だとかなりとっつきにくい内容だったりするので、その理解を深めるために活用しています。
そもそも「アクセシビリティってなに?」というところから、改善事例まで、かなりわかりやすく書かれていて、発行元の安心感もありますので、まずはそういったものをご覧になるといいかと思います。
(モチマス氏)
社内全体での理解度を上げることも大事だと思っています。ウェブ制作ってそもそも一人でできることではないので、一つのガイドブックをみんなで共有するだけでも、社内全体の理解がより深まるかと思います。
Webサイトのコントラスト比に関するセルフチェックツールでおすすめはありますか?
(吉田氏)
一番簡単に使えるセルフチェックツールは、Google ChromeのLighthouseです。本来はパフォーマンス測定のためのツールですが、その一環としてアクセシビリティの問題も検出してくれます。
また、LighthouseはDequeのaxeを採用しているのですが、axeにはブラウザの拡張機能もあり、フロントエンド側でテストツールとして使えるAPIもあり、世界中で使われているツールです。axeは信頼度としては一番おすすめかなと思います。
(モチマス氏)
自分でデスクでデザインを作っている時に、そのデザインを毎回アクセシビリティチェックに通すのってかなり大変だと思うんです。デザインシステムを組み上げていく時のコントラスト比チェックには、Figmaなどお使いのデザインツールのプラグインとして使えるものもあります。
例えば、私も吉田さんも、Starkというプラグインを使っています。Starkは、実際に障害をお持ちの方が開発に携わっていたりするツールで、利便性も高いのでおすすめです。
ほかにもさまざまな質問にお答えいただいていますので、アーカイブ動画も併せてご覧ください。
今後ますます重要になってくるアクセシビリティ対応。法的整備やガイドラインといった表面的な対応だけにとらわれない、もっと本質的な「誰一人取り残さない」という考え方が、長く愛されるブランド作りに欠かせないものになってくるといえそうです。
Font College Open Campusはこれからも不定期に開催し、noteでレポートを掲載していきます。今後の掲載もどうぞお楽しみに!