はじめに
UIコンポーネントを実装する際に、ゼロから組むのではなく既存のパターンをベースにすることも多いと思います。
この記事では、見た目だけでなく HTML / CSS込みでそのまま使えるUIサイトをまとめます。
コンポーネントをそのまま使う
UIverse
ボタンやトグル、カードなどがまとまっていて、CSSごとコピーできます。
見た目のバリエーションも多く、「とりあえずそれっぽくしたい」ときにちょうどいいです。
HyperUI
Tailwindベースのコンポーネント集です。
装飾が強すぎず、実務でも使いやすいシンプルなUIが多いです。
Flowbite
コンポーネントに加えて、モーダルやドロップダウンなどの挙動も含まれています。
ある程度まとまったUIを一気に作りたいときに向いています。
実際に動くUIを見る
CodePen
HTML / CSS / JavaScript込みで動くUIが公開されています。
そのままコードを確認できるので、「どうやって作っているか」を理解しやすいです。
アニメーション系
Animista
CSSアニメーションを生成できます。
コードもそのまま使えるので、ちょっとした動きを追加したいときに便利です。
どう使うか
用途ごとに分けるとこんな感じです。
- UIパーツをそのまま使う → UIverse
- 画面単位でまとめて作る → Flowbite
- シンプルに組み立てる → HyperUI
- 動くサンプルを確認する → CodePen
- アニメーションを追加する → Animista
おわりに
UIコンポーネントは、既存の実装をベースにした方が効率よく組み立てられます。
今回紹介したようなサイトを使うと、見た目だけでなく実装も含めて確認できるので、手元で再現しやすくなります。
用途に応じて使い分けながら、必要なパーツを取り込んでいくのが扱いやすいと思います。