「文字をただ置くだけ」から卒業しませんか？ 今、Webデザインのトレンドは、文字の中塗りをなくした「アウトライン（白抜き）」スタイルです。
この記事では、通常の「黒文字」と「アウトライン」を巧みに切り替えるCSSアニメーションを5つ紹介します。 SWELLなどのWordPressテーマでコピペするだけで、雑誌の表紙のようなモダンで抜け感のあるデザインを実現できます。
Pulse to Outline（鼓動するアウトライン）
通常時は黒文字がゆっくりと鼓動（拡大縮小）し、マウスを乗せると「中身が空っぽ」になり、輪郭線だけが残るスタイリッシュな反転演出です。
See the Pen Pulse to Outline by BaseKENT (@basekent) on CodePen.
調整方法
- 線の太さ (
1px):-webkit-text-stroke: 1px #000;の数値を2pxにすると、ホバー時の輪郭が太くなります。 - フォントの太さ (
900): アウトライン表現は太字（boldや900）の方が綺麗に見えます。
Wandering Ghost（彷徨うゴースト）
メインの黒文字の後ろに、アウトラインだけの「ゴースト（分身）」がゆらゆらと漂います。ホバーするとゴーストが本体に吸い込まれるように合体します。
See the Pen Wandering Ghost by BaseKENT (@basekent) on CodePen.
調整方法
- ゴーストの色 (
#ccc):::afterのstroke色を変更すると、待機中の分身の色が変わります。 - 漂う距離:
@keyframes ghostFloatのtranslateの値を大きくすると、分身がより遠くまで動きます。
Offset Layer Shift（ズレるレイヤー）
2つのアウトラインが常に少しズレた状態で重なり合い、版ズレのようなアートな雰囲気を醸し出します。ホバーでピタリと重なり、黒く塗りつぶされます。
See the Pen Offset Layer Shift by BaseKENT (@basekent) on CodePen.
調整方法
- 動きのリズム (
steps(2)):steps(2)をlinearに変更すると、カクカクせず滑らかに動くようになります。 - 線の濃さ (
opacity: 0.5):::beforeの透明度を変えることで、ズレている方の線の存在感を調整できます。
Echo Ripple（エコー・リップル）
黒文字から、まるで波紋のようにアウトラインが広がり続けます。レーダーのような動きで注目を集め、ホバーすると波紋が止まり、文字が少し浮き上がります。
See the Pen Echo Ripple by BaseKENT (@basekent) on CodePen.
調整方法
- 波紋の広がり (
scale(1.5)): 数値を2.0などに大きくすると、より遠くまで波紋が広がります。 - 速度 (
2s): 秒数を短くすると、より頻繁に波紋が発生します。
Glitch Fill（グリッチ・フィル）
通常は黒文字ですが、時折ノイズが走り、一瞬だけアウトライン（白抜き）状態がチラつきます。デジタルの不具合（グリッチ）を表現したクールな演出です。
See the Pen Glitch Fill by BaseKENT (@basekent) on CodePen.
調整方法
- グリッチの頻度 (
5s): 時間を短くすると、頻繁にチラつくようになります。 - ホバー時の変形 (
skewX): ホバー時の斜め変形が不要な場合は、transform: skewX(-10deg);を削除してください。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
