デザインシステムとアクセシビリティを考慮しつつ新サービスを作った

Ateam LifeDesign Advent Calendar 2022、
本日はデザイナーのマネージャーをやっております@Kaiserinが投稿いたします。

デザインシステム

ざっくり「らしさ」を体系的に実現するためのしくみ。
こちらの書籍を参考にした部分あり。
エンジニアとの連携などに関しても載っていますので
デザイナー以外も参考になるかと思います。

目的

①一貫性のあるデザインにする。
②判断基準を統一。意思決定をしやすく、質を高く。
③再利用可能な状態に。コンポーネントを整備し、効率を良くする。

デザイントークン

らしさを伝えるための要素。
色、タイポグラフィ、余白、行間など。
Figmaを用いてデザインツール上で管理・参照・再利用できるように。
今回は既存のサービスの派生的な側面があったので今までのイメージを踏襲できるよう設計。
以下一例。

色	文字

コンポーネント

Figmaでコンポーネントのデザインをおこし、
Storybookで管理。

Figma	Storybook

アクセシビリティを考慮し設計に入れた

目が見えにくい、色が判別しづらいなど、そういった方でも
少しでも使いやすいサイトを目指し、設計時に考慮していった。
全てを網羅できてはいないがまずは目に見える部分から対応している。
WCAG2.1を参照。

以下一部抜粋

1.4.1 色の使用 レベル A

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。

項目を色だけで伝えるのではなく、ラベルとして必須・任意などの文字とともに表示して対応。
よくある対応ですが改めてアクセシビリティを考慮した設計となっている。

NG	OK

1.4.3 コントラスト (最低限) レベル AA

コントラスト比 4.5:1 をデフォルトとしAA達成できるように。
色覚特性のある方、見えにくい方でも見やすいように考慮。
派生元であるサイトが踏まえられていないところが多々あったので
この機会に派生元のサイトも配色を合わせて変更している。

CSSoverview	Chrome検証ツール

達成基準 2.5.5 ターゲットのサイズ レベル AAA

ポインタ入力のターゲットのサイズが 44 × 44 CSS ピクセル以上である。
誤タップ防止のため考慮。

エリア選択	ボタン

考慮できているか気付きやすくなるようaddonを導入

storybookで使えるaddonの
axe @storybook/addon-a11yを導入し
実装時に課題があるか気づきやすくした。
コーディングをメインに業務しているメンバーも気づきやすくなる。

課題があれば違反部分に表示される。

反省点

設計では考慮していたが実装時に加味されていない部分が今回のまとめで判明。
意図を伝えて修正を予定。
当初2人体制で、実装担当者に上手く伝わっていなかった部分があった。
上手く伝わるようコミュニケーションを改善する。

アクセシビリティの啓蒙はうまくいき出している

最初から設計に組み込むことで発信もしやすく
考慮している、しようと発信することでチーム内でも浸透。日常の会話でも出てくるように。
サービスの開始時からやっておくと他職能に何も言われないし、説明も通じやすい。
(工数に組み込みやすい)
全社で話す機会がある時に発信するなども行い、
他職能への理解も持ってもらいやすい状態に。

デジタル庁もウェブアクセシビリティ導入ガイドブックを出していたりと
考慮するのが今後当たり前になっていくのが加速するはず。
身近に配慮が必要な方は実は多い。
優しいサービスが増え、優しい世の中になっていくといいし、それが当たり前になるといい。

まとめ

最初からアクセシビリティを考慮し設計しておくといい。

考慮して設計することで、ガイドラインとなり
設計の方針としても機能するので取り入れるのがいい。

既存のサービスでも小さく初めて発信していくといい。

実際に取り組んで、発信し根気強く啓蒙するといい。

最後に

エイチームライフデザインで一緒にユーザーに優しいサービスを作っていきませんか？
エントリーはこちらから！
ご応募お待ちしてま〜す