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

2026-09-11 · Godrich · 9種 · 9分で読める

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

このスタイルで実際に組んだ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 07 cta-band-citrus 08 footer-citrus 09 buttons-inputs-citrus

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

01 ジューススプラッシュのヒーロー
02 スライスインジケーターナビ
03 ウェッジバッジのカードグリッド
04 スクイーズドロップアイコンリスト
05 スムージー料金プラン
06 しずく吹き出しのレビュー
07 シトラスグラデーションCTA帯
08 ウェーブのフッター
09 ジューシーボタン・入力欄

キット全体の色は9色で、役割が2つに分かれます。文字を乗せるカード面には明るめのフルーツトーンを、影・グラデーション・小さいアイコンには彩度をそのまま残した濃いトーンを使います。

役割	色	インクとのコントラスト	使う場所
クリーム	`#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つが跳ねながら位置を入れ替え、手前の白いカードは跳ねるたびに少し沈みます。ぼかした霧ではなくくっきりした水滴を使う点が、パステルの霧ヒーローと分かれる最初の合図です。

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スライスインジケーターナビ

アクティブなタブを示すライム色のウェッジが隣へ移動するとき横に伸び、到着すると弾力よく縮みます。幅がトラックの4分の1から左の余白4pxを引いた値なので、translateX の移動量にもその4pxを足し戻さないと少しずつずれていきます。

scaleY 스쿼시translateX 이동radius pill

.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ウェッジバッジのカードグリッド

カードごとにオレンジ・ライム・グレープフルーツ・レモンそれぞれのトーンに同系色の影を重ね、隅には果肉ウェッジ型のバッジを付けます。4枚のカードが4分の1周期ずつずれて、順番にぽんと跳ねます。

색별 그림자웨지 배지2열→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つで描いた果肉模様です。行ごとに開始時刻をずらすと水滴がそれぞれのリズムで押しつぶれます。9項目の中で変化するピクセル面積が2.4%と最も小さい項目ですが、強度は56.4あり、白いカードの上でもはっきり読み取れます。

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

.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つのプランをライム・オレンジ(おすすめ)・グレープフルーツのスムージーのように並べ、おすすめプランだけにオレンジからレモンへのグラデーションリングとバッジを付けて、少し大きくゆっくり揺らします。表なしで色と大きさだけで主役が伝わります。

그라디언트 링살짝 큰 추천 플랜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しずく吹き出しのレビュー

レビューはしずく型のしっぽが付いた丸い吹き出しに入れ、隣のアバターは果肉模様の円です。吹き出しの縦幅がゆっくり息をするように伸び縮みし、箸でつまんだゼリーのような弾力がページ全体に伝わります。

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

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

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

帯1つにオレンジからレモン、ライムへ抜けるグラデーションを敷き、その位置をゆっくり流します。上の白いボタンは押し込まれては弾んで戻ります。この項目は後の落とし穴の節でもう一度出てきます — 最初のバージョンは白文字をグラデーションの上に直接置いていて、レモンの箇所でコントラストが崩れていました。

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つだけで描きます。下の3つのカラムはオレンジ・グレープフルーツ・レモンに分かれて順番に浮き、しずく型の光が2つ、位相をずらして瞬きます。

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

.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ジューシーボタン・入力欄

ボタンは押すと体と影が一緒に沈んで手応えが出て、入力欄はフォーカスでライム色の太いリングがふわっと広がります。キット全体の手触りを1つにまとめた項目です。

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

.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まで上がり、その値で実際のデモを直しました。この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

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

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

カードの背景を濃くしてはいけないのはなぜですか?

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

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

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