無秩序なデザインファイルから、速く新規事業を検証できる体制にするためにやったこと

こんにちは!今回はalmaの2人目のデザイナーとして2年弱地道に行ってきた、デザインの体制についてまとめておきたいと思います!

これまでの課題

私が業務委託としてジョインした当初、デザイナーが1人だったこともあり、デザイン体制、特にデザインファイルはあまり整理されている状態ではありませんでした

カラー、テキストスタイルは定義されておらず都度スポイトで取ってきていたり、コンポーネントがないので違うルールで作られたボタンが乱立していたり、マージンやサイズに規律がなかったりなど、属人性の高い状態でした…

もちろん、立ち上げ時で、多くのやることがある中、一人のデザイナーが、デザインファイル整理に時間をかけることが大事だとは思わないので、当時はそれでよかったかもしれません。

一方で、事業の立ち上げ時期の検証のスピード感や、複数人で同じサービスのUIをつくる時のコミュニケーションコストガイドがない事による実装のコストalmaのプロトタイプをみんなで作っていく気風などを考えて、ジョインしたころからチマチマとデザイン体制の整理を始めていきました。


実現したかったこと

私たちの会社はまだまだ小さく、事業を模索しながら、時にはピボットし、時には大きく作り直し、時には詳細な改善も必要なカオスの時期です。

そんな時に必要なのは、ただ綺麗にデザインを作れる体制ではなく、事業を検証していけるデザイン体制です。 「デザイン、開発に時間をかけず、速く綺麗に事業の検証ができる」こと、また全員が形にし速く刺さるものを作るために、「デザイナー以外でもデザインを扱い、形にできること」を方針とし、以下の取り組みを始めました。

速く綺麗に、誰でもデザインを作れるための取り組み

方針

  • 骨組みやパーツなど、共通する枠を作ってあげることで、統一したルールのもとデザインできるようにする
  • ローカルスタイルは程よく制限をかけ、選択の余地を狭めることで速さを実現する

⓪既存のページとパーツを全てスクショして書き出し、現状を把握、整理。

まずは、現状の把握と規律を作るための手がかりとして、デザインデータやスクショを用いながら全てのページ、パーツを洗い出しました。

そこで、まとめても良い機能の同じパーツをまとめ、大体これだけ作れば大丈夫だな、という最低限のパーツを書き出しておきます。


①パーツの組み合わせでデザインを作れるよう、超シンプルなシステムの構築

最低限のパーツを作っていきます。

今回のデザインファイルは、誰でも扱える、がテーマなのでなるべくわかりやすく、機能ごとに最低限の要素に絞っていきます。

また、パーツを選びやすいよう、コンポーネント内部の表示、非表示やAutolayoutなど各種機能を使い、できるだけ一つのパーツを使いまわせるように作り込んでいきます。


②表層のスタイルガイドをデザイナー以外でも迷いなく選べるようまとめた(カラー、テキスト、マージン、シャドウなど)

パーツやデータに使用するカラー、テキスト、マージン、シャドウは迷いやすく属人性が出やすい部分でもあるため、絞れるだけ絞りました。FigmaのStylesにも登録し、この中のもののみを選んで使用するようにしています。

特に迷いやすいグレーは実質4色に絞り、選びやすく、明確に分かれるようにしています。


③デザイナー以外も触って良い「作業用ファイル」と、構成パーツをデザイナーが責任を持ってしっかりまとめる「マスターファイル」を切り分けた

ファイルの分け方はこのように、色で作業用ファイルと、コンポーネントやテンプレート分けて分かりやすくしています。

ファイルはこのようにイシューごとにファイルを作り、 ✍️WIP 💎FIX などの、プリフィックス (接頭辞) をつけて、カオスにならないようにし、触りやすいデータを心がけていきます。


④エンジニアと連携してStorybookにまとめ、実装もデザインもこのシステムで統一して行えるようにした

最後に、エンジニアの@yokinistに協力してもらい、実装環境において色やフォント、サイズ、ボタンなど普遍的に使い回すようなものは全部値として管理して参照するようにし、作ったデザインをスムーズに実装できるようになりました。これにより、作るたびに新しい色、パーツ、スタイルが生まれたり、既存のデザインと統一感がなくなってしまうこともなくなりました。

値として間接的に参照しているので、変わった時にマスターデータを変えるだけで全体に変更が反映されるので便利です!

使ったサービスのStorybook。

.

.

起こったこと

①デザイン、実装のコストが下がり、デザイナーやエンジニアが事業に頭を裂けるようになった。
組織体制の変更なども重なった結果ですが、デザイナーやエンジニアが事業や検証に深く関わることができるようになっていき、PM的な動きがしやすくなりました。

.

②新規事業や新しい機能など、全く新しい取り組みを始める際も、同じシステムから作ることで制作コストをグッと減らし、スピード感ある検証ができるようになった。

.

③(おまけ)Figmaを使う文化が浸透し、今では社員全員がFigmaを使うようになった。
このプロジェクトに伴ってFigma勉強会を開いたり、Figmaでの作業に巻き込むことが増えました。
結果、営業スライドや組織図、調達資料、プロジェクトのアサインまで、今では全員がFigmaを使って作業できるようになっています。

デザイナーという肩書きからくる葛藤を超えて。

一方で、私自身、デザインを手放し開くことに葛藤があるところもありました。

しかし、事業でもっともっと結果を出したいと思ったこと、私自身がデザイン面でボトルネックになってしまった経験などがあり、「クオリティの守護神になるのは大事だけど、デザインデータの守護神になったらダメだ」と感じるようになり、この取り組みをすることになりました。

結果として、自分自身も検証や事業に頭が向くようになり、とても良かったと感じています。

私はalmaを8月に退社しましたが、デザイン文化は残ります。これからも事業を検証していけるデザイン体制が会社に貢献してくれることを願っています!

💡フォーラムは、デザインケースについてあなたなりの視点や活用の仕方を、自由につぶやく実験的な機能です。

無秩序なデザインファイルから、速く新規事業を検証できる体制にするためにやったことのサムネイル画像

無秩序なデザインファイルから、速く新規事業を検証できる体制にするためにやったこと

kitajimannn

2021/09/13

あなたなりの視点をシェアしてみましょう 🙌

Twitter iconシェアする