演出・リッチ
ページの第一印象をつくる、見栄えの演出。
ページの第一印象をつくる、見栄えの演出のカテゴリ。Before/After スライダー、ライトボックス、カーテン遷移、SVG ライン描画、マウス追従パララックス、ベントグリッドとそのホバー拡張、ロゴマーキー、カードスタック、グロウ枠、オーロラ背景、フロストガラスがある。原則は美的ユーザビリティ効果。整った見た目は「使いやすそう」という印象を先に作るが、それは実際の使いやすさの前借りなので、重くなったり操作を隠したりすれば逆に返ってくる。LP やポートフォリオの冒頭で「ちゃんと作られている」と一目で伝えたい場面で引く。
使い分け比較を見せるなら before-after-slider、画像を大きく見せるなら lightbox-zoom、機能の一覧は bento-grid（ホバーで開くなら bento-hover-expand）。背景は aurora-gradient、カードの質感は glow-border-card / frosted-glass-card のどちらか1つ。logo-marquee は実績があるときだけ。
まず見る3件
- ドラッグ
Before/After スライダー解説あり
Before/After Comparison Slider
中央のハンドルをドラッグして2枚の画像を見比べる。加工前後やリフォーム事例の比較に。
- ドラッグ開始は細いハンドルではなく枠全体で受け、setPointerCapture で枠外へ出ても離すまで追従させる
- 境界は clip-path: inset の右側幅だけを動かし、2枚は同じ座標に固定する。ずらすと被写体が千切れて見える
- ハンドルは role=slider にして矢印キーで 2% ずつ動かす。ポインタ専用だと比較そのものに到達できない人が出る
- JS
- クリック
ライトボックス解説あり
Lightbox
サムネイルをクリックすると暗いオーバーレイと拡大表示が現れる。背景か × ボタンで閉じる。
- 拡大枠は1つだけ用意して中身を差し替える。開くたびに DOM を作ると閉じ判定やフォーカス復帰の対象がずれる
- 背景クリックの閉じ判定は e.target === overlay に限る。closest で緩めると画像やキャプションのクリックでも閉じる
- 暗幕はフェード、画像だけオーバーシュート付きの scale で「ポンと出る」質感にする。両方を弾ませると重たい
- JS
- ホバー
ベントグリッド
Bento Grid
大小のタイルを敷き詰めた今風のBentoレイアウト。ホバー/タップで各タイルが浮き上がり、内容がちらっと変化する。
- 2列格子で横長タイル（grid-column: 1/3）を上下に1枚ずつ置く。大小の差がないと Bento ではなくただの表になる
- 浮き上がりは translateY(-4px)＋scale 1.025 をオーバーシュートで。4px を超えると隣と重なり影が濁る
- 補足値は opacity 0 のまま DOM に置き、読み上げには常に乗せる。display:none にすると情報が消える
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| Before/After スライダー Before/After Comparison Slider | ドラッグ | JS | 施工前後・加工前後の写真比較・UIリニューアルの新旧比較 | default / focus |
| ライトボックス Lightbox | クリック | JS | 作品ギャラリー・商品写真の1枚を拡大・ページ遷移せずその場で拡大したいとき | default / hover / focus |
| カーテン遷移 Curtain Page Transition | クリック | JS | ページ・セクション切替の場面転換・ゲーム・ポートフォリオの画面遷移演出 | default / hover / focus |
| SVGライン描画 SVG Line Drawing | クリック | JS | 完了・成功のチェックマーク演出・ロゴ・アイコンの描き順を見せる導入 | default / hover / focus / disabled |
| マウス追従パララックス Mouse Parallax | ホバー | JS | ヒーローの背景に奥行きを与える・ブランド・ゲーム系LPの第一印象 | default |
| ベントグリッド Bento Grid | ホバー | JS | 数値・特徴を大小のタイルで見せる・サービス概要のハイライト一覧 | default / hover |
| ロゴマーキー Logo Marquee | 自動再生 | JS | 導入企業・提携先ロゴの一覧・数が多く一画面に並べきれないロゴ | default / hover / focus |
| カードスタック Swipeable Card Stack | ドラッグ | JS | 好み・興味を1枚ずつ左右で振り分ける・マッチング・レコメンドの選別 | default / hover / focus / active |
| グロウ・グラデ枠カード Animated Gradient Border | 自動再生 | CSSのみ | 新機能・注目プランのカードを目立たせる・ダーク基調のプロダクトサイト | default / hover |
| オーロラ・メッシュ背景 Aurora Gradient Background | 自動再生 | CSSのみ | ヒーローセクションの背景・WebGL を使わずリッチな背景を敷きたい | default |
| フロストガラスカード Glassmorphism Card | 静的 | CSSのみ | 写真・色面の上に置く情報カード・背景を透かしつつ文字を読ませたい | default |
| ホバー拡張ベント Expanding Bento Grid | クリック | JS | 3つの特徴をホバーで詳しく見せる・限られた高さで説明を出し入れする | default / hover / focus |
すべての見本（12件）
- ドラッグ
Before/After スライダー解説あり
Before/After Comparison Slider
中央のハンドルをドラッグして2枚の画像を見比べる。加工前後やリフォーム事例の比較に。
- JS
- クリック
ライトボックス解説あり
Lightbox
サムネイルをクリックすると暗いオーバーレイと拡大表示が現れる。背景か × ボタンで閉じる。
- JS
- クリック
カーテン遷移
Curtain Page Transition
ボタンを押すと色面がスライドして画面を覆い、めくれて次の内容が現れる。ページ切り替え演出の定番。
- JS
- クリック
SVGライン描画
SVG Line Drawing
SVG パスが stroke-dashoffset アニメーションで描かれていく。ロゴやチェックマーク演出に。
- JS
- ホバー
マウス追従パララックス
Mouse Parallax
マウス位置に応じて背景・中景・前景の3層が異なる量で動き、自然な奥行きが生まれる。
- JS
- ホバー
ベントグリッド
Bento Grid
大小のタイルを敷き詰めた今風のBentoレイアウト。ホバー/タップで各タイルが浮き上がり、内容がちらっと変化する。
- JS
- 自動再生
ロゴマーキー
Logo Marquee
ダミーのロゴバッジが横へ無限スクロール。2セット並べてシームレスループ。ホバーか停止ボタンで一時停止。
- JS
- ドラッグ
カードスタック
Swipeable Card Stack
Tinder風の重なったカード。最前面をドラッグで左右にスワイプするか👍/👎ボタンで送れる。Pointer Events対応でPC/スマホ両対応。デモ用に5枚のカードを無限ループさせており、最後まで送ると先頭へ戻って繰り返します。
- JS
- 自動再生
グロウ・グラデ枠カード
Animated Gradient Border
枠を光のグラデーションがぐるぐる回る、Linear風のカード。@property で角度を滑らかにアニメーションし、ホバーで一段まぶしくなる。
- CSSのみ
- 自動再生
オーロラ・メッシュ背景
Aurora Gradient Background
ゆっくり漂う光の塊が溶け合う、オーロラ風のアニメ背景。WebGL不要、ぼかした放射グラデだけで作るリッチなヒーロー背景。
- CSSのみ
- 静的
フロストガラスカード
Glassmorphism Card
背景をぼかして透ける、ノイズ入りの曇りガラスカード。半透明＋微粒子＋やわらかい縁取りで、進化したグラスモーフィズム。
- CSSのみ
- クリック
ホバー拡張ベント
Expanding Bento Grid
ベントグリッドのタイルにカーソルを乗せると、その列がぐっと広がって隠れた説明が現れる。CSSの :has() だけで作るモダンなベント。
- JS