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

y2k webデザインとは？クロムとホログラフィックのLPパーツ9選

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

デザイントレンドページテンプレートCSSのみLPヒーローCTAボタン

y2k webデザインとは、2000年代のCDやホログラム包装紙にあったクロムの輝きと虹色の反射を、CSSだけで蘇らせるスタイルです。CDの裏で虹色ににじんでいたあの光が、今度はボタンや見出しの中に入ってきました。

9個のうち1つは、ホログラフィック デザインの反射をカードではなく回転するアバターの縁に使っています。下にまとめたワンページをまず一度スクロールして、クロムの見出しがどこで明るくなりどこで沈むかを見てください。

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

ワンページの下には、9個の部品を切り離して格子にも並べ直しました。

クロム見出しヒーロー01 hero-chrome ブラッシュドメタルナビ02 nav-chrome ホログラフィック箔カード03 card-grid-chrome クロムボールアイコン04 feature-list-chrome 強調プランのホログラフィック05 pricing-chrome CDリングアバター引用06 testimonial-chrome ブラッシュドアルミCTA帯07 cta-band-chrome ホログラフィック罫線フッター08 footer-chrome クロムボタン・ホログラフィックフォーカス09 buttons-inputs-chrome

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

並び順は人気順ではありません。目を引かれ、機能を確かめ、価格を見て、他の人の声を信じ、最後にボタンを押す——訪問者が実際にたどる順番のままです。同じdesign柱で光沢を削ぎ落とし直角の影だけを残したのがネオブルータリズム UI キットで、同じ金属質を計器盤の方向へ押し進めたのがHUD デザインのパーツです。

01クロム見出しヒーロー

何が動くか

見出しの文字をbackground-clip: textで切り抜き、その中で白→クリーム→黄→青→オレンジ→白と続く6段グラデーションがbackground-positionだけを動かして流れます。

クロム見出しヒーロー
新しいタブで開く

01 · クロム見出しヒーロー — 計測 累積面積 1.539% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-clip: text다중 stop gradientbackground-position 스윕

コードで見る所

文字そのものには色を塗らず、グラデーションを文字の形の窓として使うだけです。

.hero-c__title {
  background: linear-gradient(100deg,
    $stage-paper 0%, rgba($stage-paper, .35) 14%, $subject-cream 28%,
    $stage-yellow 40%, $color 52%, $stage-orange 64%,
    $stage-paper 80%, rgba($stage-paper, .4) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chromeFlow $duration $easing infinite;
}
@keyframes chromeFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}

02ブラッシュドメタルナビ

何が動くか

メニューバーの背景はインク色の濃淡が交互に並ぶグラデーションでブラッシュドメタルの質感を作り、その上を細い白の光の筋がleftの値だけで左から右へ通り過ぎます。

ブラッシュドメタルナビ
新しいタブで開く

02 · ブラッシュドメタルナビ — 計測 累積面積 9.886% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

linear-gradient(100deg라인 스윕 하이라이트pill 인디케이터

コードで見る所

現在地のメニューは背景をわずかに明るくするだけで、それ自体は動きません。

.nav-c::after {
  content: "";
  position: absolute;
  top: 0; left: -20%; width: 14%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba($stage-paper, .55), transparent);
  animation: glint $duration linear infinite;
}
@keyframes glint { 0% { left: -20%; } 100% { left: 106%; } }

03ホログラフィック箔カード

何が動くか

カードの表面にmix-blend-mode: overlayでホログラフィック箔の帯を重ね、background-positionを対角線方向に流します。

ホログラフィック箔カード
新しいタブで開く

03 · ホログラフィック箔カード — 計測 累積面積 10.607% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

대각선 foil 스윕mix-blend-mode: overlayhover 승격

コードで見る所

ホログラムシールを実際に傾けたときに見える虹色の反射を再現したもので、カード自体は濃いインク色に固定して反射だけが際立つようにしています。

.card-c::after {
  content: "";
  position: absolute;
  inset: -30% -10%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .8;
  background: repeating-linear-gradient(115deg,
    transparent 0 18px,
    rgba($color, .55) 18px 30px,
    rgba($stage-yellow, .55) 30px 42px,
    rgba($subject-cream, .6) 42px 54px,
    transparent 54px 72px);
  background-size: 200% 200%;
  animation: foilSweep $duration linear infinite;
}

04クロムボールアイコン

何が動くか

アイコンバッジそれぞれに、光源が左上に固定されているように見えるradial-gradientの球体を乗せ、そのハイライトの位置だけをゆっくり動かして光源が表面を回っているように見せます。

クロムボールアイコン
新しいタブで開く

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

radial-gradient 구슬고정 하이라이트 점radius pill

コードで見る所

3つのアイコンは同じキーフレーム1つを共有しています。

.feat-c__icon {
  background: radial-gradient(circle at 30% 30%, $stage-paper, $color 40%, $stage-ink 82%);
  background-size: 280% 280%;
  animation: ballShine $duration steps(8, jump-none) infinite;
}
@keyframes ballShine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 180% 180%; }
}

05強調プランのホログラフィック

何が動くか

おすすめプランのカードにだけ5色グラデーションの背景を敷き、background-positionで流すことで、比較表がなくてもどのプランを推しているか一目で伝わります。

強調プランのホログラフィック
新しいタブで開く

05 · 強調プランのホログラフィック — 計測 累積面積 15.662% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-position 이동다색 gradient강조 카드 확대

コードで見る所

通常プランはマットなグレーのまま残してコントラストを作ります。

.pricing-c__plan--pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, $color, $stage-yellow, $stage-orange, $subject-cream, $color);
  background-size: 320% 100%;
  animation: holoShift $duration linear infinite;
}
.pricing-c__plan--pro .pricing-c__name { color: $stage-ink; }

06CDリングアバター引用

何が動くか

引用カードの横に並ぶアバターが、CDの縁のようにゆっくり回るconic-gradientのリングの中に収まります。

CDリングアバター引用
新しいタブで開く

06 · CDリングアバター引用 — 計測 累積面積 0.397% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

conic-gradient 회전 링아바타 원형느린 회전

コードで見る所

maskでリングの形だけを切り出し、内側のアバターの丸と自然に重なるようにしています。

.test-c__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient($color, $stage-orange, $subject-cream, $stage-ink, $color);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: cdSpin $duration linear infinite;
}
@keyframes cdSpin { to { transform: rotate(360deg); } }

07ブラッシュドアルミCTA帯

何が動くか

画面幅いっぱいの帯の上を、半透明のクリーム色と白の斜めストライプが2組background-positionで流れ、ブラッシュドアルミが光を受けながら通り過ぎる瞬間を再現します。

ブラッシュドアルミCTA帯
新しいタブで開く

07 · ブラッシュドアルミCTA帯 — 計測 累積面積 36.008% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

대각선 라이트 밴드background-position 애니메이션metallic 버튼

コードで見る所

帯全体が被写体になるため、この編の中で変化するピクセル面積が最も広い項目です(36.01%)。

.cta-c::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba($stage-ink, 0) 0 60px,
    rgba($color, .28) 60px 70px,
    rgba($stage-ink, 0) 70px 160px,
    rgba($stage-paper, .22) 160px 172px,
    rgba($stage-ink, 0) 172px 260px);
  background-size: 220% 100%;
  animation: bandSweep $duration linear infinite;
}

08ホログラフィック罫線フッター

何が動くか

フッター上端の境界に3pxの細い線を引き、その中に4色グラデーションを敷いてbackground-positionで流します。

ホログラフィック罫線フッター
新しいタブで開く

08 · ホログラフィック罫線フッター — 計測 累積面積 0.733% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

보더 그라디언트 라인shimmer 애니메이션4열→2열

コードで見る所

線自体が細いため変化するピクセル面積はこの編で最も小さい項目です(0.73%)が、色の対比がはっきりしているぶん目にはくっきり光って見えます。

.footer-c::before {
  content: "";
  position: absolute;
  top: 0; left: $sp-6; right: $sp-6; height: 3px;
  border-radius: $r-pill;
  background: linear-gradient(90deg, $color, $stage-yellow, $stage-orange, $subject-cream, $color);
  background-size: 260% 100%;
  animation: hairlineShift $duration linear infinite;
}

09クロムボタン・ホログラフィックフォーカス

何が動くか

ボタンを押すと、上にあった明るいハイライトが下へ反転し、実際の金属が押し込まれるような感触を生みます。

クロムボタン・ホログラフィックフォーカス
新しいタブで開く

09 · クロムボタン・ホログラフィックフォーカス — 計測 累積面積 1.061% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

box-shadow 반전press 하이라이트 플립focus glow 그라디언트

コードで見る所

入力欄は動かず、青・黄・オレンジの3色box-shadowグローがいつも静かに光っています。

.bi-c__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba($stage-paper, .9), transparent 55%);
}
.bi-c__btn:hover::after, .bi-c__btn:focus-visible::after {
  animation: pressFlip $duration $ease-out infinite;
}
.bi-c__input {
  box-shadow: 0 0 0 2px rgba($subject-blue, .5), 0 0 16px rgba($stage-yellow, .4), 0 0 22px rgba($stage-orange, .3);
}

tailwind.config カスタム

9個の部品が共有する色と半径の値はこの設定1つだけにまとまっているので、ここで色を変えれば全部まとめて追従します——ただし1つだけ例外があります。backgroundImage.chromeユーティリティは上のcolorsを参照せず、同じ6つのhex値をリテラルのまま書いているため、colorsだけを直してもこのユーティリティは自動では変わりません。色を変えるたびにこの2箇所を一緒に直す必要があります。

theme: {
  extend: {
    colors: {
      ink: "#17141a", cream: "#fff7e6", paper: "#ffffff",
      blue: "#2f6df6", yellow: "#ffd23f", orange: "#ff4d1f",
    },
    borderRadius: { tile: "16px", control: "12px", pill: "999px" },
    backgroundImage: {
      chrome: "linear-gradient(100deg, #ffffff, #fff7e6, #ffd23f, #2f6df6, #ff4d1f, #ffffff)",
    },
  },
},

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

上の設定を先にプロジェクトへ入れておけば、あとはClaude CodeやCursorに下の断片を渡すだけで画面がこのスタイルに変わります。プロンプトの全文はzip内のprompt.mdに入っています。

見出しは background-clip: text で文字の形だけ残し、白→クリーム→黄→青→
オレンジ→白の6段グラデーションを background-position のアニメーションだけで
流す。
カード表面のホログラフィック帯は mix-blend-mode: overlay で、インク色の
カードにだけ重ねる。
ボタンを押すとハイライトが上から下へ反転する感触を出す。

この断片を実際にpage/index.htmlへ適用し、1280px幅のビューポートでページ全体をキャプチャした結果が下のスクリーンショットです。

結果

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

y2k デザイン、どこで壊れるか？

クロム・ホログラフィック効果は、曲線が滑らかすぎるとかえって動いていないように測定されます。04番のクロムボールアイコンを最初にease-outで往復させて作ったところ、レンダー測定の強度が14.6で、通過基準(15)にわずか0.4足りませんでした。タイミングを8段階のsteps(8, jump-none)に変え、動く範囲も広げたところ、強度は96.2まで上がりました——階段状にはっきり切り替えないと、フレームごとの差が測定に乗らないということです。06番のCDリングアバターは別種の落とし穴でした。アバターと引用カードを縦に積んだところ、幅320pxの画面で縦にはみ出してしまい(測定値もそのまま「はみ出しあり」)、2つを横に並べ直してようやく狭い画面でもスクロールバーなしに収まりました。クロムグラデーションをメール本文へ移すとどこまで残るかは、メルマガ デザイン9種のほうで別に確かめています。9個の部品とワンページ全体のソースをまとめた圧縮ファイルは、開くときにパスワードhxqy3hr4が必要で、ボタンを押せばすぐダウンロードが始まります。

最後の落とし穴は抑制です。9個すべてに同時にグラデーション・回転・グローを入れると、画面は輝いて見えるのではなくうるさく見えます。クロム効果は画面の中で1〜2箇所だけに絞り、残りはインク色のマットのまま沈めておくと、光る場所がはっきり際立ちます。

アクセシビリティ

押さえた点

09番ボタンのハイライト反転を含め、01・02・03・04・05・06・07・08番のグラデーションの流れや回転はすべてMDNのprefers-reduced-motionドキュメントが定義するメディアクエリで包んでおり、動きを減らす設定をオンにした訪問者には静止したグラデーションだけが見えます。06番のようにmask-compositeでリング状に切り出す項目はMDNのmask-compositeドキュメントを参考に、旧サファリ向けの-webkit-mask-compositeもあわせて指定しています。見出しやボタンの文字は、グラデーションが流れている間も常にインク色の背景に明るい文字、または明るい背景にインク色の文字という組み合わせを保ち、コントラストが崩れないようにしています。

次に見る所

クロム以外の流行スタイルも見てみたい方はデザイントレンドカテゴリーに他の編がまとまっており、このサイト全体の性格は紹介ページで確認できます。

FAQ

y2k デザイン 作り方として、クロム・ホログラフィック効果はCSSだけで作れますか?

作れます。この9個の部品にJavaScriptは1行も使っていません。09番ボタンの押し込み反応さえ:hover・:focus-visibleの2つの疑似クラスだけで組んであり、スクリプトはgifやmp4でデモを収録するときにアニメーションを強制的に再生させる道具の中だけに登場します。

クロムグラデーションの文字はどのブラウザでも表示されますか?

background-clip: textは最近のブラウザではおおむね対応していますが、-webkit-background-clipも併記しておくと旧サファリや一部のモバイルブラウザで安全です。対応状況はcaniuseで確認でき、未対応環境向けにcolorのフォールバックを用意しておくと文字が消えずに済みます。

ホログラフィックのカード効果は明るい背景でも使えますか?

グラデーション自体は明るい背景でも使えますが、この編のmix-blend-mode: overlayによる箔の帯は濃いインク色のカードを前提にコントラストを作っています。明るい背景では混合モードをmultiplyかsoft-lightに変え、帯の不透明度を下げないと文字のコントラストが崩れます。明るい地の上に声のカードを置く形だけを集めたのがお客様の声 デザインの型9選です。

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

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