Storybookのコンポーネントの百科事典 Component Encyclopedia

こんにちは森田です。
今回は様々な企業やプロジェクトの Storybook で作られたコンポーネントライブラリを見ることができる Storybook Component Encyclopedia を紹介します。

Component Encyclopedia

Storybook Component Encyclopedia
Component Encyclopedia | Storybook

Component Encyclopedia は Storybook の公式サイトのメニュー「Showcase」から見れる公式のデザインシステムのリンク集です。

Microsoft, Adobe, Shopify, AirBnb など有名企業のコンポーネントライブラリを見ることができます。

Component Encyclopedia の検索

プロジェクト別

Microsoft, Adobe, Shopify, AirBnb など有名企業のコンポーネントライブラリを見ることができます。

現在は約100プロジェクトが登録されていました。

Adobe Spectrum Web Components を見てみます。

Adobe Spectrum Web Components

日本企業では SmartHRさんのデザインシステムを見ることができます!

SmartHR SmartHR UI | Component Encyclopedia | Storybook

用語集

アコーディオン、アラートボタンなど用語、機能などで絞り込んで見ることができます。

https://storybook.js.org/showcase/glossary

ボタン一覧

ボタン一覧を見てみます。
そこからさらにフレームワークやCSSで絞り込むことができます。

https://storybook.js.org/showcase/tag/button

様々なプロジェクトを横断して特定のコンポーネントを見比べることができるので大変便利ですね。とても参考になります。

タグ絞り込み

他にも、タグで React や Vue で絞り込めたり、Sass や Styled components のタグもあるのでフレームワークや技術スタックで絞って見ることもできそうです。

Component Encyclopedia に登録するには?

申請フォームから申請することで追加されるそうです。
おそらく審査などはありそうです。

弊社もデザインシステムを作ったら申請してみたいです。

まとめ

デザインや実装に悩んだら Component Encyclopedia を見にいくと良さそうです。

今後も沢山のプロジェクトが追加されることを期待しています。

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングとMacの開発環境を快適にすることにいつも燃えています。