LoginSignup
1
2

More than 3 years have passed since last update.

コンポーネント単位の設計をしたらデザインガイドラインをつくろう

Last updated at Posted at 2020-02-07

こんにちは、しがないwebデザイナーです。
去年の11月に、Spotlightという仮想通貨を使ったCtoCメディアサービスをリリースしました。(担当箇所はデザインと画面コーディングです。)

そして、2019年5月31日に可決された改正資金決済法に含まれる「暗号資産カストディ業務に対する規制」に伴って1月31日のサービス内容変更と同時にデザインの改修も行いました。

そのときに、デザインガイドラインなるものを作成したので、つくりかたと重要性とか作ってからどう変わったかとかお話しします。

デザインガイドラインとは

カタカナで書くとあまりにダサい。
ロゴとか、ホームページとかいろいろあると思いますが、今回はCSSフレームワークのDocみたいなもの、と捉えてください。

どんなものを作成したか

Notionで簡易的なDocをつくりました。

Screen Shot 2020-02-06 at 13.21.29.png

デザイナーがいなくても、画面デザインを実装できるような仕組みを作れるのは、コンポーネント化したときの強みだと思います。

これをつくることで、細かい修正の無駄なコミュニケーションがなくなります。

つくりかた

  1. Notionでてきとーにカード型の並びのドキュメントを作成します。
    Screen Shot 2020-02-06 at 13.56.00.png

  2. 新規ドキュメントを作成して、見出し、利用方法、画像、コードを記載します。
    Screen Shot 2020-02-06 at 13.21.29.png

  3. URLを発行して共有します。

作成してから変わったこと

  • よりコンポーネント化を意識したデザインと実装をするようになった
  • ドキュメントを作成、掲載することを意識するのでコードがもっと整うようになった
  • class名をコンポーネント単位でつけることを意識できるようになった

正直、現状エンジニア2人、デザイナー1人でやってるのでそこまで成果がでている印象はないですが(画面コーディングもわたしが担当してるので)、チーム規模が大きくなればなるほどこういうものが必要になる印象です。

無駄なコミュニケーションを無くしてサービスをよりよくできるように取り組めたらと思います。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2