エディトリアルデザインに最適。CSSテキストアニメーション「縦書き」特化5選

2026年3月7日

当ページのリンクには広告が含まれています。

Webサイトに、雑誌のような品格と和の美しさを。 CSSの writing-mode プロパティを使えば、Web上でも簡単に「縦書き」を表現できます。

この記事では、縦書きテキストの魅力を最大限に引き出すCSSアニメーションを5つ厳選しました。上から下へと流れる視線誘導を利用し、墨のように落ちてくる演出や、風にたなびくような動きなど、エディトリアルデザインにぴったりの洗練されたコードを紹介します。SWELLでコピペするだけで、シンプルで美しい縦書きレイアウトが完成します。

Ink Drop Stagger（インク・ドロップ）

一文字ずつ、上から下へと墨滴が落ちてくるように静かに出現します。待機中は文字がゆっくりと上下に呼吸し、ホバーすると文字間隔がスッと広がり、凛とした佇まいになります。
※今回は8文字の「縦書きのデザイン」というテキストを使用しています。

See the Pen Ink Drop Stagger by BaseKENT (@basekent) on CodePen.

調整方法

フォント: font-family に明朝体を指定しています。SWELL側の設定で明朝体にしている場合は、この行を削除しても問題ありません。
字間の広がり: .tate-ink:hover の letter-spacing: 0.3em; を調整すると、ホバー時の広がり具合が変わります（縦書きの場合、下方向に広がります）。

Scroll Reveal（スクロール・リヴィール）

巻物を上から下へ広げるように、文字が徐々に姿を現します。待機中は文字の端に微かな光沢が走り続け、ホバーすると文字が全体的に少し左へ浮き上がります（縦書きならではの立体表現です）。

See the Pen Scroll Reveal by BaseKENT (@basekent) on CodePen.

調整方法

出現の速さ: .tate-scroll の animation 内の 1.5s を変更します。
光沢の強さ: rgba(255,255,255,0.8) の透明度を上げると、キラリと光る帯がより強く見えます。背景が白い場合は少し見えにくいので、暗めの背景で映えます。

Willow Sway（ウィロウ・スウェイ）

文字が上から吊り下げられているように、X軸（左右）に向かってゆっくりと風にたなびきます。縦書きだからこそ美しく映える有機的なアニメーションで、ホバーすると風が止んで真っ直ぐに整います。

See the Pen Willow Sway by BaseKENT (@basekent) on CodePen.

調整方法

揺れの角度 (2deg): 角度を大きくしすぎると不自然になるため、1〜3度の範囲で微調整するのが、品格を保つポイントです。
軸の位置: transform-origin: top center; を center center にすると、全体がユラユラと漂うような動きに変わります。

Misty Focus（ミスティ・フォーカス）

深い霧の中から文字が浮かび上がるように、強いブラー（ぼかし）と広い文字間隔から徐々にピントが合っていきます。待機中は常に微細なぼやけを繰り返し、ホバーで完全にシャープな状態になります。

See the Pen Misty Focus by BaseKENT (@basekent) on CodePen.

調整方法

初期の文字間隔 (1em): mistIn の letter-spacing をさらに大きくすると、画面の外側から吸い込まれるように出現します。
待機中の霞み具合: blur(1.5px) を変更して、霞む度合いを調整します。

Fusuma Slide（フスマ・スライド）

縦書きテキストは通常「右から左」へ読み進めます。その特性を活かし、画面の右側から襖（ふすま）がスライドするように文字が現れます。待機中はゆっくりと右へ左へスライドし、ホバーで左へキリッと寄ります。

See the Pen Fusuma Slide by BaseKENT (@basekent) on CodePen.

調整方法

襖の縁（ボーダー）: border-right: 2px solid #111; は、和室の枠のような効果を出します。不要な場合は削除してください。
色: ホバー時の #b7282e は日本の伝統色です。サイトの雰囲気に合わせて墨色（黒）のままにしたり、藍色にしたりするとエディトリアル感が際立ちます。