主要ブラウザが対応し、注目を集める縦書きwebデザイン。そこで縦書きについての考察と可能性を探ってみました。

縦書きWeb普及委員会がW3Cに協力して国際標準化や普及活動をし、電子書籍のビューワーや、一部デジタルサイネージでも使用されたり、2015年にリリースされたFirefox41でCSSの標準実装ができるようになったことで主要ブラウザが対応し、がぜん注目を集める縦書きwebデザイン。1月21日に開催したCPI x CSS Nite「After Dark」(30)に参加してきました。デジタルネイティブの人には「縦書きなんて無くしてしまえ」という向きもあるようですが、デザイナーとしてあらためて縦書きについて考察してみました。


CPI x CSS Nite「After Dark」(30) http://cssnite.jp/afterdark/cpi/vol30/

イベント概要としては
・CSSでの技術的な背景。
 実装する際のポイントなどの技術解説
・デザイナーさんと電子書籍の作成に関わる方によるパネルディスカッション
といった内容。


一言で縦組みといっても、ルビや禁則処理、縦中横など色々な要素が関係しています。

眼球と筋肉のつき方イラスト

W3Cの勧告状況を見ると安心して実装できるまでにはあと少しかかりそうです。



人体構造から見た「縦書き」



そして、印象的だったのがパネルディスカッションの際に出た人体構造の話。以下はその要約です。



人間の眼球を動かす筋肉は真横にはついているが、真上・真下にはついていないため、横の動きは単純かつスムーズだが、上下の動きは色々な筋肉が連動し、動かすため、横の動きに比べて負荷が高い。このことから、文章を読むスピードは横書きの方が速く、縦書きの方が遅いという研究結果があるそうです。


また人間の視覚は横長なので、人体構造上、横書きの方が無理がなく理にかなっていると言えます。




眼球と筋肉のつき方イラスト

「縦書き」の効用

横書きの方が、読むスピードが速いということは脳による情報の処理もそれだけ忙しくなります。一方、縦書きは処理が遅いせいか読んでいる間にも脳に余白が生まれ、想像の余地や感情の機微が意識できるのではないでしょうか。「行間を詠む」というのはそういうことから生まれるのかもしれません。

俳句なんかは断然縦書きの方が情景が浮かびますよね。

眼球と筋肉のつき方イラスト

なので、旅館や和菓子など和風のモノから、歴史、年表、小説などの読み物、雰囲気作りや、ちょっとした情動を喚起する際に、縦書きはとても効果的です。

ただ、こうした感覚は私たちが日本での日々の生活を通して培われてきたもの(いわゆる縦書きの媒体を見たり聞いたりしてきた中で)なのでデジタルネイティブな世代には当てはまらないかもしれません。逆に外国人には日本的ということでアピールできそうですが...。

和のテイストでなくても、見出しや伝えたいキーワードを縦書きに、長文を横書きにすることで、視線の引っかかりや、スピードの緩急がつきリズムが出ることで、あきさせない、疲れさせないで読んでもらうことができます。

眼球と筋肉のつき方イラスト

webでの縦書き実装が実現すると、縦組みの文字ブロックが各デバイスでブラウザからはみ出ないようにレイアウトをするとか色々注意点もありますが、アクセシビリティなどを犠牲にすることなく表現の幅が広がり、ユーザーに、より伝わるレイアウトができることはデザイナーとしてとてもありがたいことです。

最後に、縦書きWeb普及委員会が主催する「縦書きWebデザインアワード」が開催中です。

事例や技術的な解説もありますので一見してみてはいかがでしょうか。

  • 1

デジパでは、一緒に働いてくれる仲間を募集しています。詳しくはこちら