価格表 · 料金プラン
Y2Kクロームベベルとオーブの料金プラン
2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/y2k-pricing/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
Y2K（2000年代初頭）のソフトウェアパッケージを思わせる料金プランを作ってください。 要件: - 配色: スカイブルー #b6e2ff から白へのグラデ背景に、各プランは虹色グラデ（peach・mint・lavender）の光沢オーブ風カード。 - 各プランの上部に大型の「光沢オーブ」（border-radius 999px、内側に highlight、外側に soft shadow）。アイコン代わりにクリスタル風の絵文字（💎 ⚡ ✨）を中心に。 - 価格は太い細丸ゴシック、ベベル付き（drop-shadow を上下に重ねて立体感）。 - CTA ボタンは Aqua / Aero 風: 上から下へのグラデ + 内側 inset の白光沢 + 外側 box-shadow + 角丸 999px。 - 背景に hovering する大きな光沢ボール（半透明 PNG ではなく、CSS の radial-gradient で）が複数。 - コーナーにスパークル（✦ や ✧）をランダムに配置。 - フォントは丸めの sans（Quicksand / Manrope / 丸ゴ）。 - 「セキュア」「次世代」「テクノロジー」などの 2000 年代的な過剰な煽り文。 - フルレスポンシブ。 - JS不要。
バリエーション
ダーク Y2K 版
背景を暗紺 #0e1b3d に、オーブはネオン色（cyan / magenta / lime）に変更。 ベベルとガラス質感はそのまま、夜のサイバーサロン感へ。
モバイル縦スタック版
モバイルで 1 カラム時、各プランオーブを上下に重ねて、さらに大きく見せる。 CTA は画面幅いっぱいの巨大 Aqua ボタンに。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。価格・サービス条件は架空の例です。プランの選択・契約・決済は実装していません。
コードを表示
<!doctype html>
<html lang="ja">
<!-- Vibehaus / CC0。独立した架空の料金表デモ。申込み・決済・外部通信なし。 -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>Y2Kクロームベベルとオーブの料金プラン — Vibehaus プレビュー</title>
<style>
:root {
--sky: #b6e2ff;
--sky-2: #d8f0ff;
--ink: #0c1a3d;
--muted: #4b5b80;
--aqua: #2bd2ff;
--aqua-deep: #0aa3d6;
--peach: #ffb59c;
--rose: #ff7eb3;
--mint: #a4f3c2;
--lav: #c5b3f7;
--lav-deep: #7d5cf0;
--gold: #ffd56b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Quicksand", "Manrope", "Inter", "Hiragino Maru Gothic ProN",
"Noto Sans JP", sans-serif;
background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 35%, #fff 100%);
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
min-height: 100dvh;
position: relative;
overflow-x: hidden;
}
/* 装飾の描画範囲を本文と分け、右のオーブで文書幅が広がらないようにする。 */
.decorations { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Floating glassy orbs in the background */
.orb {
position: absolute;
border-radius: 999px;
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
.orb-1 {
top: -80px; left: -60px;
width: 280px; height: 280px;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), transparent 38%),
radial-gradient(circle at 65% 70%, var(--rose), transparent 60%),
var(--peach);
filter: blur(0.5px);
}
.orb-2 {
top: 50%; right: -120px;
width: 320px; height: 320px;
background:
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), transparent 35%),
radial-gradient(circle at 70% 70%, var(--aqua-deep), transparent 60%),
var(--aqua);
}
.orb-3 {
bottom: -100px; left: 20%;
width: 220px; height: 220px;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), transparent 35%),
radial-gradient(circle at 70% 70%, var(--lav-deep), transparent 60%),
var(--lav);
}
/* Sparkles */
.sparkle {
position: absolute;
font-size: 1.4rem;
color: var(--gold);
text-shadow: 0 0 8px var(--gold);
z-index: 1;
pointer-events: none;
}
.sparkle-1 { top: 14%; left: 8%; }
.sparkle-2 { top: 26%; right: 6%; }
.sparkle-3 { bottom: 22%; right: 14%; }
.sparkle-4 { bottom: 12%; left: 12%; font-size: 1.8rem; }
@media (max-width: 720px) { .sparkle { display: none; } }
.wrap {
position: relative;
z-index: 5;
max-width: 1180px;
margin: 0 auto;
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}
header.bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 1rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 999px;
backdrop-filter: blur(10px);
box-shadow: 0 6px 20px -8px rgba(12, 26, 61, 0.12);
margin-bottom: 2.5rem;
}
.logo {
font-weight: 800;
font-size: 1rem;
letter-spacing: -0.01em;
padding: 0.4rem 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.logo::before {
content: "";
width: 16px; height: 16px;
border-radius: 999px;
background:
radial-gradient(circle at 35% 30%, white, transparent 40%),
radial-gradient(circle at 70% 70%, var(--lav-deep), transparent 60%),
var(--lav);
}
header.bar nav {
display: inline-flex;
gap: 0.4rem;
}
header.bar nav a {
padding: 0.4rem 0.85rem;
border-radius: 999px;
text-decoration: none;
color: var(--ink);
font-size: 0.86rem;
font-weight: 600;
transition: background 0.15s;
}
header.bar nav a:hover { background: rgba(255, 255, 255, 0.8); }
header.bar nav a.active {
background: linear-gradient(180deg, white, var(--sky));
box-shadow: inset 0 1px 0 white, 0 2px 6px -2px rgba(12, 26, 61, 0.2);
}
@media (max-width: 640px) { header.bar nav { display: none; } }
.hero {
text-align: center;
margin-bottom: 3rem;
}
.label {
display: inline-block;
background: linear-gradient(180deg, white, var(--mint));
border: 1px solid rgba(12, 26, 61, 0.1);
border-radius: 999px;
padding: 0.35rem 1rem;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 1.5rem;
font-weight: 700;
box-shadow: inset 0 1px 0 white, 0 4px 12px -4px rgba(12, 26, 61, 0.18);
}
.hero h1 {
margin: 0 auto 1.25rem;
font-size: clamp(2.4rem, 5.5vw, 4rem);
font-weight: 800;
line-height: 1.35;
letter-spacing: 0;
background: linear-gradient(180deg, var(--ink) 30%, var(--lav-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
max-width: 22ch;
}
.hero h1 :lang(ja) { letter-spacing: 0; line-height: 1.4; }
.hero p.lede {
margin: 0 auto;
font-size: 1.05rem;
line-height: 1.85;
color: var(--muted);
max-width: 50ch;
}
.plans {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr 1fr; } }
.plan {
position: relative;
padding: 3.5rem 1.85rem 2rem;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 28px;
backdrop-filter: blur(20px);
box-shadow:
inset 0 1px 0 white,
0 24px 60px -20px rgba(12, 26, 61, 0.25),
0 8px 24px -10px rgba(12, 26, 61, 0.12);
}
.plan.featured {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(196, 179, 247, 0.35));
border-color: white;
transform: translateY(-12px);
}
@media (max-width: 759px) { .plan.featured { transform: none; } }
/* The orb at the top of each plan card */
.plan-orb {
position: absolute;
top: -38px; left: 50%;
transform: translateX(-50%);
width: 76px; height: 76px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 2rem;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.85),
inset 0 -8px 16px rgba(12, 26, 61, 0.18),
0 14px 30px -8px rgba(12, 26, 61, 0.4);
}
.orb-mint {
background:
radial-gradient(circle at 32% 28%, white, transparent 32%),
radial-gradient(circle at 70% 75%, #4cb37a, transparent 55%),
var(--mint);
}
.orb-rose {
background:
radial-gradient(circle at 32% 28%, white, transparent 32%),
radial-gradient(circle at 70% 75%, #e54f87, transparent 55%),
var(--rose);
}
.orb-aqua {
background:
radial-gradient(circle at 32% 28%, white, transparent 32%),
radial-gradient(circle at 70% 75%, var(--aqua-deep), transparent 55%),
var(--aqua);
}
.plan-name {
text-align: center;
margin: 0 0 0.4rem;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.plan-tag {
text-align: center;
margin: 0 auto 1.5rem;
font-size: 0.86rem;
line-height: 1.6;
color: var(--muted);
max-width: 24ch;
}
.plan-price {
text-align: center;
padding: 1rem 0;
margin-bottom: 1.25rem;
border-top: 1px dashed rgba(12, 26, 61, 0.2);
border-bottom: 1px dashed rgba(12, 26, 61, 0.2);
}
.plan-price .num {
font-size: 3rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: var(--ink);
text-shadow: 0 1px 0 white, 0 -1px 0 rgba(12, 26, 61, 0.05);
}
.plan-price .cycle {
display: block;
font-size: 0.78rem;
color: var(--muted);
margin-top: 0.4rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.plan-features {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
}
.plan-features li {
padding: 0.45rem 0;
font-size: 0.92rem;
display: flex;
gap: 0.55rem;
}
.plan-features li::before {
content: "✓";
font-weight: 800;
color: var(--lav-deep);
}
.plan-cta {
display: block;
width: 100%;
background: linear-gradient(180deg, white 0%, var(--aqua) 50%, var(--aqua-deep) 100%);
color: white;
text-decoration: none;
text-align: center;
font-weight: 800;
font-size: 0.95rem;
padding: 0.85rem 1.2rem;
border-radius: 999px;
border: 1px solid rgba(10, 163, 214, 0.6);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -8px 12px rgba(10, 163, 214, 0.4),
0 8px 18px -4px rgba(10, 163, 214, 0.5);
text-shadow: 0 1px 0 rgba(10, 163, 214, 0.45);
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.plan-cta:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -8px 12px rgba(10, 163, 214, 0.4),
0 14px 24px -6px rgba(10, 163, 214, 0.55);
}
.plan.featured .plan-cta {
background: linear-gradient(180deg, white 0%, var(--rose) 50%, #d05186 100%);
border-color: rgba(208, 81, 134, 0.6);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -8px 12px rgba(208, 81, 134, 0.4),
0 10px 22px -6px rgba(208, 81, 134, 0.5);
text-shadow: 0 1px 0 rgba(208, 81, 134, 0.45);
}
footer.foot {
margin-top: 3rem;
padding-top: 1.25rem;
border-top: 1px dashed rgba(12, 26, 61, 0.2);
text-align: center;
font-size: 0.82rem;
color: var(--muted);
}
.demo-note { position: relative; z-index: 6; max-width: 1100px; margin: 1rem auto; padding: 0.8rem 1rem; font-size: 13px; line-height: 1.8; letter-spacing: 0; border: 1px solid currentColor; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.plan:hover, .receipt:hover, .plan-cta:hover, .cta a:hover { transform: none; }
}
</style>
</head>
<body>
<p class="demo-note" id="demo-note" tabindex="-1">架空の料金表デモです。価格・条件・実績は例示で、申込み・契約・決済は行いません。Vibehausの素材は完全無料・CC0です。</p>
<div class="decorations" aria-hidden="true">
<span class="orb orb-1" aria-hidden="true"></span>
<span class="orb orb-2" aria-hidden="true"></span>
<span class="orb orb-3" aria-hidden="true"></span>
<span class="sparkle sparkle-1" aria-hidden="true">✦</span>
<span class="sparkle sparkle-2" aria-hidden="true">✧</span>
<span class="sparkle sparkle-3" aria-hidden="true">✦</span>
<span class="sparkle sparkle-4" aria-hidden="true">✧</span>
</div>
<div class="wrap">
<header class="bar">
<div class="logo">Lustre OS</div>
<nav>
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#" class="active">Plans</a>
<a href="#">Support</a>
</nav>
</header>
<section class="hero">
<span class="label">⚡ Next-Gen Pricing 2026 ✨</span>
<h1>未来の料金は、<br/>透けて、輝いて、ふわふわ。</h1>
<p class="lede">Lustre OS は次世代のクラウドソフトウェア。あなたのワークフローに、ゆるやかな魔法を。</p>
</section>
<div class="plans">
<article class="plan">
<div class="plan-orb orb-mint" aria-hidden="true">⚡</div>
<h3 class="plan-name">Starter</h3>
<p class="plan-tag">趣味・個人開発の小さな実験に。</p>
<div class="plan-price">
<span class="num">¥0</span>
<span class="cycle">/ Month</span>
</div>
<ul class="plan-features">
<li>1 GB Cloud Crystal</li>
<li>Lustre AI ベーシック</li>
<li>コミュニティサポート</li>
</ul>
<a class="plan-cta" href="#">無料ではじめる</a>
</article>
<article class="plan featured">
<div class="plan-orb orb-rose" aria-hidden="true">✨</div>
<h3 class="plan-name">Pro</h3>
<p class="plan-tag">クリエイターとプロのために。</p>
<div class="plan-price">
<span class="num">¥1,980</span>
<span class="cycle">/ Month</span>
</div>
<ul class="plan-features">
<li>50 GB Cloud Crystal</li>
<li>Lustre AI フルアクセス</li>
<li>カスタム Aero テーマ</li>
<li>メールサポート 24h</li>
</ul>
<a class="plan-cta" href="#">14 日間無料で試す</a>
</article>
<article class="plan">
<div class="plan-orb orb-aqua" aria-hidden="true">💎</div>
<h3 class="plan-name">Studio</h3>
<p class="plan-tag">チーム・スタジオ向け。</p>
<div class="plan-price">
<span class="num">¥9,800</span>
<span class="cycle">/ Month</span>
</div>
<ul class="plan-features">
<li>無制限 Cloud Crystal</li>
<li>カスタムドメイン</li>
<li>SSO / SAML</li>
<li>専任サクセスマネージャ</li>
</ul>
<a class="plan-cta" href="#">問い合わせる</a>
</article>
</div>
<footer class="foot">
© 2026 Lustre OS — designed in 2002, deployed in 2026 ✦
</footer>
</div>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
2000年代初頭、コンピュータは「未来の道具」でした。その高揚を視覚化したのが、Mac OS X の Aqua インターフェイス——つやつやと光るボタン、半透明のクローム、水滴のようなオーブ。Windows XP の草原（Bliss）と、後に Frutiger Aero と呼ばれる、空・水・光に満ちた楽観的な美学。Y2K料金プランは、その「テクノロジーが希望だった時代」の質感を再構築します。
フラットデザインへの揺り戻し
2013年以降、デザインは徹底的にフラット化しました。影もベベルも光沢も削ぎ落とされ、画面は平面に戻った。それから10年以上が経ち、いま揺り戻しが起きています。フラットに慣れた目には、鏡面ベベルや色付きオーブの立体感がむしろ新鮮に映ります。同質化した平面的なSaaSサイトが並ぶ中で、Y2Kの光沢は強烈な記憶のフックになります。
ノスタルジーの二層構造
Y2Kスタイルが面白いのは、世代によって刺さり方が違う点です。30〜40代には「実際に体験した未来」への郷愁として。10〜20代には、生まれる前または幼少期の様式なので「初見のレトロ」として——どちらにも届くが、届き方が違う。この二層性を理解しておくと、ターゲットに応じて演出の強度を調整できます。
崩れる形30〜40代に向けるとき
実際に体験した未来への郷愁として届きます。当時の質感を知っているぶん、作り込みの粗が見抜かれやすいので、光源の一貫性が効いてきます。
効く形10〜20代に向けるとき
生まれる前または幼少期の様式なので、初見のレトロとして届きます。懐かしさではなく新しさとして読まれるぶん、演出は強めでも成立します。
仕上げの判断軸
光沢・ベベル・オーブはCSSのグラデーションと box-shadow で表現でき、画像は不要です。ただし立体表現は「やりすぎ」と紙一重——光源の向きをページ全体で統一し、ハイライトを上、影を下に置く一貫性を守ること。虹色グラデは1〜2箇所のアクセントに留め、全面に使うと玩具的に転びます。
1〜2箇所虹色グラデ。全面に使うと玩具的に転ぶ
上→下光源の向き。ハイライトを上、影を下にページ全体で統一
画像 0光沢もベベルもオーブも CSS だけで表現できる
価格や機能名の可読性は、光沢の下でも必ず確保します。
価格表の構成要素
使いどころ
- レトロブランディングの Web3 / NFT プロダクト
- ノスタルジック志向のクラフトソフトウェア
- ガジェット系 Kickstarter プロジェクト
- インディーゲームの課金ページ
このデザインの分類
背景と狙いどころ
よくある質問
Y2K 風は古臭く見えませんか？
2024 年以降「Frutiger Aero」「Frutiger Bliss」がグラフィックデザイン界で再評価されており、若年層には新鮮に見える表現です。古さを意匠として使う遊びです。
アクセシビリティの落とし穴は？
ベベル / 光沢の表現はテキストコントラストを下げがち。価格・本文は背景に対して AA 以上を必ず確保してください。装飾はテキストの読みやすさを犠牲にしないラインで。
ブラウザサポートは大丈夫？
全部 CSS（box-shadow / radial-gradient / backdrop-filter）で実現可能。Safari / Chrome / Firefox いずれも問題ありません。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。