GODRICH

パステル デザイン LPキット、キャンディカラーのセクション9選

· Godrich · 9種 · 7分で読める

デザイントレンドページテンプレートCSSのみLP料金表CTAボタン

パステル デザインは、クリーム色の地にバブルガムピンク・ピーチ・レモン・ミント・ラベンダーの淡い色を重ね、影までグレーではなく同系色のパステルで描いて、飴のようにやわらかく、さわやかに見せるスタイルです。名前がなくて検索できなかった、あのデザートショップの画面をそのまま再現できるキットです。

このスタイルで実際に組んだLPを下にまるごと埋め込みました。ナビゲーションからフッターまでスクロールして、コードを読む前に、全体の空気感をつかんでください。

ページを新しいタブで開く

その画面を形作る9つのパーツを1つずつ切り出して下のグリッドに並べました。訪問者の目が実際に巡る順番 — 目を引く、見回す、価格を見る、信頼する、行動を促す、登録させる — の並びです。うち4つ(グラデーションミストのヒーロー・キャンディアイコンリスト・CTA帯・スカラップのフッター)は、影の色をグレーからパステルに変えるだけで空気がまるごと変わるというこのスタイルの核心を、アニメーションで直接示します。

01 hero-candy 02 nav-candy 03 card-grid-candy 04 feature-list-candy 05 pricing-candy 06 testimonial-candy 07 cta-band-candy 08 footer-candy 09 buttons-inputs-candy

自動再生 · タイルを押すとその項目へ · すべて1つのzip

キット全体の色は7色に収まります。文字は常に最下段のベリーインク1色に固定するのが、読めるパステルの条件です。

役割 色 使う場所
クリーム #fff6f0 ページの背景全体
バブルガムピンク #ffb9cf 主役色 — CTA・バッジ・強調
ピーチ #ffd2b8 カード・アバター
レモン #ffe9a3 カード・料金プラン
ミント #b5e8d2 ナビのインジケーター・入力欄のリング
ラベンダー #cdbcf2 カード・グラデーションの中間色
ベリーインク #55395e すべての文字(コントラスト約5.7〜9:1)

01グラデーションミストのヒーロー

クリームの地にピンク・ピーチ・ラベンダーのぼかした円3つが霧のように漂い、手前の白いカードがふわっと浮かびます。カードの影がグレーではなくピンクであることが、このスタイルの最初の合図です。

3색 그라디언트 원색 그림자radius 16
<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-candy bg-white p-10 shadow-candy-pink">
  <p class="text-xs font-bold uppercase tracking-widest text-berry/70">Pudding</p>
  <h1 class="text-4xl font-bold">ふわふわがいい</h1>
  <button class="rounded-pill bg-white px-6 py-3 text-sm font-bold
                 shadow-candy-berry">無料で始める</button>
</div>

02ゼリーインジケーターナビ

アクティブなタブを示すミント色の pill が隣へ移るときに少し伸び、到着するとぷにっと縮みます。ゼリーをつまんだときのあの弾力を scaleY 1行で作れます。

scaleY 스쿼시translateX 25%radius pill
<div class="relative flex flex-1 rounded-pill bg-cream/60 p-1">
  <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-mint
               shadow-candy-mint"></span>
  <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">ホーム</span>
</div>

03ステッカーバッジのカードグリッド

カードごとにラベンダー・レモン・ピーチ・ミントそれぞれのパステル地に同系色の影を重ね、隅には破線枠のステッカーバッジを付けます。4枚のカードが開始時刻をずらして順番にふわふわ動きます。

색별 그림자점선 스티커 배지2열→1열
<div class="relative flex min-h-32 flex-col justify-end gap-2
            rounded-candy bg-lavender p-5 shadow-candy-lavender">
  <span class="absolute -top-2 right-4 rounded-pill border-2 border-dashed
               border-white bg-white px-3 py-1 text-[11px] font-bold
               shadow-candy-pink">NEW</span>
  <p class="text-sm font-bold">かわいいテンプレート</p>
</div>

04キャンディアイコンリスト

各行は白い pill カードで、中の丸いアイコンは repeating-conic-gradient 1つで描いたハードキャンディの模様です。開始時刻をずらすとキャンディがそれぞれのリズムで弾みます。

radial 사탕 무늬어긋난 바운스radius pill
<li class="flex items-center gap-3 rounded-pill bg-white p-2 pr-5
           shadow-candy-mint">
  <span class="h-9 w-9 shrink-0 rounded-full shadow-inner"
        style="background:repeating-conic-gradient(#ffb9cf 0deg 45deg,
               #ffd2b8 45deg 90deg)"></span>
  <span class="text-sm font-semibold">ドラッグ＆ドロップ</span>
</li>

05マカロン料金プラン

3つのプランをミント・バブルガムピンク・レモンのマカロンのように並べ、おすすめだけにグラデーションの枠とバッジを付けて少し大きくぷるぷるさせます。表なしで色だけで主役が分かります。

그라디언트 링살짝 큰 추천 플랜wiggle 애니메이션
<div class="relative flex-[1.2] rounded-candy p-1 shadow-candy-pink"
     style="background:linear-gradient(135deg,#ffb9cf,#cdbcf2)">
  <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-pill
               bg-white px-3 py-1 text-[11px] font-bold shadow-candy-pink">人気</span>
  <div class="flex flex-col gap-1 rounded-candy p-6 text-center"
       style="background:#ffd9e6">
    <p class="text-sm font-bold">バブル</p>
  </div>
</div>

06吹き出しのレビュー

レビューはしっぽ付きの丸い吹き出しに入れ、隣のアバターはキャンディ模様の円です。吹き出しがゼリーのように縦に軽く潰れては戻りを繰り返し、ページ全体がやわらかく見えます。

꼬리 말풍선캔디 아바타squish 루프
<figure class="flex items-start gap-4">
  <span class="h-14 w-14 shrink-0 rounded-full shadow-candy-pink"
        style="background:repeating-conic-gradient(#ffd2b8 0deg 60deg,
               #ffe9a3 60deg 120deg)"></span>
  <div class="relative flex-1 rounded-candy bg-white p-5 shadow-candy-pink">
    <span class="absolute left-[-8px] top-3 h-4 w-4 rotate-45
                 rounded-sm bg-white"></span>
    <p class="text-sm font-bold">このサイト、本当にかわいい</p>
  </div>
</figure>

07キャンディグラデーションCTA帯

帯1つにピンクからラベンダー、ミントへ抜けるグラデーションを敷き、その位置をゆっくり流します。上の白いボタンは押し込まれては弾んで戻りを繰り返します。

background-position 흐름press 버튼radius pill
<div class="relative overflow-hidden rounded-candy px-10 py-14
            shadow-candy-lavender"
     style="background:linear-gradient(90deg,#ffb9cf,#cdbcf2,#b5e8d2,
            #cdbcf2,#ffb9cf);background-size:300% 100%">
  <h3 class="text-3xl font-bold">今すぐ甘く始めよう</h3>
  <button class="rounded-pill bg-white px-8 py-3 text-sm font-bold
                 shadow-candy-berry">はじめる</button>
</div>

08スカラップのフッター

フッターの上辺は半円が連なるスカラップ模様で、半円を1つずつ要素として置かず背景の繰り返し1つだけで描きます。中のカラムは薄いラベンダー・ピンク・ミントに分かれ、星が瞬きます。

repeating 반원 가장자리3열→1열반짝임 점
.scallop {
  height: 13px;
  background-image: radial-gradient(circle at 50% 100%,
    #f0eaf9 0 64%, transparent 66%);
  background-size: 26px 13px;
  background-repeat: repeat-x;
}

09ふにふにボタン・入力欄

ボタンは押すと体が少し沈み、ピンクの影も一緒に浅くなって手応えが出ます。入力欄はフォーカスでミントの ring がふわっと広がります。パステルキットの手触りを1つにまとめた項目です。

눌림·그림자 동시 감소focus 링 확산radius 12
<button class="rounded-control bg-white px-6 py-3 text-sm font-bold
               shadow-candy-pink">保存する</button>
<input class="w-full rounded-control bg-white px-4 py-3 text-sm
              shadow-candy-mint" type="email"
       placeholder="メールアドレスを入力">

tailwind.config カスタム

パステル7色とキャンディの影6種をこの1か所に書いておくと、LPと9つのパーツが全部同じ色の規則に従います。影を毎回手で書かず、shadow-candy-* の名前で呼びます。

theme: {
  extend: {
    colors: {
      cream: "#fff6f0", bubble: "#ffb9cf", peach: "#ffd2b8",
      lemon: "#ffe9a3", mint: "#b5e8d2", lavender: "#cdbcf2",
      berry: "#55395e",
    },
    borderRadius: { candy: "24px", control: "12px", pill: "999px" },
    boxShadow: {
      "candy-pink": "0 10px 24px rgba(255,185,207,.55)",
      "candy-mint": "0 10px 24px rgba(181,232,210,.85)",
      "candy-berry": "0 8px 18px rgba(85,57,94,.28)",
    },
  },
},

バイブコーディング プロンプト

config をプロジェクトに入れたら、Claude Code・Cursor に渡す言葉は下だけで足ります。5行で終わるのは、config が色と影をすでに決めているからです。指示文の全文は zip の prompt.md に入っています。

背景を cream(#fff6f0) に統一する。カードごとに bubble・peach・lemon・
mint・lavender のどれか1色を与える。影はグレーにしない — 同系統の
キャンディの影(shadow-candy-*)を使う。文字は常に berry(#55395e)。
パステルの上にパステルの文字はコントラストが出ない。角は
rounded-candy か rounded-pill に統一する。

この指示を page/index.html として実際に組み、1280px 画面の全体を撮ったのが下の図です。

結果

どこで壊れるか — 落とし穴

最初に実際に壊れたのはナビのインジケーターのずれでした。pill の幅を calc(25% - 4px) にして translateX(100%) で動かしたところ、パーセント移動は要素自身の幅が基準になるため、1マスごとに4px足りず、3マス進んだ時点で12px前のタブに食い込みました。描画結果を拡大して初めて分かり、移動量を calc(100% + 4px) ずつ補正して直しました。

2つ目はフッターがほとんど動いていなかった問題です。12px の星2個だけを瞬かせたところ、測った画面の変化面積は0.12%で、静止画と区別がつきませんでした。3つのカラムが順番に浮く波を足して6.91%まで上がりました。3つ目はグラデーションのつなぎ目です。流すグラデーションの両端を違う色にすると、background-position が一巡して戻る瞬間に色が飛びます。両端を同じ色(ピンク)にして background-size: 300% で広げておけば、つなぎ目なく流れ続けます。3つとも直した完成版は、パスワード 42smbkak の zip を開けばそのまま確認できます。

9つのデモはすべて MDN の prefers-reduced-motion 解説が定義するメディアクエリを検知すると動きを止め、各要素をアニメーションが始まる前の静止状態(カードは動き出す前の位置、ボタンは押される前の状態)に戻して固定します。動きを減らしたい来訪者には霧が流れたりキャンディが跳ねたりするアニメーションが見えない代わりに、カード・ボタン・入力欄そのものは残り、情報は欠けません。

アクセシビリティ

パステルで最も多い失敗は文字のコントラストです。バブルガムピンク(#ffb9cf)の上に白い文字を置くと1.6:1で、WCAG 2.1 の最低基準である4.5:1に大きく届きません。そこでこのキットでは文字をすべて濃いベリーインク(#55395e)に固定しました。クリームの上で9.2:1、この中で一番濃いラベンダーの上でも5.7:1で本文の基準を通ります。パステルは面と飾りの担当で、文字の担当ではありません。色付きの影は MDN の box-shadow 解説と同じ書き方で不透明度を0.28〜0.9に抑えて枠線の代わりにならないようにし、キーボードのフォーカスは影に頼らず :focus-visible のベリーのアウトラインを別に描きました。

他のホームページの流行も見たい方はデザイントレンドのカテゴリを、このブログが全体で何を配布しているかは紹介ページにまとめてあります。

FAQ

クレイモーフィズムとは何が違いますか?

クレイモーフィズムは粘土のように膨らんだ立体感が主役で、太い枠と内側の影でかたまりを作ります。パステルキャンディは面は平らのままで、色と影の色で空気感を出します。立体感を強くするとクレイに、色だけを残すとキャンディになります。

ブランドが暗いトーンでも使えますか?

使えますが、7色をそのまま持ち込むとぶつかります。クリーム背景とベリーインクの構造は保ち、カードの色だけをブランドカラーを淡くしたパステルに置き換えると馴染みます。影も同じ系統に合わせるのが規則です。

文字サイズを小さくするとどうなりますか?

4.5:1 は本文サイズの基準で、18px 以上の太い文字は3:1で通ります。ベリーインクはどのパステルの上でも最低5.7:1あるので、サイズを下げても本文基準を維持します。逆に淡いパステルの文字は大きくしても通らないので、使わないのが正解です。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。