最近、縦書きのテキストを上手く使ったウェブサイトをよく見かけるようになってきています。
ウェブサイトのほとんどは横書きが基本ですが、縦書きレイアウトによる落ち着いた雰囲気は和風テイストを醸し出し印象的なデザインを作り出しています。
今回は縦書きレイアウトをCSSで実装する方法と「縦書き」和風テイストWebサイトをご紹介します。もくじ
◆「縦書き」の効用
縦書きは読むスピード処理が遅いせいか、読んでいる間にも脳に余白が生まれ、想像の余地や感情の機微が意識できるかと思います。
「行間を詠む」というのはそういうことから生まれるのかもしれません。
俳句は断然縦書きの方が情景が浮かぶかと思います。
また、旅館や和菓子など和風のモノから、歴史、年表、小説などの読み物など、ちょっとした情動を喚起する際に、縦書きはとても効果的です。
◆CSSで文字の「縦書き」
縦書きレイアウトは、CSSプロパティに縦書き指定を加えるだけで実現できます。
CSSビギナーでもわかるCSSの記述を紹介します。
・基本はwidthとfloat:right
widthを1emにして横幅を文字の1文字分にします。
そうすると右にいきたい文字が行くエリアがなくなって、下に行かざるをえなくなりこれで縦書きが完了します。
ブロック要素全体を右にもっていきたい場合には、float:rightしてあげることです。
・句読点を調整
このままでは句点の「。」や、読点の「、」の位置がズレたままになってしまいます。
そこで「。」の部分はclass名で囲い、それに対してCSSをかけます。
floatをなくして（float:none）、positionプロパティで相対位置に設定し、あとはtopとleftで微調整すると正しい位置になります。
◆「縦書き」和風テイストWebサイト5選
「縦書き」のテキストを上手に使った和風テイストなウェブサイトを見かけるようになってきています。
そんな「縦書き」を取り入れているウェブサイトをいくつかまとめましたのでご紹介します。
・三度目の京都 Sando Me No Kyoto
京都の寺院の魅力を閉じ込めた和風テイストなウェブサイトです。
雑誌を読んでいる気分になるようなキレイなレイアウト、秋の京都寺院を彩った素晴らしい写真、一枚一枚が印象的なサイトです。
写真の世界観、空気感、情緒を縦書きのテキストにより印象を高めています。
余白を多めに取り、区切られた行間・文字量は、ゆったりとした時間の流れを生み出してサイト全体に創り出しています。
・ヤヱガキ酒造株式会社 【姫路の銘酒 八重垣】
ヤヱガキ酒造株式会社から販売されている純米酒「八重垣」の商品紹介サイトです。
白背景にコピーをすっきりと配置し読ませるデザインで、商品イメージを連想させています。
歴史と伝統に重きを置きつつ、酒造りへの思いを縦書きテキストが醸し出しています。
・うみたま 【限りなく海水に近い成分の自然塩】
調味料／自然塩のウェブサイト。
シンプルに分割されたレイアウトでしっかりとしたコピーで特徴を伝えています。
テキスト部分に縦書、横書きを使用し、サイトデザインに変化をつけています。
和風テイストな色使いがウェブサイトとして魅力を感じさせます。
・和倉温泉～わくらづくし～ 【和倉温泉観光協会・和倉温泉旅館協同組合】
観光／和倉温泉のウェブサイト。
個性的なレイアウトで魅力的なデザインのウェブサイトです。
温泉館内や観光スポット、食、名産品など写真も魅力的なものが多くサイトを引き立てています。
カテゴリーごとに分けられたカラーコーディネートも秀逸です。
・お茶屋BAR 六馬(りくば) 【RIKUBA 西中洲のお茶屋バー】
飲食／京都のお茶屋を和風テイストに作り込み「日本の美味しい・美しい」を凝縮したウェブサイト。
ページトップには動画イメージを使用し魅力を伝えています。
紅色を基調としたカラーで和風テイストをいっそう引き立てています。
◆まとめ
縦書きの和風テイストなWebデザインをまとめました。
縦書きレイアウトを取り入れることで、Webサイトを見る人に新鮮さを与えることができます。
現在は横書きレイアウトが主流ですが、日本文化としての縦書きレイアウトでのウェブサイトは今後、流行の１つとして増えてくることでしょう。