概要
先日インスタを見ていたところ、「Powerful Websites You Should Know」というテーマで、面白そうなサイトを紹介しているアカウントを見つけました。
そこで、最近インスタのリール動画で流れてきて気になった「使えそうなサイト」をいくつか紹介します。
また、そのサイトを使うことでどのようなことができるか、簡単にAIに実装させてみます。
（もちろんプロンプトは、「イケてるサイトを作って」です。）
サイト紹介
Magic UI
-
どんなサイト？（翻訳）
- React、Typescript、Tailwind CSS、Motionを使って構築された、150以上の無料かつオープンソースのアニメーションコンポーネントとエフェクト集です。shadcn/uiとの相性も抜群です。
-
作ったもの
-
今回はcomponentをNext.jsで簡単に使ってみました。（実装はAI任せです）
-
イケてるサイトを作るにあたって、いいコンポーネントがたくさんありそう。
-
Uiverse.io
-
どんなサイト？（翻訳）
- コミュニティによって構築されたUI要素のライブラリです。HTML/CSS、Tailwind、React、Figmaとしてコピーできます。
-
作ったもの
- こちらも先ほどと同様にNext.jsで使ってみました。（実装はAI任せです）
- Magic UIと比べるとshadcn/uiとの親和性はなさそうなので、少し使いづらい気がしました。
React Bits
-
どんなサイト？（翻訳）
- React Bitsは、React Webアプリケーションを強化することを目的とした、慎重に設計されたUIコンポーネントのオープンソースコレクションです。
-
作ったもの
- こちらもNext.jsで使っ（以下略）
- めちゃくちゃかっこいい。アニメーション神。
Snipzy
-
どんなサイト？（翻訳）
- モダンなウェブ開発のための無料HTML、CSS、JavaScriptコードスニペット集。
-
作ったもの
- 省略
- 汎用的な部品がありそうだが、使わなそう。
UI Devsloka
-
どんなサイト？（翻訳）
- アニメーション、ミニマリストなコンポーネント、ブロック、テンプレートの厳選されたコレクションです。React.js、Next.js、React Router、Remix、Tailwind CSS、Shadcn UI、Framer Motionに最適化されています。
-
作ったもの
- こちらにも「いい感じ（魔法の言葉）」のコンポーネントが揃っていました。
- ただ、いくつか
npx shadcn@latest addコマンドが失敗したので更新はされていないのかもしれません。
Anime.js
-
どんなサイト？（翻訳）
- アニメーターのための完璧なツールボックス。ブラウザの制約から解放され、単一のAPIでウェブ上のあらゆるものをアニメーションさせましょう。
-
作ったもの
- 使いこなせる気はしない()
- これさえ使いこなせればかなりいけてるサイトにできそう（小並感）
その他（随時更新）
まとめ
いくつかインスタのリール動画で紹介されていたものをまとめてみました。個人的に気になったのはMagic UIとReact Bitsです。anime.jsも使いこなせればかなり面白いサイトを作れる気がしました。爆イケサイトを作れるよう精進します。