【Cursor】React モーションコンポーネントをコピペで組み込む4ステップを紹介
公開日: 2026年9月7日 · 読了目安 8 分
動きのある React セクションをライブプレビューで選び、TSX と npm 依存の一覧をまとめて Cursor や Claude に貼る4ステップを解説。カタログを選ぶ3つの基準、そのまま使える指示文、よくある失敗と対策、無料で1日3回コピーできる範囲まで。
Cursor でモーションコンポーネントを頼むと手戻りが増える
Next.js と Tailwind CSS で LP を作っていて、Cursor に「ヒーローにふわっと入るアニメーションを付けて」と頼んだことはないでしょうか。
返ってくるのは、どの要素も同じ速さで下から浮かぶだけの動きです。何度か頼み直しても、見た目はあまり変わりません。
結局、自分で Motion（旧 Framer Motion）を書き始めると、1つのセクションに半日かかります。
イージング（動きの加速と減速のかかり方）や遅延の数値を少しずつ変えては確かめる作業が、思った以上に続くからです。
この記事では、動きのある React コンポーネントを「ブラウザで動きを見てから選ぶ」やり方を紹介します。選んだらコピーして Cursor に貼るだけです。
手順と、そのまま使える指示文の例も載せています。
React のモーションコンポーネントだけ時間がかかる3つの理由
静的なレイアウトなら、shadcn/ui などを使えば短時間で揃います。それなのに動きの部分だけが遅れるのには、はっきりした理由があります。
モーションの動きは言葉で伝えにくい
「上品に」「なめらかに」と書いても、エージェントには具体的な数値に変換できません。結果として、よく見かける平均的な動きが出てきます。
何秒で動くのか、どの順番で動くのか、どれくらいの距離を動くのか。これを言葉で指定するのは、人にとっても手間がかかります。
スクリーンショットや GIF ではタイミングがわからない
コンポーネント集を探しても、静止画や短い GIF だけでは、ホバーの反応やスクロールで入ってくるタイミングを判断できません。
組み込んでから「思っていた動きと違う」と気づき、別のものを探し直すことになりがちです。
見つけた React コンポーネントがそのまま動かない
独自の CSS の書き方や、別のランタイムを前提にしたコードは、既存の Next.js プロジェクトに入れるたびに書き換えが必要です。足りないパッケージを探す時間も積み重なります。
つまり時間を取られているのは、動きを書く作業そのものより「選ぶ」「確かめる」「合わせる」の部分です。ここを短くできれば、全体はかなり速くなります。
モーションコンポーネントのカタログを選ぶ3つの基準
動きは書く前に「実物を見て選ぶ」方が早く決まります。そのための置き場を選ぶときは、次の3点を確認してください。
ライブプレビューで動きを確かめられる：実際の React としてブラウザで動き、ホバーやスクロールでの入場を組み込む前に見られること
TSX と Tailwind CSS のまま貼れる：React（TypeScript）と Tailwind CSS が前提なら、既存の Next.js にほぼそのまま入る
エージェント向けの指示が付いている：置き場所や必要な npm パッケージ、差し替える箇所がまとまっていると、Cursor や Claude が間違えにくい
3つ目は見落とされがちです。コードだけを渡すと、エージェントは置き場所や依存を推測で補います。
最初から指示がまとまっていれば、その推測による誤りを減らせます。
ほかの選択肢との比べ方は、別の記事で詳しくまとめています。https://design-layer.com/ja/articles/21st-dev-alternative-for-cursor
React モーションコンポーネントを Cursor に組み込む4ステップ
ここからは、3つの基準を満たすカタログの例として DesignLayer を使い、実際の流れを説明します。
DesignLayer は、人が組んだモーション付きの React + Tailwind CSS のセクションを集めたカタログです。ブラウザで動かして確かめ、そのままコピーできます。
閲覧にはアカウントもカードも要りません。
ステップ1：用途でモーションコンポーネントを絞り込む
コンポーネント一覧を開き、ヒーローや機能紹介、料金や FAQ のように用途で絞り込みます。
検索やカテゴリから目的のセクションを探してください。https://design-layer.com/ja/components
ステップ2：ライブプレビューで動きを確かめる
カードを開くと、ホバーや入場、ループする背景までが実物として動きます。
チームで作っている場合は、ここで「この動きでいこう」と決めてから次へ進みましょう。あとで揉めずに済みます。
ステップ3：Copy for Cursor でまとめてコピーする
Copy for Cursor を押すと、次の4つがまとめてコピーされます。
エージェントが読みやすい統合指示
ライブプレビューの URL
本体の TSX
必要な npm 依存の一覧
無料プランでは、このコピーを日本時間で1日3回まで使えます。
ステップ4：Cursor や Claude に貼って配置を指示する
Cursor の Agent か Claude のチャットに貼り付け、配置先とブランドの差し替えを指示します。指示文は次の形にすると結果が安定します。
この React セクションを既存の Next.js アプリに追加して。
- Tailwind のクラスはそのまま使う
- 足りない npm パッケージは package.json に追加する
- 見出し・CTA・リンクを自社のプロダクト名に差し替える
- ファイルは components/sections/ に置き、app/(marketing)/page.tsx から読み込む
- 色と余白は既存のデザイントークンに合わせるCursor への指示文で効く2つのポイント
1つ目は、ファイルを置く場所を書くことです。たとえば「ページは app/(marketing)/page.tsx に置く」と指定します。
部品の置き場所も「components/sections/ に置く」のように書いておくと、エージェントが迷いません。
レビューで差分を読むときも楽になります。
2つ目は「既存のデザイントークンに合わせて」の一文です。リポジトリに色や余白の定義があれば、この一文だけでカタログの見た目が自社ブランドに寄りやすくなります。
ファイルを書くのはエージェントに任せ、あなたは動きと文言の確認に集中できます。
MCP を使うとブラウザを開かずに済む
Cursor を毎日使っているなら、DesignLayer の MCP サーバーに接続する方法もあります。
エージェントが search_catalog でカタログを検索し、get_component でコンポーネントを取得します。ファイルの作成まで進めてくれます。
接続できるのは Plus プランで、ブラウザで「接続を許可」を押すだけです。API キーの発行は要りません。
詳しい手順は別の記事にまとめています。https://design-layer.com/ja/articles/cursor-mcp-component-catalog-guide
モーションコンポーネントの組み込みでよくある失敗3つ
貼るだけで動くように作られていても、つまずきやすい点はあります。先に知っておけば、ほとんどは数分で直せます。
依存パッケージが足りずビルドが止まる
motion（旧 Framer Motion）や lucide-react が入っていないと、ビルドの時点でエラーになります。
コピーに含まれる import をエージェントに読ませ、package.json の更新を頼んでください。エラーの文面をそのまま貼るのが、いちばん早い直し方です。
コピーしたセクションの色や余白がページの中で浮く
カタログの色のまま公開すると、そのセクションだけ別のサイトのように見えます。指示文に「既存のトークンに合わせて」を入れるか、貼ったあとに色とフォントだけを差し替えさせましょう。
どのセクションにも強いモーションを付けてしまう
すべてのセクションが大きく動くと、ページ全体のテンポが崩れて読みにくくなります。強い動きはヒーローと CTA の周りに絞りましょう。
delay や duration は、プレビューで確かめた値を起点に調整するのが安全です。
モーションコンポーネントをコピペで使うのが向いている人
「見て選んでコピーする」やり方は、どの場面にも合うわけではありません。次の目安で判断してください。
向いている：Next.js と Tailwind CSS で LP やサイトを作っていて、動きの部分に時間をかけたくない人
向いている：Cursor や Claude にコードを書かせていて、出てくる動きが毎回似てしまう人
向いている：shadcn/ui で組んだページに、動きのあるセクションを足したい人
反対に、アニメーションそのものが製品の中心という場合もあります。イージングを1から自分で設計したいなら、Motion を直接書く方が細かく制御できます。
書き方は「Next.js で Framer Motion を使う方法」の記事で解説しています。https://design-layer.com/ja/articles/nextjs-framer-motion-guide
費用の面では、無料プランでもライブプレビューは無制限です。ソースのコピーは日本時間で1日3回までです。
「今日はヒーローを1つ」と決めて使えば、カード登録なしで試せます。コピーを無制限にしたい場合や MCP で接続したい場合は、Plus プランがあります。
React モーションコンポーネントについてよくある質問
使えます。中身は React（TypeScript）と Tailwind CSS のコードなので、Claude のチャットに貼っても、自分でファイルに置いても動きます。
Copy for Cursor という名前ですが、Cursor 専用の形式ではありません。
まとめ：React モーションコンポーネントを Cursor で使う手順
モーションに時間がかかるのは、書く作業より「選ぶ・確かめる・合わせる」部分
カタログは「ライブプレビュー」「TSX と Tailwind CSS」「エージェント向けの指示」の3点で選ぶ
指示文には配置先のパスと「既存トークンに合わせて」を入れる
強い動きはヒーローと CTA に絞る
まずはカタログを開き、気になるセクションを1つ動かしてみてください。
無料枠で1つを Cursor に貼れば、動きの質と組み込みやすさを自分のリポジトリで確かめられます。https://design-layer.com/ja/components
LP 全体の作り方は、Cursor と Next.js でランディングページを1日で作る記事にまとめています。https://design-layer.com/ja/articles/cursor-nextjs-landing-page-guide
