縦書きサイトをCSSで実現する方法とデザイン事例の完全ガイド

折原 慧ウェブデザインデイ 編集ライター

日本語の文章は、もともと縦に読むものでした。書籍や新聞、俳句や短歌といった文化に触れると、縦書きの持つ「和」の雰囲気がいかに独特かを実感します。Webの世界では横書きが当たり前になっていますが、あえて縦書きを取り入れることで、他とは違う印象的なサイトを作ることができます。

個人的にも、和風の店舗サイトや作品ギャラリーの制作で縦書きを何度か採用してきました。ただ、実際にやってみると「思ったより奥が深い」というのが正直な感想です。

この記事では、縦書きサイトの魅力的な活用シーンから、CSSを使った具体的な実装方法、そして現場でハマりやすいポイントまでを一通りまとめました。

縦書きが効果的に使えるサイトの用途

縦書きは「なんとなくおしゃれだから」で使うと、かえって読みにくくなることがあります。まずは、縦書きが本当に活きる場面を整理しておきましょう。

和風や日本らしさを打ち出したいサイト

旅館、料亭、日本茶専門店、和菓子店といった業種では、縦書きが世界観づくりに直結します。横書きでは出せない落ち着きや品格が生まれ、ブランドの雰囲気を一目で伝えられます。

背景に和紙のテクスチャや墨のような色味を組み合わせると、より一層まとまった印象になります。

書籍風や作品を見せるサイト

小説、エッセイ、詩集などのテキストコンテンツは、縦書きにすることで「読み物」としての完成度が高まります。俳句コンテストや短歌の投稿サイトでも、縦書きは自然な選択です。

ポートフォリオや作品ギャラリーで、横スクロールと組み合わせて見せる手法もよく見かけます。

年表やストーリー性のあるコンテンツ

企業の沿革や歴史紹介など、時間の流れを縦に表現したいコンテンツとも相性が良いです。上から下へ、あるいは右から左へと視線を誘導することで、物語を語るような演出ができます。

CSSで縦書きを実現する基本的な方法

ここからは実装の話です。結論から言うと、縦書きの中心となるのはwriting-modeというCSSプロパティ一つだけです。

基本の書き方は驚くほどシンプルです。

.vertical {
  writing-mode: vertical-rl;
}

vertical-rlは「縦書きで、右から左へ列が進む」という意味です。日本語の書籍と同じ、最も一般的な縦書きの流れになります。この一行を適用するだけで、対象の要素が縦書きに変わります。

writing-modeの詳しい挙動やブラウザ対応については、css 縦書きの解説も参考になります。

英数字や記号の向きを整える

縦書きにして最初につまずくのが、半角の英数字です。そのままだと数字が横倒しに表示されてしまい、読みにくくなります。

ここで役立つのがtext-orientationとtext-combine-uprightです。

.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* 2〜3桁の数字を縦中横にまとめる */
.tcy {
  text-combine-upright: all;
}

「2024」のような数字を、縦書きの中で横並びのまとまりとして表示したい場合は、その部分だけをタグで囲んでtext-combine-upright: allを当てます。この「縦中横」の処理を丁寧にやるかどうかで、仕上がりの印象が大きく変わります。

縦書きサイトを作るときの注意点

縦書きは見た目の魅力がある一方で、横書き前提のWeb設計とは勝手が違う部分があります。導入前にメリットとデメリットを把握しておきましょう。

スクロール方向をどう設計するか

縦書きサイト最大の悩みどころが、スクロールの向きです。文章が右から左へ流れる以上、横スクロールと組み合わせるのが自然ですが、多くのユーザーは縦スクロールに慣れています。

実際には、ページ全体は縦スクロールにして、縦書きの本文ブロックだけを部分的に配置するハイブリッドな作りが扱いやすいです。全面横スクロールにする場合は、スクロール可能であることを矢印などで明示する配慮が欠かせません。

可読性を保つポイント

縦書きは行間、つまりline-heightが横書き以上に読みやすさを左右します。詰まりすぎると窮屈に、開きすぎると視線が迷います。一文字の大きさに対して1.8〜2.0倍程度を目安に調整すると、落ち着いた紙面のような印象になります。

フォント選びも重要で、明朝体系のフォントは縦書きとの相性が抜群です。デザイン全体の参考には、他のホームページ デザイン おしゃれな事例を見ながら方向性を固めると良いでしょう。

レスポンシブ対応の考え方

すべてのデバイスで縦書きを貫くべきか、というのは悩ましい問題です。個人的には、無理にすべてを縦書きで統一する必要はないと考えています。

スマホの画面は縦長なので、縦書きの本文が意外と収まりやすい一方、長文だと横スクロールが頻発します。メディアクエリを使い、スマホでは特定のブロックだけ横書きに戻す、といった割り切りも実務では有効な選択肢です。

高さの単位はvhを活用すると画面サイズに柔軟に対応できます。vh単位の使い方に不安がある場合はcss vhの基礎を押さえておくと安心です。

よくある質問

縦書きはSEOに不利になりますか

writing-modeはあくまで見た目の表示を変えるCSSであり、HTMLの文章そのものは通常通りです。検索エンジンはテキストを正しく読み取れるため、縦書きにしたことでSEOが直接不利になることはありません。

すべてのブラウザで縦書きは表示されますか

writing-modeは主要なモダンブラウザで広く対応しています。現在のChrome、Safari、Firefox、Edgeであればまず問題ありません。ただし古い環境を想定する場合は、念のため実機での確認をおすすめします。

縦書きと横書きを混在させても大丈夫ですか

問題ありません。むしろ実務では、見出しや本文の一部だけを縦書きにするケースが多いです。要素ごとにクラスを分けてwriting-modeを適用すれば、部分的な縦書きが自由に実現できます。

縦書きの実装にJavaScriptは必要ですか

基本的な縦書き表示だけならCSSのみで完結します。JavaScriptが必要になるのは、横スクロールをマウスホイールで操作させたい場合や、複雑なアニメーションを加えたい場合などに限られます。

WordPressでも縦書きサイトは作れますか

作れます。テーマのCSSに縦書き用のスタイルを追加し、該当する要素にクラスを付与すれば実現できます。追加CSS機能やカスタムクラスを使えば、コードに慣れていない方でも部分的な縦書きは十分導入可能です。

まとめ

縦書きサイトは、CSSのwriting-modeという一つのプロパティから始まります。実装自体はシンプルですが、高さの指定や英数字の扱い、スクロール方向の設計といった「縦書きならではの配慮」を積み重ねることで、完成度が大きく変わってきます。

まずは小さなブロックから縦書きを試し、可読性を確かめながら広げていくのが失敗の少ない進め方です。和の世界観を求めるサイトで、縦書きは強力な表現手段になってくれるはずです。

ぜひ、あなたのサイトにも日本らしい縦の流れを取り入れてみてください。