みなさんはGAADを知っていますか？
GAADとはGlobal Accessibility Awareness Dayの略です。
毎年5月の第3木曜日はGAADの日となっていて、世界各地でデジタルアクセシビリティを考える1日とされています。
日本では今年のGAADにあわせてGAAD JAPAN 2024というオンラインセミナーが開催されました。
9時45分〜19時までの間にさまざまな登壇者のお話を聞くことができる、大変ボリュームのある催しです。
そんなGAAD JAPAN 2024に参加してきましたので、今回の記事ではピネイロ カルラさん（株式会社エスケイワード）のセッション「アクセシビリティを考慮した魅力的なビジュアルデザインを作るためのヒント」について紹介します。
ピネイロさんはスペイン出身で、10年前に日本語とデザインを学ぶために来日しました。
当時、日常会話レベルの日本語は身につけていたものの、市役所や銀行などでの手続きにおいてはさまざまな困難があったとのことです。
こうした経験から、「日本に住む外国人にとって利用しやすいサイトを作りたい」と考え、アクセシビリティに興味を持ったそうです。
1.ウェブアクセシビリティ推進部の取り組み
はじめに、ピネイロさんが取り組んでいるウェブアクセシビリティに関する活動についてご紹介します。
ピネイロさんが所属する株式会社エスケイワードでは、2023年6月からウェブアクセシビリティ推進部の活動がスタートし、ピネイロさん自身も昨年からアクセシビリティを学んでいるとのことです。
週に1回、30分のオンライン勉強会を開催するだけでなく、この活動に参加していない社員に対して活動内容の発信も行っているそうです。
社員全員がウェブアクセシビリティに関心を持ち、学べる環境を作ることを目的としているとのことでした。
現在は、以下の3つの活動を行っているようです。
- 1-1.WCAGの達成基準の勉強
世界的なウェブアクセシビリティのガイドラインであるWCAGの達成基準を、毎週1つずつ取り上げ、メンバー同士で意見交換しながら学習しているそうです。
- 1-2.アクセシビリティチェックの実施
WCAGの達成基準についてある程度理解を深めたあとは、達成基準が記載されたチェックシートを使ってアクセシビリティチェックを行っているとのことです。
- 1-3.サイトのレビュー
メンバーが気になる点や改善点を付箋に書いて共有し、ディレクター、デザイナー、エンジニアなど、それぞれの視点で意見交換を行っているそうです。
診断からはじめる無理のないウェブアクセシビリティ対応
2.外国人向けサイトのデザインで気をつけること
ピネイロさんが多言語サイトやグローバルサイトのデザインを手がける中で得た、外国人をターゲットにしたサイト制作の解説がありました。
4つのポイントをご紹介します。
2-1.情報を整理し、伝えるべきことに絞る
情報を整理することで、ユーザーは必要な情報をすばやく見つけられるようになります。
また、内容も理解しやすくなります。
さらに、国ごとにサイトの特徴があるため、それを意識することも大切だそうです。
例えば、欧米のユーザーはシンプルなレイアウトに慣れている傾向があるようです。
セッションでは、日本のヤフーとアメリカのヤフーの比較が例として挙げられました。
2-1-1.日本のヤフー
情報量が多く、写真が少なめです。
また、余白が狭く、アイコンなど装飾的な要素が多いことがわかります。
2-1-2.アメリカのヤフー
情報量や機能が少なく、写真が多くなっています。
また、余白も日本版と比べて広めに取られていることがわかります。
このように、実際に比べてみると違いが明らかです。
2-2.直感的に情報を伝える
情報を理解する上で、視覚的な要素は非常に重要です。
言語の壁を越えて「ひと目で」情報を伝えるには、アイコンやイラストの活用が有効だそうです。
また、重要な情報は色や大きさを変えることで強調し、ユーザーを適切な行動へ導くことも大切とのことでした。
2-3.やさしい日本語の選択肢を提供する
文化庁と静岡県庁の調査によると、日本に住む外国人の間で最も求められている情報発信言語は、やさしい日本語だそうです。
その理由は、日本に住む多くの外国人の母国語が英語ではないからです。
実際、日本に住む外国人の中には、英語よりも日本語の方が理解しやすい人が多いと、ピネイロさんは話していました。
多言語サイトの言語選択肢にやさしい日本語を加えることで、より多くのユーザーに情報を届けられるようになるそうです。
それでは、やさしい日本語にはどのようなポイントがあるのでしょうか？
こちらもピネイロさんから解説があったので、確認していきましょう。
2-3-1.ふりがなをふる
- 日本語を勉強するときは、ひらがな、カタカナ、漢字の順に学ぶことが一般的
- 漢字にふりがなを振ることで、日本語に慣れていない人も読みやすくなり、文章の内容をスムーズに理解できる
- ふりがなが振られていれば、その言葉の意味を知らない場合でもインターネットや辞書で調べることができる
2-3-2.難しい言葉は簡単な言葉に言い換える
- 漢字でできた熟語、カタカナ語、擬音語、擬態語、方言は避け、簡単な言葉で伝えることが大切
- 例えば「土足厳禁」だと難しくて理解できない場合も、「靴を脱いでください」と言い換えると理解しやすくなる
2-3-3.短くてわかりやすい文章を心がける
- 文章が長く、さまざまな要素が含まれていると理解しにくくなる
- 一文に盛り込む内容は、できるだけ1つにする
- 各要素を分割し、文章を整理することで理解しやすくなる
セッションでは、銀行の手続きを説明する以下の文章が例として挙げられました。
【よくない例】
銀行口座を開く手続きは、身分証明書と住所確認書を準備して、窓口で申込用紙に必要な情報を記入して、手数料を支払うと終わりです。
【よい例】
銀行口座を開く手続き：
- 身分証明書と住所確認書を準備します。
- 窓口で申込用紙に必要な情報を記入します。
- 手数料を支払うと終わりです。
2-3-4.曖昧な表現をせずに具体的に伝える
- 複数の意味を持つ言葉は避け、具体的な意味を持つ言葉で伝えるようにする
- 例えば、「結構です」は「問題ありません」と「いりません」の2つの意味があるため、そのまま使うと誤解を招く可能性がある
- 「問題ありません」や「いりません」などの具体的な言葉を使うようにするとよい
2-4.どんな言語にも耐えられるデザインを作る
外国人ユーザー向けのサイトで気をつけるべき最後のポイントは、どの言語でも適用可能なデザインにすることだそうです。
そのために、ピネイロさんは以下の2点を意識してデザインしているとのことです。
2-4-1.テキストの長さが変化してもデザインが崩れないようにする
- 同じ内容の文章でも、言語により長さが変わることがある
- 長いテキストが入っても、短いテキストが入っても、デザインが崩れないように意識している
2-4-2.アラビア語など右から左に読む言語にも対応したデザインを作る
- テキストの方向に合わせてナビゲーションやコンテンツの配置が変わっても、その変化に耐えられるデザインにする
3.アクセシビリティとビジュアルデザイン
アクセシビリティに配慮したデザインは、「デザイン性を犠牲にしなければならない」「地味になってしまう」と考える人が多くいます。
しかし、ピネイロさんは「そのような認識は間違っている」とお話ししていました。
アクセシブルなデザインと地味なデザインは同じではないそうです。
色、アニメーション、ライティングに気をつければ、自由にデザインできるとのことでした。
それでは、具体的にどのようなことに気を配る必要があるのでしょうか？
3-1.ポイント1：色とコントラスト比
3-1-1.色の選び方
色には「わかりやすくする（機能的役割）」と「印象を生み出す（感性的役割）」の2つの役割があり、そのバランスを意識して色を選ぶ必要があるそうです。
また、色覚特性のある人は特定の色の組み合わせを区別しにくい場合があります。
さらに、加齢に伴って色の見え方が変化することで、区別しにくい色の組み合わせが生じることもあるそうです。
そのため、色の見え方の違いに配慮することが重要だと述べていました。
PhotoshopやIllustratorには色覚シミュレーションの機能が備わっているため、シミュレーションを確認しながら色を選ぶとよいそうです。
さらに、色で判断することが難しい人や場面も存在するため、色以外でも情報を伝えることが重要だそうです。
色以外で情報を伝えるには、以下のような方法があります。
- アイコンをつける
- 文字の太さを変える
- リンクに下線をつける
- グラフとラベルは近くに配置する
- グラフにパターンを使用する
3-1-2.コントラスト比とは
前述の通り、加齢に伴って色の見え方が変化することがあります。
そうすると、コントラスト比の低いものは見えにくくなります。
そのため、コントラスト比を確保することも大切だとお話ししていました。
コントラスト比とは、テキストやグラフィカルオブジェクトの色と背景色の明るさの差を数値化したものです。
コントラスト比が高いと視認性が高く読みやすくなり、低いと視認性が低く読みにくくなります。
WCAGで定められているコントラスト比の要件は、以下の通りです。
適合レベルAA
- 大きな文字はコントラスト比3:1以上
- それ以外はコントラスト比4.5:1以上
- グラフィカルオブジェクト、UIパーツなど非テキストコンテンツはコントラスト比3:1以上
適合レベルAAA
- 大きな文字はコントラスト比4.5:1以上
- それ以外はコントラスト比7:1以上
コントラスト比の要件が適用されないもの
- アクティブではないユーザーインターフェースのコンポーネント（非アクティブタブ・非活性ボタン）
- 情報を伝えない装飾的なテキストや画像（装飾的な英語見出し、背景にある装飾的な画像）
- ロゴ
また、セッションの最後に運営の植木さんからコントラスト比に関する補足がありましたのでご紹介します。
WCAG 2.0では、日本語の全角文字の場合、大きい文字は22ptもしくは18ptの太字と書かれています。
これをピクセルにすると、30pxもしくは24pxの太字くらいだそうです。
ただ、最近はデバイスも多種多様になっています。
そのため、大きめの文字であったとしても、できるだけコントラスト比4.5:1以上にするのがよいのではないかとのことでした。
ピネイロさんはいつも、コントラスト比を確認するためにこちらのツールを使用しているとのことです。
参照：Adobe Colorのアクセシビリティツール
以上が色に関するウェブアクセシビリティです。
3-2.ポイント2：アニメーション
アニメーションはブランドや商品の世界観を表現したり、エンターテインメント性を演出するのに有効です。
一方で、過剰なアニメーションはユーザーの注意を散漫にさせる可能性があります。
そのため、ニュースサイトのような情報提供を主としたサイトや、公共機関のように使いやすさが優先されるサイトではアニメーションは控えめにした方がよい場合もあるとのことです。
サイトの目的やターゲットに合わせて、適切に使い分けることが大切なようです。
また、アニメーションを取り入れる場合に注意すべき点として以下の2点が挙げられました。
3-2-1.動き続けるコンテンツは停止できるようにする
- 動き続けるコンテンツはユーザーの注意を妨げることがある
- 一時停止、停止、非表示にできるようにすること
3-2-2.5秒以内のアニメーションを使用する
- 短いアニメーションならば、ユーザーに過剰なストレスを与えたり、待ち時間を与えることはない
- 5秒以内のアニメーションの場合、一時停止ボタン等は不要
以上がアニメーションに関するウェブアクセシビリティです。
3-3.ポイント3：ライティング
わかりやすいライティングのポイントとして挙げられたのは、以下の3点です。
3-3-1.見出しで各コンテンツの目的を明確にする
- 見出しは情報の構造を示す重要な要素
- また、スクリーンリーダーユーザーのナビゲーションも助ける存在でもある
- ページ内の各セクションに、適切な見出しを設定することが大切
3-3-2.リンクの目的を理解できるテキストにする
- リンクテキストは、リンク先のページ内容を推測できるよう具体的に書く
- 「もっと見る」などの抽象的な表現は避け、「お知らせ一覧へ」のように行き先をイメージできる言葉選びをする
3-3-3.視覚的な特徴だけで説明しない
- コンテンツを理解したり操作したりするために必要な説明を、形、大きさ、視覚的な位置、方向、音のような感覚的な特徴だけで提供しないようにする
- 具体例としては、「フォームに必要事項をご記入の上、右のボタンをクリックしてください。」ではなく、「フォームに必要事項をご記入の上、送信ボタンをクリックしてください。」というように、ボタンの名前を明確に伝えるようにすることなどが挙げられる
以上がライティングに関するウェブアクセシビリティです。
4.セッションに参加して感じたこと
ピネイロさんが所属する株式会社エスケイワードでは、社員全員がアクセシビリティについて学べる環境づくりに取り組んでいるというのが、強く印象に残りました。
弊社でも勉強会を行うことはありますが、不定期開催になってしまっているのが現状です。
社内でウェブアクセシビリティへの理解を深めていくためには、こういった体制作りが重要であることを再認識しました。
また、外国人向けサイトのデザインについては、英語よりもやさしい日本語が求められているという事実に驚きました。
これまで、日本語以外の言語が用意されている場合、英語が選択肢として提供されていることが多かったように思います。
しかし、英語よりも日本語の方が理解しやすい人が多いという結果を踏まえると、今後はやさしい日本語も選択肢に入れる必要があると感じました。
そして、アクセシビリティに配慮したビジュアルデザインについては、すぐに実践できる内容が盛りだくさんでした。
まだまだ「デザイン優先で、ウェブアクセシビリティは後回しでよい」と考えている人が多いように感じます。
しかし、ピネイロさんのお話を聞いて、ウェブアクセシビリティとデザインは両立できることを再確認しました。
今回のセッションで解説していただいた内容を、今後に活かしていきたいと思います。
5.まとめ
GAAD JAPAN 2024より、ピネイロ カルラさん（株式会社エスケイワード）のセッション「アクセシビリティを考慮した魅力的なビジュアルデザインを作るためのヒント」について紹介しました。
次回も、引き続きGAAD JAPAN 2024についてまとめていく予定です！
まだまだたくさんのセッションに参加しましたので、次回以降の記事もお楽しみに！
