Adobeのデザインシステム、spectrumから学べるデザインの基礎

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay14です！

昨日は「WebARの本質的な価値について考えてみる」のお話でした。

WebARの本質的価値を考えてみる

本記事ではAdobeのデザインシステム、spectrumから学べるデザインの基礎についてご紹介します。

今年の10月後半にAdobeのデザインシステム、Spectrumの公式サイトが発表され、話題を呼びました。

spectrumに関する記事はAdobeのブログでも発表されていますが、細かい内容を日本語で解説している記事がないため、今回は私が読んで使えると思った部分を抜粋しご紹介いたします。

注意点としては、今回の記事はあくまで私の解釈で書かせていただいております。
元のspectrumの内容を忠実に再現というよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところを抜粋しているので、ご注意ください。

記事の冒頭ではspectrumの説明をします。
すぐに本題に入りたい方はこちらから。
spectrumの基礎と環境

spectrumとは？

spectrumとはAdobeのプロダクトデザインチームが効率よくデザインできるように作成されたAdobe独自のデザインシステムです。

具体的には、Adobeのspectrumは大きく３つのセクションに分かれています。

1. 1. デザインシステムの根幹にあるデザイン思考、基礎などをまとめた「Principles」
2. 2. デザインシステム内で使用されている、UIキットやアイコン、フォントなどを使用できる形にしている「Resources」
3. 3. そのUIを実装する際に使える、オープンソースのCSSが用意されている「Implementations」

今回はこの３つのセクションのうち、本記事では主にデザインシステムの考え方やルール決めなどを行っている、「1. Principles」部分について主に紹介していきます。

そのほか、2と3の方にも興味がある方は参考リンクを貼っておきます。

Resources
→UIキットのダウンロードはこちら
→フォントのダウンロードはこちら
→アイコンのダウンロードはこちら

Implementations
→Spectrum CSSのダウンロードはこちら

spectrumの基礎と環境

では、早速spectrumの中身を見ていきます。

まずはspectrumの基礎(foundation)について。

デザイントークン

spectrumでは、「デザイントークン」という考え方を採用しています。

デザイントークン とは

デザインシステムを作るのに必要な要素（数値）、例えば余白、色、タイポグラフィ、オブジェクトスタイル、アニメーションなどをデータとして数値化したものをデザイントークンと言います。例えば、色の場合は「#2680EB」などの１６進数など。

デザイントークンの種類

デザイントークンには大きく３つの段階があります。

グローバルトークン (Global Token)
グローバルトークンはデザイントークンの中で一番手が加えられておらず、普遍的に使えるトークンです。

エイリアストークン (Alian Token)
エイリアストークンはグローバルトークンを１段階抽象化した、トークンです。
どういう要素内で使われるのかなどを説明することにより、同じトークンが複数箇所で使われる際に、どういう用途で使われているのかを明確にすることができます。

コンポーネント具体トークン (Component-specific Token)
コンポーネント具体トークンでは、エイリアストークンをさらにコンポーネント内で使用するイメージを持たせたものです。
コンポーネントなどを実装するさいに、エンジニア側でも使用できるように、さらに用途を絞ったネーミングを与えています。

プラットフォーム間のサイズに関するルール

PC・モバイル比率

spectrumでは、デスクトップの大きさとモバイルが1: 1.25となっています。
この時、モバイルの方がデスクトップのものよりも125%大きくなるというのがポイントですので、ご注意ください。
（タップ範囲を広めに取る必要があるためと思われます）

また、テキストやアイコンに関しても、PCとモバイルで別々のセットを用意します。

ただし、ボーダーの太さはPCとスマホで変わりません

ブレイクポイント

Adobeのデザインシステム内では、それぞれプラットフォームのブレイクポイントが下記のように設定されています。
複数設定されてはいますが、主なブレイクポイントとして、タブレットの768pxで切っているようです。

クリックとタップエリアの違い

Adobeのデザインシステムでは、クリックとタップエリアに違いがあります。
特にタッチエリアの方は、最小で幅、高さが48px以上あるように設定されているようです。

色について

グレーの使い方

spectrumでは、デザインでの統一感を出すため、１１種類のグレーを使用しているようです。
この１１種類のグレーでテキスト、ボタン、アイコンだけでなく、ホバーやdisableなどの様々な要素と状態を全てカバーしています。

また、暗めのグレー３つは主にテキストの色として、明るめのグレー３つは背景色として使用され、そのほかにプレースホルダーやdisableテキストなどそれぞれのグレーに役割が決まっているものもあります。

色の使い方

spectrumでは、主に３つの色の使い方があります。

セマンティックカラー (semantic colors)
セマンティックカラーとは、意味がある色の使い方です。
spectrumでは、主に４つのカラーがセマンティックカラーとして使用されています。

スタティックカラー (static colors)
スタティックカラーとは、lightやdark、どのテーマにおいても同じ色が使われるカラーのことです。

アクセシビリティ考慮した色選びがされています。
また、様々なテーマの中でも統一感と親和性があるよう選ばれています。

ラベルカラー (label colors)
色自体に意味がなく、色でカテゴリやラベル、データの見える化などを行うために使用される色です。

タイポグラフィについて

フォントサイズについて

フォントサイズのルール

PC・モバイル比率でも説明したように、spectrumではPCとモバイルのサイズ比率を1:1.125としており、これがフォントサイズにも適応されています。そのため、マテリアルデザインのようの偶数にフォントサイズを区切っておらず、デスクトップの一番小さいフォントが11pxだったり、モバイルのベースサイズが17pxだったりします。

フォントサイズのテーブルの全容が見たい方はこちらの「Font sizes」セクションからどうぞ。

その他

spectrumのスタイルガイドには、それぞれのコンポーネントに「Design checklist」というものが、あり、どこまで完成しているのか、どういったことが考慮されたコンポーネントなのかが分かりやすくなっています。

カラーテーマや、ステートの状態の考慮、アクセシビリティー、使用方法など普段少し見落としがちなものも入っているので、spectrumをご覧になる際はぜひチェックしてみてください。

まとめ

以上、今日はspectrumから学べるデザインの基礎についてご紹介しました。

今回は基礎編なので、デザイントークンなど概念や基礎的な話が多いですが、マテリアルデザインやappleのガイドラインとはまた違ったデザインシステムの構築のされ方がされていて、参考になることも多いです。

次回はこの基礎の上にそれぞれのコンポーネントの紹介をしていきます。