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