こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webデザインの世界では「文字装飾ひとつ」でサイト全体の雰囲気を大きく変えることができます。
たとえば、かわいいデザインには柔らかいシャドウやパステル調の配色が合いますし、シックなサイトではミニマルで落ち着いた表現が映えます。
では、イベントやシーズンに合わせた「ちょっとクセのある表現」を加えたいとき、どんな工夫ができるでしょうか？
今回ご紹介するのは、CSSだけでできる「影がゆらゆら動くホラー風文字装飾」です。
まるでお化け屋敷の看板やホラー映画のタイトルのように、テキストの影が不気味に揺れ動くことで、一気に怖さを演出できます。
特にハロウィンの特集ページや、ダーク系のゲームサイト、ホラージャンルのイベント告知などにぴったりのエフェクトです。
アニメーションの動きは「text-shadow」と「@keyframes」を組み合わせることで実現できます。
JavaScript不要で、CSSだけで実装できるのでとても手軽。
しかもテキストを差し替えるだけで使えるので、使い勝手も抜群です。
この記事では基本の実装方法から、応用例（赤い血文字風や多重影での演出）まで、段階的に紹介していきます。
ホラー風文字装飾の基本コード
まずはシンプルに「影がゆらめく」文字装飾のコードです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用例：血文字風にアレンジ
より恐怖感を出すなら、赤い文字にして影を濃くするのがおすすめです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用例：多重影で立体感を演出
影を複数重ねることで、不気味な立体感を出すことも可能です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
CSSだけで作れる「影がゆらゆら動くホラー風文字装飾」は、ホラー映画やお化け屋敷、ハロウィンイベントなどにぴったりの演出です。
text-shadowとkeyframesを工夫することで、雰囲気のあるタイトルがすぐに実現できます。
シンプルな装飾でも十分に不気味さを出せますし、赤文字や多重影を加えればさらに強烈な印象を与えることができます。
ぜひサイトの季節イベントや特集コンテンツに取り入れてみてください。
satokotadesignキャンペーン実施中！
