ADMIN大改修にあたりデザインガイドラインを作りました

2019年7月22日 12:10

株式会社ROXX（旧SCOUTER）のデザイナーのたまご（@tamago_78）です。

2019年7月に社名変更と会社移転がありました。
社名はSCOUTERからROXXへ、そして会社は渋谷から赤坂に移転になりました。

会社も個人としても心機一転がんばっていきます！

------------------

ADMIN大改修の経緯

私の作っているサービスは、3つのアプリケーションがあります。

- エージェントが使うアプリケーション
- 求人企業が使うアプリケーション
- 事務局（社内CSチーム）が使うアプリケーション

ユーザーへの影響が大きいのはユーザーが直接触るアプリケーションの改善なので、どうしても事務局用アプリケーション（ADMIN）の改善は後回しにしがちです。

これまでは事務局が少人数体制だったので回っていたのですが、メンバーが増え、ADMINでのトラブルも増えてきました。

また、合わせてセキュリティ面を強化すべく、3ヶ月ほどに渡るADMIN大改修を現在進行形で行っています。

大改修の計画は開発合宿で行われました。
二泊三日、一度もコードを書くことなく、朝から夜遅くまでただひたすらにmtg、計画をたてました。

今日から二泊三日の開発合宿です！ pic.twitter.com/vn2mKZYz2V
— たまご / SaaSデザイナー (@tamago_78) May 29, 2019

改修前と比べ機能は整理され、減りました。（現在は使われていない機能があった）

UIのルール化、コンポーネントの定義をしておけば、全ページデザインをせずともよしなに作れるので、デザインのガイドラインをつくり、リデザインは的を絞り行うことになりました。

エージェントの使う画面においてはデザインガイドラインが存在しているのですが、ADMINに関してはそもそもデザインデータがありません。
なので基本的なルールから決めておく必要があります。

デザインガイドラインを作るにあたり、まず最初に行なったのはレイアウトのパターン出しです。

- パンくず表示箇所
- パンくずの命名定義
- h1表示箇所
- コンテンツのレイアウトのパターンだし
- コンテンツ幅の定義
など・・・

（色は基本的に既存のものを使用するので決めていません。）

そのあとは細かいコンポーネントやUIのルールを決めていきました。

このようにCSSを指定することもあります。
デザイナー⇆エンジニア間、エンジニア同士の認識のずれを少しでもなくす為です。

このようにUIをルール化した為、全50~60ページほどある中私がデザインをしたのは9ページだけです。

ただ、全てのページにおいて実装後のデザインチェックを行なっている為、ページごとでデザインの差異はありません。

技術面で学んだこともたくさんあるのですが、
「チームでデザインを作る」ということが一番学べたことです。

これまでは2つのチーム＋デザイナーという扱いだったのですが、
エンジニアとの距離が遠く、コミュニケーションが取りづらかった為、希望してスクラムのチームにいれてもらいました。
（詳細は前回のnoteで書きました。）

これまでは、デザインはデザイナーが考えて作るものという認識でした。
これからは、エンジニアとデザイナーがコミュニケーションをとってチーム全員でデザインを思考し形にしていきます。

エンジニアは、デザインを形にする段階から見ているので、デザイナーがどんな考えで作っているのかがわかります。
デザイナーは、エンジニアがデザインをどんな視点でみているのかわかるようになります。デザインで何が足りないのか、見えてくるようになります。

まだまだチームに入って一ヶ月半なので、これからもっと得るものも増えてくると思い楽しみです。

これからもっとチームでぶつかり合ってサービスの質を向上し、よりユーザー体験をあげていきたいです！