デザインシステム始めました
株式会社iCARE ではデザインシステムに注力しています
詳しくは各メンバーの発表がたくさんあるのでそちらを参照していただくとして、ぼくは旗振りというかアドバイザーというか、方向の調整役というかみたいなことをやっています
はじまり
Carely は SaaS としての歴史も長く、色々な多くの機能が盛り込まれています。また実装時期によって、実装やデザインに統一感がないという課題がありました
その中で最初に課題に上がったのはフロントエンドエンジニア側の開発のやりにくさでした。「画面によって微妙に見た目が違っている」「既存の画面を壊さないように実装を何箇所も修正しないといけない」「既存と一緒っぽいのにちょっと違うデザインの仕様書が上がってくる」
また、フロントエンドエンジニアの人数の拡大に併せて、デザイナー側の人数も少しずつ増え、多人数でコラボレーションしながら実装を進める方法の確率の必要に迫られていました
よろしい！ならばデザインシステムだ！
定例の立ち上げ
まずはそれまでフロントエンド定例で会話されていたデザインシステムに関する議論を分けるために定例をスタートさせました。同時に Storybook の導入を始め、現在のエンジニアリングメンでのコンポーネント設計の見えるかと共有を進めていきす
Storybook の導入
導入はされていたもののデザインシステムとしての運用はされていなかった Storybook の既存コンポーネントの整理を開始。定例で決まったことを共有する場としても活用しはじめました
デザイントークンの導入
具体的なシステム化の最初に取り組んだのは「 color 」と「 typography 」のデザイントークン化でした。この二つはエンジニアからも課題が上がっており、デザインファイル上でも微妙な差分が散財して実装時のコミュニケーションコストが高くなっていました。これらをトークン化して名称をつけて混乱がすくなくなるようにしました
また、同時に base.css で設定されていたフォントも改訂。これまで「フォントが違う」→「それは base フォント」→「変えてくれ」→「こっちは？」→「全部」みたいな不毛な会話がまれに発生していたので、基本となるフォントとサイズを再設定して全アプリケーションに一気に適用しました
ロードマップの策定
定例がある程度進んだタイミングで、メンバーにヒアリングしつつロードマップと方針を決めました。色々と書いてあるんですがポイントはふたつ
Storybook をデザインシステムの正とすること
目標の一番の目的を開発の効率化におくこと
議論は色々あると思うのですが、フロントエンド側のメンバーの方が数が多く工数がかけられる事、新しいメンバーがオンボードした協業するに当たって重要だという観点でかなり絞った方針にしています
既存コンポーネントのドキュメント化
この辺りで具体的にコンポーネント化するパーツも見えてきた事もあり、 Storybook に addon-docs を導入しました。これによって、以下の手順でガイドライン化して行っています
既存のコンポーネントをドキュメント化する
不明な仕様や、コードからは分からない用途やデザイン上の制限といった項目を確認
ドキュメントを追記
既存で使われるべき箇所を置き換えていく
レイアウトコンポーネントの整理
各コンポーネントと併せてレイアウトの整理も行っています。こちらについては Rails と密結合になっている部分も多く、苦戦しながらも既存の仕様を棚卸して整理を行っている最中です
レイアウトとデザイントークン、ドキュメントの方針まで完了してしまえばメンバーが少しずつ充実して行ってくれることでしょう
レイアウトコンポーネントについては Nuxt.js でレイアウトコンポーネントを使ってレイアウトを統一した話 もどうぞ
メンバーのアウトプット
推進してきてよかったなと思うのはメンバーが活発にアウトプットしてくれている事です。毎月行ってる meetup のフロントエンドエンジニアの会 では、多くの方に集まっていただいて共有したりもしてくれていますし、ブログや エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニアのカレンダー に参加したりしてくれています
これから
まだまだデザインシステムと呼ぶには足りていない事ばかりなので少しずつ充実させながらプロダクトへの適用を進めて行っています。作ることを目的にして完成を優先させるケースは多いと思いますが、 Carely ではプロダクトを改善することを一番のポイントに置いてまだまだ経験の浅いメンバーが泥臭く取り組んでくれていてこれからの進歩が楽しみです
現在は次のロードマップをメンバーが考えていて、近々ブログなどで公開されるかもしれません
この記事は iCARE の技術顧問がどんな事をやっているか - 2021アドベントカレンダー の11日目の記事です
この記事が気に入ったらサポートをしてみませんか？