壊れているのに、美しい。そういうデザインがあります。CRTモニターのノイズ、データ破損した画像のRGBズレ、デジタル信号が乱れたときの走査線——本来は「エラー」であるはずのそれらが、Webデザインの文脈では「個性」として機能します。グリッチ（Glitch）エフェクトは、2010年代のゲーム文化・サイバーパンク美学を経て、2026年現在もテクノロジー系・エンタメ系・ポートフォリオサイトで強い訴求力を持つ表現技法です。
この記事では、グリッチ系のCSSボタンを5パターン紹介します。すべてCSSのみで実装しており、JavaScriptは不要。RGB分離・スライス・テキスト振動・走査線・砂嵐ノイズと、グリッチの表情ごとにデモを揃えました。WordPressやSWELLにもコピペで使えます。「壊れている感」を武器に変えたいデザインに、ぜひ。
RGB Split（RGBスプリット）
グリッチデザインの象徴的な表現。ホバーすると、テキストがマゼンタとシアンの2色に分離し、不規則な横ズレを繰り返します。text-shadow でマゼンタ（#f0f）とシアン（#0ff）の影をオフセットし、@keyframes でその位置をランダムに変化させる仕組みです。RGBチャンネルが別々に記録されたアナログ映像が乱れたときの「色ずれ」を、CSSだけで再現しています。
実装がシンプルながら視覚的インパクトが大きく、テクノロジー系・音楽系・サイバー系サイトのメインCTAに自然に溶け込みます。モノクロ基調（黒背景・白文字・白ボーダー）のレイアウトに置いたとき、マゼンタとシアンの分離色が最も際立ちます。アニメーションが forwards で完結し、ホバーを外すとフラットに戻る設計なので、繰り返しホバーしても不自然さがありません。
See the Pen RGB Split by BaseKENT (@basekent) on CodePen.
調整方法
- 分離色の変更:
text-shadowの#f0f（マゼンタ）と#0ff（シアン）を変更することで、赤/青のズレや金/緑のズレに変えられます。#f44 / #4f4にするとより暖色系のグリッチになります - ズレの幅:
@keyframes rgb-splitの各フレームのオフセット値（-7px,9pxなど）を大きくするほど激しい分離に、小さくすると控えめなグリッチになります - アニメーション速度:
animation: rgb-split 0.5s ease forwardsの0.5sを短くするとより瞬間的なフラッシュに、長くするとゆっくりした崩壊感になります
Slice Glitch（スライス・グリッチ）
ホバーすると、ボタンが上下2枚に切断され、それぞれが逆方向に飛ぶように横ズレします。::before で上半分（clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%)）、::after で下半分をクリップし、それぞれに逆方向の translateX アニメーションをかける設計です。2枚のスライスが互いに引き裂かれ、アニメーション末尾に opacity: 0 で消えるため、ホバーが一瞬の「切断事故」のように見えます。
サイバーパンク・ゲーム系サイトで「スタート」「Enter」「PLAY」といったアクションボタンとして置いたとき、「押すと何かが始まる」という感覚を演出できます。ネオングリーン（#39ff14）の発色が黒背景に映え、クリエイティブ系ポートフォリオのCTAとしても機能します。スライスの切れ目位置は clip-path の 48% / 52% の値を変えることで調整できます。
See the Pen Slice Glitch by BaseKENT (@basekent) on CodePen.
調整方法
- 切断位置の変更:
::beforeのclip-pathの48%と::afterの52%を調整することで切断線の位置が変わります。33%/67%にすると1/3位置での切断になります - ズレのステップ感:
animation: slice-top 0.45s steps(4) forwardsのsteps(4)をsteps(2)にするとよりカクついた動きに、linearにするとなめらかなズレになります - ボタンカラー:
.btn { color: #39ff14; border-color: #39ff14 }と::before・::afterのcolorを同じ色に統一することでどんなカラーにも対応できます
Text Shake（テキスト・シェイク）
テキストが激しく左右に揺れて振動する、最もシンプルなグリッチ表現。skewX と translateX を組み合わせた @keyframes text-shake で、傾き→反傾き→戻りの連鎖を10フレームで表現しています。振幅が9度→3度へと徐々に減衰するよう設計されているため、「衝撃→収束」の物理的なリアリティが生まれます。JavaScriptどころかポジション指定すら不要な、最軽量のグリッチ実装です。
赤のソリッドボタンとの組み合わせが視覚的に最も強く、「WARNING」「DANGER」「ALERT」といったコンテキストを持つ場面、または「クリックに対する緊張感」を演出したいCTAに向いています。常時アニメーションではなくホバー時のみ発動するため、ページのパフォーマンスへの影響もありません。
See the Pen Text Shake by BaseKENT (@basekent) on CodePen.
調整方法
- 揺れの激しさ:
@keyframes text-shakeの最初のフレームskewX(-9deg) translateX(-4px)の数値を大きくすると激しく、小さくするとソフトな振動になります - アニメーション速度:
animation: text-shake 0.45s ease forwardsの0.45sを0.25sにするとほぼ瞬間的な振動に、0.8sにするとゆっくりした揺れになります - 背景色:
background: #ff2200を任意の色に変更できます。グリッチ感はボタン色に関係なく機能しますが、コントラストの高い原色系との相性が特によいです
Scan Line（スキャン・ライン）
ボタン上を、CRTモニターの走査線が流れ続けます。repeating-linear-gradient で微細な横縞模様（3pxごとの薄い水平ライン）を作り、@keyframes scan-flow で上から下へゆっくり動かしています。ライン自体は半透明（rgba(122, 173, 255, 0.07)）で、背景テキストを隠さず「映像越しに見ている」ようなテクスチャ感を与えます。
ホバー時のみ opacity: 1 になり走査線が現れる設計で、通常状態はフラットなボタンとして機能します。ブルー系の配色（#0f0f2e 背景 + #7aadff テキスト）は「古いモニターに映ったデータ」のような印象を与え、ゲーム系・SFテーマ・テクノロジーダッシュボードのUIに自然に溶け込みます。repeating-linear-gradient のラインピッチは background の 2px / 3px の値を変えることで調整できます。
See the Pen Scan Line by BaseKENT (@basekent) on CodePen.
調整方法
- 走査線の密度:
repeating-linear-gradientの2px（透明区間）と3px（ライン）の数値を変更します。4px / 5pxにするとより粗い走査線に、1px / 2pxにすると繊細な横縞になります - 走査線の色と透明度:
rgba(122, 173, 255, 0.07)の色と不透明度を変えられます。rgba(255, 255, 255, 0.05)にすると白い走査線に、数値を上げると線が目立つようになります - スクロール速度:
animation: scan-flow 1.4s linear infiniteの1.4sを小さくすると速く流れ、大きくするとゆっくり流れます
Static Noise（スタティック・ノイズ）
テレビの砂嵐。ホバーすると、ボタン上にランダムなノイズテクスチャが断続的に明滅します。SVGの <feTurbulence> フィルターをデータURIとして background-image に埋め込み、mix-blend-mode: overlay でボタン本体に重ねています。@keyframes static-flicker の steps(3) で滑らかに変化せずカクついた点滅になり、電気系統のノイズが入ったような「アナログな乱れ」が生まれます。
このデモの最大の特徴は、外部リソースゼロでノイズテクスチャを生成している点です。SVGフィルターのみで動作するため、画像ファイルも不要。5本の中で最も「CSS変わり種」な実装で、テクノロジー系・インディーゲーム系・グランジ寄りのエッジなデザインに向いています。feTurbulence の baseFrequency を変えるとノイズの粒度が変わり、印象が大きく変化します。
See the Pen Static Noise by BaseKENT (@basekent) on CodePen.
調整方法
- ノイズの粒度: SVGの
baseFrequency='0.85'の値を大きくするとより細かい砂状のノイズに、小さく（例:0.3）するとなめらかな大きな揺らぎになります - ノイズの強度:
@keyframes static-flickerの各フレームのopacity値を上げるとノイズが濃くなります。0.3 / 0.8 / 0.5などに変えて好みの明滅感を出してください - ブレンドモード:
mix-blend-mode: overlayをscreenに変えると明るめのノイズに、multiplyにすると暗めに沈む質感になります。背景色との組み合わせで最適なモードが変わります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
