こんにちは、atama plusというスタートアップでUX/UIデザイナーをしている税所です。
デザインシステムの取り組みに興味がある、取り組みたいけれどどこから手を付けたらいいかわからない、そもそもデザインシステムとはなにかがあまりピンと来ない――。そんな方に向け、私の実体験をもとにお伝えしていきます。本連載が、デザインシステムを考える上でのなにかヒントになれば幸いです。
デザインシステムとはなにか
まず、デザインシステムとはいったいどんなものなのでしょうか。ここは僕たちも構築時に参考にした書籍『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』から引用してみます。
デザインシステムとは、デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連付けられたパターンとその実践方法です。パターンは繰り返される要素で、これらを組み合わせてインターフェースを作成します。
このようにデザインシステムは、ルールとパターン、またその使いかたなどが含まれた集合体を指しています。視覚的な情報だけでなく、議論の土台となるようデザイン指針などの情報がまとまり、デザインの共通言語となっているものです。
ここでは簡単に、デザインシステムを構築しているルールやパターンを3つ紹介します。
デザイン原則
デザイン原則は、プロダクトをつくるうえでの土台となる大原則です。プロダクトの目的を達成するため、どんなデザインが良いデザインなのかを明文化しています。プロダクトの目的を達成するための基本思想となり、デザインをする人が常に意識できるものである必要があります。
認知パターン
認知パターンは、インターフェイスの色や形に関わるルールやパターンのことを言います。カラーやタイポグラフィ、レイアウト、余白、アイコンスタイル、アニメーションなどのスタイルや、またその組み合わせです。それらは、ブランドをデジタルプロダクトのインターフェイスに落とし込み表現しています。
機能パターン
機能パターンは、インターフェイスの構成要素についてのパターンです。ユーザーの行動目的に対して必要な要素や構造を定義し共通化します。たとえば、ボタン、フォーム、テーブルなどの定義やパターン化がそれにあたります。
デザインシステムの導入を検討したタイミング
ここからは実際に、atama plusでのデザインシステム構築をどのように進めていったのか、実例を交えながら紹介していきます。
atama plusでデザインシステムの導入を検討し始めたのは、プロダクトをリリースしてから２年半ほど経ったタイミングでした。デザインをするメンバーも1名から4名に増え、エンジニアの人数も多くなり、会話だけでプロダクトの一貫性を保つことへのコストが高くなっていました。
そこでデザインに一貫性と秩序、また効率化をもたらすべくデザインシステムに取り組み始めました。下の図は、課題とデザインシステムに期待していた効果をまとめたものです。
atama plusの場合は、プロダクトができて2年半のタイミングでしたが、開始時期については、もちろんプロダクトの状況によりけりです。
新規事業の場合はまず、プロダクトマーケットフィットが第一です。そのため、それが達成されており、人員も増加しているタイミングが望ましいように思います。デザインシステムを早く作りすぎてしまい、プロダクトの作り直しと同時に再度システムも見直さなければならない、となるのは残念ですよね。
一方、安定した事業に複数人で取り組んでいる場合は、早いうちから定義することで、より効率化が果たせるかと思います。老舗サービスでも既存のスタイルガイドやコンポーネントライブラリを包括的につなぎ、かつプロダクト組織の共通言語として、デザインシステムの構築と運用をしていくことができるでしょう。
