チーム全員でアクセシビリティ / ユーザビリティを確保したデザインを安定的に生み出すFigma Widget開発の舞台裏
こんにちは！クラウドサインのプロダクトデザイナー つっきょです。
私は普段、クラウドサインの新機能開発やデザインシステムの構築、ウェブアクセシビリティの改善などに取り組んでいます。
先日、「Design Checklist」というFigma Widgetを公開しました！🎉
デジタルプロダクトの品質管理を効率化し、アクセシブルで使いやすいデザインの実現をサポートするウィジェットです。
➡️ Design Checklist (Figma Widgetのページに遷移します）
🍪 ポイント
アクセシビリティとユーザビリティの両方がチェックできる
達成基準の詳細を確認できるWCAG 2.2 解説書へのリンク付き
チェック内容の自動保存＆バージョン履歴機能を搭載
本日は、このWidgetの機能や使い方、開発にいたった背景についてお話しします。
まず、主な機能と使い方をご紹介します。
🎯 主な機能
1.アクセシビリティチェックリスト機能
デザイン時に確保できるWCAG 2.2の達成基準を簡単にチェック
2.ユーザビリティチェックリスト（プロトタイプ・スタイル）機能
使いやすさからUIの一貫性まで、包括的に評価できます
3.結果の自動保存・バージョン履歴機能
レビューの結果がFigmaのバージョン履歴に残り、いつでも振り返り可能
4.チェックリストの各項目に「適用」「結果」「メモ」を記録できる機能
デザインレビューやリリース前の最終チェックに活用できる
💡 使い方
1. Design Checklistから、チェックしたいデータにWidgetを配置する
2. チェックの対象範囲を記入する
3. レビュー対象に該当するチェック項目には、適用に「○」をつける
レビュー対象に該当しない項目は「−」を設定してください。
4.チェック結果とメモを記録する
適用する項目について合否を確認して記録します。
必要に応じて補足事項をメモに入力してください。
5.ステータスを「WIP」から「DONE」に切り替え、編集不可にする
結果がFigmaのバージョン履歴に記録されます。
チェックリストの切り替え方法
ウィジェットをクリックし、切り替えたいリストを選択してください。
チェックリストは以下の3パターンから選択できます。
アクセシビリティ
ユーザビリティ（プロトタイプ）
ユーザビリティ（スタイル）
🧐 なぜWidgetを開発したのか
私が在籍するプロダクトデザインチームでは、それぞれのプロダクトデザイナーがアクセシビリティ・ユーザビリティを考慮したUI設計、デザインレビューに取り組んでいます。
しかし、その考慮の度合いは人によって異なり、結果としてチーム全体のアウトプットが安定しないという状況がありました。
UI設計を行う過程において、アクセシビリティとユーザビリティが確保され、さらにチームとしてのアウトプットが高い水準で安定している状態を実現するために、以下の手順で取り組みを進めました。
☂️ 解決するための取り組み
1.基準を定義する
まずは、UI設計段階で確保できるアクセシビリティ・ユーザビリティの達成基準を抽出し、チェックリスト化しました。
2.基準を簡単に参照できる仕組みをつくる
作業者が達成基準を参照しながらFigma上でUI設計できるよう、Figma Widgetでチェックリストを作成しました。
チェック項目だけではなく、対象範囲・メモ欄・チェック担当者・WIP/Doneなどのステータスに関するUIを追加しました。
実運用に耐えるつくりにするために、数名のデザイナーと協力してテストとFBを繰り返しながら改善していきました。
チェックの記録もFigmaに残せるため、デザインレビュー時にレビュワーが参照することもできます。
これにより、共通認識を持ってレビューを進めることが可能になりました。
3.デザインレビューに客観的にチェックする工程を組み込む
ユーザビリティチェックに関しては、第三者がチェックを実施するようにワークフローを整備しました。
自身がUI設計したアウトプットに対する評価は主観的になりがちのため、
客観的な視点をいれ、確認の精度と実行の確実性を担保するアプローチです。
チェックを実施するにあたり、レビュイーもレビュワーも最小限のコストで進行できるよう、Slackでレビュー依頼ワークフローを実行すると、レビューアーをランダムでアサインできるような工夫を行いました。
✍️ 導入してみて良かったこと
各メンバーのアウトプットの品質が安定しました。
制作時やレビュー時に評価基準が存在することで、お互いに迷ったり調べる時間が解消され、結果的にレビューが完了するまでのリードタイムが短縮しました（差し戻しも減った印象です）。
チェックする工程を組み込むことで、制作やレビュー完了するまでの時間が長くなる懸念もあったので、これは嬉しい誤算でした。
さいごに
クラウドサインでは、社会インフラを担うプロダクトとして、アクセシビリティ・ユーザビリティを確保したプロダクト開発を行っていきます。
（ウェブアクセシビリティ方針｜クラウドサイン）
そして、今後もデザインチーム一丸となって、迅速かつ安定的にアウトプットを創出するために、AI等を活用した更なる仕組みづくりに励んでまいります💪
⭐️ Special Thanks
実装・デザイン調整 by a.sato & r.fukuda
サムネイルとアイコンの制作 by a.sato
公開作業 w/ 情リスS-san by r.fukuda
We are hiring!🎄
クラウドサインには、さまざまなスペシャリティを持ったデザイナーが在籍しており、PdMやエンジニアと連携しながらプロダクトづくりに励んでいます。
ぜひ私たちと、まだないやり方で世界を前に動かしていきましょう！
少しでも興味が湧いた方は、ぜひお声がけください。
