ホバーしたとき、何かが「覆ってくる」演出はスライドフィルとは少し違います。スライドフィルが一方向に塗り広がるのに対して、カーテン系のエフェクトは「劇場の幕が両側から閉じる」「ロールスクリーンが上から降りてくる」「シャッターが左右から閉まる」といった、より立体的な動きの比喩を持ちます。見た人が思わず「あ、動いた」と感じる瞬間が明確にあって、その一瞬がボタンへの注目を引き出します。コーポレートサイトのCTAから、ポートフォリオのナビゲーション、演劇・エンタメ系のLPまで、幅広いコンテキストで使えるテーマです。
この記事では、translateXで左右から幕が閉じるステージカーテン、widthのトランジションで中央から広がるセンターワイプ、clip-path: inset()でロールスクリーンが降りるブラインドロール、scaleXでシャッターが両側から閉まるダブルシャッター、clip-path: polygon()で左端から斜めに広がるコーナースウィープの5本を紹介します。JavaScriptなし、HTMLとCSSのみで動作します。WordPress/SWELLでもそのままコピペで使えます。
Stage Curtain（ステージ・カーテン）
左右の端から2枚の幕が中央に向かって閉じてくるパターンです。::beforeと::afterに各50%幅のブロックを作り、通常時は左右にそれぞれtranslateX(-102%)とtranslateX(102%)で画面外に待機させ、ホバーでtranslateX(0)に戻ることで幕が閉じる動きを実現しています。深みのある赤のベース色に、さらに暗い暗紅色の幕が重なる配色が、劇場幕のテクスチャーと雰囲気を作ります。
cubic-bezier(0.77, 0, 0.175, 1)は一気に加速してから強めに減速するイージングで、幕が引き込まれる勢いが出ます。幕が重なる位置が中央でぴったり合うよう、::beforeと::afterにそれぞれwidth: 52%を設定しています（50%ではなく52%なのは、中央に隙間が出ないようにするためです）。エンタメ・イベント系サイトのメインCTA、プロモーション系のランディングページに最もよく合うデザインです。
See the Pen Stage Curtain by BaseKENT (@basekent) on CodePen.
調整方法
- 幕の色:
::before/::afterのbackgroundを変えます。#1e3a5f（ネイビー）にすると格式あるシアター風、#1a1a1a（ブラック）にするとシックなモダン幕になります - 閉じる速度:
transition: transform 0.45sの秒数を変えます。0.3sでパッと閉まり、0.6sでゆっくり重厚に閉じます - ピルボタン化:
border-radius: 50pxを追加すると、丸みのある幕スタイルになります（overflow: hiddenは既に設定済みです）
Center Wipe（センター・ワイプ）
::beforeのwidthが0から110%に広がる、中央から左右に塗り広がるパターンです。::beforeにleft: 50%; transform: translateX(-50%)を設定することで、常に中央を基点として左右対称に広がります。シンプルな実装ながら、「中心点から何かが生まれる」という感覚が視覚的に伝わります。トランスペアレントなボーダーのみのボタンが、ホバーで塗りつぶされるコントラストが鮮やかです。
スライドフィルが「一方向から流れてくる」感覚だとすれば、Center Wipeは「中心から爆発するように広がる」感覚です。幅110%にしているのは、角丸ボタンに適用したときに端が塗り残しにならないようにするためです。z-index: -1を使って疑似要素をテキストの後ろに配置しているため、テキストが常に見える状態を保てます。コーポレートサイトのCTAボタンや、SaaSのサインアップボタンなど、汎用性が高い実用的なデザインです。
See the Pen Center Wipe by BaseKENT (@basekent) on CodePen.
調整方法
- 塗り色:
background: #3b82f6（ブルー）を変えます。ブランドカラーに合わせるだけで即使えます - 広がり速度:
transition: width 0.4sを変えます。0.25sでキビキビとした反応、0.6sでゆっくり広がります - ボーダーを消す:
border: noneにしてbackground: #1e293bなどのソリッドな背景色にすると、フィルのみのシンプルなスタイルになります
Blind Roll（ブラインド・ロール）
clip-path: inset(0 0 100% 0)（上から全部カット）からclip-path: inset(0 0 0% 0)（カットなし）へのトランジションで、ロールスクリーンが上から降りてくるパターンです。clip-path: inset(上 右 下 左)の「下」の値が100%から0になることで、::beforeが上から順に見えてくる動きを作ります。スライドフィルの左右方向とは違い、上から被せるように塗り広がるため、「幕が降りる」という比喩が一番直接的に伝わるデザインです。
グリーンのフィル色がダークなボタン背景に降りてくる組み合わせは、「起動する」「アクティブになる」という印象を与えます。テック系・SaaS系のダッシュボードUIや、管理画面のアクションボタンとして使いやすいデザインです。clip-pathのトランジションはChrome/Firefox/Safari/Edgeすべてで対応済みで、実務で安心して使えます。
See the Pen Blind Roll by BaseKENT (@basekent) on CodePen.
調整方法
- 降りる方向を逆にする:
clip-path: inset(100% 0 0 0)からinset(0 0 0 0)にすると、下から上に持ち上がるように塗り広がります - フィル色:
background: #10b981（グリーン）を変えます。#f59e0b（アンバー）にするとウォーム系の降幕になります - 速度:
transition: clip-path 0.45sの秒数で調整します
Double Shutter（ダブル・シャッター）
::beforeと::afterがそれぞれtransform-origin: left centerとtransform-origin: right centerを持ち、scaleX(0)からscaleX(1)に展開することで、左側のシャッターが左端から、右側のシャッターが右端から閉まってくるパターンです。2枚のシャッターが中央でぴったり合わさる動きが、金属製シャッターの閉まる瞬間を想起させます。ダークグレーの重厚な配色と、letter-spacingを広めに取った大文字テキストが、工業的なシャッターの質感を強めています。
scaleXを使った実装はtranslateXと比べてコードが少なくシンプルです。transform-originを変えることで「どちら側から閉まるか」が変わります。現在の設定では左シャッターが左端から、右シャッターが右端から中央に向かって閉まりますが、両方のtransform-originをleft centerにすると、2枚が同じ方向から閉まる演出になります。セキュリティ系、ブロックチェーン系、工業・製造業系サイトのCTAと相性が良いデザインです。
See the Pen Double Shutter by BaseKENT (@basekent) on CodePen.
調整方法
- シャッターの色:
background: #374151（ダークグレー）を変えます。#1e3a5f（ネイビー）にすると金属製シャッターから防弾ガラス風に変わります - 閉まる方向:
::beforeのtransform-originをright centerに、::afterのtransform-originをleft centerに変えると、2枚が中央から外側に向かって開くアニメーションになります（ホバーで開くスタイル） - 速度:
transition: transform 0.4sを変えます。0.2sでシャキッと閉まり、0.6sでゆっくり閉まります
Corner Sweep（コーナー・スウィープ）
clip-path: polygon()を使い、左端の縦一線から右方向へ塗り広がるパターンです。通常時はpolygon(0 0, 0 0, 0 100%, 0 100%)（左端の線）から、ホバーでpolygon(0 0, 100% 0, 100% 100%, 0 100%)（全面）に広がります。単純に左から右へスライドするのではなく、ポリゴンの4頂点が同時に動くため、台形的に広がる動きになり、スライドフィルとは少し異なる視覚リズムを持ちます。
パープル系の配色は、クリエイティブ系・デザイン系・ポートフォリオのCTAに自然に馴染みます。clip-path: polygon()はパスの形を自由に変えられるため、今回のような矩形の広がりだけでなく、斜めに切れ込む形や菱形に広がる形など、デザインの幅を広げることもできます。モダンブラウザ全対応で、実務での使用に問題ありません。
See the Pen Corner Sweep by BaseKENT (@basekent) on CodePen.
調整方法
- 広がる方向を右から左に変える: 通常時を
polygon(100% 0, 100% 0, 100% 100%, 100% 100%)にすると、右端から左へ広がります - フィル色:
background: #7c3aed（パープル）を変えます。ブランドカラーを直接指定できます - 斜めに広がる形にする: ホバー時を
polygon(0 0, 105% 0, 100% 100%, -5% 100%)に変えると、わずかに斜めにカットされた広がり方になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
