アラ・コルマトヴァ『Design Systems』を読んだ

Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

  • 作者: アラ・コルマトヴァ,佐藤伸哉,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2018/12/25
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

デジタルプロダクトのデザインがうまく機能し長持ちするように、デザインをシステムと捉え管理するアプローチとして、本書ではデザインシステムが紹介されています。デザインシステムはUIコンポーネントやビジュアルデザインに秩序を与え、プロダクトが一貫した振る舞いを実現していくための実践的なガイドラインです。

挙動や見た目の一貫性はユーザーに信頼感や安心感を抱いてもらうための重要な性質のひとつですが、チームで共有言語なしにそれを維持し続けるのはなかなかに難しいことだと思います。何かしらの方法で文書化されていたとしても、コアな部分だけだったり細かなレギュレーションへの言及がなかったりといった状況もよくあることだと思います。

このデザインシステムは、何を言語化しておけばメンバーとの価値観の共有が進んで、円滑な共同作業が可能になるかを考えるヒントになりそうで、デザインのガイドラインを作成する前に目を通しておくと良さそうです。

原則

原則は数あるコンポーネントの中からどれを選び、またどのようなスタイリングをするのかという判断の拠り所となる価値観です。もちろんプロダクトの性質に左右されにくいデザイン行為自体の原則もあるでしょうし、そのブランドの在り方を体現するような原則もあるだろうと思います。ここでは主に後者の原則を取り扱っています。

私が良いなと思ったのは、原則の優先順位も明文化しておきましょうということでした。例えばあるデザインを検討しているとき、使いやすさと新規性のどちらをとるかという問題が発生したとします。このとき両方を選べるのならばそれが良さそうですが、何らかの理由で一方しか選べない場合に、どちらを取る判断をするかでそのプロダクトの印象は大きく左右されてしまいます。原則の優先順位が定義されていれば、自ずとどちらを取るべきかが分かります。

個々人の価値観でその場その場で選んでいると、プロダクトが大事にしている価値観と成果物に現れている価値観とにブレが生じて、ユーザーへの見え方の一貫性を保つことができなくなってしまいます。ブランドの理解が足りないから、意識合わせが不十分だからブレるのではないかという意見も出てきそうですが、基本的な表現のベクトルをあわせるという意味で、あとから参照できるように原則が明文化されていることの価値は高そうです。ディティールのブレを抑えるためには、機能パターンと認知パターンが活用できます。

機能パターンと認知パターン

機能パターンと認知パターンは、原則のような概念的なものから一歩踏み込んで具体的にまとめられたガイドラインです。機能パターンでは、タイトル、要約文、投稿日時といったようなそのパターンで利用される情報とレイアウトの仕方を定義します。認知パターンでは、ビジュアルデザインとしてのルール(色、形タイポグラフィ…)を定めます。

システムの範囲

デザインシステムは便利ですが、何でもかんでもパターン化していくことがゴールではありません。プロダクトの性質に応じて導入の仕方はそれぞれで、厳格に取り入れていく必要に迫られることもあるし必要最低限で足りることもあります。ガチガチにルールが決まってしまうと堅苦しくつまらなくなってしまうし、何も定まっていなければ自由がありすぎます。

デザインシステムは一つのフレームワークとしてそれぞれのチームでアレンジして使うものです。本書ではAirbnbとTEDの違いが分かりやすく取り上げられていました。

  • どの程度厳格にパターン化していくのか(ルール)
  • コンテキストをどの程度加味するか(部品)
  • 特別に管理する部門や人がいるのか(組織)

これらはどのように運用するかを考える上で気にしておきたい項目です。

私が担当プロダクトのデザインシステムに関する文書を整備したときには、まずこのシステムの範囲を書きました。どの程度の温度感でデザインシステムを運用していけば良いのかを自分自身も含めて明確にしておきたかったからです。