今回は、前回の続編としてスタートアップでデザインシステムを取り入れる際、「どうやってプロダクト開発に活用すればいいか？」といったより実践的な視点でまとめてみました。

※この記事はこちらの記事（スタートアップにおけるデザインシステムの価値とは？）の続きとなります。こちらも合わせてお読みいただければ嬉しいです。

デザインシステム導入における課題

デザインシステムは、デザインとコードの品質を保ったまま効率的な開発を可能にする手法として、欧米を中心に発展してきました。GoogleやAdobeなどの多くの企業が、自社のプロダクト開発を「支える仕組み」としてデザインシステムを活用しているのは記事などでよく見かけるかと思います。

そのような中、プロダクト開発に携わっている皆さんの中には、デザインシステムのメリットや可能性は感じているものの、どうやって始めていけばいいのか分からないとか、やってみたいが取りかかれていないなど、悩んだり困っている方も多いかと思います。

スタートアップで日々のサービス開発や運用をしながら、新しくデザインシステムを取り入れていくには現実問題として様々なハードルがあることも事実かと思います。例えば、以下のようなことがあるかもしれません。

• デザインやコードを俯瞰して整理するより、作ることに精一杯。
• 自社オリジナルのデザインシステムを整備していけるほど、リソースの余裕がない。
• 既に今のシステムが混沌としていて、どう整理していけばいいかわからない。知識や経験もない。
• そもそもデザイナーがいない。プロダクトオーナーが必要性を理解してくれない。などなど……。

スタートアップでは限られた人とリソースで、サービス自体の開発やPR、運用など、多くのことを短期間で効率的に進めていかなければならないので現実的に難しい部分も多いと思われます。

しかしながら、私たちが様々な案件に関わったり事例をみていく中で、そのような状況でもデザインシステムを取り入れ活用する方法も見えてきました。

デザインシステムの効率的な始め方

では、具体的にはどのように取り組み始めるのがよいでしょうか。例えば以下のようなアプローチがあると思います。

1. 小さく始める

プロダクトの全てをデザインシステム化するのではなく、取り組みやすいところ（例えば、色や基本UI部品であるボタンやフォーム、文字）だけをまず整理してみる。その後、徐々に広げていく。

2. 既に世の中にあるオープンソースのデザインシステムを活用する

GoogleのMaterial Designをはじめとして、自由に使えカスタマイズ可能なデザインシステムをベースとしてプロダクト開発に応用する。

3. Fixelが提供している「UXHub」や支援サービスを活用する

• UXHub：デザインシステムを作成・運用するために作られた専用のプラットフォームで、ブログ感覚でUIコンポーネントやコードを登録し利用できます。さらにカスタマイズ可能なデザインシステムのテンプレート（Fixel Design System：通称FDS）も用意されています。※詳細は後述
• デザインシステム作成・運用サービス：デザインシステムの作成と運用を、お客様の課題に合わせて支援するFixelおすすめのサービスです。

最初からデザインシステムを大きなものと考え過ぎると、やらないといけないことが多くなったり、現状と理想との距離感が離れていて取り組みにくくなりますので、自分たちがどのような状態であるか、どこから手を着けやすいかなどに合わせて、始めていくのが良いと思います。

その上で、さらにデザインシステムをより導入しやすくするために、私たちFixelでは先に示した製品やサービスを開発し提供していますので、最後にその紹介をさせてください。

FixelのUXHubや導入支援サービスでさらに便利に

私たちFixelは、これまで大小様々な規模のシステムやサービス開発に携わる中で、デザインや実装の課題に直面してきました。そのような中、デザインシステムの考え方や手法を取り入れプロダクト開発に適用することで、多くのメリットが得られることも確認できました。

しかしながら、プロジェクトでゼロからデザインシステムを作成することは、先に述べたようにハードルがあり「やりたくてもできない」という声も多く聞かれました。そこで、私たちはもっと多くの方がデザインシステムの恩恵を得られるようにすべく、デザインシステム作成や運用を「手軽に」行えるプラットフォームを開発しました。それが「UXHub」です。

UXHubとは？

「UXHub」は、デザインシステムを作成・公開・運用といった一連の作業を支援する機能をもったクラウドサービスのため、UXHubの利用者はデザインシステムの「中身そのもの」を検討したり利用することにリソースを集中させることができます。

具体的には以下のような主要機能を用意しています。

• ブログ感覚で、デザインガイドライン、UIコンポーネント、実装コード、ページテンプレートなどを登録。
• 複数ユーザによる共同編集。バージョン管理やコメント機能もあり。
• デザイントークン（デザイン要素を変数化したもの）にも対応。
• Vue.jsやReact.jsなどのフレームワークにも対応。など。

さらに、サンプルとしてデザインシステムのテンプレートを用意していますので、それをカスタマイズすることで初期登録作業を手短にすることができるようになっています。

💡 デザインシステムのテンプレート「Fixel Design System」とは？ Fixelがこれまでのデザインシステム開発の経験とノウハウを活かし、日本の企業や業務システムで使いやすいデザインシステムとして構築したものです。よく使われるUIコンポーネントをひと通り揃え、Webアプリケーションの開発にすぐ応用できるよう仕上げられています。また、デザイントークンの設定値を変えるだけで、色やサイズ、アイコンなどの見た目のカスタマイズが可能です。

その他、UXHubの詳しい機能や使い方はこちらの公式サイト、または関連記事もご覧ください。

※関連記事 今時のフロントエンジニアにはデザインシステムが必須である理由

また、「UXHub」のようなプラットフォームだけでなく、お客さまの具体的なお悩みや課題をお聞きして一緒に解決していく「デザインシステム作成・運用」サービスも提供しています。

デザインシステム作成・運用支援サービスとは？

こちらもこれまでFixelが数多くのデザインシステム作成に携わるなかで築きあげてきたメソッドや考え方を整理し、お客さまを直接ご支援する形のサービスです。

デザインシステムを導入するにあたって、お客様の課題感だけでなく、製品内容やチーム体制、運用規模、予算などによって適切な進め方が変わるため、その諸条件を踏まえたかたちで、ビジネスの成果を最大化できるプランをたて、お客さまとともにプロジェクトを進めていくサービスになります。

お客さまのニーズに合わせ、短期間なものから長期間なものまで、きめ細かな対応ができるのが特徴です。こちらも詳しいサービス内容はこちらの公式サイトに書いておりますので、ぜひご覧ください。

おわりに

この記事では、スタートアップの方々に向けてプロダクト開発にどうやってデザインシステムを取り入れるかについて書いてきました。スタートアップでデザインシステムに関心がある方は、おそらく自社のサービスを短期的だけでなく中長期的な視点でも考えられているかと思います。デザインシステムを活用することは自社のデザインを資産として管理・発展させていくことに繋がります。

まだデザインシステムに取り組めていない方は、是非小さなところからでも初めてみることをお勧めします。そしてもし課題やお悩みがあれば、私たちFixelへお気軽にご相談をください。お待ちしております！