The semantic interface palette is simple
そこでセマンティックレイヤーを導入します。セマンティックレイヤーとは、コアパレットの色をどのように使用するかを定義するルールのリストです。つまり…コアレイヤーは利用可能なすべての色を示し、セマンティックレイヤーはそれらの色をどのように使うかを定義します。
ほとんどの人は、非常に複雑なセマンティックパレットを見たことがあるでしょう。例えば、ボタンの背景色、ボタンのテキスト色、ボタンのアイコン色など、デザインシステムの各コンポーネントごとにカラートークンを細かく設定する方法です。私も以前はこのアプローチを試しましたが、今では過剰であり扱いが難しすぎると感じています。
今回紹介するシンプルなセマンティックレイヤーは、ほとんどのインターフェースで問題なく機能します。
5つの主要なセマンティックトークングループ：
- テキスト（Text） - タイトル、段落、キャプション、リンク、ラベル、ボタンのタイトルなど
- 塗り（Fill） - ボタンの背景色、アイコン、チェックボックス、トグルなど
- ストローク（Stroke） - 入力ボーダー、区切り線、バナーの枠線など
- レイヤー（Layer） - ページ背景、ポップアップ背景、オーバーレイなど
- エフェクト（Effect） - 影やタッチフィードバックの色
Aloha では、ストロークとエフェクトを省略しました。ストロークについては、システムを簡素化するために塗りのパレットの色を使うことにしました。この決定の長所と短所については後述します。エフェクト用の特別な色は必要ありません。AndroidやiOSの標準エフェクトを使用しているためです。
トークン（Tokens）
各セマンティックパレットには、いくつかのセマンティックトークンがあります。例えば：text-primary, text-secondary, text-brand-primary, and text-on-accent
Aloha では、Figma で コアパレット と セマンティックパレット を別々のファイルとして管理しています。
セマンティックレイヤーを導入する大きな利点の1つが、インターフェースのテーマ管理が容易になることです。適切に整理されたセマンティックレイヤーがあれば、ライトモードやダークモード、さらにはカラーテーマの切り替えも簡単になります。Alohaでは、5種類のカラーテーマを用意しており、それぞれライトモードとダークモードの両方に対応しています。
Figmaの変数を活用することで、カラーモードの管理と使用が容易になり、ワンクリックでテーマを切り替えることができます。
ダークモードのためのヒント
1.単純に色を反転（light → dark または dark → light）させずに、各ケースごとに適切な配色を考える。
2.ダークテーマでは奥行きを持たせる。ユーザーに近い面は明るくする。
3.ライトテーマとは逆に、境界線や区切り線は背景色より明るくする。
塗り（Fill）
塗りの色は以下の用途で使用されます：
・アイコンの塗り
・チェックボックス、ラジオボタン、トグルスイッチなどの塗り
暗い背景やカラフルな背景上に配置される要素についても考慮する必要があります。
これは非常に重要なトークンです。ほとんどのケースをカバーするために、
fill-on-accentというトークンを1つ追加するだけで済みます。
テキストの色は、タイトル、段落、リンク、ラベル、ボタンのタイトルなどに使用されます。
テキストの色と塗りの色は非常に似ているように見えますが、なぜ別のセマンティックグループが必要なのでしょうか？その理由は、テキストはアイコンやUIコントロールよりも線が細いため、同じ色を使ってもより明るく見えるからです。
テキストの色を個別に管理し、わずかに調整できるようにするために、専用のトークンが必要なのです。
レイヤーの色は最もシンプルでありながら、最も厄介な要素の1つです。トークンの数は少なく、色も2～3色程度しかありませんが、これらのトークンの構造は特にダークモードで重要になります。
Aloha では、3つのフロア（floor）と1つのオーバーレイ（overlay）を定義しました。ライトモードでは、フロアは2色のみを使用し、ダークモードでは、より奥行きを感じられる
ストロークの色は、要素の境界線や区切り線に使用されます。必要な色の例：ブランドカラー、ポジティブな色（成功メッセージなど）、ネガティブな色（エラーメッセージなど）、明るいグレーのバリエーション。
塗りとストロークの統合？ほとんどの場合、ストロークに必要な色は塗りのパレット内に含まれています。そのため、ストローク専用のパレットを作成するのは冗長ではないか？という疑問が生まれます。Alohaでは、塗りのパレットをストロークにも使用することにしました。
しかし時には、ライトモードで使用される同じ色が、ダークモードでは塗りとストロークで異なる動作をするようにしたい場合があります。
そのため、一方では、塗りとストロークに同じパレットを使用する方が簡単で、どのパレットを適用するべきか考える必要がありませんが、別の視点から見ると、2つのパレットを使用することで、より柔軟性が増し、特定の色をどのように使用するべきかがより明確になります。
静的カラー（Static colors）
これまで、セマンティックトークンは、異なるカラーテーマ間で変更可能な色として説明してきました。各トークンは、インターフェース内で特定の役割を持っています。しかし、カラーモード（ライト/ダーク）に関係なく、常に同じ色を維持する必要があるならば？一般的に、これは黒や白のシェードです。
Creating a consistent color palette for your interface
Creating accessible color palettes for human eyes
When “semantic tokens” are no longer semantic
英語版参照元：
https://uxdesign.cc/the-semantic-interface-palette-is-simple-09ef5349c0ca#ac96-39586e140a93
DMNでは、他にも様々なブログを「DMN Insight Blog」にて配信しております。
定期的に記事をご覧になられたい方は、ぜひご登録をお願いいたします！
→「DMN Insight Blog」メールマガジン登録
