❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

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

テクニック

前書き

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

デザインシステムとは?

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

※参考になるブログ記事

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

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

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

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

Storybook とは?

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

Storybook公式サイト

適しているもの

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

適していないもの

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

環境インストール

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

大きな流れ

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

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

  2. Storybookを導入

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

  3. コンポーネントを作る

  4. 実行

興味がある方は試してみてください〜