デザインシステム構築における最初の一歩とは 実体験を交えながらUX/UIデザイナーが解説

デザインシステム構築における最初の一歩とは 実体験を交えながらUX/UIデザイナーが解説
  • X
  • Facebook
  • note
  • hatena
  • Pocket

 一人ひとりの学習を最適化するAI先生「atama+(アタマプラス)」を提供するatama plusは、2018年末ごろからデザインシステムの構築に取り組みました。そのプロジェクトに携わったUX/UIデザイナーの税所亮(さいしょりょう)さんが、実体験を交えながらデザインシステムのイロハを解説する本連載。初回となる今回は、構築を検討するべきタイミングや、実際の始めかたについてです。

 こんにちは、atama plusというスタートアップでUX/UIデザイナーをしている税所です。

 デザインシステムの取り組みに興味がある、取り組みたいけれどどこから手を付けたらいいかわからない、そもそもデザインシステムとはなにかがあまりピンと来ない――。そんな方に向け、私の実体験をもとにお伝えしていきます。本連載が、デザインシステムを考える上でのなにかヒントになれば幸いです。

デザインシステムとはなにか

 まず、デザインシステムとはいったいどんなものなのでしょうか。ここは僕たちも構築時に参考にした書籍『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』から引用してみます。

デザインシステムとは、デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連付けられたパターンとその実践方法です。パターンは繰り返される要素で、これらを組み合わせてインターフェースを作成します。

 このようにデザインシステムは、ルールとパターン、またその使いかたなどが含まれた集合体を指しています。視覚的な情報だけでなく、議論の土台となるようデザイン指針などの情報がまとまり、デザインの共通言語となっているものです。

 ここでは簡単に、デザインシステムを構築しているルールやパターンを3つ紹介します。

デザイン原則

デザイン原則は、プロダクトをつくるうえでの土台となる大原則です。プロダクトの目的を達成するため、どんなデザインが良いデザインなのかを明文化しています。プロダクトの目的を達成するための基本思想となり、デザインをする人が常に意識できるものである必要があります。

デザイン原則の一部抜粋
デザイン原則の一部抜粋

認知パターン

認知パターンは、インターフェイスの色や形に関わるルールやパターンのことを言います。カラーやタイポグラフィ、レイアウト、余白、アイコンスタイル、アニメーションなどのスタイルや、またその組み合わせです。それらは、ブランドをデジタルプロダクトのインターフェイスに落とし込み表現しています。

カラーシステム
カラーシステム

機能パターン

機能パターンは、インターフェイスの構成要素についてのパターンです。ユーザーの行動目的に対して必要な要素や構造を定義し共通化します。たとえば、ボタン、フォーム、テーブルなどの定義やパターン化がそれにあたります。

ボタンラベルの規定
ボタンラベルの規定

デザインシステムの導入を検討したタイミング

 ここからは実際に、atama plusでのデザインシステム構築をどのように進めていったのか、実例を交えながら紹介していきます。

 atama plusでデザインシステムの導入を検討し始めたのは、プロダクトをリリースしてから2年半ほど経ったタイミングでした。デザインをするメンバーも1名から4名に増え、エンジニアの人数も多くなり、会話だけでプロダクトの一貫性を保つことへのコストが高くなっていました。

 そこでデザインに一貫性と秩序、また効率化をもたらすべくデザインシステムに取り組み始めました。下の図は、課題とデザインシステムに期待していた効果をまとめたものです。

 atama plusの場合は、プロダクトができて2年半のタイミングでしたが、開始時期については、もちろんプロダクトの状況によりけりです。

 新規事業の場合はまず、プロダクトマーケットフィットが第一です。そのため、それが達成されており、人員も増加しているタイミングが望ましいように思います。デザインシステムを早く作りすぎてしまい、プロダクトの作り直しと同時に再度システムも見直さなければならない、となるのは残念ですよね。

 一方、安定した事業に複数人で取り組んでいる場合は、早いうちから定義することで、より効率化が果たせるかと思います。老舗サービスでも既存のスタイルガイドやコンポーネントライブラリを包括的につなぎ、かつプロダクト組織の共通言語として、デザインシステムの構築と運用をしていくことができるでしょう。

※この続きは、会員の方のみお読みいただけます(登録無料)。