はじめに
現在FigmaでWebサイトのデザインを作っている。私はデザインに関して素人で、最近気になっていた「デザインシステム」を知れば何かもっとうまくやれるのではと思い本を読んだ。
書籍では様々な参考記事や書籍も紹介されていて、深く理解していくための窓口となるような書籍だと感じた。
物理本がおしゃれで魅力的である。英語版の方が安くてレビューが良かったので私はその電子版を買った。
この本の著者はFutureLearn社のリードデザイナーであるAlla Kholmatovaさん。彼女の経験と、AirBnB、Atlassian、Eurostar、TED、Sipgateのケーススタディ、18ヶ月にわたるリサーチとインタビューに基づいて執筆された。
この記事では私の解釈が多分に書かれている。
目次
大きく基礎と実践という2つのパートに分かれている。
PART 1: FOUNDATIONS Chapter 1: Design Systems Chapter 2: Design Principles Chapter 3: Functional Patterns Chapter 4: Perceptual Patterns Chapter 5: Shared Language Summary PART 2: PROCESS Chapter 6: Parameters Of Your System Chapter 7: Planning And Practicalities Chapter 8: Systemizing An Interface: Functional Patterns Chapter 9: Systemizing An Interface: Perceptual Patterns Chapter 10: Pattern Libraries: What, Why And How Conclusion
Design Systems
この書籍でデザインシステムもしくはシステムといった場合、デジタルなプロダクトを提供するために構成されたパターンやプラクティスの集合体を指す。
と、言われてもよくわからないのでググったが、だいたい似たようなことが書かれていて、私は横になり、静かに目を閉じた。
書籍を読んだ結果、参考例として出てくるUsing Visual Loudness for Better Wayfindingがデザインシステムを理解するヒントになったので、ここで紹介する。
65デシベルは会話くらいで、80デシベルは掃除機、120デシベルは飛行機の離陸音といった音量のスケールのアイディアをボタンに応用して次のようなスケールを作っている。
ボタンを使う頻度や利用目的も書かれているのがポイントである。例えばVOLUMEがScreamのボタンばかり使ってしまったら逆に目立たなくなる。購入意欲のあるユーザを迷わせてしまうというようなことが起こるだろう。ボタンだけでなくWebサイトで使われるヘッダーやカード、テキストやフォントを定義していく。定義の仕方は上記のボタンで見たようにどう使われるかや、ユーザにどう感じてほしいからこの色やフォントを使うなど、セマンティクスを含めるのである。このように使い方含め、再利用可能な状態で定義したものでWebサイトを構築することを想像してほしい。
そのようにして定義された様々な部品を組み合わせてWebサイトのデザインを構成するのである。そのような仕組みで作ると「デザイン」というものがシステム化する。システムとは多数の要素が集まり相互に作用し合う組織や体系だからだ。それをイメージすると私は「デジタルなプロダクトを提供するために構成されたパターンやプラクティスの集合体」という言葉がより理解できた。
プロダクトの目的
デザインシステムはプロダクトの目的の達成をサポートするものでなくてはならない。例えば、Qiitaだと、エンジニアが困った時に誰かの記事を見て課題を解決できたかどうか、解決のためのアクションを取れたか？もしくは誰かにとって役立つ情報を書きやすいかどうかなど。書きやすさの定義は難しいが、こういった言葉の定義はプロダクトチームでしっかり議論が必要で共有されるべきであろう。
デザインシステムとパターンライブラリの違い
Bootstrapはパターンライブラリで、Material Designはデザインシステムである。Material DesignにはBootstrapにはない使い方や考えなども書かれている。つまりBootstrapのコンポーネントをただ集めただけではシステムではない。デザインシステムになるためには、構成要素同士の繋がりなどが定義されている必要がある。
Material Designに不足しているもの
Material Designに不足しているものはドメインに関する知識である。例えばオモコロをMaterial Designで作れるかというと無理である。Material Designは圧倒的に「おもしろさ」がない。つまり実際にデザインシステムを作る時は、まずは今から作ろうとするプロダクトを通してユーザにどう感じてほしいかなど、プロダクトの目的を考えることが重要である。結果的にデザインシステムはドメイン知識やブランドなども構成要素となってくる。
デザインシステムとパターン・ランゲージ
パターン・ランゲージとはWikipediaから引用すると以下。
パタン・ランゲージ (pattern language) は、クリストファー・アレグザンダーが提唱した、建築・都市計画に関わる理論。単語が集まって文章となり、詩が生まれるように、パターンが集まってランゲージとなり、このパタン・ランゲージを用いて生き生きとした建物やコミュニティを形成することができるとされる。
「この建物って何かいいな」をパターンとして体系建てたものがパターン・ランゲージである。デザインシステムはパターン・ランゲージの考えが元になっている。目的に合わせてパターンを定義する。そして「このデザインって何か〇〇達成できるな」というようにユーザに思ってもらえているか、つまりプロダクトの目的が達成されているかを運用しながら確認してよりよいデザインの言語というものを構築していく。
デザインシステムを調べていると出てくるデザイントークンという言葉もそういう文脈でトークンという言葉が出てくるのかと気づいた。
デザインシステムのメリット
デザインシステムのメリットはユーザ体験に集中できることである。なぜユーザ体験に集中できるかというと、むしろ、ユーザ体験に集中するための考える枠組みとしてデザインシステムは作られたからである*1。どのようにしてそれが実現されているかは書籍を読んで頂きたいが、そのWebサイトのそのページでユーザが何を達成したいかを考えながら、既に定義され運用する中で効果が実証されたものを再利用することを考えると納得がいくかと思う。
おわりに
Design Systemsを読むことでどういう風にデザインを作ったらいいのかという良さげなプラクティスを実践するヒントを得られた。あとは実践しつつ学んでいきたい。
*1:たぶん
