画像:ご年配の方と、その家族友人ががイキイキと暮らしているイラストイメージ 画像:ご年配の方と、その家族友人ががイキイキと暮らしているイラストイメージ

いきいきライフデザインマガジン

第33回パナソニックのUDサイトは、多様な人の声に耳を傾けながら改良を重ねています。

似顔絵イラスト:中尾洋子

パナソニック(株)全社UD推進担当主幹

中尾洋子(なかお ようこ)

みなさんこんにちは。編集員の中尾です。今回はこのマガジンも掲載してます、パナソニックのユニバーサルデザイン(UD)サイトについてお話しさせて頂きます。
私達はWEBサイトを通じて、たくさんの人に必要な情報を分かりやすくお届けしたいと考えています。外出の機会が減ったコロナ禍においては、特にその社会的役割が高まっていると感じています。UDサイトは、これまでも基本的なWEBアクセシビリティ「WCAG 2.0」のレベルAAを品質基準として取り組んできましたが、更なる向上を目指して、視覚障害者の方に調査を行い、課題に対応しました。本記事では2021年と本年の取り組み、2年にわたる活動をレポートします。

UDサイトはどうあるべきか? 改善のヒントを集めました。 UDサイトはどうあるべきか? 改善のヒントを集めました。

ご協力をいただいたのは「社会福祉法人 日本ライトハウス情報文化センター」様です。WEBサイトのご利用の仕方が大きく異なる3名の視覚障害者の方に検証して頂きました。Mさんは全盲の男性、WEBサイトの情報はスクリーンリーダーを用いて音声で得ています。Tさんは女性、重度のロービジョンです。サイトの確認はMさん同様、音声によるものです。軽度のロービジョンWさんは、音声を使わずに画面を拡大してサイトの文字や絵を視認しています。

全盲Mさん

写真:全盲のMさんが検証のため、パソコンを操作している。
全く見えない
スクリーンリーダーを使い
音声で情報を得る

重度のロービジョンTさん

写真:重度のロービジョンTさんが検証のため、パソコンを操作している。
ほぼ見えない
スクリーンリーダーを使い
音声で情報を得る

軽度のロービジョンWさん

写真:軽度のロービジョンWさんが検証のため、パソコンを操作している。
見えにくい
スクリーンリーダーを使わず
拡大して視覚で情報を得る

まず3名の方には、パナソニックのUDサイトを体験してもらう前に、UDサイトに関する一般的な質問をしてみました。

UDサイトと聞いてどんな内容をイメージされますか?

全盲 Mさん
UD対応商品を一覧で確認できそう。UDへの思いも書いているイメージ

重度ロービジョン Tさん
視覚障害者に使いやすい商品が紹介されている

軽度ロービジョン Wさん
商品の概要説明や使い方が載っている

視覚障害者の方がUDサイトと聞いてイメージされるのは、UDに関する情報、特に視覚障害者の方に使いやすい商品の具体的な紹介が載っているサイトでした。

写真:検証時、画面を拡大してパソコンを見る軽度ロービジョンWさんと、拡大常時されたパソコン画面

UDサイトやUD商品への要望をお聞かせください

全盲 Mさん
音声付き・音声入力対応商品の情報がほしい

重度ロービジョン Tさん
スマートスピーカー対応の商品を知りたい

軽度ロービジョン Wさん
商品本体や、スマホを介して、音声で説明をしてくれる家電がほしい

皆さん、音声ガイドや音声操作機能がついた商品の情報を知りたいというご意見で、これまで当サイトではそのようなまとめ方をしておらず、情報提示のあり方を見直すきっかけになりました。

アクセシビリティの向上を目指し、UDサイトの課題をひとつひとつ解決。 アクセシビリティの向上を目指し、UDサイトの課題をひとつひとつ解決。

3名の方にパナソニックのUDサイトを体験いただき、分かりにくい、使いにくいなど、課題に感じた点を教えてもらいました。そのご意見を参考に、パナソニックが改良をおこなった事例をご紹介します。

Before (〜2020)

サイトのトップ画面から、知りたいUD商品の情報にたどり着くまでが遠くて時間がかかる。

説明図:2020 年以前のパナソニックUDサイトのキャプチャー画面。ユーザーが知りたいと思う「UDの事例紹介」まで辿り着くまでに、さまざまな情報があり、到達までに時間が掛かることを説明する図
たどり着きやすく解決
After (2021)
説明図:2021年以降のパナソニックUDサイトのキャプチャー画面。「見えない・見えにくい方への案内」を上部に配置したことを示す図
After (2022)
説明図:2022年以降のパナソニックUDサイトのキャプチャー画面。「多様な方に配慮した案内」を新たに制作。上部にまとめて配置したことを示す図

これは一般的な質問の際に頂戴した「UDサイトに期待することは、UD商品の具体的な紹介である」というご意見とも関連する大切なご指摘だと思いました。

私たちは「見えない・見えにくい方へ」の案内を上部に配置して、知りたい情報にすぐたどり着けるようにしました。さらに翌年、「配慮別UD商品事例」を同サイト上部に新設。視覚的な配慮だけでなく、多様な方に配慮をした案内を設けました。

パソコン画面画面:パナソニックUDサイトの「見えない・見えにくい方へ向けたページ」のキャプチャー画面。

また見えない・見えにくい方への専用ページも設け、背景色を黒、文字色を白に設定することでコントラストを高めて読みやすさを向上させています。

パソコン画面:2021年のパナソニックUDサイトのナビゲーション部分のキャプチャー。

拡大

弱視の方が拡大すると、一度に見える範囲から隠れてしまう情報も(2021)

パソコン画面:2021年のパナソニックUDサイトのナビゲーション部分を拡大して右側の一部が隠れてしまっているキャプチャー。
Before

リンクボタンを押した後にページが遷移したのか、新しいウィンドウが開いたのか把握できない。

写真:ロービジョンのTさんに、説明をする中尾編集員
把握しやすく解決

新規ウィンドウが開いた時は、それを表すアイコンを表示すると同時に、音声で「新しいウィンドウが開きます」と読み上げるよう設計しました。

After (2021)
説明図:パナソニックUDサイトのニュース部分のキャプチャー画面。「新しいウィンドウが開くアイコン」を指し示す図
After (2022)
説明図:パナソニックUDサイトのニュース部分のキャプチャー画面。「新しいウィンドウが開くアイコン」を指し示す図
Before

サイトに記載されているタイトルが、言葉足らずで分かりにくい。

写真:ロービジョンのWさんに、説明をする中尾編集員
分かりやすく解決
After

元々のタイトルである「取組事例」を「UD対応商品事例」に、「研究活動」は「UDへの研究活動」に文言を変更。写真と併せて確認をしなくても、単独で読んだり、耳で聞くだけで意味が通じるように書きかえました。

さらに誤解を回避するために、たとえば「視覚障害者の方にやさしい商品」では、どうやさしいのかが伝わらない。「見えにくい方に便利にお使い頂ける機能がついた商品」では、見えない方が対象外に思えてしまうなど、さまざまな角度から検証を重ねて文言づくりをおこないました。

Before

商品の特長を分かりやすく補足するUDピクトの配置が、音声読み上げを計算したレイアウトになっていない。話の流れの途中で、突然、ピクトの説明音声が挿入されて混乱する。

説明図:読み上げの途中、「商品名」「ピクトとピクト名の読み上げ」「商品の説明」の順になり、混乱してしまうことを説明する図
聞きやすく解決
After (2022)

ピクトは商品情報の最下部に一枚の絵にして配置。すべての説明が終わってから、ピクトを読み上げるというレイアウトに再構成しました。

説明図:読み上げの順序を1、商品名などのパート。2、商品画像などのパート。3,UDマークのピクトなどのパート。UDマークは一括りにし、聞き取りやすいように工夫をしたことを説明する図
Before
写真:全盲のMさんに、説明をする中尾編集員
お知らせして解決
After

商品別にスマートスピーカーとの連携方法を紹介

パソコン画面画面:パナソニックUDサイトの「見えない・見えにくい方へ向けたページ」のスマートスピーカーの連携方法を紹介しているキャプチャー画面。

スマートスピーカーと商品を連携させる操作は、視覚障害者の方にはむずかしいと判断して掲載を見送ろうとしていました。しかし、視覚障害者の方から「使える人も居るので、まずは情報を知りたい」とのご意見をお聞きして掲載することに決めました。情報を知る機会を平等にすべき、という気づきになりました。
見えない・見えにくい方への専用ページへ

パナソニックUDサイトの良い点についても、ご意見をいただきました パナソニックUDサイトの良い点についても、ご意見をいただきました

さらに2022年春、UDサイトの刷新に当たり公開前のデザインを同3名の方にご覧いただき検証をおこないました。 さらに2022年春、UDサイトの刷新に当たり公開前のデザインを同3名の方にご覧いただき検証をおこないました。

Before

① 目で認識する際に、イラストのアイコンは見やすいが、その下の小さな文字は読むことができない。
また、視認できるアイコンだけでは情報が十分に伝わってこない。

② 音声で認識する際に、アイコン部分の説明と、その下に配されている文字部分の説明の内容に差が感じられず、サイトに何が存在するのか理解ができない。

説明図:目のアイコンも音声で読み上げ、アイコン下部のテキストも音声で読み上げるため、近しい情報が二重になってしまうことを説明する図
見やすく、理解しやすく解決
After

① 文字情報はアイコンの下ではなく、その横に大きなフォントで配置。文言も「視覚的配慮商品」など漢字を並べるのではなく「視覚的な配慮」と分かりやすく表記します。

② 2段階の読み上げを廃止、アイコンと文字を一括にして情報を伝えます。

説明図:目のアイコンと、下部のテキストを一括りにし、読み上げ時に情報が伝わりやすく整理したこを伝える図
Before

バナーデザインにおいて文字と写真が重なると、文字の認識がしづらくなる。

説明図:小さなバナーにたくさんのテキストが入っており、見づらいことを説明する図
見やすく解決
After

文字の背景に写真が重ならないようレイアウトし、見やすさの確保に努めます。

説明図:小さなバナーには端的な説明テキストだけを掲載し、理解しやすいことを説明する図
新しいUDサイトの良い点について、ご意見をいただきました 新しいUDサイトの良い点について、ご意見をいただきました

暮らしと、インターネットがますます切り離せなくなっているこの時代。パナソニックのUDサイトは、使う人に寄り添いながら、ひとつひとつ課題を解決していきます。 暮らしと、インターネットがますます切り離せなくなっているこの時代。パナソニックのUDサイトは、使う人に寄り添いながら、ひとつひとつ課題を解決していきます。

誰もが、自分の知りたい情報を、ストレスなしに得られるサイトづくりをめざして。私たちはこれからもアクセシビリティの向上に取り組み続けます。

編集後記 編集後記

人物イラスト:中尾洋子 パナソニック(株) 全社UD推進担当主幹

中尾洋子 パナソニック(株) 全社UD推進担当主幹

今回は、私たちが運営しているUDサイトのアクセシビリティ配慮の一部をご紹介させて頂きました。視覚障害者の方にフォーカスした取組みではありますが、対応した内容の大部分は、多くの方にも分かりやすいものになっているのではないかと思います。
次回からはまた、専門家の方へのインタビューから、皆さまのお役に立つ情報をお届けする予定ですので、お楽しみに!