ブログ

“Design Systems” デザインシステムの構築と改善サイクルへのアプローチ

UX・インタラクションデザイナーとして無料EラーニングサイトFutureLearnのリードデザイ ナーを務めたアラ・コールマトヴァ氏(Alla Kholmatova)による書籍Design Systems が Smashing Magazineからプレリリースされました。

本書はデジタルプロダクトのためのデザインガイドラインやスタイルガイドなどを「デザイン システム」と総称し、価値のあるデザインシステムのあり方、その合理的な構築プロセスと改 善サイクルについて言及。対象は彼女自身がそうであった様に、中小規模のデジタルプロダク ト開発チームでUXを実践しているデザイナーやフロントエンドエンジニア。特にビギナーから 中級者くらいまでのようです。

またデザインシステムを実際に構築し運用しているAirBnB, Atlassian, Eurostar, Sipgate, TEDといった、そうそうたる有名サービスの開発チームへのインタビューを元にしていることも見逃せません。

これは私個人的にかなりタイムリーな話題であったので早速購入し2/3ほどザッと読み終えまし た。そのうち和訳本が出るかもしれませんが、待ちきれず。少しだけご紹介をしたいと思います。

※なお下記は公式な翻訳ではありません。私なりの理解をまとめたものなので、ご了承くたさい。

 

デザインシステムとは包括的なユーザー体験を提供する仕組み

そもそもデザインシステムとは何でしょうか。上に書いた様にUIの世界ではデザインガイドラ インやスタイルガイド、またはパターンライブラリという形を取ることが多いかと思います。

本書で語っているのはそれらを合わせたモノ。例としてAtlassian、TEDなどを挙げていますが 最近の事例で一番分かりやすい例はMaterial Designかなと私は思います。独自の考え方をベース に、実際的なスタイリングやパターンライブラリが再利用が可能な形でアーカイブされている ので、たくさんの開発者やデザイナー達は新たなアイディアをより早く、高い品質で形にする ことができます。もちろんMaterial Designのコンポーネントを使えば何を作ってもMaterial Designぽく仕上がってしまうわけですが、それもデザインシステムの仕組みの狙いと言えます。

本書におけるデザインシステムというのは、各サービスごとにそうした仕組みを構築すること で、統合的なUX品質を維持してサービスの改善を加速させることができるよ、というイメージ なのだと思います。

やや堅くなってしまいますが、私なりのまとめは以下です。

  • デザインシステムとはパターンライブラリーの形を取るプロダクトの目的達成を助ける仕組み
  • バラバラになりがちな個々のデザイン・機能などを一貫させてブランドの哲学と価値を反映させた包括的なユーザー体験を提供
  • それにより長期的なコスト圧縮とユーザーの満足度アップが見込める

 

パターンライブラリだけではデザインシステムとは言えない

ただし彼女は単なるパターンライブラリーだけではうまくいくわけではないと続けます。パターンライブラリーは道具でしかなく、使い方によってはひどいデザインも生まれてしまうと。

この例として考えやすいのはFoundationなどのCSSフレームワークかと思います。本書では既 存のフレームワーク活用に関する話は出きませんが、こうしたものもデザイナーなしで基本的 な見た目を整えやすくなりますし、フロント開発の大きな助けになります。しかし、例えばプ ロダクトの性質に合わせた構成やインタラクション、そしてビジュアルのトーン、またター ゲットユーザーに合わせた理解のしやすさなどは既存のフレームワークが担ってくれない部分 です。というかフレームワークは、そもそもそういうものですが。

本書では効果的な仕組みにするためには、土台になる部分がかかせないと言い、次に上げる4つの要素が必要だとしています。

 

効果的なデザインシステムであるための4つの要素

  1. Design Principal デザイン原則
  2. Functional Pattern 機能的パターン
  3. Purseptual Pattern 知覚的パターン
  4. Shared Language 言葉の共有

1 デザイン原則

これは日本で言うとデザインコンセプトやデザインクライテリアに近いものだと思います。ま ずプロダクトの目的を明らかにしつつ、ユーザーにプロダクトから得てほしい心象と企業文化 をシンプルな言葉に集約させる作業だと言えるかと思います。

この辺りはスキップされてしまいやすいところかもしれません。ただ私自身の経験則としてシンプルな言葉に落としておくと不必要なブレが減らせると実感してます。

2 機能的パターン

フォームやボタンなどいわゆるUIパーツや、共通で使われるセクションなど。wordpressでいう とウィジェットもこの一部だと言えます。インターフェイスを積み木のように作っていくベー スとなるコンポーネントのことです。

3 知覚的パターン

タイポグラフィや色などのスタイルガイドにあたります。ルック&フィール、トーン&マナー、 テイスト…言い方は様々ですね。グラフィックによりブランドを見える化すること、直感的な 理解を助けること、それをルール化することで一貫性を作ることを解説されています。

4 言葉の共有

チームで作る。そのためには相互理解が欠かせませんよね。筆者はコミュニケーションも仕組 み化の一部だとしているようです。

ここで語られているのはブランドビジョンやデザイン原則をみんなが腹落ちさせておくこと。様々なノウハウやナレッジも積極的に共有して、お互いが理解できるベースを作っておくことなどです。これも当たり前の様で、言うは易しというやつです。これを実現するためにモジュールに対する名前の付け方、デザインプロセスを可視化など色々な工夫を紹介しています。

 

判断基準と構築プロセス

後半は構築プロセスの解説となります。システムのあり方は企業文化やプロダクトの目的によって変わるという立場の筆者は、まずはシステムの個性を定める変数を紹介。

  • ルールのあり方
    • 厳格↔ゆるい
  • パーツの定義
    • モジュール型↔一体型
  • システムの構築運用
    • 中央集権型↔分散型

こうしたものは方向性を定めていく判断基準になると思います。その上で具体的なハウツー手法の解説になっています。

その詳細までブログで書くわけにいきませんが、Atomic DesignでBrad Frost氏が紹介したインターフェイスインベントリを利用したリサーチから、ステップを踏んでシステム化する手順を細かく手とり足取りという感じなので分かりやすいです。

 

思うこと

概念レベルから実践レベルまで丁寧に書かれている本書は参考になるところがたくさんありました。英語なのでやや読むのは大変かもしれませんが、興味のある人はぜひ手に取ってみてください。プレリリースの間だけなのか、日本へのシッピングが無料だったので、私は紙とeBook のセットを買いました。

Published 2017 by Smashing Media AG, Freiburg, Germany. All rights reserved.

https://www.smashingmagazine.com/design-systems-book/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です