shadcn/ui の隣に置くモーションLPの作り方

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

shadcn/ui で揃えた Next.js に、署名のあるモーションセクションを足す方法。プリミティブと完成セクションの境界、トークン合わせ、Cursor 指示例。

先に結論：shadcn は土台、モーションは別レイヤ

shadcn/ui は、ボタン、入力、ダイアログといったプリミティブをリポジトリにコピーする方式です。LP のヒーローやスクロールギャラリーは、その範囲外です。

土台を shadcn、署名のある塊をカタログ、という分けにすると、エージェントの出力が SaaS 顔で止まりにくくなります。

1つ目は、色トークンを合わせないことです。貼り付け指示に「既存のデザイントークンに合わせて」を足します。

2つ目は、半径と影の言語が違うことです。カタログ側の radius を、shadcn の --radius に寄せます。

3つ目は、動きを全セクションに複製することです。shadcn の静かなフォームの隣に、強いループを置かない。

足してよい：ヒーロー、ロゴマーキー、事例、最終 CTA。

shadcn のままがよい：フォーム部品、ドロップダウン、トースト。問い合わせセクションの「見た目」はカタログ、入力部品は shadcn、という分けもできます。

「この React セクションを既存の Next.js に追加する。Tailwind はそのまま。足りない npm を入れる。色と半径は shadcn の CSS 変数に合わせる。配置は components/sections/。」

DesignLayer はライブプレビューと Copy for Cursor が対です。無料は1日3回、閲覧はカード不要です。https://design-layer.com/components