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のガイドラインとはまた違ったデザインシステムの構築のされ方がされていて、参考になることも多いです。

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

UIのお仕事に関するご相談

Bageleeの運営会社、palanではUIに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

8

0

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

yamakawa

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

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

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

sugimoto

sugimoto

asama

ando

iwasawa ayane

oshimo

oshimo

異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!

CONTACT PAGE TOP