1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

フロントエンド開発で役に立つTipsAdvent Calendar 2023

Day 24

コンポーネントを開発する際に便利なサイト「Adele」

Last updated at Posted at 2023-12-23

コンポーネントを開発する際にさまざまなデザインシステムを比較したいニーズはあると思います。
こんなのあるよ!って紹介してもらったので皆さんにも紹介したいと思います!

デザインシステムを一覧で見たいを叶えるサイト「Adele」

コンポーネントを設計する際に世の中のデザインシステムを参考にすることは多いと思います。
「デザインシステム」で調べてサイトを確認していましたが、Storybookを見たいけどリンクはどこにあるのか?そもそもあるのかもわからいという状態によくなりました…。

公式サイト内を探してStoryboookが存在していなかった時もあり、時折悲しい思いをしました…

「Adele」はデザインシステムの一覧情報が掲載されている!

デザインシステムごとに技術やStorybookの有無をまとめてくれておりテーブルをスクロールすることで情報を確認できます!

画面収録 2023-12-22 21.37.05.gif

デザインシステムのコンポーネントを探す手間がかなり短縮されました!

利用されているフレームワークもわかる!

嬉しかったのは利用されているフレームワークが掲載されていることです。

Vue.jsもReactおおよそ同じようなコードになりますが、できれば同じ言語で開発されているコンポーネントを確認したいですよね。

中身を見てから気がつくより、確認する前に気がつけるので良いと思っています!

まとめ

コンポーネント開発する場合はなるべくたくさんの実装例に触れたいですよね。
同じようなサイトもありますが、デザインシステムの表示数が多いので良いかと思っています!

コンポーネント作成だけでなく、サイトパーツのアイディアや命名について調べたい時も役に立つと思います!

他にも良いサイトがあればコメントで教えていただけると嬉しいです!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?