デザイントークン学習

デザイントークンのつくりかたを読んで学習中。

[受注生産] デザイントークンのつくりかた - 単行本（新装版） | putchom

メモがわりとしてまとめ。

デザイントークンとは

定義

色、タイポグラフィ、サイズ、不透明度、影などのデザインを構成する最小要素を定義するための方法論。

唯一の信頼できる情報源を提供する

あらゆるタッチポイントで一貫したビジュアル、インタラクションを提供するため、デザイントークンを唯一の信頼できる情報源として提供する。

一貫性の必要な理由

• 利用体験的側面

  • サービスを利用していく中でインターフェースを学習していく。ボタンの色が違うアクションを起こすなどチグハグだと使いにくく感じてしまう。

• ブランド資産的側面

  • ビジュアルを通してサービスのアイデンティティをユーザーに提供しているため、利用体験が蓄積されていく。今後想起しやすくなる。

デザインに対する共通認識をつくる

例えばデザイナーとエンジニアのやりとりで背景色が決まっていれば色に対して時間を使わず、他のことに時間が使える。

デザインシステムにおける位置づけ

あらゆるアセットやライブラリから参照される。
サービスのブランドを形作るデザインシステムの核。

定義する(本によるおすすめ方法)

Color(色)

Prismを使うと効率的。
コントラスト比を見ながら設計できる。

Typography(タイポグラフィ)

• Font size

  • スケールを定義するところからはじめる

  • 各項の逆数を並べると等差数列になる調和数列を用いる

Radius(丸み)

心理的印象など多くの要素に影響する。
明確な方法論はなく、自身のサービスのキャラクターにあったバリエーションを検討する。

Spacing(余白)

8px × フィボナッチ数列。

Shadow(影)

階層を生み出す。要素が前面にあることを視覚的に表現。

• 参照レイヤートークンを作成する。

  • 本影、半影、アンビエントシャドウの3つを用いて設計。

• 意味的なレイヤートークンを作成する。

  • 最下層からの距離によって決まる。

Opacity(不透明度)

影と同じように階層を生み出す。
ある要素が他の要素よりも前面にあることを視覚的に表現。

デザイントークンの設計で一番大切なこと

チームで行う。
共通認識を持つために対話をして育てる。

他にも指針にできることが多く載っている良書です。

[受注生産] デザイントークンのつくりかた - 単行本（新装版） | putchom