Storybookのコンポーネントの百科事典 Component Encyclopedia
こんにちは森田です。
今回は様々な企業やプロジェクトの Storybook で作られたコンポーネントライブラリを見ることができる Storybook Component Encyclopedia を紹介します。
Component Encyclopedia
![Storybook Component Encyclopedia](https://wp.gaji.jp/wp-content/uploads/2022/08/og-home-740x389.png)
Component Encyclopedia は Storybook の公式サイトのメニュー「Showcase」から見れる公式のデザインシステムのリンク集です。
Microsoft, Adobe, Shopify, AirBnb など有名企業のコンポーネントライブラリを見ることができます。
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-08-at-19.11.24-550x493.jpg)
Component Encyclopedia の検索
プロジェクト別
Microsoft, Adobe, Shopify, AirBnb など有名企業のコンポーネントライブラリを見ることができます。
現在は約100プロジェクトが登録されていました。
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-08-at-19.22.51-586x493.png)
Adobe Spectrum Web Components を見てみます。
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-08-at-19.26.56-585x493.jpg)
日本企業では SmartHRさんのデザインシステムを見ることができます!
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-08-at-19.27.58-626x493.jpg)
用語集
アコーディオン、アラートボタンなど用語、機能などで絞り込んで見ることができます。
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-09-at-01.44.12-492x493.jpg)
ボタン一覧
ボタン一覧を見てみます。
そこからさらにフレームワークやCSSで絞り込むことができます。
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-08-at-23.29.13-1-501x493.jpg)
様々なプロジェクトを横断して特定のコンポーネントを見比べることができるので大変便利ですね。とても参考になります。
タグ絞り込み
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-09-at-01.39.31-740x126.png)
他にも、タグで React や Vue で絞り込めたり、Sass や Styled components のタグもあるのでフレームワークや技術スタックで絞って見ることもできそうです。
Component Encyclopedia に登録するには?
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-09-at-01.01.06-740x405.png)
申請フォームから申請することで追加されるそうです。
おそらく審査などはありそうです。
弊社もデザインシステムを作ったら申請してみたいです。
まとめ
デザインや実装に悩んだら Component Encyclopedia を見にいくと良さそうです。
今後も沢山のプロジェクトが追加されることを期待しています。
Gaji-Laboでは、UIデザイナーを募集しています
弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!
求人応募してみる!