縦書きサイト最新事例『大同生命の源流ー加島屋と広岡浅子』（NHK 連続テレビ小説『あさが来た』主人公のモデルになった人物です）

2016.01.18

おはようございます・こんにちは・こんばんは。読みもののウェブデザインが好きな松島です。本年もよろしくお願いいたします。

昨年のことですが、制作実績としてもご紹介しましたとおり、シナップは大同生命さまの『大同生命の源流ー加島屋と広岡浅子』というウェブサイトを制作しました。現在放送中の NHK 連続テレビ小説『あさが来た』の主人公白岡あさのモデルになった、大同生命創業者でもある広岡浅子のドラマティックな人生をご紹介するサイトです。

目玉となるのは、このサイトのために入念な取材をつづけながら連載されている、読み応えある文章です（加島屋の歴史・広岡浅子の生涯・もっと知りたい広岡浅子）。ドラマの舞台に赴いて撮影した写真や貴重な史料も豊富に織り交ぜ、家族やたくさんの協力者とのエピソードとともに語られています。制作現場も、取材中に新たな事実がみつかったりしてとてもエキサイティング。もちろん、商業出版の書籍編集時と同様、専門家による校閲も行われています。

そして、そのコンテンツにふさわしい表現として、ウェブにはまだめずらしい、縦書き・リフロー・横スクロールをさらっと採用しているのも特徴です。トリッキーな手法ではなくウェブ標準の縦書き仕様に基づいた実装を行いました。

ウェブで読みものをデザインするといえば、ということでシナップにお話をいただき、ぼくもチームに加わって本文部分を担当しましたので、今日はウェブ縦書きの最新事例としてぼくからご紹介します。ウェブや電子出版での組版について思うことも、少し書いてみようと思います。

「たしかに、縦書きをごくごくふつうに使ってるサイトって珍しいけど......縦書き自体は見たことあるよ。最新事例なの？」

はい。たしかに、縦書きで表示されたウェブコンテンツ自体は、かなり以前からいくつも存在しています。ただし、アメリカ生まれのインターネット。なので、その実現方法はかなり特殊なものが大半でした。

たとえば、もう全部画像で表示してしまえ、という方法があります。あるひとつの閲覧条件下の見た目は完璧に確保するという割り切りで、制作コストも非常に小さいでしょう。けれど、デバイスの多様化や解像度の増加などに対応していくのはむずかしく、テキストデータとしてもアクセスしにくいので引用や誤字修正にも手間がかかります。ウェブの場合、このパターンの実装は、長く残し参照されるページの実装に向きません。

ほかにも、〈そのままでは横書きで表示される文を、１文字ずつ改行したりして縦に並べ、それを１行ぶんの文字量ごとに箱に入れて、右から並べ直していく〉、といったトリッキーな方法があります。横書きと縦書きで字形や向きがちがう記号は、ずらしたり、画像で代替したり。この道は茨の道で、いかにもバッドノウハウらしさに満ちた、非常に煩雑で特殊な原稿処理が必要になります。また、それだけの手間をかけても、方法のぎこちなさは見た目のぎこちなさにも表れがちです。

それでも諦めず、文章に最適化したデザインを施し、文章のほうも表現に合わせて入念に調整してつくられた、素敵な縦書きウェブサイトも存在しています。けれどもそれでも。視覚表現を優先するためにテキストデータとしての再利用が難しくなったりすることも多く、たとえば引用のための部分コピーや、ページからの単語検索、検索エンジンによる内容把握などの障害になったりしがちです。いや、それもがんばれば回避できる、のは確かなのですが......非常に実装コストが高く、いたちごっこの徒労感や、本来表現したいこと以外に多大な労力を使っている感覚は、拭えません。

結果、こうした手法では、その表現がコンテンツに合っているか、読みやすいか、ウェブに広まり伝わる文章メインのコンテンツとして公開されているか、......といったことよりも、「縦書きである」というデザインの特殊性が前面に出た表現になりがちでした。また、ぼくたちが今回運営をお手伝いしているような、量や内容が事前に決まりきっていない書き下ろし原稿が即座に追加されていくようなウェブサイトの編集にも向きません。

今回採用したのは、CSS 3 の writing-mode（日本語訳）というウェブ標準の縦書き指定を用いた、ごくごく自然な方法です。間に縦書きレイアウトのための特殊なビューワプログラムなどは挟まず、ウェブブラウザ自体の機能のみで表示させています。自然な方法、と言ってしまいましたが、それを自然に使えるようになったのは、ようやくここ数ヶ月のことだと思います。ここ数年で最新ブラウザに縦書き対応の実装が進み、そのブラウザが一般に浸透し、荒削りだった表示もだいぶこなれてきて、同時に、横スクロールもしやすいタッチデバイスが来訪者の大半を占めるようにもなった、いまこのタイミングでやっと、使い始められると判断しました。

こうしたタイミングで、大手企業さんによる、大ヒット中のドラマに関係したサイトが採用したという、その点について、今回の事例は最新の成果だと思っています。

「つまり、機を捉えたという話？　実装自体は単純で、ならではの工夫とか、なかったの？」

いいえ。今回の試みが現時点で最新の事例であることは確かだと思っていますが、それはそれ、縦書き仕様も成熟しきったわけではなくて、まだまだ揺れや不足があります。最新ブラウザでの表示にも満足がいくわけではないのです。そこをうまく調整するための補助的な実装には、今回も力を割いています。

シナップではこれまで、さまざまな「読むためのウェブデザイン」を手がけてきました。たとえば、５年前に公開した「最前線」では、読み進めると同時に音楽や様々な演出を添える「レッドドラゴン」や、ふつうのブログに見えて予想外の展開をする「謎と旅する女（渡辺浩弐『2013年のゲーム・キッズ』）」、ツイッタで毎日新作を公開する漫画をウェブサイトでは延々と読み続けられるようにした「ツイ４」など、星海社さんと一緒にさまざまな試みを続けています。個人でも、ブラウザさえあれば動くBiB/i（ビビ）という電子書籍リーダを開発しています。今回の縦書き実装には、これまでに得たさまざまな考え方と技術を反映しました。

基本的に、ウェブブラウザは上から下に進行するコンテンツを表示するようにつくられています。パソコンやスマートフォンの OS もまずはそうつくられているため、慣れ親しんだウェブサイトの操作系を崩されることは多くのユーザを困惑させます。

今回のサイトも、全体を貫くインタフェイスはオーソドックスなものです。そこに縦書きを埋め込むため、さまざまな混乱をできる限り押さえ込むよう努めましたが、はじめて見る横スクロールコンテンツに、最初はどう操作したものか戸惑いを感じるかたが多いかもしれません。操作法がわかっても、パソコンのマウスでは横スクロールがしにくく、面倒を感じることもあるでしょう。それでも今回は、ユーザに最初の努力をお願いする代わりにコンテンツの個性を立てて、トータルでもっとも濃い体験をしてもらうことを選択しました。

その表現のために縦書きを選択したので、日本語の文章がより自然にレイアウトされるよう、ブラウザの基本機能だけではできない様々な細かいことを水面下でやっています。BiB/i はオープンソースなのでそこからもいくつかの機能を拝借しましたが、今回のために開発した補助機能もたくさん。ウェブ技術に関心のある方は、素の HTML ソースと、最終的な DOM 構造やそこに適用された CSS を見比べてみるのもおもしろいかもしれません。ウェブサイトはもちろんひとりでつくれるものではなく、ぼくは縦書き表示の本文部分に特化した関わり方をしたのですが、横書き前提で構築されたサイトの他の要素との結合がしやすいように設計してあります。

ほか、原稿はマークダウンベースの拡張書式に簡易マークアップしたのち、それを中間フォーマットとして校閲対応ほかの修正やマークアップの調整はそこで行っています。最終的な HTML への変換は、専用処理で完全に自動化しました。毎週の編集と更新の基本フローを安定させることで、書かれた中身をどう扱うかに注力できています。

「うーん、それってほとんど、提供する側か裏側のことでしょう？　コンテンツや読者にとって、いいことってあるの？」

あります。

これは持論なのですが、ぼくたちはみんな、文章を読んでおもしろいと思うとき、書かれた言葉以外のさまざまなことを同時に受け取っているからこそ、そう感じているはずです。コンテンツとデザインは、不可分です。

ウェブデザインは、文書構造とプレゼンテーションを疎結合にすべきだと云われます。それは無論のことで、ひとつのシチュエーションに限定された表示結果だけを用意しようとすれば、他のシチュエーションに対応できず、それを満足に受け取れないユーザを生み出すからです。ただし、ユーザがうけとるのは、文書構造ではなく、その再生結果です。言葉と構造とデザインが疎結合な状態で同時配信されるからこそ、ウェブはアクセシブルであるのだし、再利用も可能なのだし、ユーザはユーザ自身の環境でそれらを任意に組み合わせて再生した表現を得ることができるのです。

ウェブ制作者は、ユーザの再生結果をフルコントロールできません。これは素晴らしい制約だと思います。

ちょっと話が飛ぶようですが。HTML と CSS を中心としたウェブ技術を用いた組版は、可能だと思います。しかし、ウェブページとして表示されるコンテンツに対しては、組版を追究すべきでないと思います。これは、ネガティブな感情ではありません。

多くの方々がおっしゃることですが、ぼくも「組版は清書だ」と考えています。読者に対してどのようなかたちで言葉を届けるか、方法や媒体に応じて、デザイナーは最大限の努力をはらいます。印刷物であれば、紙の大きさや素材が決まっていて、ユーザに届いた瞬間それが変わるなんてこともないので、静的なものとしてもっともよい効果を挙げるために、デザイナはむしろ決めきることに力を割くでしょう。

印刷物のデザイナは、きまったかたちで読者に届けるのだから、よりよいひとつのかたちを固着させるために、想像力をフル稼働させて清書すべきなのです。

一方ウェブでは、そうではありません。表示できる面積ひとつをとっても、ぼくとあなたのパソコンのディスプレイのサイズは違うかもしれません。ブラウザのウィンドウも、いつも全画面ではないでしょう。そしてあなたも、おなじウェブページをパソコンで見たりスマートフォンで見たりするかもしれません。インストールされているフォントも異なります。

ウェブページは、再生される環境で表示が完成されます。きまったかたちで読者に届くのではないのだから、ウェブデザイナがすべきなのは、よりよいひとつのかたちを固着させようとすることではなく、想像力をフル稼働させて、読者と読者の閲覧環境に清書を委ねることです（これは、電子書籍についてもまったく同じです）。

ぎりぎりのせめぎ合いでもあります。今回のサイトを横書きで読みたい人もいるでしょう。その人に対して、ぼくたちは縦書きを押しつけているのかもしれません。ブラウザの操作でスタイルシートを無効にできるとはいえ、それはものすごく面倒なことです。ある程度までの表現は、ウェブでも、結果的に読者に押しつけてしまえます。

けれども、ぼくたちはそれを、押しつけではなく、誠実な提案だと信じて行っています。今回のサイトは、できれば縦書きで読んでいただきたいと考えて企画し、原稿も、縦書きで表示される想定で書かれています。そのデザインが文章の内容と協力し合って表現できることがあり、それがこのコンテンツにとって重要と考えたからです。

書かれた事実を受け取ることは、横書きでも、スタイルシートなしでも、不足なくできるようにしてあります。けれど、送り手としてのぼくたちは、できる限りたくさんの人に、できるだけよい体験を届けたくて、縦書きを採用しました。縦書きであることを目標とするのではなく、あくまでコンテンツのためのデザインの一部が縦書きなので、本末転倒とならないよう、読者の体験を高めるための実装を心がけています。

また、これは様々な意味で最新の事例だと思うので、さらなるユーザビリティの向上はここから出発するのだと考えています。詰まるところはユーザとクライアントのよりよいコミュニケーションを実現することが目標なので、今後も努力を続けていきたいと思います。

ドラマを観ながら、その世界に大きな影響を及ぼした広岡浅子にまつわるこのウェブサイトを楽しんで読んでいただければ、とてもうれしいです。