【Cursor】作った LP のデザインを揃える方法を紹介｜色・余白・動き
公開日: 2026年9月12日 · 読了目安 8 分
Cursor でセクションごとに作った LP は、余白も角の丸みも動きもばらばらになりがちです。原因になる3つの層、トークンの固め方、エージェントへの指示文、動きの基準を完成セクションに置く方法まで、手順でまとめます。
Cursor で作った LP のデザインがばらばらになる悩み
Cursor の Agent にヒーローを頼み、次のチャットで機能紹介、その次で料金表を頼む。1つずつ見ると悪くないのに、縦に並べると別々のサイトを貼り合わせたように見える。
Cursor で LP を作った人の多くが、一度はこの状態に出会います。
よく見ると、ずれているのは細かいところです。
セクションごとに上下の余白が違い、ページのリズムが崩れる
ボタンやカードの角の丸みが 8px と 16px で混ざる
青の濃さが少しずつ違い、ブランドの色が定まらない
全部のセクションがふわっと入場し、どこを見ればよいか分からない
この記事では、Cursor で作った LP のデザインが揃わない原因を3つの層に分けて説明します。
あとから揃え直す手順と、最初から揃えて作るための指示の出し方も紹介します。
Cursor の LP が揃わない原因は指示の渡し方にある
エージェントは、そのチャットで見えている情報だけを手がかりに書きます。別のチャットで作ったヒーローの余白や色は、明示しない限り参照されません。
そのため、セクションを分けて頼むほど前提がずれていきます。
もう1つの原因は、「カッコよく」「モダンに」といった主観語の指示です。基準がないので、エージェントはよくある SaaS 風の見た目を毎回組み直します。
その結果、似ているけれど同じではない部品が並びます。
ここでよくある遠回りが、気に入らないセクションを何度も生成し直すことです。生成を増やしても、基準がないままなので揃いません。
直すときは、足すのではなく引くことを考えます。基準を先に決めて、そこから外れたものを取り除きます。
LP のデザインを揃えるために固定する3つの層
ばらつきは3つの層で起きます。1つ目は色・フォント・角の丸み、2つ目は余白、3つ目はモーションです。
順番に固定すれば、エージェントにも「この基準に合わせて」と1行で伝えられます。
層1：LP の色・フォント・角の丸みを1ファイルに置く
ブランドの色と文字、角の丸みは、CSS 変数として1か所にまとめます。Tailwind CSS v4 なら、globals.css の @theme（共通の値を書く場所）に書きます。
書いた値は、bg-brand（ブランド色の背景）や rounded-card（カードの角の丸み）のようなクラスとして使えます。
ポイントは、数を絞ることです。メインの色は1つ、角の丸みはカード用とボタン用の2つ程度に留めます。
選択肢が多いと、エージェントはまた別の値を選びます。
/* app/globals.css */
@import "tailwindcss";
@theme {
--color-brand: #2563eb;
--color-brand-foreground: #ffffff;
--color-muted: #71717a;
--radius-card: 1rem;
--radius-button: 9999px;
--font-sans: "Inter", "Noto Sans JP", sans-serif;
}層2：LP のセクション余白を3段階で決める
上下の余白は、py-24 / py-32 / py-40 のように3段階に決めます。
通常のセクションは一番小さい余白にして、ヒーローと CTA だけ広げます。役割と結び付けると迷いません。
横幅も同じです。本文の最大幅を max-w-5xl などに1つ決め、全セクションで使います。
幅がセクションごとに違うと、余白が揃っていても整って見えません。
層3：強い動きはヒーローと CTA だけにする
見た目のばらつきで一番目立つのは、モーションです。全セクションが入場アニメーションを持つと、どれも主役に見えて、ページの流れが消えます。
強い動きはヒーローと CTA の2か所に置き、他のセクションは動きなしか、薄いフェードだけにします。
イージングと時間も1種類に揃えます。そうすると、別々に作ったセクションでも同じページの部品に見えます。
ばらばらになった Cursor の LP を揃え直す手順
すでに Cursor で作った LP があるなら、次の順番で直します。新しく生成し直すより、手元のページから引いていく方が早く終わります。
ステップ1：ページを上から見て、目立つ動きを2つだけ残し、他の入場アニメーションを外す
ステップ2：上の @theme を置き、色と角の丸みの直書きを、トークン（共通で使う値）に置き換えるよう頼む
ステップ3：セクションの余白を3段階に揃え、最大幅を1つに統一する
ステップ4：それでもリズムが戻らないときは、気に入った1セクションを基準にして他を寄せる
ステップ2と3は、次のような指示文でまとめて頼めます。対象のファイルを指定すると、差分が読みやすくなります。
app/(marketing)/page.tsx と components/sections/ 以下を見直して。
- 色と角の丸みは app/globals.css の @theme のトークンだけを使う（直書きの hex や rounded-[..] を置き換える）
- セクションの上下余白は py-24 に統一。ヒーローと CTA だけ py-32
- 本文の最大幅は max-w-5xl に統一
- 入場アニメーションはヒーローと CTA 以外から外す
文言とレイアウトの構造は変えないで。LP の動きの基準を完成セクションに置く方法
色と余白は数値で決められますが、モーションの「ちょうどよさ」は文章で伝えにくい部分です。
動きは、イージングと遅延、動く距離の組み合わせで決まります。これを毎回エージェントに考えさせると、ここが最後まで揃いません。
そこで、動きは自分で生成せず、ブラウザで実際に動きを見て選んだ完成セクションを基準にする方法があります。
DesignLayer は、人が組んだモーション付きの React + Tailwind CSS のセクションを、ライブプレビューで確かめてからコピーできるカタログです。
閲覧にアカウントもカードも要りません。https://design-layer.com/ja/components
使い方は、揃えたい LP の中で一番目立つ場所、たとえばヒーローだけをカタログから取ることです。
Copy for Cursor でコピーすると、次の3つがまとめて手に入ります。
エージェント向けの統合指示
本体の TSX
必要な npm 依存の一覧
それを Cursor に貼り、「既存のトークンに合わせて」と1行添えます。
他のセクションは静的なままでもかまいません。動きを1か所に絞った LP の方が、全セクションがばらばらに動く LP より、まとまって見えます。
ヒーローの作り方そのものは https://design-layer.com/ja/articles/nextjs-animated-hero-section-guide で解説しています。
この LP デザインの揃え方が向いている人・向いていない人
向いているのは、Next.js と Tailwind CSS で LP を作り、Cursor や Claude にコードを書かせている人です。
とくに「部品ごとには悪くないのに、並べるとまとまらない」と感じているなら、3層の固定でかなり改善します。
向いていないのは、デザインシステムを一から設計したい場合です。この記事の方法は、すでにある LP を短時間で整えるためのものです。
大きな組織のトークン設計は、別の手順が必要になります。
DesignLayer の無料枠は、ライブプレビューが無制限、ソースのコピーが日本時間で無料サンプル10個（無料アカウントで回数制限なし）です。無料サンプルのヒーローなら、回数の上限なくコピーできます。
同じ日に何本も取り込む場合は、コピーが無制限の Plus を使います。
Cursor で LP のデザインを揃えるときのよくある質問
色・角の丸み・フォントをまとめたトークンのファイルと、余白のルールです。
チャットの最初に「app/globals.css の @theme だけを使う」「余白は py-24 基準」と書いておくと、別のセクションを頼んでもずれにくくなります。
まとめ：Cursor で作った LP のデザインを揃える手順
Cursor で作った LP がばらばらになるのは、セクションごとに前提が共有されていないから
色・フォント・角の丸み、余白、モーションの3層を先に固定する
直すときは生成し直すより、強い動きを2つに絞り、色や角の丸みを共通の値に置き換える
動きの基準は、ライブで確かめた完成セクションに置くと揃えやすい
まずは手元の LP で、入場アニメーションをヒーローと CTA 以外から外してみてください。それだけでも、ページのまとまりは大きく変わります。
LP を1日で公開するまでの流れは https://design-layer.com/ja/articles/cursor-nextjs-landing-page-guide 、エージェントからカタログを直接使う方法は https://design-layer.com/ja/articles/cursor-mcp-component-catalog-guide にまとめています。
