グリッチ文字ジェネレーター

Bogdan Sandu (EN) 著 · 公開 2025 年 6 月 9 日 · 最終更新日 2026 年 9 月 13 日

このグリッチテキスト生成ツールは、1行のテキストをCSSによるグリッチアニメーションに変換し、再現に必要なHTMLとCSSを出力します。処理はすべてブラウザ内で完結し、データはアップロードされません。

設定できる内容:

• 5 つの影響: 色のグリッチ、デジタル ウェーブ、スクランブル、ネオン パルス、データ破損
• テキストと 20 ピクセルから 200 ピクセルまでのフォント サイズ スライダー
• 4 色: 背景、テキスト、および 2 つのグリッチ カラー (それぞれにピッカーと 16 進フィールドが付いています)

設定を変更すると、プレビューがアニメーション化されます。その下のコード パネルも同時に更新され、コピーすると HTML と CSS がワンクリックでクリップボードに配置されます。

このグリッチ テキスト ジェネレーターの使用方法

1. グリッチ効果ドロップダウンから効果を選択します。
2. テキストを入力します。この効果によりテキストが 2 つのオフセット レイヤーに複製されるため、大きなサイズの短い単語が最もよく読み取れます。
3. フォント サイズ スライダーをドラッグし、4 つの色を選択します。 2 つのグリッチ カラーは、グローを設定する Neon Pulse を除くすべてのエフェクトでカラー分割レイヤーを駆動します。
4. プレビューを確認し、コピーをクリックします。テキストを表示する HTML と <style> ブロックをページまたはスタイルシートに貼り付けます。
5. [リセット] をクリックしてデフォルトに戻します。

デフォルト設定では、HTML は次のようになります。

<div class="gsw-glitch-wrapper" style="background-color: #1A1F2C;">
  <div class="gsw-glitchWithColor"
       data-text="Glitchy Text"
       style="font-size: 80px; color: #F2FCE2; --glitch-color-1: #8B5CF6; --glitch-color-2: #D946EF;">
    Glitchy Text
  </div>
</div>

data-text 属性が重要です。オフセット レイヤーは、そこからコンテンツを読み取る ::before および ::after 擬似要素であるため、後でテキストを変更する場合は、属性も変更してください。

付属の CSS には、ラッパー ルール、.gsw-glitchWithColor ルール、およびそれらが使用する 3 つのキーフレーム アニメーションが含まれています。トリミングされたメインのものは次のとおりです。

.gsw-glitchWithColor {
  text-shadow:
    0.05em 0 0 var(--glitch-color-1),
    -0.05em -0.025em 0 var(--glitch-color-2),
    -0.025em 0.05em 0 var(--glitch-color-1);
  animation: gsw-glitch 500ms infinite;
}

.gsw-glitchWithColor::before {
  left: 0.05em;
  text-shadow: -0.05em 0 var(--glitch-color-1);
  animation: gsw-noise-1 3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

効果は 3 つの要素から構築されています: カラー分割の text-shadow (EN)、クリップパス (EN) スライスと、それらを移動するための @keyframes (EN) です。コードをプロジェクトに追加したら、任意のコードを編集できます。

ツールでできないこと

• 速度や強度のスライダーはありません。エフェクトの速度を遅くするには、animation 宣言の継続時間を増やします (たとえば、500ms から 1200ms)。
• プレビューではフォントは Courier New に固定されています。独自の CSS でエフェクト クラスの font-family をオーバーライドします。
• ファイルではなくコードを出力します。 GIF、MP4、または PNG のエクスポートはありません。ビデオまたはソーシャル投稿の場合は、プレビューを画面録画するか、ビデオ ツールで効果を再構築します。
• BIOS およびチャット アプリ用の Zalgo または Unicode の「グリッチ」文字は生成されません。以下の Zalgo テキストのセクションでその違いについて説明します。

アニメーションは永遠にループします。読者はモーション軽減をオンにしている可能性があるため、animation 行を prefers-reduced-motion (EN) メディア クエリで囲むか、エフェクトを CSS テキスト シャドウ ジェネレーター。

アニメーショングリッチテキストジェネレーターとは何ですか?

アニメーション グリッチ テキスト ジェネレーターは、Web ベースのデザイン ツールです。入力されたテキストを、単なる文字列ではなく、動く歪んだビジュアルに変換します。

歪みは、動き、色の分割、またはノイズによって時間の経過とともに変化します。これにより、静的なグリッチ フォントや誰かが手作業で編集した単一のグリッチ画像とは区別されます。

通常の出力内容:

• 数秒ごとに繰り返されるループアニメーション
• 1 回だけ再生されて固定される 1 回限りのトランジション エフェクト
• 別のプロジェクトにドロップしたエクスポート可能なファイルまたはコード スニペット

この グリッチテキスト生成ツール や YayText (EN) などのツールを使用すると、ブラウザ内でこれらすべてが自動化されます。不透明度の値を手動でキー入力したり、フレームを一度に 1 つずつエクスポートしたりする必要はありません。

これを、デザイナーが Photoshop で赤とシアンのテキストを手動でレイヤー化し、各レイヤーを数ピクセルずつ離すのと比較してください。どちらも不具合があるように見えますが、手動での作業を行わなくても発電機だけが動き続けます。

Zalgo テキストとは何ですか? アニメーション グリッチ テキストとどのような関係がありますか?

Zalgo テキスト (EN)は静的な Unicode 効果です。単語がにじんでいるか溶けているように見えるまで、通常の文字の上に発音区別符号を組み合わせて積み重ねます。

この名前は、公式の専門用語ではなく、2004 年のインターネット ホラー ミームに由来しており、それ以来定着しています。

Unicode コンソーシアムの 結合発音記号ブロック (EN) (U+0300 ～ U+036F) は、ほとんどの Zalgo ジェネレーターがマークを取得するコア セットである112 文字を定義しています。

Zalgo のテキスト自体は動きません。

位置、不透明度、またはマーク自体をフレームごとにアニメーション化する CSS またはキャンバス ラッパーが必要です。そうして初めて、アニメーション グリッチ テキスト ジェネレーターの出力の一部としてカウントされます。

Zalgo ツールが通常停止する場所:

• 破損した文字列が生成されます
• 独自にモーションを追加することはほとんどありません
• コピーアンドペーストした Zalgo のテキストは、チャット アプリまたはプロフィール フィールドに挿入されると固定されたままになります。

どのようなグリッチ スタイルをアニメーション化できますか?

ほとんどのジェネレーターは、ユーザーを 1 つのスタイルに固定しません。たとえば、スタティック ノイズ パスの下で RGB 分割を行うなど、2 つまたは 3 つのエフェクトを重ねることができます。このミックスは、単独のエフェクトよりも混沌としているように見えます。

この分類は、ソフトウェア工学よりもグリッチ アート理論に負っています。 2010 年に出版されたオランダの芸術家で理論家のローザ メンクマンのグリッチ研究宣言 (EN)では、これらの視覚的エラーは独自の美学として研究される価値があると主張しました。これらは壊れた出力として無視されるべきではありません。

最も頻繁に現れる組み合わせ:

• RGB 分割と静的ノイズにより、破損した信号のような外観を実現
• VHS と走査線によるストレートなレトロ ノスタルジー
• 破損したピクセルのみを使用して短くパンチの効いたホバー効果を実現

アニメーショングリッチテキストジェネレーターはどのように機能しますか?

内部では、アニメーション グリッチ テキスト ジェネレーターが、CSS キーフレーム、SVG フィルター プリミティブ、または JavaScript によるキャンバス レンダリングの 3 つの方法のいずれかを使用してモーションを構築します。このツールは最初のものを使用します。

• CSSキーフレームアニメーション
• SVGフィルタープリミティブ
• JavaScript によるキャンバスのレンダリング

CSSキーフレームメソッド

このメソッドはいくつかのフレームを定義し、ブラウザーがフレーム間を補間できるようにします。テキストシャドウのオフセットまたはクリップパスの値を数百ミリ秒ごとにシフトします。

通常アニメーション化されるもの:

• 赤とシアンの分割のテキストシャドウオフセット
• ギザギザの水平ティアリング用のクリップパス スライス
• 急な緩和曲線に合わせて不透明度のちらつき

開発者 Lucas Bebber の広く共有されている CodePen デモ、CSS Glitched Text (EN) は、JavaScript 行を一切使用せずに、CSS キーフレーム (EN) によって完全にこれを実現します。このテクニックを教えるチュートリアルは今でもこのテクニックを示しており、このページのエフェクトも同じパターンに従います。

SVGフィルター方法

このメソッドは、SVG フィルタ プリミティブ、主に feTurbulence (EN) を使用してノイズと feDisplacementMap (EN) を使用して、ノイズに沿ってピクセルをシフトします。その結果、波状の引き裂きの外観が得られます。

ここではサポートが充実しています。 StatCounter から取得した Can I Use (EN) の 2026 年の使用状況データによると、feDisplacementMap はグローバル ブラウザのサポート率 97.26%に達しています。

feColorMatrix はカラーピースを処理し、テキストレイヤーを複製することなく、赤と青のチャンネルを押し広げて色の分割を偽装します。

Canvas と JavaScript メソッド

このメソッドは、各フレームを Canvas 要素に描画し、JavaScript ループを通じて継続的に再描画します。 3 つの中で最も詳細な制御が可能です。

その制御にはコストがかかります。この方法でスムーズなキャンバス アニメーション (EN)を構築するには、キャンバス描画の呼び出しがスケジュールされたり繰り返されたりしないため、レンダリング ループが必要になります。

依存する処理：通常はrequestAnimationFrame (EN)またはアニメーションライブラリを使った描画ループです。通常のcanvasの呼び出しは1回実行されると停止するため、動かし続けるにはループが必要です。

このジョブの最も一般的なライブラリの 1 つである GSAP (EN) は、1,200 万以上のサイトで実行されると自身のサイトで述べています。魅力の大きな部分は、ブラウザ間のレンダリングの不一致を滑らかにすることです。

どのようなカスタマイズ コントロールを探す必要がありますか?

いくつかのコントロールによって、ジェネレーターが柔軟に感じられるか、単一の固定プリセットのように感じられるかが決まります。このツールはテキスト、サイズ、4 つの色を公開し、タイミングはコピーする CSS に任せます。

• 速度: エフェクト サイクルの速さ。通常はフレームごとにミリ秒単位で設定されます。
• 強度: ピクセルまたはカラー チャネルが元の位置からどれだけずれているか
• カラー チャネル オフセット: 赤、緑、青のレイヤー間の距離
• フォントの選択: ツールで、問題が発生する前にベースの書体を交換できるかどうか

押す速度が速すぎると、テキストが読めなくなります。これは色付きの汚れのように見えるだけで、メッセージをまだ配信する必要がある場合は意味がありません。

一部のツールでは、これらのコントロールを個別に公開します。これらは、専用の CSS カラー フィルター ジェネレーター (EN) とほぼ同様に機能し、スライダーをドラッグして色相、コントラスト、チャネル オフセットを独自に調整します。たとえば、YayText は、まさにこの種の独立したコントロール用のスライダーを提供しています。

よりシンプルなワンクリック ツールは、これらのほとんどをスキップする傾向があり、ダイヤルを回す必要のない 1 つの「グリッチ イット」ボタンを提供します。

グリッチ テキスト ジェネレーターはどのようなエクスポート形式をサポートしていますか?

これらの間のサイズの差は小さくありません。 Google 独自の web.dev 変換例 (EN)では、3.7 MB のアニメーション GIF が MP4 として 551 KB、WebM ファイルとしてわずか 341 KB になりました。同じアニメーションでもファイルの重さは約 10 分の 1 です。

これを含むいくつかのジェネレーターは、ビデオ形式を完全にスキップし、CSS アニメーション ジェネレーター (EN) エクスポートに近いものを提供します。つまり、スタイルシートに直接貼り付ける既製のキーフレーム コードです。 CapCut (EN) は、モバイル グリッチ テキスト テンプレートとして MP4 に直接エクスポートします。ユーザーは結果をコードベースではなくビデオ タイムラインにドロップしています。

すべてのジェネレーターがすべてのフォーマットを提供しているわけではありません。テキストがどの目的地に向かうのかが分かれば、そのギャップが本当の決定要因になります。

アニメーショングリッチテキストジェネレーターを実行できるプラットフォームはどれですか?

アニメーション グリッチ テキスト ジェネレーターは、ブラウザー タブ内、インストールされたデスクトップ ソフトウェアとして、または専用モバイル アプリを通じての 3 つの場所で実行されます。

ブラウザベースのツールでは、最初の行がぼやけてしまうことがあります。 プログレッシブ ウェブ アプリ (EN)のようにインストールされ、一度開くとオフラインで動作し続けるアプリが増えています。

レンダリングも全面的に完全に一貫しているわけではありません。古いブラウザやあまり知られていないブラウザでも、SVG フィルタやキャンバス描画呼び出しでブラウザ間の互換性 (EN)の問題が発生する可能性があります。 Adobe After Effects は、ブラウザ ツールでは提供されないレイヤード合成とエクスポート コントロールを使用して、スペクトルのデスクトップ側を処理します。 CapCut は、短い形式のビデオにエフェクトを直接組み込むモバイル エンドをカバーしています。

無料と有料のグリッチ テキスト ジェネレーター: どちらを選択すべきですか?

無料利用枠は、ほとんどのカジュアルな 1 回限りの使用をカバーします。解像度、透かし、または商業権が関与すると、有料枠が維持されます。

通常、無料枠で制限されるもの:

• エクスポートされたビデオまたは GIF ファイルに表示される透かし
• 高解像度のエクスポート、多くの場合、1080p よりかなり下に制限されます
• クライアントの作品の商用使用権
• 複数のテキストバリエーションにわたるバッチエクスポート

有料レベルでは、無料側に欠けているものを正確にロック解除でき、さらに、混雑したプラットフォームでのエクスポート キューが高速になります。

有料側の価格は固定されていません。 CapCutは2026年に計画を再構築し、 プロレベルの価格は月額約9.99ドルから19.99 ドルとほぼ2倍になりました。予算を立てる前に、アプリの現在のリストを確認してください。

これに対し、Canva Pro は、2026 年 9 月の価格ページの時点で 1 人あたり月額 18 ドルを維持しています。5 人のチームの場合、5 回の個別のログインが必要になるか、シートごとのビジネス プランに移行する必要があります。

単一のソーシャル投稿については、無料ツールでカバーできます。固定されたブランドの外観で繰り返しクライアント作業を行う場合、通常、有料層の透かしの除去と解決だけでコストが正当化されます。

あなたのユースケースに適したグリッチ テキスト ジェネレーターはどれですか?

エクスポート設定は個人の好みではなく、宛先によって決まります。

エクスポートする前に確認する価値のある仕様:

• YouTube サムネイル: 1280 x 720 ピクセル、16:9、2 MB 未満、最小幅 640 ピクセル、YouTube ヘルプ (EN)による
• Instagram リール: 1080 x 1920 ピクセル、9:16、Instagram が 2025 年 1 月に制限を 90 秒から延長した後、最大 180 秒で実行されるようになりました。
• TikTok ビデオ: 1080 x 1920 ピクセル、縦 9:16、アプリ上のほぼすべての配置で同じ全画面形式が使用されます

ウェブサイトのヒーロー画像 (EN)用にサイズ設定されたグリッチ テキスト アニメーションを、9:16 リール スロットにドロップすると、切り取られてぎこちなく見えます。逆も同様です。

LingoJam の静的エクスポートは、バイオ リンクの背後にある背景画像として正常に機能します。移動先がTikTokやReelsの投稿になってしまえば、何も提供できるものはありません。

事前にエクスポート先を宛先に一致させると、再エクスポートのサイクルが回避されます。このサイクルでは、グリッチ効果自体の構築にかかる時間よりも多くの時間が費やされることがよくあります。

ビデオツールでアニメーショングリッチテキストを段階的に作成するにはどうすればよいですか?

以下の順序は、どれを選択したかに関係なく、コードではなくファイルをエクスポートするほとんどのジェネレーターに適用されます。

1. ジェネレーターの入力フィールドにテキストを入力または貼り付けます。
2. 基本スタイルを選択します: RGB 分割、VHS、静的ノイズ、または破損したピクセル。
3. メッセージが一目で読める程度に強度と速度を十分に低く設定します。
4. ジェネレーターのデフォルトのキャンバスではなく、実際に表示されるサイズでアニメーションをプレビューします。
5. 先ほど決めた出力先に合わせてエクスポート形式を選択します。
6. ファイルをダウンロードし、ターゲット プラットフォームで一度開いてから、他の場所で公開します。

エクスポートする前に、次の点を確認してください。

• 表示される最小サイズでもテキストは読みやすいか
• ファイルサイズは宛先のアップロード制限に適合していますか
• ループポイントはきれいに見えますか、それとも縫い目でジャンプしていますか?

プレビューのステップをスキップするのが最も一般的な間違いです。ジェネレーターのデフォルトのプレビュー キャンバスが電話の画面と一致することはほとんどありません。幅 800 ピクセルでは問題なく読めるテキストでも、340 ピクセルでは汚れてしまう可能性があります。

アニメーショングリッチテキストが機能しないのはどのような場合ですか?

アニメーション化されたグリッチ テキストは、スタイルの理由で失敗する前に、アクセシビリティの理由で失敗します。

光過敏性てんかんのある人は、テキストの点滅や急速な変化によって発作を引き起こす可能性があります。これはまさに、正式なウェブ アクセシビリティ (EN)ガイドラインが検出するために作成された種類のリスクです。 W3C は、WCAG 達成基準 2.3.1 (EN) に基づき、フラッシュ コンテンツの上限を 1 秒あたり 3 回のフラッシュとしています。

高速な静的ノイズや VHS ジッターの影響は、簡単な設計レビュー中に誰にも気付かれずにそのしきい値を超える可能性があります。

それが良いことよりも害を及ぼす状況:

• 本文コピー、法的テキスト、またはスクリーン リーダーが順番に解析する必要があるもの
• ユーザーがサイト内を移動するために使用するナビゲーション メニューとボタン
• フォームフィールドやチェックアウトステップなど、タスクを完了するために必要な見出しまたはラベル

スクリーン リーダーも視覚的な歪みを通知しません。 アクセシブルなタイポグラフィ (EN)に関するほとんどのガイダンスでは、大きな歪みはせいぜい装飾的なものとして扱われており、それ自体が意味を持つものとしては決して扱われていません。

重いキャンバスや SVG ベースの効果もレンダリングにかかるコストが高くなり、ローエンドの携帯電話でそれらを満載したページは目に見えて途切れる可能性があります。

短く、装飾的で、スキップ可能なコンテンツでは、ヒーローの見出し、ミーム、一回限りのソーシャル グラフィックなど、この効果が今でもその役割を果たしています。読者がページを実際に使用するために依存するものは何もありません。

よくある質問：グリッチ文字ジェネレーター

グリッチテキストと通常のテキスト効果の違いは何ですか?

影やグラデーションなどの通常のテキスト効果は、誤動作を示唆することなく外観を変更します。

グリッチ テキストは、RGB 分割、静的ノイズ、または破損したピクセルを使用して、デジタル障害を通知するために意図的に壊れた送信を模倣します。違いはビジュアルだけではなく意図です。

グリッチテキストはグリッチアートと同じものですか?

いいえ、グリッチ アートは、圧縮エラー、フィードバック、ハードウェアの故障を美的素材として探求するアーティストたちの数十年にわたる広範な運動です。

グリッチ テキストはその運動の狭い用途の 1 つであり、特にタイポグラフィーのためにその視覚的な語彙を借用しています。

グリッチ テキストをビデオ ファイルではなく CSS または HTML コードとしてエクスポートできますか?

はい、これを含め、CSS キーフレームまたは SVG フィルターを中心に構築されたツールで可能です。

これらは、レンダリングされたファイルの代わりに、既製のスタイルシート コードをエクスポートします。アニメーションは固定ビデオや GIF を再生するのではなく、 ブラウザ内でライブで実行されます。

初心者とプロの編集者にとって最適なグリッチ テキスト ジェネレーターは何ですか?

初心者は、LingoJam や Cool Text などのワンクリックのブラウザ ツールを使用すると、設定を誤って判断する必要がなく、うまくいきます。

プロの編集者は、速度、強度、 カラー チャネル オフセットをきめ細かく制御する必要があるため、Canva Pro や CapCut Pro などの有料ツールを使用することになります。

CodePen、GSAP、After Effects、CapCut のどのソフトウェアがどのスキル レベルに適合しますか?

CodePen は、既存のデモをコピーして適応させる開発者に適しています。 GSAP は、カスタム キャンバス アニメーションを最初から作成する開発者に適しています。

After Effects は、モーション デザイナーがレイヤード コンポジットを構築するのに役立ちますが、CapCut は、モバイル エクスポートだけが必要でビルドの知識は必要ない非コーダーを対象としています。

グリッチ テキスト アニメーションを壊す一般的な間違いは何ですか?

速度の設定が高すぎると、テキストが汚れて読めなくなります。

ターゲット プラットフォームのサイズではなく、ジェネレーターのデフォルトのキャンバス サイズでエクスポートすると、トリミングが発生します。 ループポイント チェックをスキップすると、アニメーションが再開する箇所に目に見えるジャンプが残ります。

グリッチ テキスト アニメーションによりページの読み込みが遅くなりますか?

CSS キーフレームや SVG フィルター効果は、ブラウザーがこれらのスタイル ルールを解析する方法をすでに知っているため、ほとんど何も追加しません。

GIF またはビデオのエクスポートはより重く、 それに比べて実際の負荷重量が増加します。

アニメーション グリッチ テキスト ジェネレーターを使用すると、時間の経過とともにどのような費用がかかりますか?

アニメーショングリッチテキストジェネレーターは、最初から費用はかかりません。無料枠は、解像度の上限、ウォーターマーク、またはエクスポート制限が、クリーンなブランド化されていないファイルを必要とする有料クライアントの作業と衝突するまで、問題なく維持されます。

1 つのシーケンスにより、過剰支払いを回避できます。

• まずは無料ツールで効果をテストしてください
• ウォーターマーク、解像度、フォーマットのどの制限が作業をブロックしているかに注意してください。
• ツールキット全体ではなく、その制限のみをアップグレードします

トレードオフは、ほとんどのプロジェクトが月に数回しか触れない、独立したカラー チャネル オフセットなどのコントロールに対する定期的な月額料金です。

有料枠の価格は頻繁に再設定されるため、サブスクリプションの決定を現在のリストと照らし合わせて再確認する価値があるという注意事項は2026 年 9 月時点で確認されています。コードでこのエフェクトを最初から作成する人は、CSS テキスト アニメーション (EN)を幅広く調べることで、より多くのメリットを得ることができます。同じキーフレームとイージング原則は、1 つのグリッチ スタイルを超えて引き継がれます。特に分割スライスの場合、クリップ パス ジェネレーターを使用してポリゴンを視覚的に描画できます。