LANDING PAGE SHOWCASE

同じHTMLから、7業種。

セクション構造もCSS変数の数も完全に同一のHTMLから、色・書体・角丸を決める値と、 写真とコピーだけを差し替えて作った7本です。ブランドごとに異なるアニメーションを実装しています。

48CSS変数(全本共通)
0HTML構造の変更
7ブランド

すべて架空のブランドです。実在の企業・店舗・商品とは一切関係ありません。 作例として制作したもので、掲載されている価格・住所・連絡先はダミーです。 スマートフォンでの閲覧を推奨します。

BLOOM!
グリッチ × 円形マスク

BLOOM!

コスメ / Y2K

RGB分離とスライスで被写体そのものが壊れる。幕は交互に左右へ抜ける。

AQUA CHARGE
斜めクリップ × 水位イントロ

AQUA CHARGE

スポーツドリンク

水位が満ちて引き、写真が現れる。白いパーティクルが常時上昇。

DASH
ストライプ帯 × 数字巨大化

DASH

ランニング

斜め帯と120pxの連番。0.1秒を獲りにいく速度感。

N O I R
段階露光 × 光の帯

N O I R

ファインジュエリー

暗闇から4.2秒かけて露光。光の帯が2本、ダイヤの上を通過する。

HELLO POP
実体シャドウ × 4列タイル

HELLO POP

雑貨ストア

黒枠と5pxのオフセット影。押すと沈む立体感。

SUNDAY GRILL
アーチ型 × 自然光

SUNDAY GRILL

BBQ・キャンプ

森の緑を主役に。アーチ型マスクで抜けを作る。

結 — MUSUBI —
縦組み × 金の額装

結 — MUSUBI —

和モダンダイニング

墨色に金箔。カウンター八席の小さな店。イントロは墨幕が3分割で引く。