Storybookでデザインシステムを始めましょう！

前書き

全Qの個人OKRで、UIUX関連の本「Atomic Design」を読みました。本ではコンポーネントベースでのUI開発を提唱していて、実践の際にツールとしてstorybookを使います。そこでstorybookを知り、使ってみたり、調べてみたりして、すごい良いツールだと感じました。調べてみたらデザインシステムのこともたくさん出てましたので、一緒にブログにまとめました。コンポーネントベースでのUI開発のメリットなど、本の詳しい内容は次回に共有したいと思います〜

デザインシステムとは？

デザインシステムとは、デザインの概念、原則などをまとめたドキュメント、それらを具体的なデザインに落とし込むためのスタイルガイド、UIコンポーネントライブラリ、そしてそれらの管理・運用ルールや、コード化されたUIコンポーネントの管理ツールなど、さまざまな構成要素で成り立つ「仕組み」です。

※参考になるブログ記事

デザインシステム例トップ８

なぜ管理ツールが必要なのか？

もちろん、適しているものに対しての話ですが、システム開発に置いて必須要素ではないですがものすごい生産性を高めることができると思います。

まず、コンポーネントベースのUI開発の最大目的は複雑なUIを確実に組み上げることです。でも、いくら再利用可能なコンポーネントが作成しても文書化管理されていないと意味がないと思います。なので、デザインと開発の生産性をアップするための文書化管理ができるツールが必要になってきます。メリットとしては、UIコンポーネントのカタログとして視覚的に確認できることで、認識の齟齬を無くしたり、再利用可能になるなどがあります。

Storybook とは？

UIコンポーネントの管理・テストをすることが出来るオープンソースツールです。React、Vue、Angular、などのJavaScriptフレームワークをサポートしています。

※Storybook公式サイト

適しているもの

継続的にリリースしていくアプリ
同じプランドの複数のwebサイト

適していないもの

デザインの統一性が重要ではないもの
一度作れば終わりで継続的にUIを管理する必要がないもの

環境インストール

※公式サイトのチュートリアル

大きな流れ

Create React App プロジェクトを生成する

フレームワークに既にセットされているプロジェクトで、インストールする必要があるため、先にReactプロジェクトを生成します。
Storybookを導入

二つの方法があるらしいです。基本機能が揃っているのをインストールするか、必要な機能を一個ずつインストールする方法です。
コンポーネントを作る
実行