HTML/CSSは英語圏で作られた言語であるため、
日本のウェブサイトでは文章は(たとえ画像内の文章であったとしても)
横書きとなることが一般的でした。

これまで数多のウェブサイトが横書きを中心とした
デザインであったこともあり、
ついつい縦書きという存在を忘れてしまいがちです。

しかし近年では、
和・日本的なものに関するウェブサイトはもちろんのこと、
それ以外のウェブサイトにも縦書きを
採用した例を見かけるようになりました。

今回の記事では、
縦書きを効果的に活かした
ウェブサイトのデザイン
4個ご紹介していきたいと思います。

また、文章の組み方向を変更するCSS3の
writing-modeが抱える問題についてもお伝えします。

和・日本的なものに関するウェブサイト

●SAKANAYA(さかな屋)
http://www.sakanaya-nara.jp/

スクリーンショット 2014-08-19 9.09.33

トップページに表示されるメニューは
和食のお品書きをイメージしているのでしょう。

魚人間(?)のイラストもあり、
和風魚料理屋であることが一目で分かります。

全体的に落ち着いた配色で、
縦書きも相まって日本らしさが上手に表現されているサイトです。

縦書きは画像で表現されています。

 

●医療法人ゆりかご
http://www.yurikago.or.jp/?

スクリーンショット 2014-08-19 9.10.48

レディスクリニック・高齢者向けグループホームを
運営している医療法人のウェブサイトで、
茶×ピンク×ベージュの配色は品の良い着物を想起させます。

加えて運営理念が縦書きで記されており、
落ち着きや高級感を表しています。

このデザインのまま紙のパンフレットにしてもよさそうですね。
縦書きは画像で表現されています。

和・日本的なもの以外に関するウェブサイト

●後藤達也矯正歯科歯科医院
http://www.gototatsuya.com/


スクリーンショット 2014-08-19 9.13.41

トップページ上部に院長からのメッセージが大きく掲載されています。

他の部分は横書きで、
メッセージのみ縦書きであるため非常に目立っています。

医院のウェブサイトは院長の顔やメッセージが
あまり大きく掲載されていないことが多いですが、
こちらのウェブサイトはトップページにどかんと大きく載せることで
他院との差別化・患者への信頼感提供に成功していると感じました。

 

●UCC DRIPAR
https://www.dripar.jp/pc/

スクリーンショット 2014-08-19 9.14.48
缶コーヒーのUCCが提供する男の情報サイトです。

縦書きで構成することで、
新聞のような立派なメディアであることを
アピールしていると思われます。

こちらのサイトは画像ではなくテキストで縦書きを表現しています。

ソースを見ると1文字ずつ律儀にbrタグで改行していて驚きますが、
こちらはnehan.js(http://www.skuare.net/test/jnehan.html
という縦書きを再現するJavaScriptを使っているため
自動的にbrタグが挿入されたのです。?

CSS3のwriting-modeが抱える問題

CSS3のwriting-mode: vertical-rlを使えば、
簡単に右から左へ流れる縦書きを実装することができます。

が、このプロパティには問題点があります。

まず、CSS3がInternet Explorer 8以前に対応していないことです。
(Windows XPはInternet Explorer 9以上にアップデートすることができません)

Windows XPのサポート期間切れ騒動もあったので
XPユーザーはかなり減ったかと思われますが、
それでもまだ油断はできないでしょう。

次に、最新のFirefox(記事執筆時点ではバージョン31)が
writing-modeに対応していないことです。

他のCSS3プロパティには多く対応しているのですが・・・。

代替策としては、

やはり縦書きを再現するJavaScriptを導入することでしょう。

スクリーンショット 2014-08-19 9.57.40

先ほど紹介したnehan.js以外にも、
竹取JS(http://taketori.org/js.html)というJavaScriptもあります。

こちらはbrタグ挿入ではなくアクセスしてきたブラウザを識別し
writing-modetransform: rotateに仕分ける仕組みです。

日本語だからこそ可能な縦書きという表現。

便利なJavaScriptの登場によりテキストであっても容易に再現可能ですので、
この機会に試してみてはいかがでしょうか。

おすすめの記事