コピペしたコードは商用のサイトで使えますか？

配布元ごとに利用条件が違うため、使う前にそれぞれの規約を確認してください。 DesignLayer の場合も、サイトの利用規約を確認してから使うのが確実です。

Tailwind を使っていないプロジェクトにもコピペできますか？

貼れますが、クラスの置き換えが必要です。 DesignLayer のカタログは Tailwind 前提です。他の書き方に移す場合は、エージェントにクラスの対応を頼むことになります。

コピペした React コンポーネントの動きが再現されないのはなぜですか？

多くはブラウザで動かす印（"use client"）の付け忘れか、動きのライブラリなどの不足です。エラー文をそのままエージェントに貼り、import を読んで足りないものを入れるよう頼んでください。

DesignLayer

お問い合わせ

JA EN

【React】コピペで使えるコンポーネントの探し方と3つの基準を紹介

Q: コピペした React コンポーネントの動きが再現されないのはなぜですか？

多くはブラウザで動かす印（"use client"）の付け忘れか、動きのライブラリなどの不足です。 エラー文をそのままエージェントに貼り、import を読んで足りないものを入れるよう頼んでください。

公開日: 2026年9月12日 · 読了目安 6 分

コピペした React コンポーネントが既存の Next.js で動かない人へ。そのまま載る TSX + Tailwind のセクションを選ぶ3つの基準、貼る前の確認リスト、貼ったあとに直すべき4か所、完成セクションの探し方をまとめました。

コピペした React コンポーネントが自分のプロジェクトで動かない

デモでは見栄えのよかったコンポーネントをコピーして、Next.js のプロジェクトに貼ってみた。ところが、次のような問題が起きる。

見慣れないスタイルの書き方が混ざっている
知らないパッケージを求められる
動きが再現されない

直しているうちに半日が過ぎ、結局は自分で書き直した。そんな経験はないでしょうか。

この記事では、コピペで使える React コンポーネントを探すときに、何を見て選べばよいかを解説します。

貼る前に確認することと、貼ったあとに直すべき場所も具体的にまとめました。

見た目だけでコピペすると移植で半日戻る理由

コピペで失敗する原因の多くは、見た目の美しさだけで選んでいることです。

コピペで使えるかどうかは、今のリポジトリにそのまま載るかで決まります。

時間が戻りやすいのは、たとえば次のようなコードです。

CSS-in-JS（スタイルを JavaScript の中に書く方式）など、プロジェクトで使っていない仕組みに頼っている
独自の実行環境やビルド設定を前提にしている
スクリーンショットだけが並び、動きや依存が分からないまま貼ることになる
必要な npm パッケージがどこにも書かれていない

もう1つの落とし穴は、探しているものの粒度です。ボタンや入力欄のような部品は、shadcn/ui などで十分に揃います。

時間がかかるのは、ヒーローや料金表、FAQ のように余白とモーションまで組み上げたセクションの塊です。

部品のつもりで探すと、組み上げる作業が丸ごと残ります。

コピペで使える React コンポーネントを選ぶ3つの基準

探す対象を「完成したセクション」に切り替えたうえで、次の3つを確認します。

1. ライブプレビューで動きが見える

モーションは静止画では評価できません。ブラウザで実物が動き、ホバーやスクロール入場のタイミングを貼る前に確かめられるものを選びます。

チームで「この動き」と合意してからコピーすると、貼ったあとの作り直しが減ります。

2. TSX + Tailwind で書かれたコンポーネントか

Next.js のプロジェクトに載せるなら、React（TypeScript）と Tailwind CSS で書かれていることが前提です。

クラス名がそのまま使えるため、エージェントに渡しても書き換えが最小で済みます。

3. npm 依存が明示されている

動きのライブラリ（motion。旧 framer-motion）やアイコン（lucide-react）など、必要なパッケージが一覧で分かるものを選びます。

依存が分かれば、貼る前にインストールを済ませるか、エージェントに追加を頼むだけで済みます。

React コンポーネントをコピペする前の確認リスト

候補が決まったら、コードの先頭を見て次の5つを確認します。数十秒で終わる確認ですが、貼ったあとのエラーの大半を防げます。

読み込み行（import）に、入っていないパッケージがないか
先頭に "use client"（ブラウザで動かす印）があるか。動きのある部品には必要
画像や動画の URL が、どこを指しているか
色や余白が、自社のデザイントークンとどれくらい違うか
置き場所（components/sections/ など）と読み込むページが決まっているか

たとえば先頭がこうなっていれば、motion と lucide-react の2つが必要だと分かります。

tsx

"use client";

  import { motion } from "motion/react";
  import { ArrowRight } from "lucide-react";

  // 足りなければ、貼る前にインストールしておく
  // npm install motion lucide-react

コピペできる完成セクションを DesignLayer で探す

DesignLayer のコンポーネント一覧。左のカテゴリで用途ごとに絞り込める

3つの基準を満たすセクションの置き場として、DesignLayer があります。

人が組んだ React + Tailwind のモーション付きセクションを並べたカタログで、ブラウザでライブプレビューしてからコピーできます。閲覧にアカウントもカードも要りません。

コンポーネント一覧で、hero や pricing など用途から絞る
カードを開き、スクロールやホバーで動きを確かめる
Copy for Cursor で統合の指示・ライブプレビューの URL・本体の TSX・npm 依存をまとめてコピーする
Cursor や Claude に貼り、配置先と差し替えを短く指示する

依存がコピーの中に書かれているため、上の確認リストのうち「パッケージ」と「置き場所」は、エージェントがそのまま読み取れます。

貼るときの指示文の型は https://design-layer.com/ja/articles/claude-cursor-copy-paste-components で紹介しています。

コピペしたあとに直すのは4か所だけ

完成セクションを貼ったあとに手を入れるのは、次の4か所です。

文言：見出しや本文、CTA をプロダクトの言葉にする
リンク：CTA やナビのリンク先を自分のページに向ける
画像：デモの URL はいったん残し、公開する画像に差し替える
トークン：色やフォント、余白を既存のデザイントークンに合わせる

動きの緩急（イージング）や開始の遅れ（delay）を、最初から作り直す必要はありません。プレビューで確認した値を起点に、ページ全体のテンポに合わせて少し調整するだけで十分です。

動きを一から組み直すと、コピペで得た時間がそのまま消えてしまいます。

コピペ用の完成セクションが向いている人

Next.js + Tailwind で LP やマーケティングページを作っている
部品は揃っているが、動きのあるセクションを組む時間がない
Cursor や Claude に組み込みを任せたい

反対に、Tailwind を使っていないプロジェクトでは、クラスの置き換えが必要になるため手間が増えます。

部品だけが欲しい場合は、shadcn/ui のような基本部品のほうが合っています。

無料アカウントでは、無料サンプル10個を回数制限なくコピーできます。カタログ全体と MCP は30日ビルドパス（$19の1回払い、自動更新なし）、Lifetime Access（先着100名の$79の1回払い）、Plus（月額 $9、いつでも解約可）です。無料サンプルなら回数の上限なくコピーできます。それ以外は30日ビルドパス（$19の1回払い）、Lifetime（$79の1回払い）、Plus（月額 $9）です。

同じ日に何本も取り込むなら、コピーが無制限の Plus が向いています。