皆さまこんにちは。初めまして。新卒でUXチームに入ったゆっちゃんです。普段は会計freeeのプロダクトデザインをしています。
今日は、UXチーム内で行なっている勉強会の紹介をします。 その名も、スパルタンUX！強そう！（元ネタのアーケードゲーム『スパルタンX』、思い浮かべた方は正解です！）
スパルタンUXとは？
UXチームは2年ほど前からスキル向上のための輪読会を行なっています。事前に課題書籍を読んでdocに感想と質問を書き、週2の会で共有します。
4season目の今回のお題はこの本です！
デザイナーのスキルにアクセシビリティが据えられたため、著者の一人である弊社デザイナーのmagiさん解説の元進めていくことになりました。 ちなみに前回は「シロクマ本」こと情報アーキテクチャでした。
８章：ビジュアルデザイン
8章は体験版の無料ダウンロードができますので、ぜひ読んでみてください。 www.borndigital.co.jp
この章では主にビジュアル表現に関して、アクセシビリティを意識しないとやってしまいがちなNG例と解決策がまとめられています。
目次
8-1 見た目に頼っている
8-2 コントラストが低い
8-3 どこが押せるかわからない
8-4 テキストブロックが読みづらい
8-5 文字が画像になっている
8-6 フォーカスが見えない
8-7 小さく密集したものが押せない
8-8 スタイルに一貫性がない
8-9 閃光で発作が起きる
8-10 拡大すると問題が起きる
小見出しのタイトルだけでもドキッとしますね。印象に残った章を抜粋します
8-2 コントラストが低い
視力や色の見え方はユーザーによって異なり、発色もモニターによって様々です。背景と文字の色の対比を作らないと、ユーザーによっては読みにくかったり読めなかったりします。下記画像が紹介されている例ですね。
淡い色で作るの、やりがちですよね、、パステルカラーなどは女性向けのサービスだとやってしまいそうだと思います。
freeeのデザインシステムは、WCAG2.0（アクセシビリティガイドライン）のコントラスト比を満たすカラーで構成されています。カラースキームを増やせるよう検討していますが、コントラスト比を保つのはなかなか難しいようです。
8-5 文字が画像になっている
テキストはマシンリーダビリティが高いので、様々な加工が可能です。例えばユーザーはテキストを拡大したり色を反転して読むことができます。しかし画像にしてしまうとこういったカスタマイズができないので、読むことができない人が多くなります。特にスクリーンリーダーを使用する人は、何が書かれているのか全く分からなくなってしまいます。
これは知らなかったら悪気なくやってしまうことの一つで、Twitterも140字で足りない時画像で文章書く人が多すぎる、と思いました
解決策は、なるべくテキストに起こし、CSSで加工することです。どうしても画像を使わなければならない場合は、SVGを利用すると良いでしょう。データの中にテキストを持つことができるため、機械で処理することが可能になります。そしてビットマップ形式の画像に比べ、綺麗に拡大することもできる便利なフォーマットです！ 関連して、「謝罪文を画像にするのは、検索避け」という話題は面白かったです。「社内でも、SlackやWorkplaceでスクリーンショットを貼って共有を済ませることが多く、それなら元テキストへもリンクすべき」という話題が上がり、今後発信するときは意識しようと思いました。
8-2 コントラストが低い
要素の意味や性質によって要素の見た目を変えるとわかりやすくなりますが、使い方に一貫性がないと、どのスタイルがどの意味に対応するのか分からなくなり、かえって混乱を招いてしまいます。
異なる見た目のものが同じ意味で使われていたり、同じ意味の要素の配置が違っていたり、歴史の積み重ねによって現状のプロダクト内ではいたるところに発生してしまっています。しかし徐々に整ってきたデザインシステムを、プロダクトに反映できるようになってきました！今後はさらにデザインシステムの整備・既存プロダクトの置き換えを進めて、一貫性のあるプロダクトを目指します！
まとめ
８章まで読んできた感想としては、「無知は怖い」です。知れば当たり前だと思うことなのに、知らなければ悪気なく行ってしまうからです。アクセシビリティの具体的な内容を見ると、実はそこまで特別なことをしているわけではありません。ただ知らずにいるだけで、自分の環境以外の人の考慮ができていないと判断されるのはとても怖いことだと感じます。 今後も、無知な人にならないように、勉強していきたいと思いました。 これから定期的に、スパルタンUXの内容を発信していきたいと思っています！
