2019年12月14日

デザイン

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

目次

  1. はじめに
  2. spectrumとは
  3. spectrumの基礎
  4. まとめ

はじめに

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

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

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

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

1.png (61.7 kB)

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

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

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

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

spectrumとは?

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

1.png (135.9 kB)

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

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

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

2.png (107.7 kB)

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

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

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

spectrumの基礎と環境

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

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

デザイントークン

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

デザイントークン とは

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

デザイントークンの種類

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

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

4.png (1.9 kB)

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

5.png (2.9 kB)

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

6.png (4.1 kB)

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

PC・モバイル比率

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

7.png (9.2 kB)

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

8.png (7.3 kB)

9.png (2.5 kB)

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

ブレイクポイント

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

10.png (11.4 kB)

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

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

11.png (8.9 kB)

12.png (9.3 kB)

色について

グレーの使い方

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

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

14.png (9.4 kB)

色の使い方

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

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

15.png (6.5 kB)

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

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

16.png (17.2 kB)

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

17.png (9.9 kB)

タイポグラフィについて

フォントサイズについて

フォントサイズのルール

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

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

その他

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

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

19.png (112.6 kB)

まとめ

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

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

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

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP