shadcn/ui だけでアニメーションは付けられますか？

部品の開閉などの基本的な動きはあります。ただ、LP のセクションを演出する動きは自分で足すことになります。上の例のように、Motion を組み合わせるのが一般的です。

shadcn/ui の導入手順は新規と既存のプロジェクトで違いますか？

起点が違います。新規は公式の shadcn/create か init -t next（ひな形付きの初期設定）から始めます。既存はプロジェクト内で初期設定（init）をしてから部品を足す（add）のが基本です。どちらも、詳細は公式の Next.js ガイドを正としてください。

DesignLayer は shadcn/ui の代わりになりますか？

なりません。土台の UI は shadcn/ui を使い、動きのあるセクションは DesignLayer からプレビューしてコピーする併用を想定しています。

【shadcn/ui】LP に動きを足す方法を導入手順から解説

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

shadcn/ui で組んだ LP が整っているのに印象に残らない人へ。shadcn/ui が選ばれる理由、Next.js への導入手順（init から add button まで）、Framer Motion で動きを足す例、動きのあるセクションを完成品で足す方法をまとめました。

shadcn/ui の LP が整っているのに印象に残らない

Next.js と shadcn/ui で LP を組んでみると、ボタンもカードもきれいに揃います。それなのに、公開前に見返すと「どこかで見たページ」に見える。

ヒーローに少し動きを付けようとして、Motion（旧 Framer Motion）のドキュメントを読み始めた。そのまま午後が終わった、という人もいるかもしれません。

この記事では、shadcn/ui を土台にしたまま LP に動きを足す方法を解説します。

shadcn/ui をまだ入れていない人のために、Next.js への導入手順も初期設定から順に載せています。

shadcn/ui が選ばれる理由と動きが後回しになる理由

shadcn/ui が支持される理由は、主に次の4つです。いずれも「部品を自分のコードとして持てる」ことにつながっています。

コンポーネントのコードが自分のリポジトリに入るため、見た目や振る舞いを直接書き換えられる
初期のスタイルが整っており、ゼロから見た目を作らなくてよい
CLI（コマンドで操作する道具）で、使う部品だけを1つずつ足せる
部品が読めるソースとして並ぶので、Cursor などのエージェントに文脈として渡しやすい

一方で、shadcn/ui が提供するのはボタンやダイアログといったプリミティブ（UI の最小単位の部品）です。

ヒーローや料金表のように、余白と動きまで含めたセクションは用意されていません。そこは自分で組み立てることになります。

動きを手で書き起こすと、次の点を1つずつ調整することになります。

入場のタイミング
スクロールとの連動
ホバーの質感

1セクションに半日かかることも珍しくありません。締め切りが近いと、真っ先に削られるのがこの部分です。

結果として、整っているが印象に残らない LP ができあがります。

shadcn/ui を土台に動きはセクション単位で足す

解決の考え方はシンプルです。フォームやボタンなどの土台は shadcn/ui に任せ、動きはセクション単位で別に足します。

shadcn/ui を置き換えるのではなく、その隣に動きのある塊を置くイメージです。

小さな動きなら、自分で書いても時間はかかりません。たとえば、ヒーローの見出しとボタンを順に浮かび上がらせるだけなら、Motion で次のように書けます。

shadcn/ui の Button はそのまま使えます。

tsx

"use client";

  import { motion } from "motion/react";
  import { Button } from "@/components/ui/button";

  export function HeroSection() {
    return (
      <section className="mx-auto max-w-3xl px-6 py-24 text-center">
        <motion.h1
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          className="text-4xl font-semibold tracking-tight sm:text-5xl"
        >
          チームの作業を、1つの画面に
        </motion.h1>
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.15, ease: "easeOut" }}
          className="mt-8 flex justify-center gap-3"
        >
          <Button size="lg">無料で始める</Button>
          <Button size="lg" variant="outline">
            資料を見る
          </Button>
        </motion.div>
      </section>
    );
  }

動くセクションだけをブラウザで動かす

動きを付けるファイルの先頭には、"use client"（この部品はブラウザで動かす、という印）が必要です。上の例では motion を使う HeroSection がそれにあたります。

ただし、ページ本体の app/page.tsx は、サーバーで組み立てる部品のままにします。そこでは動くセクションを読み込むだけにします。

ブラウザで動く部品を動くセクションだけに絞ると、ページ全体の JavaScript が増えすぎません。

動きのライブラリがまだ入っていない場合は、先に追加してください。コマンドは npm install motion です（旧名 framer-motion）。

pnpm を使っているなら、pnpm add motion で追加できます。

Framer Motion を手で書くのはここまでにする

見出しのフェードインくらいなら、上のコードで十分です。

一方、スクロールに連動する背景やカードが順に組み上がる料金表のような演出は、調整の量が一気に増えます。そうしたセクションは、動きが完成しているものを選んで持ち込むほうが早く終わります。

Next.js に shadcn/ui を導入する手順

まだ shadcn/ui を入れていない場合は、ここから始めます。既存の Next.js プロジェクトに入れる手順を主にし、コマンド例は pnpm で示します。

npm / yarn / bun の書き方は公式に併記されています。手順の最新版は、常に https://ui.shadcn.com/docs/installation/next を正としてください。

shadcn/ui を入れる前の前提を確認する

前提は次の3つです。create-next-app の推奨設定で作ったプロジェクトなら、おおむね揃っています。

Node.js が使える
Next.js（App Router 想定）である
Tailwind CSS と @/* のエイリアス（読み込み先を短く書くための設定）が設定済み

src フォルダを使っている場合は、エイリアスが ./src/* を指している必要があります。

古い Next.js で Tailwind やパスの設定がまだなら、公式の「Existing Project」（既存プロジェクト向け）の節を先に確認してください。

新規に作る場合は、公式の shadcn/create か pnpm dlx shadcn@latest init -t next から始めても構いません。https://ui.shadcn.com/docs/installation/next

① shadcn/ui の初期設定コマンドを実行する

プロジェクトのルートで次を実行し、表示される質問に答えてスタイルや基本設定を選びます。

bash

pnpm dlx shadcn@latest init

② add コマンドでボタンを1つ足す

初期設定が終わったら、動作確認としてボタンの部品を追加します。

bash

pnpm dlx shadcn@latest add button

③ ページでボタンの表示を確かめる

トップページのファイル（app/page.tsx）で Button を読み込み、ブラウザで表示を確認します。

src フォルダを使っている場合も、書き方は同じです。ファイルの場所が src/app/page.tsx になるだけです。

tsx

import { Button } from "@/components/ui/button";

  export default function Home() {
    return (
      <div className="flex min-h-svh items-center justify-center">
        <Button>Click me</Button>
      </div>
    );
  }

④ リポジトリに何が増えたかを確認する

典型的には、次のような変化があります（プロジェクトの設定によってパスは前後します）。

部品のフォルダ（@/components/ui/）に、追加したボタンのソースファイルが増える
共通の小さな関数（lib/utils）や、色などを決める CSS 変数の設定が整う
必要に応じて、部品の土台になる Radix 系や、見た目の種類を切り替えるライブラリが入る

大事なのは、パッケージを読み込むだけでなく、自分のリポジトリにコンポーネントのコードが増えることです。

Cursor に導入を任せた場合も、最後に部品のフォルダを開いて差分を見ましょう。その習慣があれば、何が起きたかを追えます。

shadcn/ui の導入でつまずきやすい点

@/* のエイリアスが効かない：設定ファイル tsconfig.json のパスの設定を確認する
src フォルダの有無で、エイリアスの指す先がずれている
既存の Tailwind のバージョンや設定が違う：公式の既存プロジェクト向けの手順を優先する
1つのリポジトリに複数のアプリがある構成（モノレポ）では、新規なら init に --monorepo を付ける。既存のアプリに入れるときは、そのアプリのフォルダで実行するか -c apps/web のように入れ先を指定する

詰まったときは、ブログ記事のコマンドをそのまま写すより、公式の Next.js ガイドに戻るのが確実です。

shadcn/ui の LP に動くセクションを DesignLayer で足す

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

shadcn/ui の土台ができたら、動きのあるセクションを足します。

DesignLayer は、人が組んだ React + Tailwind のモーション付きセクションを、ブラウザでライブプレビューしてコピーできるカタログです。shadcn/ui の代わりではなく、その隣に置くことを前提にしています。

コンポーネント一覧で、ヒーローや料金など用途から絞る
カードを開き、ホバーや入場の動きをライブプレビューで確かめる
Copy for Cursor で統合の指示・ライブプレビューの URL・本体の TSX・npm 依存をまとめてコピーする
Cursor の Agent や Claude のチャットに貼り、配置先と文言の差し替えを頼む

貼るときは「既存の shadcn/ui のトークン（色・余白）に合わせて」と一文添えます。そうすると、土台の見た目から浮きにくくなります。

手順の詳細は https://design-layer.com/ja/docs/copy-for-cursor 、ライブプレビューについては https://design-layer.com/ja/docs/live-preview にあります。

shadcn/ui と動くセクションの併用が向いている人

shadcn/ui で土台は揃ったが、LP の印象が弱いと感じている
動きは欲しいが、Motion の調整に半日使う余裕がない
Cursor や Claude に組み込みを任せ、自分は動きと文言の確認に集中したい

反対に、管理画面のように動きがほとんど要らないページなら、shadcn/ui だけで十分です。

動きが必要になったタイミングでカタログを見れば間に合います。

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

shadcn/ui とほかの Tailwind ライブラリで迷っているなら、2026年の Tailwind Plus 代替を見てください。