事業領域に応じたトンマナに対応するため、現在5つのカラーテーマを提供しています。各テーマはSerendieブランドに用いられる日本の伝統色をベースに設計しています。今後ニーズに合わせてテーマの追加・更新をしていく予定です。

KONJO

紺青色をベースにしたテーマです。紺青色は三菱電機Serendie St. Yokohamaの拠点カラーでもあり、デフォルトのカラーテーマとしています。

ASAGI

浅葱色をベースにしたテーマです。

SUMIRE

すみれ色をベースにしたテーマです。

KURIKAWA

栗皮色をベースにしたテーマです。

TSUTSUJI

つつじ色をベースにしたテーマです。

各テーマは、FigmaのなかでVariableモードとして扱われます。Variableモードは、Figma Variablesに定義されたモード (テーマ) を、ページやセクション、フレームなどに割り当てる機能です。

例えば、ページに「ASAGI」を割り当てることで、そのページ内の全てのSerendie UIをASAGIテーマに切り替えることができます。

現在提供している5つのカラーテーマは、前景色(テキスト色)と背景色のコントラスト比がWCAG2.2 レベルAAを満たすように設計しています。

そのためUIコンポーネントを追加設計する際は、カラーロールを適切に使用してください。例えば、primaryとonPrimaryは合わせて使うことが推奨され、primaryとonPrimaryContainerを組み合わせることは非推奨です。

Serendieブランドは、カラーパレット内の多様な色を組み合わせる表現が特徴です。Serendie Design Systemではその多様さを5つのカラーテーマとして規定することで、アクセシビリティ基準を担保しています。

このアクセシビリティ基準はベースラインであり、事業やプロダクトごとに必要な基準は異なることが想定されます。今後のアップデートでは、一部のテーマをWCAG3.0 APCA (Advanced Perceptual Contrast Algorithm) 準拠とすることも検討しています。APCAはWCAG 3.0での採用が議論されており、より人間の知覚に基づいたコントラスト比になることが期待されています。

参考文献