デザインシステムは、作ってからが本番。

いちはら

2022年2月10日 14:45

デザインシステムってどうやって作るの？運用どうするの？について考える。

こんにちは、クックパッドデザイン推進部部長のいちはらです。

クックパッドのレシピサービスにはapronというデザインシステムがあります。それが、この度Figma Communityに公開しました👏

ほんの一部ですが公開しましたので、このデザインシステムを作って得た気づきや、その後のことを一問一答形式で書いていこうと思います。この記事が、ガイドラインやデザインシステムについてお悩みの方の参考になればいいなと思います！

１、どうしてデザインシステムを作ったの？

ユーザーに価値を届ける速度や品質を保つため。

デザインの指針がないと、とくに意図なくいままでを踏襲したデザインを使い回しをしたり、必要なコンポーネントがバラバラに点在していたりと開発効率やデザイン品質が低くなります。
apron誕生の経緯についてはわかりやすく書いてくれていますのでこちらの記事[kenshir0f]を読んでみてください！以下が記事の抜粋になります。

デザインの指針がないと意図もなく他のページのデザインを参考にしたり、使いたいコンポーネントが見当たらなかったりと開発効率もデザイン品質も低くなります。結果として、ユーザーに価値を届ける速度も品質も落ちてしまうことは大きな問題です。この問題を解決すべく、プラットフォーム横断でUIデザインの指針となるデザインガイドラインの整備に着手しました。
(〜引用終わり〜)

２、具体的にどういう体制でどうすすめていったの？

メインでデザイン基盤グループの２名＋デザイナー皆で！

私は、レシピ事業部のUI/UXデザイナーと協力し、デザイントークン/UIコンポーネントをまとめアプリ全体で適用するデザインのルールを iOSとAndroidで整理。レシピ事業部のプロダクトオーナーやサービスに携わるコンテンツディレクター、エンジニア、デザイナーと一緒にブランドコンセプト/アイデンティティを言語化。また、誰が見てもわかりやすいようにCase Studyを掲載しました。以下は、私が作成したApronillustrationSystemです。

一方でフジケン[kenshir0f](当時基盤G)が、Figmaからwebへデータを移行。運用し始めてから要望を受けての日々の改善。Apronのアイコンや推奨書体をFigmaですぐ使える社内プラグイン開発。デザイントークンやUIコンポーネントなどを実装で簡単に呼び出すことができるライブラリの開発などを行ってきました。

３、デザインシステム作るのって大変？

正直、大変。でも、小さく始めればそんなに大変じゃない。

Apronが今の形になるまで大体２年くらいかかりました。
時間だけ聞くとかなりしんどそうですが、２年前にスタートして少しずつ改善・更新を繰り返して徐々に内容が固まっていったという感じです。

最初は「沢山ありすぎるグレーカラーをまとめたい！」という小さなことから始まり、その後も、周りのデザイナーの協力を得て、コツコツ改善を積み重ねて広げて行きました。クックパッドのような大規模サービスで毎日大量の施策が動いている環境でもできたので、小さく始めるのはそんなにハードルは高くないと思います。

なので、いきなりすごいデザインシステムをつくるぞ！と意気込まなくても、業務効率化の範囲からはじめるのがよいかなと思います。例えば、週に１時間だけコンポーネントを整理するなどがおすすめです。

４、デザインシステムor ガイドラインの違いってなに？

ガイドラインはルールや原則。システムは包括的なもの。

Apronは最初「デザインガイドライン」という名前で運用されていましたが、途中からcssのUIコンポーネントができ、デザインシステムと言える体裁になりました。組織やサービスによって、必要な定義が違うので、まずは、自分たちの優先度の高いものから手をつけていくと良いです。（Fixel田口雄貴さんのこちらの記事がわかりやすかったです）

そのなかでも、ブランドパーソナリティやデザイン原則はサービスの核になるところなので、できるだけ早めに定義しておきたい項目かと思います。

５、デザインシステム運用って手間がかかる？

完璧を求めない。品質管理として、できる範囲で運用する。

作っていくと、どれもこれも必要なものに見えてきそうですが、完璧なデザインシステムなどは存在しない！と、開き直る。「困った時に頼れるみんなのルールブックだ」くらい気軽に考えば、日々の更新が辛くならないと思います。ブランドとして、核となる部分は作りきってしまえば、運用には手が掛からないです。

しかし当然、日々のUIルールやコンポーネントのアップデートは必要なので、そこは、むしろシステムとしてまとめていったほうが運用効率は上がります。また、システムが死なないためには、運用の担当者は決めておくことをおすすめします。

６、デザインシステムを作ったら何か変わるの？

属人化を防げる・新陳代謝ができる組織体質になる

他にもたくさん変わることがあると思いますが、私はこの２点が一番大きいかなと思います。ガイドラインがない時は、デザイナーが空気を読んで作ってきたので、なんとなく揃えてきたところがありましたが、きちんと明文化されたことで、組織のデザイナーが入れ替わっても、サービスとしてのコアな部分はブレずに存続することができます。

また、しばらく放置していたらいつの間にか古いデザインになっていた！ということにも気が付きやすくなります。クックパッドのレシピサービスでもApronを作ったことで長らく更新が止まっていたPCの主要導線のUIアップデートにも着手することができました。このように、デザインシステムがあることで、具体的な改善施策のきっかけにもなりました。

７、デザインシステムを作っても浸透するのが大変？

浸透のスピードを早めるため、エンジニアと一緒に作る

みんなが使っている生きたシステムの状態をつくるためには、コード化しておく必要があります。
デザイナーだけではなくエンジニアを巻き込んで作ることでいろいろな作業を並行してすすめられるので、浸透のスピードは倍以上になります。優秀なエンジニアには、是非チームに入ってもらいましょう！

８、デザインシステム作って、その後どうするの？

デザインシステムは作ったら、使い倒す！

私が考えるデザインシステムについて項目に分けて書いてみましたが、まとめると、以下のような感想を持ちました。

「デザインシステム」だけでは価値を生み出さない。そのルールがきちんとサービスに、全体に反映され運用されてはじめて人に届くものになる。

私の場合は「クックパッドのレシピサービスのデザインが進化し続ける仕組みを作りたい」という思いで、ブランドパーソナリティやガイドラインの策定に取り組んできました。なので、当然「システムを作る」はゴールにはならないと思います。いまPCのUI改修をしていて作業がサクサク進むので、ほんとにApronがあってよかったな〜と実感しています。

ただ同時に「作るだけでも意味のあるものだ」とも思いました。
というのは、主にデザイン原則やクックパッドらしさを考えていく上で、プロダクトオーナーを始め、社員総勢30名以上の方に協力を頂いたことにあります。

職種や社歴が違えど、それぞれの立場でサービスのあり方についての意見を交換し、それを言語化していく活動が社内でできたこと。それは、けして「作るだけでは無意味」なことではなかったかなと思います。今はまだ小さな変化ですが、今後大きく、クックパッドのサービスによい影響を与えることができるのではないかなと信じています。