smartroundのUI一貫性に向けた取組み（デザインシステム・storybookの運用）について
はじめまして、smartroundのエンジニアの小山（@doyaaaaaken）です。このブログでは僕たちの会社のことについて皆さんに知ってもらえるよう、社内の様子や運営体制について書いています。
今回はデザインシステム・storybookについてです。
弊社は創業当初から今に至るまで、デザイナーの飯塚（@mrkiizk）が一貫してデザインに関わっており、スタートアップという普通の10倍のスピードで仕事が進む現場の中、プロダクトデザインのクオリティ向上のための取り組みの一つをご紹介したいと思います。
※ エンジニア目線での内容になりますので、本職のデザイナーの方には至らぬ点あるかもしれないことご了承ください 😃
単語の定義について
単語の意味を知らない方も多いかと思いますのでまず説明しますと、
「デザインシステム」とはプロダクトのUIの原則・概念・ガイド・コンポーネントなどをまとめたものになります。
導入のメリット
これを導入すると次のようなメリットがあります。
・複数人が携わっても、UIの一貫性を維持しながらプロダクト改善できる
・画面検討や実装時のコストが飛躍的に下がる
→結果、高速でプロダクトの改善を進めることができる
有名企業においては自社のデザインシステム自体を公開してしまうことで、自社のブランディングにつなげる流れもあります。
例：Uberが作ったデザインシステム
例：Salesforceが作ったデザインシステム
※ 例：smartroundのボタンコンポーネントのデザイン（Figmaにて定義）
次に「Storybook」についてですが、これはUIコンポーネントを開発・メンテナンスするためのツールを指します。
UIコンポーネントというのは、前述のデザインシステムを元にして作られたUIのパーツのことです。例えばボタン・Form・文字列などをイメージするとわかりやすいかもしれません。
このUIコンポーネントのビジュアルおよび実装方法（どのようなプログラムで実装できるか）をまとめておくレシピがStorybookだと考えるとわかりやすいと思います。
このレシピでまとめたUIコンポーネントをそのまま使うことで、UIの一貫性を保ちながら高速な開発が可能になり、デザインシステムのメリットをプロダクトに取り込み易くなります。
※ smartroundのstorybookで定義されているボタンコンポーネント
smartround社内での運用について
さて、単語の定義としては以上なのですが、smartround社内でこれらがどのように扱われているかについてご紹介したいと思います。
デザインルールはドキュメント管理サービスのEsaにて文章としてまとめています。
※ ルールは随時アップデートされます
このルールについても、デザイナーとエンジニアで話し合い決めています。
ベースとなるルールはデザイナーが作り、エンジニアがそれを実装していく中で気づいた改善できそうな点をフィードバックし、ルールが修正されていくといった流れになっています。
議論はカジュアルにSlack上で完結に行われ、その場で決まったことが即時にルールに反映されるスピード感で進めています。
またデザインプロトタイプツールのFigma上でデザインシンボルと利用可能なUIコンポーネントをまとめています。（前のほうでボタンコンポーネントのFigma画像貼ってますが、あれはこれの一部です）
弊社ではエンジニアもFigmaを触りUIプロトタイプを作るため、その際にはここにあるパーツを使って画面を組み上げていくことになります。
（その様子についてはnoteのこちらの記事内で紹介しています）
またstorybookは簡単なコンポーネントだけは整理している状況です。
まだ大した内容はないですが、ご参考として公開しておきます。
デザインシステム・storybookいずれにも共通することとしては、
ベースとなる基礎的な部分だけできており、本格的に作っていくのはこれからだという点です。
まだまだサービスの画面がドラスティックに揺れ動くフェーズが続くので、しばらくはこれらのデザインシステムやstorybookのアップデートを続けていく流れになりそうです。
-------------- スマートラウンドについて -------------------
スマートラウンドではスタートアップ・投資家・士業の方向けにSaaSを提供してます。
特に「スタートアップ・ファースト」というバリューを掲げており、スタートアップが本業に集中できるよう主に資金調達前後の業務を効率化するようなサービス群を提供しております。
（経営管理・資本政策管理・資金調達マニュアル・他多数）
smartroundでは規模拡大に伴い、全方位的にポジションを募集しております。
（※ 求人更新追いついていない可能性あるので、こちらに無いポジションでももしご興味ある方いればお気軽にご連絡ください）
またnoteの記事にて社内の様子を公開しておりますので、是非ご興味あるかた他の記事もご覧ください。フォローもお待ちしております！
この記事が気に入ったらサポートをしてみませんか？