GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

ビタミンカラー デザイン LPキット、シトラスカラーのセクション9選

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

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

ビタミンカラー デザインは、オレンジ・ライム・グレープフルーツ・レモンのように彩度の高いフルーツカラーをクリームの地に重ね、カードごとに同系色の影を落として、パステルより一段強く、夏のドリンクブランドのようにみずみずしく見せるスタイルです。

このスタイルで実際に組んだLPをそのまま下に埋め込みました。固定ナビから波形のフッターまで、実際に動かして全体の空気感を確認してください。

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

このLPを作る9つのパーツを1つずつ切り出し、下のグリッドに並べ直しました。訪問者の目が実際に動く順番 — 目を引く、見回す、価格を見る、信頼する、行動を促す、登録する — の並びです。うち5つ(ヒーロー・カードグリッド・機能リスト・CTA帯・フッター)は、ぼかした霧ではなくくっきりした水滴の形と色付きの影で、パステルと分かれる境目をアニメーションで直接示します。

ジューススプラッシュのヒーロー01 hero-citrus スライスインジケーターナビ02 nav-citrus ウェッジバッジのカードグリッド03 card-grid-citrus スクイーズドロップアイコンリスト04 feature-list-citrus スムージー料金プラン05 pricing-citrus しずく吹き出しのレビュー06 testimonial-citrus シトラスグラデーションCTA帯07 cta-band-citrus ウェーブのフッター08 footer-citrus ジューシーボタン・入力欄09 buttons-inputs-citrus

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

キット全体の色は、夏 カラー デザインとしては少ない9色で、役割が2つに分かれます。文字を乗せるカード面には明るめのフルーツトーンを、影・グラデーション・小さいアイコンには彩度をそのまま残した濃いトーンを使います。同じdesign柱で彩度を沈めて柔らかくいく側は手書き風 デザイン LPキットとパステル デザイン LPキット、インクを光沢に替えた側がsaas サイト デザイン 信頼感キットです。

役割 色 インクとのコントラスト 使う場所
クリーム #fffaf0 9.83:1 ページの背景全体
オレンジ(カード面) #ff9a52 4.87:1 ヒーローのバッジ・カード
ライム(カード面) #c8e84a 7.35:1 カード・入力欄のリング
グレープフルーツ(カード面) #ff8fa3 4.73:1 カード・吹き出しの影
レモン(カード面) #ffe066 7.84:1 カード・料金プラン
オレンジ(濃色) #ff6a00 3.56:1 影・グラデーション・ボタン地専用
インク #204a17 — すべての文字(白地で10.23:1)

01ジューススプラッシュのヒーロー

シトラス デザインとして何が見えるか

クリームの地の上で、オレンジ・ライム・グレープフルーツの水滴(非対称の border-radius を45度回転させた形)3つが跳ねながら位置を入れ替え、手前の白いカードは跳ねるたびに少し沈みます。

ジューススプラッシュのヒーロー
新しいタブで開く

01 · ジューススプラッシュのヒーロー — 計測 累積面積 10.797% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

3색 드롭 바운스색 그림자radius 16

コードのどこを見るか

ぼかした霧ではなくくっきりした水滴を使う点が、パステルの霧ヒーローと分かれる最初の合図です。

.drop::before {
  content: "";
  width: 100%; height: 100%;
  border-radius: 50% 50% 50% 4px;  /* 水滴の形 */
  transform: rotate(45deg);
}
@keyframes dropA {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%      { transform: translate(8%, -10%) scale(1.15) rotate(-8deg); }
}

02スライスインジケーターナビ

画面で起きること

アクティブなタブを示すライム色のウェッジが隣へ移動するとき横に伸び、到着すると弾力よく縮みます。

スライスインジケーターナビ
新しいタブで開く

02 · スライスインジケーターナビ — 計測 累積面積 6.292% · 動いたフレーム 12/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleY 스쿼시translateX 이동radius pill

コードの読み方

幅がトラックの4分の1から左の余白4pxを引いた値なので、translateX の移動量にもその4pxを足し戻さないと少しずつずれていきます。

.wedge {
  width: calc(25% - 4px);
  animation: wedgeWalk 2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes wedgeWalk {
  0%, 24%  { transform: translateX(0) scaleY(1); }
  36%, 49% { transform: translateX(calc(100% + 4px)) scaleY(1); }
}

03ウェッジバッジのカードグリッド

どんな動きか

カードごとにオレンジ・ライム・グレープフルーツ・レモンそれぞれのトーンに同系色の影を重ね、隅には果肉ウェッジ型のバッジを付けます。

ウェッジバッジのカードグリッド
新しいタブで開く

03 · ウェッジバッジのカードグリッド — 計測 累積面積 15.898% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

색별 그림자웨지 배지2열→1열

どこを変えるか

4枚のカードが4分の1周期ずつずれて、順番にぽんと跳ねます。

.card { animation: cardPop 2s cubic-bezier(.2,.8,.2,1) infinite; }
.card--lim { background: #c8e84a; animation-delay: -500ms; }
@keyframes cardPop {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-8px) scale(1.02); }
}

04スクイーズドロップアイコンリスト

何が見えるか

各行は白い pill カードで、中の丸いアイコンは repeating-conic-gradient 1つで描いた果肉模様です。行ごとに開始時刻をずらすと水滴がそれぞれのリズムで押しつぶれます。

スクイーズドロップアイコンリスト
新しいタブで開く

04 · スクイーズドロップアイコンリスト — 計測 累積面積 2.135% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

radial 과육 무늬어긋난 바운스radius pill

コードのどこを見るか

9項目の中で変化するピクセル面積が2.1%と最も小さい項目ですが、強度は35.4あり、白いカードの上でもはっきり読み取れます。

.drop {
  background: repeating-conic-gradient(#ff9a52 0deg 45deg, #ffe066 45deg 90deg);
  animation: dropSqueeze 2s cubic-bezier(.2,1.4,.4,1) infinite;
}
@keyframes dropSqueeze {
  0%, 40%, 100% { transform: scale(1, 1); }
  15%           { transform: scale(1.18, .78); }
}

05スムージー料金プラン

画面で起きること

3つのプランをライム・オレンジ(おすすめ)・グレープフルーツのスムージーのように並べ、おすすめプランだけにオレンジからレモンへのグラデーションリングとバッジを付けて、少し大きくゆっくり揺らします。

スムージー料金プラン
新しいタブで開く

05 · スムージー料金プラン — 計測 累積面積 4.617% · 動いたフレーム 21/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

그라디언트 링살짝 큰 추천 플랜wiggle 애니메이션

コードの読み方

表なしで色と大きさだけで主役が伝わります。

.plan--pick {
  flex: 1.2 1 0;
  background: linear-gradient(135deg, #ff6a00, #ffe066);
  animation: pickJiggle 2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes pickJiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-1.6deg) translateY(-5px); }
}

06しずく吹き出しのレビュー

どんな動きか

レビューはしずく型のしっぽが付いた丸い吹き出しに入れ、隣のアバターは果肉模様の円です。

しずく吹き出しのレビュー
新しいタブで開く

06 · しずく吹き出しのレビュー — 計測 累積面積 3.087% · 動いたフレーム 12/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

꼬리 말풍선과육 아바타squish 루프

どこを変えるか

吹き出しの縦幅がゆっくり息をするように伸び縮みし、箸でつまんだゼリーのような弾力がページ全体に伝わります。

.bubble::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 4px;  /* しっぽも水滴の形 */
  background: #fff;
  transform: rotate(45deg);
}

07シトラスグラデーションCTA帯

何が見えるか

帯1つにオレンジからレモン、ライムへ抜けるグラデーションを敷き、その位置をゆっくり流します。上の白いボタンは押し込まれては弾んで戻ります。

シトラスグラデーションCTA帯
新しいタブで開く

07 · シトラスグラデーションCTA帯 — 計測 累積面積 41.17% · 動いたフレーム 21/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-position 흐름press 버튼radius pill

コードのどこを見るか

この項目は後の落とし穴の節でもう一度出てきます — 最初のバージョンは白文字をグラデーションの上に直接置いていて、レモンの箇所でコントラストが崩れていました。

.ctacitrus {
  background: linear-gradient(90deg, #ff6a00, #ffd400, #9ad200, #ffd400, #ff6a00);
  background-size: 300% 100%;
  animation: gradFlow 2s linear infinite;
}
@keyframes gradFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: -300% 50%; }
}

08ウェーブのフッター

画面で起きること

フッターの上辺は波が連なる模様で、波を1つずつ要素として置かず、背景の繰り返し1つだけで描きます。

ウェーブのフッター
新しいタブで開く

08 · ウェーブのフッター — 計測 累積面積 2.668% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

repeating 웨이브 가장자리3열→1열반짝임 점

コードの読み方

下の3つのカラムはオレンジ・グレープフルーツ・レモンに分かれて順番に浮き、しずく型の光が2つ、位相をずらして瞬きます。

.wave {
  height: 12px;
  background-image: radial-gradient(circle at 50% 100%, #eef7d3 0 64%, transparent 66%);
  background-size: 30px 15px;
  background-repeat: repeat-x;
}

09ジューシーボタン・入力欄

どんな動きか

ボタンは押すと体と影が一緒に沈んで手応えが出て、入力欄はフォーカスでライム色の太いリングがふわっと広がります。

ジューシーボタン・入力欄
新しいタブで開く

09 · ジューシーボタン・入力欄 — 計測 累積面積 4.938% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

눌림·그림자 동시 감소focus 링 확산radius 12

どこを変えるか

キット全体の手触りを1つにまとめた項目です。

.btn { animation: citrusPress 2s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes citrusPress {
  0%, 55%, 100% { transform: translateY(0) scaleY(1); }
  65%           { transform: translateY(4px) scaleY(.95); }
  82%           { transform: translateY(-3px); }
}

tailwind.config カスタム

カード面用の4色と、影・グラデーション専用の濃色をこの1か所にまとめておくと、LPと9つのパーツが全部同じコントラストの規則に従います。-deep の接尾語は「文字を乗せない」という約束を名前に埋め込んだものです。

theme: {
  extend: {
    colors: {
      cream: "#fffaf0", orange: "#ff9a52", "orange-deep": "#ff6a00",
      lime: "#c8e84a", grapefruit: "#ff8fa3", lemon: "#ffe066",
      ink: "#204a17",
    },
    borderRadius: { citrus: "24px", control: "12px", pill: "999px" },
    boxShadow: {
      "citrus-orange": "0 10px 24px rgba(255,106,0,.4)",
      "citrus-lime": "0 10px 24px rgba(200,232,74,.8)",
    },
  },
},

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

config をプロジェクトに入れたあと、Claude Code・Cursor に渡す言葉は下だけです。彩度が高い色ほどコントラストが厳しくなるという規則を明記しておくと、ツールがカード面に濃色を選んで文字を読めなくする失敗を減らせます。11個の規則からなる指示文の全文は zip の prompt.md に入っています。

背景を cream(#fffaf0) に統一する。カードごとに orange・lime・grapefruit・
lemon のどれか1色を与える(濃い -deep トーンは影・グラデーション専用で、
文字は乗せない)。影は同系色でグレーにしない。文字は常に ink(#204a17)。

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

結果

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

最初に実際に壊れたのは、320px描画でヒーローカードが画面をはみ出した問題でした。水滴3つをカードの端からはみ出すように配置したところ、480×300のステージでは問題なくても、320×200に縮めると document.documentElement.scrollHeight が213pxとなり、innerHeight の200pxを超えていました。カードの余白・見出しの文字サイズ・水滴の負のオフセットをphone用のメディアクエリでまとめて縮小し、213pxがちょうど200pxに収まりました。このタイプFの記事は check.py のBD9ゲートが項目まとめ形式の記事にしか適用されず自動では検出されないため、Playwrightで document.documentElement と document.body の両方の幅・高さを直接測って確認する必要がありました。

2つ目は07番のCTA帯の文字コントラストでした。白文字をオレンジ→レモン→ライムのグラデーションに直接乗せたところ、グラデーションがレモンの箇所(#ffd400)を通るとき白文字のコントラストが1.43:1まで落ち、ライムの箇所でも1.81:1と、WCAG 2.1 の最低基準である4.5:1に遠く及びませんでした。文字の背後にインク65%の半透明スクリムを敷いて計算し直すと、3色のどの箇所でも最低4.7:1まで上がり、その値で実際のデモを直しました。この果物色がメール本文の中でどんな顔をするかはメールテンプレート デザイン9選で別に測りました。この2つを直した完成版は、パスワード 52ppc9vv の zip を開けばそのまま確認できます。

9つのデモはすべて MDN の prefers-reduced-motion 解説が定義するメディアクエリを検知すると動きを止め、各要素をアニメーションが始まる前の静止状態に戻して固定します。

アクセシビリティ

ビタミンカラーのスタイルがパステルより先にぶつかる問題は彩度です。カード面の色をそのまま濃く使うと、インクの文字とのコントラストがオレンジの濃色で3.56:1、グレープフルーツの濃色で2.98:1まで落ち、本文の基準4.5:1を通りません。そこでこのキットではカード面用の4色をインクとのコントラスト4.73〜7.84:1の範囲で別に用意し、彩度をそのまま残した濃色は影・グラデーション・小さいアイコンにだけ使います。07番のCTA帯のように白文字をグラデーションに乗せる必要がある場合は、落とし穴の節で説明したインク65%のスクリムで補正しました。色付きの影は MDN の box-shadow 解説と同じ書き方で不透明度を0.4〜0.85に抑え、キーボードのフォーカスは影に頼らず :focus-visible のインク色のアウトラインを別に描きました。

ビタミンカラー以外のホームページの流行が気になる方はデザイントレンドのカテゴリを、このブログ全体が何を配布しているかは紹介ページにまとめてあります。

FAQ

ビタミンカラーとパステルキャンディは何が違いますか?

パステルキャンディはラベンダー・ミントのように彩度を落とした柔らかいトーンを使い、影も淡く敷いて優しい雰囲気を出します。ビタミンカラーはオレンジ・ライム・グレープフルーツのように彩度をそのまま残しつつ、カード面と影用の色の明るさを分けてコントラストを守ります。同系色の影という原則は同じでも、パステルは柔らかく、ビタミンカラーは鮮やかに振れる点が違います。色を紙に移して層を重ねる側はペーパーカット デザインのLPパーツがその隣の席です。

フレッシュ デザインでカードの背景を濃くしてはいけないのはなぜですか?

色の彩度・明度が下がって濃くなるほど、上に乗せるインクの文字との明るさの差が縮まり、コントラスト比が下がります。このキットで測ったオレンジの濃色(#ff6a00)はインクとのコントラストが3.56:1で、本文基準の4.5:1に届きません。カード面は常にその色系統の中で明るい方を使い、濃い方は文字を乗せない影やグラデーションだけに使います。

グラデーションの上に文字を置く必要がある場合はどうしますか?

グラデーションは位置によって色が変わり続けるため、1箇所だけ見てコントラストを合わせても別の箇所で失敗します。この記事のCTA帯のように、文字の背後に半透明の暗いスクリム(このキットはインク65%)を敷けば、グラデーションのどの箇所を通っても最低限のコントラストを保証できます。スクリムなしで白文字をグラデーションに直接乗せる方法は、明るい箇所を通るたびにほぼ確実に失敗します。

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

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