Webサイトリニューアル特集

花王のウェブアクセシビリティ、4年で700サイトの品質基準達成をめざす“全社プロジェクト”の進め方

花王グループでは、ウェブアクセシビリティ向上・確保に全社で取り組んでいる。足かけ4年の一大プロジェクトはどのように進行しているのか。花王に聞いた。

花王グループでは、誰にとってもアクセスしやすいデジタル情報発信を目指して2021年12月、ウェブアクセシビリティ向上・確保に全社で取り組むと発表した。

そして2022年3月には、World Wide Web Consortium(ワールドワイドウェブコンソーシアム、W3C)が公表しているWeb Content Accessibility Guidelines(ウェブコンテンツアクセシビリティガイドライン、WCAG)2.1レベルAAを目標とした具体的なアクセシビリティ方針を定め、自社サイトで公表している。

2024年までに主要ウェブサイトを、2025年までに花王グループ国内外の全約700サイトの品質基準達成を目標としており、目下対応中だ。制作を委託する制作会社も含めると、関係者は約1200名にのぼる。

足かけ4年の一大プロジェクトはどのように始まり、どんなプロセスで進行しているのか。同プロジェクトを率いる花王の後藤亮氏、渡邊佳菜恵氏に聞いた。

(左から)花王株式会社 DX戦略部門 事業DX推進センター マーケティングプラットフォーム部 部長 後藤亮氏、プラットフォーム開発室 渡邊佳菜恵氏
(左から)花王株式会社 DX戦略部門 事業DX推進センター マーケティングプラットフォーム部 部長 後藤亮氏、プラットフォーム開発室 渡邊佳菜恵氏

「よきモノづくり」の延長として、「伝わる情報発信」にも注力

人と暮らしに寄り添うブランドとして幅広い製品を世の中に届けている花王では、1887年の創業以来、消費者起点の“よきモノづくり”を大事にしている。自社のユニバーサルデザイン指針を設け、見やすいカテゴリ表示や片手で計量して使える容器など、誰もが使いやすい製品の開発を目指す。

片手で計量ができる「アタックZERO」の洗濯用洗剤(花王提供)
片手で計量ができる「アタックZERO」の洗濯用洗剤(花王提供)
誰にでもわかりやすいよう、アクセシビリティを考慮した表現を用いて制作したスキンケアブランド「Curél」(キュレル)のコンテンツ(花王提供)
誰にでもわかりやすいよう、アクセシビリティを考慮した表現を用いて制作したスキンケアブランド「Curél」(キュレル)のコンテンツ(花王提供)

この“よきモノづくり”の延長で、“誰にとってもアクセスしやすい情報発信”にも注力しようと考えたのが、ウェブアクセシビリティ向上・確保の発端だったという。

元々、花王では希望者に商品の点字シールを配布したり、テレビCMに字幕を付けたり、といった取り組みをおこなってきました。ウェブサイト制作においても、現状の基準よりも一段階低いWCAG2.0レベルAを参考にしたチェックリストは存在していましたが、利用は任意でした。

それらを踏まえウェブサイトの品質をより高めようと考えたとき、グローバルで重要視されるようになったウェブアクセシビリティの確保が浮上しました(渡邊氏)

渡邊氏によると、コロナ禍でのデジタル移行も相まって、近年ウェブアクセシビリティの確保を義務付ける法律や条例を整備する国や地域が増えているという。

その背景には訴訟問題もあり、アメリカではウェブアクセシビリティに関する訴訟が増加している。同国には障害を持つ人がアメリカ社会に完全に参加できることを保証したADA(Americans with Disabilities Act 障害を持つアメリカ人法)という法律があり、ADAに基づくウェブアクセシビリティ提訴の件数が2017年の814件から2018年には2,285件と281%増になっている。

花王では、コロナ禍でのデジタル移行のタイミングでウェブアクセシビリティ向上に着手した
花王では、コロナ禍でのデジタル移行のタイミングでウェブアクセシビリティ向上に着手した

そうした国と比較すると日本の対応は遅れ気味だが、重要事項として取り組む企業も出てきている。また、コロナ禍の都道府県知事による記者会見に手話通訳が付くなど、世の中の情報への意識が変化している感覚もあったという。

そういった背景に加え、日本市場に目を向けると人口減と高齢化が顕著に進むと共に、海外から移り住む人が増えています。縮小、かつ多様化する市場で売上を維持するには、より多くの方に伝わる形で情報を届けることが求められます。

これらを踏まえ、デジタル化が急速に進む今のタイミングで、ウェブアクセシビリティの向上・確保に着手すべきだと考えました(渡邊氏)

約700サイト、大規模プロジェクトのプロセスは?

グローバルのウェブサイトも含めると、対応すべきサイト数は全700ほど、関係者は約1200名にのぼる。この大規模プロジェクトを、次のプロセスで進行している。

2020年WCAG2.1レベルAAを評価基準としたアクセシビリティ診断の実施、現状課題の把握
2021年12月全社でウェブアクセシビリティに取り組む意志をプレスリリースで発表
2022年3月具体的な方針を確定し、発表
2022年4月〜社内教育をスタート、ウェブアクセシビリティの説明会を開催

プロセス1現状の課題の把握

まず自社のウェブサイトをいくつか診断したところ、30%はCMSが生成するhtmlが、残りの70%はコンテンツが原因で、基準とするウェブアクセシビリティが確保できていないことが判明した。

当社では、CMSにAdobe Experience Managerを全社で利用しており、花王仕様にカスタマイズしています。私と後藤が所属するマーケティングプラットフォーム部がCMSの開発・運用・保守をおこなっているため、当部署でCMSの改修を進めています。数年がかりで取り組み、ようやく完成が見えてきました(渡邊氏)

ウェブアクセシビリティ向上・確保のプロジェクトを担当する後藤氏と渡邊氏
ウェブアクセシビリティ向上・確保のプロジェクトを担当する後藤氏と渡邊氏

またコンテンツに起因する問題は、画像に「代替テキスト」が設定されていない、背景色と文字色の「コントラスト比」が低く見えづらいなどだ。代替テキストとは、画像が何らかの原因で読み込めない際に代わりに表示される、あるいは画面読み上げソフトを利用した際に読み上げられるテキストを指す。これが未設定の場合、たとえば視覚障害者など文字で画像の情報を得たい人が情報を得られなくなってしまう。

プロセス2具体的な方針を確定

これらの課題を踏まえ、方針を決めるにあたり専門的知識を持つ外部パートナーにWCAG2.1レベルAAの内容を踏襲した「アクセシビリティ対応チェックシート」の作成を依頼した。

チェック項目は上述した「代替テキストの入力」や「背景色と文字色のコントラスト比」を含め、かなりの量がある。といっても、CMSを利用すれば一部のチェック項目は自動で満たすようCMSが設計されているそうだ。

プロセス3社内教育をスタート

チェックシートの完成後は、社員教育としてウェブアクセシビリティの説明会を度々開催。技術的な説明よりも、「なぜ今ウェブアクセシビリティに取り組むのか」の意義を強調して伝えたと後藤氏は言う。

どうやって品質基準を達成するのかといった技術的な話も必要ですが、それが中心になってしまうと、『クリエイティブな表現ができなくなる』といった誤った方向に捉えられてしまうかもしれません。

自社のブランド価値向上や世の中の意識の変化などを踏まえ、品質基準の向上が求められていると、納得感を持ってもらえるような伝え方をしています(後藤氏)

制作担当が変わることもあるため、説明会は現在も随時開催している。そのほか、制作に携わる社員が迷った際に相談できる窓口も用意している。こういった基盤を整えたうえで、商品の改廃、あるいはウェブサイトのリニューアルのタイミングでウェブアクセシビリティの品質基準を満たすような改修を各部署に依頼した。

成功に導く秘訣は「無理をさせない」こと

ウェブアクセシビリティを改善した結果、花王のウェブサイトには、どんな変化があったのか。次は、その一例となる。

以前は文字や背景の緑色を「Kao」のロゴと同色にそろえていたが、白と組み合わせたときにコントラスト比が低く見えづらいため、濃い緑色に変更した
以前は文字や背景の緑色を「Kao」のロゴと同色にそろえていたが、白と組み合わせたときにコントラスト比が低く見えづらいため、濃い緑色に変更した
複数の画などのコンテンツを左右に移動して切り替えることができる「カルーセル」には、画像の動きを制御(ストップ)できるボタンが必ず入るように設定されている
複数の画などのコンテンツを左右に移動して切り替えることができる「カルーセル」には、画像の動きを制御(ストップ)できるボタンが必ず入るように設定されている

変更後は視覚的に見やすく、正確な情報を得やすくなっている。大勢の関係者を巻き込む一筋縄ではいかないプロジェクトだが、現状大きなトラブルはなく順調に進んでいるという。その理由は、「丁寧なコミュニケーション」と「無理のないスケジュール設定」にあるようだ。

ウェブアクセシビリティを進めるにあたり、後藤氏と渡邊氏が所属するマーケティングプラットフォーム部では、社内のさまざまな事業部とコミュニケーションを取り、協力体制を築いた。

プレスリリース発表の1年ほど前から、コーポレート部門や事業部門に加え、ESG、人事、消費者相談室、PRなど、さまざまな部署の社員に意思を伝え、協力してほしいとアプローチをしてきました。幅広い視点で情報共有ができますし、ウェブアクセシビリティの必要性の理解浸透もスムーズだったと思います(渡邊氏)

こういった地道なコミュニケーションに加え、コストやスケジュールにおいても無理のないように気をつけている。主要サイトの改善は2024年中を目標にしているが、100%の達成をマストにはしていない。

予算と関係者の負担を最小限にするために、商品の改廃、あるいはウェブサイトのリニューアルのタイミングで、ウェブアクセシビリティの改善をお願いしています。また、目先の目標として『8割までの達成』をあげており、余白を残すようにしました(後藤氏)

関係者の負担を抑える配慮をしつつ、最短で進めるようバランスを取っている
関係者の負担を抑える配慮をしつつ、最短で進めるようバランスを取っている

全社で取り組む重要事項でありながら、柔軟性をもたせることで反発を生まずに進められているのかもしれない。それでも「ウェブサイトをリニューアルする予定がない」といった相談があった際は、マーケティングプラットフォーム部で個別に対応しているそうだ。

◇◇◇

ウェブアクセシビリティ強化を本格的に始めて、まもなく2年となる。社内では、情報発信に対する考え方の変化が見られるという。

ウェブサイトだけでなく、ユニバーサルデザイン指針への意識もより増している印象があり、製品の仕様やパッケージも一段と配慮する兆しが見られています。社内外で啓蒙を続けることで、花王のみならず世の中の多くのウェブサイトが消費者にやさしい設計になっていけばと願っています(渡邊氏)

現実的な目標を定め、関係各所と連携を取りながら着実にウェブアクセシビリティ向上・確保を進めている花王。これからウェブアクセシビリティに取り組みたい企業にとって、同社の事例は参考になるはずだ。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

ユーザビリティテスト
ユーザビリティテストとは、Webサイトやアプリなどのユーザビリティ上の問題点を見 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]