「ウェブサイトやSNSで目を引くデザインを作りたい…と思ったことはありませんか？
テキストエフェクトは、簡単な工夫でデザインを引き締め、見る人の印象に残す力があります。しかも、難しいスキルがなくても、コピー＆ペーストするだけで手軽に導入できるのが魅力です。
今回ご紹介するコピペで使えるWebテキストエフェクト集を使って、バナーや見出しに動きを加え、あなたのウェブサイトに個性をプラスしてみませんか。
ウェブサイトにすぐ使える！おすすめテキストエフェクト集
ウェブサイトに簡単に導入できるテキストエフェクトをご紹介。
スニペット右下にある「Return」を押すと、エフェクトを再読み込みできます。エフェクトを見逃したときにどうぞ。
HTMLとCSSのみで表現できるスニペットを中心に集めています。
iPhone 16 Proのランディングページで使われていた、ぼんやりと光り輝くテキストエフェクトを、HTMLとCSSのみで再現したスニペット。
See the Pen Text Illumination by Rafa (@RAFA3L) on CodePen.
CSS only text effect (waves & water) Miami 🌇
ゆらゆらと波が揺れながら、文字がぼんやりと表示されるCSSアニメーション。
See the Pen CSS only text effect (waves & water) Miami 🌇 by Fabricius Seifert (@briziel) on CodePen.
文字テキストが表示されるときに、虹色のレインボーカラーがきらりと光るRevealエフェクト。
See the Pen Fancy wipe by Jesse (@Chester) on CodePen.
タイトルの通り、オーロラのように美しいグラデーションが印象的なテキストアニメーション。CSSのみでできています。
See the Pen The aurora (only CSS) by Ostylowany (@ostylowany) on CodePen.
グラデーションが少しずつ変化するアニメーションに、ザラザラとした質感を加えたテキストエフェクト。文字をお好みで編集することも可能です。
See the Pen Grainy & Gradients text by LukyVJ (@LukyVj) on CodePen.
Subtle text “highlighter” in pure CSS
蛍光マーカーペンで線を引いたようなハイライトエフェクトをCSSのみで表現できる実用向けスニペット。
See the Pen Subtle text "highlighter" in pure CSS by Cassidy (@cassidoo) on CodePen.
CSS only marquee with slow on hover
文字テキストが左右にスクロール展開するアニメーションをCSSのみで表現するテクニック。ホバーすると動きが遅くなります。
See the Pen CSS only marquee with slow on hover by Matthew Morete (@matthewmorete) on CodePen.
テキストをマスクして背景にGIFアニメーションを再生させるエフェクトは、<code>clip path</code>の使い方がポイント。
See the Pen Text masking by SVG-workshops (@svganimationworkshop) on CodePen.
ビューポートに要素が入ると、突然動き出す文字テキストの3Dアニメーションの作例集で、どれもクリエイティブ。
See the Pen Oreo Smash Donuts by Steve Gardner (@ste-vg) on CodePen.
本物そっくりのネオンサインのように光るテキストエフェクトのサンプル集。ネオンの点滅もCSSで見事に再現しています。
See the Pen Neon text-shadow effect by Erik Jung (@erikjung) on CodePen.
Customizable link scramble effect
パタパタと文字が切り替わりながら表示されるスクランブルエフェクト。日本語でも表示できますよ。
See the Pen Customizable link scramble effect by Josh Dillon (@jdillon) on CodePen.
折り曲げた紙の上を移動するテキストエフェクトは、CSSのみで表現されたスニペット。
See the Pen Bendy text by Amit (@ghaste) on CodePen.
２つのテキストレイヤーを重ねたことでスライム状に形を変えるGooeyエフェクト付きのマーキースクロールをCSSのみで再現しています。
See the Pen A Gooey Marquee by Amit Sheen (@amit_sheen) on CodePen.
波を打つように動きながら文字がキラリと光るアニメーションフェクト。
See the Pen Shimmer wave text animation by Andreas Storm (@avstorm) on CodePen.
CSS & HTML only Animated Ice Text Effect, Frozen Text Effect
CSSのみでデザインされたとは思えないほど作り込まれた氷のテキストエフェクト。キラリと光るアニメーション付きでどうぞ。
See the Pen CSS & HTML only Animated Ice Text Effect, Frozen Text Effect by Mandy Michael (@mandymichael) on CodePen.
How to Animate Twisting Text With CSS and JavaScript
スクロール/ホバー時にくるりと回転する文字エフェクト。
See the Pen How to Animate Twisting Text With CSS and JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
なめらかにジャンプを繰り返す文字テキスト。CSSのKeyframeアニメーションのみで実現できるテクニック。
See the Pen Bouncing letters by Michelle Barker (@michellebarker) on CodePen.
スクロールに合わせ文字がゆがむグリッチエフェクトを表現できるJSアニメーション。
See the Pen VFX-JS scroll animation by Amagi (@fand) on CodePen.
チカチカとちらつきのある、CSSオンリーで表現できるテキストエフェクト。
See the Pen Twitching text by Amit Merchant (@amit_merchant) on CodePen.
Text Reveal using conic-gradient
<code>background</code>プロパティに<code>conic-gradient</code>を活用し、文字がぼんやりとアニメーション表示できるテクニック。
See the Pen Text Reveal using conic-gradient by Preethi Sam (@rpsthecoder) on CodePen.
Variableフォントの可能性を広げるテキストエフェクトは、自在に文字の太さや幅が変化するアニメーション。
See the Pen Animated variable font by Elwin van den Hazel (@elwinvdhazel) on CodePen.
HTML/SCSS Variable Font Animation – is it not – Oddval
こちらもVariableフォントを活用して、まるで呼吸をするようなアニメーションが心地よいエフェクト。
See the Pen HTML/SCSS Variable Font Animation – is it not – Oddval by Type Forward (@typeforward) on CodePen.
スクロールするとテキストが歪むグリッチエフェクトをCSSとSVGフィルタで表現したテクニック。
See the Pen SVG Filter Scroller by Jhey (@jh3y) on CodePen.
Slice! No JS, no text duplication! (contenteditable)
CSSのみでスタイリングされた、超リアルな切り込みが入ったスライス文字。マウスカーソルを合わせると、スタイリングを当てたまま文字を編集できます。
See the Pen Slice! No JS, no text duplication! (contenteditable) by Ana Tudor (@thebabydino) on CodePen.
立体的に折れ曲がった背景に合わせてスライドするテキストエフェクト。
See the Pen Bendy text by Amit (@ghaste) on CodePen.
CSS & HTML only Animated Ice Text Effect, Frozen Text Effect
某人気映画のタイトルを連想させる、氷でできたテキストエフェクト。文字を自由に変更してみてください。
See the Pen CSS & HTML only Animated Ice Text Effect, Frozen Text Effect by Mandy Michael (@mandymichael) on CodePen.
CSS Responsive Scroll-Driven Text Reveals [Chrome 115+]
スクロールすると少しずつ文字テキストが表示される、スクロール駆動型アニメーションを用いたテクニック。
See the Pen CSS Responsive Scroll-Driven Text Reveals [Chrome 115+] by Jhey (@jh3y) on CodePen.
No text duplication stroke shadow 🌊
文字が重ならないように波のようなウェーブを描いたストロークシャドウ付きのテキストエフェクト。
See the Pen No text duplication stroke shadow 🌊 by Ana Tudor (@thebabydino) on CodePen.
画面下からポンポンと泡のようにくっつきながら、文字が表示していくユニークなエフェクト。
See the Pen CSS Dropping Letters by Tudor (@z10n) on CodePen.
Escher Rive Interactive Animation
エッシャーのだまし絵をモチーフにしたテキストエフェクトで、文字をクリックするとパターンまで切り替わる、摩訶不思議な作品。
See the Pen Escher Rive Interactive Animation by Jeffrey Karl (@jeffreylkarl) on CodePen.
Scrambling letter effect on hover
文字にマウスをホバーすると、ぐにゃりと形を変えながらハイライトされるテキストエフェクト。
See the Pen Scrambling letter effect on hover by Sil van Diepen (@silvandiepen) on CodePen.
Mad Max Fury Road Title [CSS only]
だれがこの作品をCSSのみでスタイリングされていると思うでしょう、というくらいフォトショップ顔負けにデザインされたテキストエフェクト。
See the Pen Mad Max Fury Road Title [CSS only] by Olivier 3lanc (@olivier3lanc) on CodePen.
Strokes, Shadows + Halftone Effects
文字からほんの少しずらして塗りつぶしたり、ハーフトーン柄パターンを重ねたりする、知っておくと何かと使えそうな小技CSSテクニック。
See the Pen Strokes, Shadows + Halftone Effects by Mark Mead (@markmead) on CodePen.
9-Tipps: #8 pseudo element for fancy text-decoration
マーカーペンで手描きしたような波線ラインを引くCSSテキストエフェクト。コピペで簡単にりようできるお手軽さも素敵。
See the Pen 9-Tipps: #8 pseudo element for fancy text-decoration by Nils Binder (@enbee81) on CodePen.
テキストのストロークに合わせてアニメーションするロゴエフェクト。
See the Pen Stroke Logo Animation by Jon Kantner (@jkantner) on CodePen.
重なりながらも、くり抜いたようなCSSテキストエフェクト。
See the Pen Overlapping & Hollowed Text by wheatup (@wheatup) on CodePen.
きらきらと輝くことで、思わずクリックしたくなるテキストリンク。詳しい作り方動画も公開されています。
See the Pen Magical Text Effect by Hyperplexed (@Hyperplexed) on CodePen.
CSS Block Reveal Text ⚡️ #SpeedyCSSTip
左から右に流れるように表示できるテキスト表示エフェクトは、心地よいアニメーション設定が特長。
See the Pen CSS Block Reveal Text ⚡️ #SpeedyCSSTip by Jhey (@jh3y) on CodePen.
Keep CSS Weird – Scroll Linked
スクロールに合わせて文字の一部が動き出す、スクロール駆動アニメーションを活用したテクニック。
See the Pen Keep CSS Weird – Scroll Linked by Adam Argyle (@argyleink) on CodePen.
文字からサイケデリックなレトロカラーの長い影が伸びるエフェクトは、グラフィックデザインで最近見かけるトレンドをCSSのみで再現しています。
See the Pen Pure CSS | Useless by Andy (@kotAndy) on CodePen.
highlight compliment to a text-shadow effect
まるで文字が浮かび上がっているような、リアルすぎる影の描き方が参考になるCSSスニペット。
See the Pen highlight compliment to a text-shadow effect by Adam Argyle (@argyleink) on CodePen.
ウェブサイトに一工夫！今すぐ試してみよう
テキストエフェクトは、コピー＆ペーストするだけで手軽に導入でき、訪問者に視覚的なインパクトを与えます。特に、バナーや見出しに少しの動きを加えるだけで、デザインが生き生きとしたものになります。
さあ、今回ご紹介したエフェクトを使って、ウェブサイトを一段と魅力的にしてみましょう。簡単に取り入れられるので、デザイン初心者でもプロのような仕上がりを目指せます！
新しい表現方法やテクニックはどんどん増えており、2023年のHTMLスニペットのベスト100も見応えありますよ。
直近3年間のトップ１００も良かったらいかがでしょう。どれだけのスピードでWebが進化しているか、よく分かる実例のひとつ。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
