スタートアップ唯一のデザイナーが、デザインシステムを構築する方法

こんにちは。アルプのデザイナーの大澤（@Tadaki）です。

Taras Savytskyi さんに掲載許可をいただき、「スタートアップ唯一のデザイナーが、デザインシステムを構築する方法」の記事を翻訳させていただきました。

How to build a design system if you’re the only designer in a startup

私自身そうなのですが、スタートアップではやることが多岐にわたり、デザインシステムを構築しようにも中々手が回らない状況です。記事では、素早くデザインシステム構築するための知見をまとめた素晴らしい内容となっているのでぜひご覧ください。以下記事内容になります。

スタートアップ唯一のデザイナーが、デザインシステムを構築する方法

プロダクトデザインの担当が、会社で自分一人しかいないのはとても大変です。同時に複数の業務を処理するため、一日が非常に忙しいです。プロダクトデザインにおけるハイレベルな戦略の定義、機能の提供、プロダクトチームとのコラボレーション、開発やQAのサポート、ユーザーインタビューなど、多岐に渡る業務を行わなければなりません。

これらに加え、デザインの仕事も同時にこなさなければいけません。Statfloでは、プロダクトに関するすべての機能をデザインするメインツールとしてFigmaを使っています。すべてのデザイン、調査、ブレインストーミングセッションは、Figma に集約しています。

私がStatfloに入社して間もないころ、アプリのリニューアルに着手しました。その過程で、迅速に作業を進めるため、数回クリックするだけでプロトタイプを作成できるようなデザインシステムを必要としていました。

Open Source logo by Pixel Perfect

悩まず世の中に出回っているオープンソースのデザインシステムを使いましょう

最初のうちに使用する要素の大半は、ボタン、ドロップダウン、フォーム、フォント、カラーなどのアトミックなコンポーネントであり、多くを必要としません。システムの初期スタイリングは、後から数回クリックするだけで変更できるので重要ではありません。

サードパーティのデザインシステムに求められる最も重要な点は、柔軟性と適切なコンポーネントのネスティングです。

いくつかのプロダクトをご紹介します。
無料：Ant Design Open Source、Lexicon DSL
有料：Tetrisly、Venus Design System、73px

基本的なコンポーネント、カラー、タイポグラフィ

使用するデザインシステムを決めたら、最初にカラー、タイポグラフィ、そして基本的なコンポーネントに集中するべきです。

この戦略により、デザインをより速く作成することができます。例えば、入力フィールドを作る必要がある場合、最初はデフォルトの状態から始めて、後から他のものを追加していくことができます。

例えば、入力フォールドの中にどのようなアイコンを使うべきか迷った場合、16×16の正方形を作ってグレーで塗りつぶし、それをコンポーネントにすれば大丈夫です。これにより、この作業は一旦終了することができ、将来的に塗りつぶしたアイコンを更新することも簡単です。

常にコンポーネントから始める

スタートアップで唯一のデザイナーである場合、デザインシステムを構築するための時間がないことがあります。時間を節約したいのであれば、UIの構築から着手し、すべての要素をコンポーネントに変換していくことをお勧めします。

そうすることで、時間を大幅に節約することができますし、最初にどの要素が最も重要なのかを決めるのにも役立ちます。

理想として、要素の作成から始めて、次のステップでそれをコンポーネントに変換することで、コンポーネントの置き換えに時間を費やす必要がなくなります。

Figmaのプラグイン「Master」を使おう

急いでいる時にはコンポーネントの作成を忘れてしまい、複数のアートボードで同じ要素を作ってしまうことがあります。作業をやり直して手動で置き換えるのは面倒な作業です。そんなときには、通常の要素を1つのコンポーネントに変換することができる「Master」という Gleb Sabirzyanov 氏が作成した素晴らしいプラグインがあります。

また、異なるアートボード上の要素をすべてコンポーネントに変換するには、すべての要素を選択する必要があります。この作業を助けてくれるのは Similayer プラグインです。ワンクリックで複数のアートボード内の任意の要素を指定して選択することができます。

ダウンタイムを使ってデザインシステムを改良する

タスクやプロジェクトの合間にダウンタイムが発生することがありますが、この時間を有効的に使うには、デザインシステムを改善して洗練するのが一番です。この作業に費やす時間は、新機能の開発や別のプロトタイプを組み立てる際に報われるでしょう。

私はデザインシステムを段階的に変更したり、改良したりするための時間を1週間のうちに数時間を確保するようにしています。

最初から適切なネーミングにこだわらなくていい

UI を作成していてデザインシステムのコンポーネントを作り始めたばかりの頃は、コンポーネントの適切なネーミングについて考える時間はありません。このステップは、コンポーネントの数が増えた後の段階に移すことを強くお勧めします。そうすれば、適切な経路、ネーミング、ネスティングについて考えることができます。

Figma には、要素の名前を一括して変更するのに便利なプラグインがいくつかあります。「Rename It」、「Ultra Renamer 2」、「Regulator」、あるいは Figma の付属機能を使用するのも良いでしょう。