アクセシビリティチェックができるFigmaプラグインを作った
LLMを利用して、ガイドライン以外のポイントも確認する
2025/11/19
SmartHR プロダクトデザイン企画室
© SmartHR, Inc.
プロダクトデザイン企画室とは？
デザイン組織におけるR&D（研究開発）部隊です。
プロダクトの使いやすさを担保・向上させるために、デザインシステムの戦略策定・推進や、使いやすさを実現するツールの企画や開発を行います。
使いやすさ実現の仕組みづくりへの問い
使いやすいプロダクトを作る組織に、必要なものってなんだろう？
どういう仕組みがあると、使いやすいものを作成できるのだろう？
3
？
プロセスを整えていくことが必要ではないか
プロセスとは、インプットとアウトプットをつないでいくことです。
例えば、SmartHRでは、UIを作成する前に情報設計のアウトプットを作成しています。UIを作成して、使いにくければ、情報設計を見直しすることもあります。
4
インプットの精度の担保も大事
インプット自体が揃っていても、内容が欠けてしまうと、次のアウトプットも欠けてしまいます。
5
ガイドラインやチェックリストを充足
内容が欠けないように、ガイドラインやチェックリストを充足します。
ガイドラインやチェックリストもまた、アウトプット作成のためのインプットになります。
6
UI作成時に利用しているチェックリスト
SmartHRでは、「UIデザイン使用性チェックリスト」を用いて情報設計やUIをレビューしています。
7
アクセシビリティのチェック項目も追加予定
8
JIS X 25000
品質特性「使用性」の中の
副特性として「アクセシビリティ」が
定義されています。
UIデザイン使用性チェックリスト
JIS X 25000が元になっていますが、アクセシビリティチェックの項目が入っていないので、入れる動きをしています。
アクセシビリティチェックリストは、現在開発向けのものが存在しており、UIデザイン使用性チェックリストに項目を追加することで、UI作成時のチェックを行えるようにします。
プロセスを運用視点で見てみる
もし、チェックリストが物理的に遠く離れたところにあったら、どうなるだろう？
9
次のことが生じる可能性がないだろうか？
チェックをやりやすくしたい
チェック対象とチェックリストを近くにして、チェックしやすくする仕組みを作りたいと考えました。
10
チェックを行うために必要な3つのアクション
にかかる時間を短くして、確実に実行できるようにしたい
Figmaプラグインでチェックをやりやすくする
11
FIgmaプラグインで、次の3つのアクションを高速に回すことができます。
人の目で判別つけづらいものも判別できる
背景色と文字色のコントラスト比が4.5：1をギリギリ満たしていないような、なかなか人の目で判別つけづらいものも判別できるようになりました。
13
ん？
さっきの伝え方、おかしくない？
14
伝え方への問い
15
これって、健常者の視点なんじゃない？
「人の目で判別つきづらいものも判別つくようになった」
ガイドライン以外のこともプラグインに聞いてみよう
ガイドライン以外のことも聞いてみる
17
プロンプト：
①コントラスト比のガイドラインの定義を聞く
②実際の利用状況ではNGとなるシーンを具体的に聞く
回答例：
「使いやすい」を実現するには、ガイドラインやチェックリスト以外のコンテキストも重要
チェック対象に、チェックリスト以外に、どういうインプットが必要か考えていくことが大事と考えています。
18
まとめ
19
ありがとうございました。
20