【React】モーション UI カタログの選び方と比較する6項目を紹介

Next.js の LP にヒーローのアニメーションを入れたくて「React モーション UI」と検索する。レジストリや有料の UI キット、個人のギャラリーと、候補は大量に出てきます。

どれも見た目は魅力的で、どこから試せばよいか決められない。

とりあえず1つ選んで入れてみると、今度は別の問題が出ます。

• npm の依存が足りずにビルドが落ちる

• 独自の CSS が既存の Tailwind CSS とぶつかる

• 商用で使ってよいのか分からない

気づけば、自分で書いた方が早かったのでは、という時間を使っています。

この記事では、React モーション UI カタログを選ぶときに比較する6項目を整理します。それぞれ何をどう確かめればよいかまで説明します。

カタログを選ぶとき、多くの人はまずデモの見た目を比べます。自然な順番ですが、モーション UI ではここに落とし穴があります。

1つ目は、スクリーンショットや GIF では動きの質が分からないことです。イージングの柔らかさや遅延の間隔、スクロールへの反応は、実際に動かさないと判断できません。

2つ目は、見た目が良くても、今のスタックに載らなければ使えないことです。

Next.js の App Router と TypeScript、Tailwind CSS のどれか1つと合わないだけで、移植に半日かかります。

比べるべきなのは、見た目の好みより「入れてからの手戻りがどれだけ少ないか」です。そのための項目を、次の章から順に見ていきます。

まず、モーション UI の置き場は大きく4種類に分かれます。どれが優れているかではなく、目的によって向き不向きがあります。

• レジストリ：多くの作者のコンポーネントを集めた場所。数が多く、検索して探す。品質や依存は作者ごとにばらつく

• UI キット：ボタンからモーダルまで、デザインシステム一式をまとめたもの。統一感は高いが、LP の1セクションだけ欲しいときには大きい

• 社内の Storybook：自社の部品を並べたもの。ブランドには合うが、新しい動きはまず自分たちで作る必要がある

• ライブカタログ：完成したセクションを、ブラウザで実際に動かして見せる場所。LP にそのまま足す用途に向く

shadcn/ui のように、コードを自分のリポジトリにコピーして使う形は、どの種類でも広がっています。

コピーした後は自分のコードになります。そのため、次の6項目がそのまま「入れた後の手間」に直結します。

比較する6項目は次のとおりです。候補が複数あるときは、この順で1つずつ確かめます。

• プレビュー

• 出力形式

• 依存

• ライセンス

• エージェント向けの包み

• 無料で試せる範囲

6項目の重みは、何を作るかで変わります。

• 今週中にヒーローや料金表を1つ足したい：1（プレビュー）、2（出力形式）、3（依存）を重く見る。完成セクションのライブカタログが向く

• デザインシステムを一から整えたい：統一感と部品の数を重く見る。UI キットが向く

• 新しい動きの部品を幅広く探したい：数と検索のしやすさを重く見る。レジストリが向く

• チームで導入する：4（ライセンス）、5（エージェント向けの包み）、6（無料範囲）を先に確認する

LP の1セクションを足す場面なら、一番効くのは1と2です。

動きを実物で見てから選べて、そのまま Tailwind CSS のプロジェクトに入る。これが手戻りを一番減らします。

DesignLayer は、上の分類ではライブカタログにあたります。人が組んだモーション付きの React セクションを、ブラウザで実際に動かして確かめてからコピーできます。

6項目に当てはめると、次のとおりです。

• プレビュー：ホバーや入場、ループ背景まで、実際の React としてブラウザで動く

• 出力形式：React（TypeScript）と Tailwind CSS が前提のセクション

• 依存：Copy for Cursor のコピーに、必要な npm 依存の一覧が含まれる

• エージェント向けの包み：統合指示・ライブプレビューの URL・本体の TSX・npm 依存が1回のコピーにまとまる

• MCP：30日ビルドパス（$19の1回払い）、Lifetime（$79の1回払い）、Plus（月額 $9）では、AI エージェントからカタログに直接つなげる。Free では接続できない（詳しくは下の段落）

• 無料範囲：閲覧はアカウントもカードも不要。ソースのコピーは無料サンプル10個（無料アカウントで回数制限なし）。動画プロンプトは月1回。カタログ全体は30日ビルドパス、Lifetime、Plus。30日ビルドパス、Lifetime、30日ビルドパス、Lifetime、Plus ではコピーが無制限になる

MCP は、AI エージェントと外部のサービスをつなぐ仕組みです。Cursor や Claude Code から、カタログを検索してコピーの中身を取り出せます。

使う道具は2つです。search_catalog でカタログを検索し、get_component でコピーの中身を取得します。

接続はブラウザで許可するだけで、API キーは要りません。

ライセンスの細かな条件は、使う前にサイトの規約で確認してください。カタログは https://design-layer.com/ja/components から開けます。

向いているのは、Next.js と Tailwind CSS で LP やプロダクトページを作っている人です。とくに、ヒーローやギャラリーなど「動きが要る1セクション」を早く足したい場合に合います。

Cursor や Claude にコードを貼って組み込む流れとも相性が良い形です。

向いていないのは、ボタンや入力欄まで含めたデザインシステム一式を探している場合です。また、文章から LP 全体を AI に一括生成させるツールでもありません。

人が組んだ完成セクションを、見て選んで、自分のリポジトリに載せるためのカタログです。

レジストリと比べたい場合は、https://design-layer.com/ja/articles/21st-dev-alternative-for-cursor で使い分けを整理しています。

• React モーション UI カタログは、見た目より「入れた後の手戻り」で比べる

• 比較する6項目：プレビュー / 出力形式 / 依存 / ライセンス / エージェント向けの包み / 無料範囲

• LP に1セクション足すなら、実物のプレビューと TSX + Tailwind CSS の出力を重く見る

• 最終的な判断は、1セクションを実際にリポジトリへ入れてから行う

まずは候補のカタログで1セクションを選び、自分の Next.js に入れてみてください。DesignLayer なら閲覧は無料で、今月の無料枠でヒーロー1本を試せます。

Cursor に貼るときの流れは https://design-layer.com/ja/articles/cursor-react-motion-components-guide 、MCP の接続手順は https://design-layer.com/ja/articles/cursor-mcp-component-catalog-guide にまとめています。