縦書きレイアウトのWebサイト

みなさん、こんにちは。ウェブラボデザイナーチームです。今月のテーマは「縦書きレイアウトのWebサイト」です。
そして今回はその中でも特に、文字を画像で切り出さずに、cssを使ってテキストとして表示させているWebサイトに注目してみました。
実は画像を使わずに縦書きを実装するには注意点がいくつかあって、どのブラウザでもきれいに見られるようにするのは大変なのです。しかし、そういったハードルを乗り越え縦書きを効果的に使用しているWebサイトは、確実に増えてきています。

縦書きが合うコンテンツは？

既に様々なテイストの縦書きWebサイトがありますが、定番はやはり「着物」「料亭」「神社」など、和風のコンテンツを取り扱っているWebサイトです。明朝体と組み合わせれば、ぐっと雰囲気が出ると思います。
そのほか、縦書きは書籍や文学に関係するコンテンツを扱うWebサイトにもおすすめです。原稿用紙や本のイメージを出したいときなどに役立つでしょう。

縦書きWebサイトの例

それでは、縦書きのWebサイトをいくつかご紹介いたします。なるべく最新のブラウザでご覧ください！

＃01

縦書きWeb普及委員会
「縦書きWeb普及委員会」のWebサイト。横書きだけでなく、縦書きのレイアウトもWebサイトで標準的に使えるようにしたい！ということで、色々な取り組みを行なっておられます。
2月28日には、縦書きWeb普及委員会が主催する「たてよこWebアワード2017（https://tategaki.github.io/awards/）」の結果が発表されました。

＃02

鈴乃屋オリジナルコレクション　衣のいのち Vol.38
縦書きの部分と横書きの部分が大変バランスの良いWebサイトです。着物を説明している横書きのテキスト部分は比較的幅が狭めになっていて、タイトルと組み合わさり、全体的に縦長の印象を受けますね。着物の画像が生む縦のラインとよく馴染んでいてとてもきれいです。

＃03

京一日
ベースは横書きレイアウトですが、タイトルの部分などに縦書きが使われています。いいアクセントになって目を引きますね。ロゴを除けば特別和風のモチーフやテクスチャなどはありませんが、写真と相まって全体から上品な和の雰囲気が感じられます。

＃04

谷口彫刻
こちらも基本的には横書きレイアウトですが、要所々々に縦書きを使用しています。英語の部分も縦書きになっていて、日本語の下端に揃えられています。このWebサイトではレイアウトだけでなくフォントも使い分けられていて、縦書きの部分やタイトルは明朝体、テキスト本文はゴシック体になっています。

＃05

こもれびうちわ
メインのコンテンツ部分では、タイトルにも本文にも縦書きが用いられています。行と行の間がゆったりとられていて、おだやかな印象ですね。また、使用されているフォントが個性的で、標準的な明朝体に比べるとより和風な印象を受けます。

——

以上、縦書きWebサイトのご紹介でした。

書字方向は言語や文化等によって様々です。縦書き・横書きどちらにせよ、自動翻訳で多言語に対応したいと考えているページなどでは特に注意が必要ですね。