無意識に実現するアクセシブルなデザイン
この記事は、弁護士ドットコム Advent Calendar 2024 の4日目の記事です。
また、クラウドサイン デザイナーチームでは、CloudSign Designer 5DAYS と題し、連投企画を行なっています！
プロダクトデザイナーの記事
DAY1 9年目SaaSプロダクト デザインチームの現在地
DAY2 無意識に実現するアクセシブルなデザイン
DAY3 デザイントークンで実現するデザインの一貫性と効率化
DAY4 プロダクトデザイナーが1年間の育休を取った話
DAY5 新規事業と既存事業どちらも経験して感じた、それぞれの「違い」と「魅力」
コミュニケーションデザインチームも同日連投してますので、合わせて読んでいただけると嬉しいです #DAY1 #DAY2 #DAY3 #DAY4 #DAY5
初めまして、クラウドサインのプロダクトデザイナーを務めているつっきょです！
普段は、クラウドサインの新機能開発やUI改善、デザインシステムの整備を主な業務として行っています。
また、アクセシビリティチームの一員として、ウェブアクセシビリティの改善にも取り組んでいます。
今回は、デザイナーとして、ウェブアクセシビリティを意識しなくても自然にアクセシブルなデザインが実現できる未来を目指して、現在取り組んでいることや今後の計画についてお話ししたいと思います。
ウェブアクセシビリティとは？
その名の通り、「ウェブアクセシビリティ」とは、ウェブ上の情報や機能がどれだけアクセスしやすいかを表す言葉です。
「アクセシビリティ」とは、情報やサービスへのアクセスのしやすさを意味しており、具体的には、誰もが平等に利用できる状態を作ることを目指します。
また、アクセスしやすい状態を「アクセシブル」と呼びます。
クラウドサインのアクセシビリティチームについて
クラウドサインのアクセシビリティチームは、クラウドサインのウェブアクセシビリティを向上させることを目的としたバーチャルチームです。
「誰もが」利用できるプロダクトを目指して活動しています。
バーチャルチームという形態で活動しているため、アクセシビリティ改善に多くのリソースを割けているわけではありません。
現在は、週1回の定例ミーティングと、各メンバーが空き時間を利用して個別にタスクを進める形で取り組んでいます。
今回はデザイナーとしての取り組みにフォーカスしますので、チーム全体の具体的な活動内容については割愛しますが、先日、視覚障害の方にクラウドサインを実際に操作していただき、その様子を見学するイベントをSmartHRさんと共催しました。
活動内容が気になる方は、ぜひイベントレポートをご覧ください！
アクセシブルなデザインを無意識に実現する理由
それでは本題に入ります。
アクセシブルなデザインを作成する主な理由は、「誰もが」クラウドサインを利用できるようにするためです。
しかし、「なぜ無意識に実現することを目指すのか？」
その理由についてお話しします。
理由1：ウェブアクセシビリティ対応を特別な作業にしないため
冒頭でもお話しましたが、ウェブアクセシビリティとは、ウェブ上の情報や機能へのアクセスのしやすさを意味しています。
もし情報にアクセスできないユーザーがいると、使いやすさや機能性を議論する以前に、そのサービスが利用されなくなる可能性があります。
つまり、誰もが情報にアクセスできる状態を当たり前にすることは、サービス設計の前提条件です。
そして、その前提が自然と満たされて初めて、デザイナーがサービスの使いやすさや価値を高めるための本質的な勝負が始まると考えています。
理由2：開発効率の低下を防ぐため
メンバー全員がウェブアクセシビリティの知識を十分に持ち、それを常に意識してデザインするのは簡単ではないと考えています。
そもそもアクセシビリティの知識を十分に持つのは、学習コストもかかりますし、十分な知識がない場合、別のメンバーがサポートするとなると開発効率の低下に繋がります。
そのため、メンバーのウェブアクセシビリティの知識が十分なくても、無意識にアクセシブルなデザインができる仕組みを作ることが、開発効率の低下を防ぐことに繋がると考えています。
理由3：アクセシブルなデザイン制作を持続させるため
ウェブアクセシビリティ対応が、個々のメンバーの知識やスキルに依存している場合、長期的には対応の品質が不安定になりやすいと考えています。
特に、チームのメンバーが入れ替わる際や、経験の差がある場合にその影響が顕著に出ると思います。
そこで、誰がデザインしたとしても、無意識にウェブアクセシビリティが確保される仕組みを作ることで、アクセシブルなデザイン制作を持続できると考えています。
現在取り組んでいること
アクセシブルなデザインを無意識に実現するため、主にウェブアクセシビリティのガイドラインであるWCAG 2.2の達成基準を満たす内容を、弊社のデザインシステム「Delta Wing」に組み込む取り組みを行っています。
例えば、WCAG 2.2 達成基準 1.4.3 コントラスト (最低限)(レベル AA)を満たすために、グレーの文字色のルールを再定義し、プロダクトでグレーの文字色を使用する際、自ずとコントラスト比が4.5:1以上を確保できるようにしました。
この取り組みの背景や進め方の詳細については、以下のスライドをご覧ください。
他には、WCAG 2.2 達成基準 2.4.4 リンクの目的 (コンテキスト内)を満たすために、テキストリンクの適切な記載例を掲載し、デザイン作業を行う際にライティングで気をつけるべきポイントを明記しています。
今後の計画
アクセシブルなデザインを無意識に実現するための取り組みの一部を紹介しましたが、デザインシステムにまだ組み込めていない達成基準も多く、道半ばの状況です。
引き続き、これらの達成基準を満たすようデザインシステムに組み込む取り組みを進めていきます。
また、アクセシブルなデザインコンポーネントの定義にはエンジニアとの連携も欠かせないため、「デザインシステムに従ってデザインしていたら、無意識にアクセシブルなデザインになっていた！」という状態を目指して、これからも愚直に活動していきます！
We are hiring!🫶
クラウドサインでは、一緒に働くデザイナーを募集しています。
ぜひ私たちと、まだないやり方で世界を前に動かしていきましょう！
少しでも興味が湧いた方は、ぜひお声がけください。
・・・
明日のAdvent Calendarは@fujiiさんの記事です！お楽しみに！