atama plusのデザインシステムの話

2020年1月のdesignsystems.tokyoのイベントでatama plusでのデザインシステムの取り組みがとても勉強になったのその時にとったメモをもとに簡単にまとめました。

デザインシステム検討の背景

・プロダクトの複雑化
・デザイナーの増加
・チーム分割

プロダクトが成長するに従ってデザインの整合性が保てなくなった。
デザイナーの増加で言葉での意思疎通が限界になってきた。
チーム分割によりロールを超えてデザインを検討する機会が多くなった。

リソース
デザイナー3名+エンジニア1名
リソースは定常業務の1/6くらい使ったが、体力的には1/2だった！

デザインシステムを進める流れ

デザイン原則
↓
機能パターン
↓
ムードボード
↓
認知パターン

デザイン原則

・バリューである「”Wow students”を達成するためにこんなことをしています」を言語化した
・すごく時間を使って考えた
・新しく入った人からしても違和感のない内容にした
・認知拡大のために社内の至る所に設置
・デザインが一人歩きできるような、その元となるデザイン原則を目指した

ムードボード
・みんなで考えたため時間がかかった（普通は一人の人が大枠を決める）
・miroを使った
・ロゴを作ったのは外部の方で、その人に見せたりしてFBをもらった

認知パターン
・課題を洗い出して１つずつ解決
・プロダクト二年くらいしているのがちゃんとしたイメージがなかった
・atama plus のデザインとは何かを探究
・現状維持しつつ、補正して行った

機能パターン
・パーツの洗い出し→赤文字で問題点を指摘、青文字で方向性を書く
・GoogleDocument（→今後はzerohightに移行する予定）でデザイナーが作っていった
・無茶を行っていないかどうかエンジニアにもMTGに入ってもらいった
・エンジニアは別でスタイルシートのまとめた物を作っていった
・Material design、Atlassianを参考に文章＋イメージを載せている
・デザイナーがコンポーネントの使い方、意味、目的等について書けるようになるのが大事

自社のデザインシステムの名称をつけた方が良い

愛着が湧くし、それを社内でもその名称で呼ばせるようにすることで定着するようになる。
atama + ではuniformという名称で、”学生のサービス”に着せるデザインという考えから

質問

Q. デザイン原則を決める上でデザイナー以外で関わった人はいましたか？

A. ほとんどデザイナーだけで決めた。ただ、他部署との風通しをよくする努力をした。
具体的には、デザインシステムというの決めるというアナウンスを行い、その中でなぜ必要なのかを説明したり、会議も誰もが参加できるような雰囲気を作った。

Q. 合議制で進め切れたか、意思決定はどうしていたか？

A. 合議制で進め切れた。人数が少ない間で進めるのが大事。
まとめる工夫として。実態で、できていることベースで進める。
抽象化した物は具体的に何に紐づいているか。
具体例が思いつかない抽象的な話はNGとした

逆質問

Q. 今回は小規模のウェブのデザインでコンポーネントの数が少なかったがだいぶ時間がかかっため、アプリのデザインに関してはページごとに少しずつデザインシステム追加しようと考えているが他の会社ではどのように作っているか？

A. まずは、よく使うコンポーネントのほとんどを追加していく。大体6割〜7割。それからページごとにやっていく。