見出し画像

結局「デザインシステム」って何？

rai26

こんにちは、スペースマーケットデザイン部の新井です。
今回は「Design systems デザインプロダクトのためのデザインシステム実践ガイド」を読み、デザインシステムについての概要・効果を中心にまとめました。（※運用の事例などは省いてしまったので、詳しくはぜひ本書をお読みください！）

・デザインシステムについて何となく分かるけど、うまく説明できない
・ガイドラインとの違いがよく分からない

この記事が少しでも上記のような方の参考になれば幸いです。

※この記事はスペースマーケットアカウントのマガジンにまとめられます。他の記事もぜひご覧ください！

デザインシステムとは、デザインパターンを繋ぐもの

さて、本の冒頭によると「デザインシステムとはデジタルプロダクトの目的を達成するために編成されたパターンの繋がりと、その実践方法」とのことですが、そもそも「パターン」とは何を指すのでしょうか？

「デザインパターン」とは、繰り返し・再利用できるインターフェースの部品を指します。具体的には、Webサイト上でのボタンやフォーム、アイコン・カラーなどの要素が挙げられます。
また、「パターン」はすでにこれまで多く使われ確立されたものなので、ユーザーはその姿を見て「何であるか」を直感的に理解します。

画像1

確かにこんな形を見たら、多くの人がすぐに「これはボタンだ」「押せそう」と思いますよね。

このように、パターンはユーザーにぱっと見で機能を理解してもらえる素晴らしいものです。しかしそれはこれまで繰り返し使われてきた実績あってのことで、むやみやたらに新しく増やせるものではありません。
そのため、新規にデザインパターンを作成する場合は

・新たにそのパターンを知る
・そのパターンに慣れる

というユーザーの「学習コスト」を考慮しなければなりません。
追加の際は、今後使われるかどうか・ユーザーにコストを負わせてまで本当に追加する必要があるのかなど、よく検討する必要がありそうです。

デザインパターンの「動詞」と「形容詞」

デザインパターンは色々ありますが、大きくは以下の2つに分類されます。

デザインパターンの分類@2x

・機能パターン
プロダクトのコアとなる機能です。ECサイトでのカートの機能など、必要不可欠なものを指します。
イメージとしてはサービスにおいて重要な機能を担う 名詞・動詞的な、いわゆる「メイン」部分と考えて良いものです。

・認知パターン
プロダクトやブランドのエートス（＝習慣）によるものです。カラーや細部のあしらいなどを指します。
こちらはエモーショナル・形容詞的なイメージです。
そのサービスの印象はどんな色・フォント・装飾を使うかによって大きく左右されるので、こちらも非常に重要です。

これらのパターンを一連の流れとして相互に繋ぎこむことで生まれるのが「デザインランゲージ」と呼ばれるものです。
デザインランゲージを明確にすると、システムをより強力にコントロールできるようになります。

多種多様なパターンをシームレスに繋いで、デザインランゲージを実現するためには「デザインシステム」が必要ということですね。

そのコンポーネント、なんて呼びますか？

また、デザインシステムを運用していくためには共通言語が必要です。
実際にデザイン業務に携わる中で、人によって同じ要素を別の名前で呼んでいることはありませんか？

画像2

名称の統一はもちろんですが、その要素を使う理由まで浸透していれば、役割や用法がバラバラになることはありません。
そしてその共通認識が浸透していればしているほど、要素はより適切な形で使われます。

ソシオメディアの公開しているUIデザインパターンは名称・効能・用法がすべて言語化されており、読めば誰もが理解できる形にまとめられています。非常に分かりやすく参考になるので、ぜひご覧ください。

ガイドラインさえあればOKという訳ではない

システムでなくとも、分かりやすい「ガイドライン」さえあれば良いのでしょうか？

パターンライブラリとは？
パターンの原則などを格納するツールのことで、ガイドラインなども含まれます。デザインシステムの効果を高めるためのツールなので当然ながら自力の修正機能は無く、保守を担う役割は持っていません。つまり、ガイドライン自体はUXに直接関与しません。

また、常に最新の状態へアップデートして使っていないと意味がないため、運用・整備もしっかり行わなければなりません。
ガイドライン作ったはいいけど形骸化していく問題、ありますね...。

「参照して」使うライブラリ単体だけではなく、それを活用した上で「全体に機能する」システムが必要になるということですね。

良いUXが生まれ、運用もカンタンに

大きなシステムでは、小さいシステム（＝サブシステム）が連携しあって目的を達成しようとします。
サブシステムごとの連携は調和となってデザインにあらわれ、UXには自然と一貫性が生まれます。

逆に連携できていない、分断された状態のシステムではUXも不合理なものとなり、ユーザーの「戸惑い」「がっかり」に繋がります。

画像4


さらに、分断された状態のシステムではコードもごちゃごちゃ、デザインデータも整理されていない状態で修正にも手間がかかります。
これでは、ユーザーの課題解決にすぐ対応できなくなってしまいます。
ただシステムを作れば良いというわけではなく、きちんと整備された「機能するシステム」であることが重要ですね。

それでは、最後に「機能する」デザインシステムはどんな特徴があるのかを確認してみます。

デザイン原則

デザイン原則は大きく分けて4つあります。
効果的なガイドラインにはこれらの原則が特徴として見られます。

1. 真実であり、本質である
2. 実用的かつ実行可能である
3. 視点（POV）がある
4. 関連づけやすく、覚えやすい

1. 真実であり、本質である
これはUIだけではなく、ブランド全体の視点も含めたものです。サービスの使命やブランドの目的を無視して、単に流行をうわべだけ取り入れるようなことはあってはなりません。
また「便利」「かっこいい」など抽象的な言葉は本質であるとは言えません。ブランドイメージの体現・課題解決のために本当に必要なものが何か、きちんと定義する必要があります。

2. 実用的かつ実行可能である
聞こえが良いだけの原則を並べても、そもそも実行できなければ意味がありません。プロダクトの事情をきちんと踏まえ、それに合った内容である必要があります。例えば「シンプルであること」ならば

・何をシンプルとするのか
・シンプルを実現するために、何が不要なのか

を明記しなければなりません。
やはり1と同様に具体的に言語化することが重要です。

3. 視点（POV）がある
デザインは「選択の積み重ね」によって形成されているため、場面場面によって何を優先するべきかをその都度判断しなければなりません。
そのため、判断の基準として「何を判断の軸とするのか」という価値観を決めておくと、視点のブレを防げます。

4. 関連づけやすく、覚えやすい
そして最後に「覚えやすさ」です。やはりいくら実用的で良いシステムを構築しても定着・運用されなければ意味がありません。
多すぎても覚えることができないので、厳選した数の原則を持つことが大切です。

デザインシステムについての参考リンク

最後に、デザインシステムについて参考となるリンクをいくつかご紹介します。


Airbnb Design / DLSタグのついた記事

Pinterest / 原則について

Trello / Nachos

IBM / carbon

Adobe / Spectrum

Shopify / polaris

InVision / Design Systems Handbook

公開されているデザインシステムはどれもその会社の特色が出ていて、見るだけでも興味深いですね。

スペースマーケットでは Atomic Design や Storybook を活用していますが、より良いデザインシステムを構築できるよう私も引き続き勉強していければと思います。
現在採用も募集しておりますので、興味がある方はぜひこちらをご覧ください！

ここまで読んでいただきありがとうございました！

この記事が気に入ったらサポートをしてみませんか？