縦組ウェブページのためのグリッド、
レイアウト

　前エントリーで簡単に述べたように、このウェブサイトの内容は、縦組のウェブページとして提供されています。コンテンツ（投稿記事）の実体は、WordPressが出力したHTMLそのものです。縦組表示は、このHTMLを読み取り、その内容を縦組に改めて表示するSWFファイル（Flash）によって行われています。

　このFlashプログラムは、HTMLを読み取り（パースして）、その内容をレンダリングして表示するという点で、ウェブブラウザに近い機能を持っています。また、レンダリングする際に、ページ内の視覚的要素を、所定のグリッド、レイアウトルールに従って配置する点では、DTPで行われるような自動組版に近い機能を持っています。このような機能を備えたFlashプログラムを開発するにあたり、明確、かつ簡潔なグリッドとレイアウトルールを定めておくことが不可欠でした。

　以下、一種のケーススタディとして、このサイトで定めた基本フォーマットの内容を、若干の感想を交じえながら説明します。説明の都合もありますが、開発手順にほぼ準拠した「一　メッシュの設定」「二　グリッドの設定」「三　レイアウトルールの設定」「四　本文以外の要素を含めた組仕様の設定」の順序で述べます。

1　メッシュの設定

　基本文字サイズとして、文字サイズ一四ピクセル、行送り二八ピクセルを基準としました。これをもとに作成したメッシュが［図1］です。メッシュの字詰数は四三文字（六〇二ピクセル）を設定しています。なお、例文は、寺田寅彦「丸善と三越」（大正九年六月。青空文庫に電子テキストあり）からとったものです。

図1　基本文字サイズと行送りに基づいて作成したメッシュ。行間を文字サイズと同一に設定しているので、正方形のメッシュになる。

　行送りを文字サイズの二倍（行間全角アキ）にしたのは、主として読みやすさへの配慮によるものですが、メッシュの縦横比を正方形とする意味合いもあります。これによって、図1で作成したメッシュをそのまま横組にも適用することができるからです［図2］。

図2　図1のメッシュはそのまま横組にも適用可能。

　これでメッシュの作成は終了です。次に作成したメッシュをもとにしてグリッドの設定を行います。

　念のため断っておくと、メッシュを作成してからグリッドを設定する方法は、あまり一般的なやり方ではないと思います（個人的には、メディア、内容に関わらず、いつもこんな事をやっていますが）。ただ、今回のケースでは、ある程度厳密な手順をとった方が、Flash側で行うコンテンツ表示プログラムの開発に好都合です。

2　グリッドの設定

　先ほど作成した四十三字詰のメッシュから、一段組・二段組・三段組・五段組・九段組の五パターンのグリッドを導くことができます［図3］。このグリッドを用いてレイアウトを行うことにします。

図3　メッシュから導出したグリッド。

　グリッドのパータンをある程度の数用意できれば、それらのパターンを必要に応じて使い分けるグリッド・システムを構築しやすくなります。

　ただし、パターンが多ければ良いわけではありません。数学的に多数のバリエーションを用意できるグリッドというのも確かに魅力的ですが、レイアウトは数学ではありません。もっとも重要なことは、設定したグリッドが、こちらの意図に寄り添っているかどうかです。

　今回のケースでは、〈本文の進行に注釈が付随する組版〉を実現したいと考えました。そこで、この意図を実現するための方法として、〈本文〉とそれに付随する〈注釈〉の主従関係が視覚的に了解されるようなグリッドを設定することにし、三段組を基本として、三分の二を本文に、三分の一を注釈・キャプションにあてることにしました［図4］。

図4　グリッドによる本文と注釈の主従関係の視覚的な表現。

　グリッドを設定したら、次はレイアウトルールを定めます。ここではグリッドとレイアウトルールを分けて述べますが、実際には、両者は相補的な関係にあります。レイアウトルールはグリッドに従って設定されるものですし、グリッドもまた、レイアウトルールに従って設定されるものです。レイアウトルールとグリッドを組織化し、機能させるのが、デザイン上の意図になります。今回のケースに即して言えば〈本文の進行に注釈が付随する組版〉という意図のもと、グリッドとレイアウトルールを設定したということです。

3　レイアウトルールの設定

　グリッドの設定内容が、本文組版に即したものである以上、ここで述べるレイアウトルールも本文組版を中心に据えたものとなります。

　ここでいうレイアウトルールとは、見出し、本文、図版、キャプション、注釈などの本文組版を構成する視覚的要素のレイアウト方法を定めた指針です。

　このレイアウトルールが企図しているのは、単に設定したグリッドに合致するように、文字や図表、ホワイトスペースを配置していくことではありません。そうではなく、文章内容と設定したグリッドの視覚的特性を結びつけながら、グリッドに意味付けを行い、読者の文章理解を補助することです。

3・1　本文組版を構成する要素

　そこで、本文組版を構成する要素の階層関係を、はじめに定めておく必要があります［図5］。

図5　文書の階層構造の模式図。本文と注釈の階層関係に似た関係が、図版とキャプションの間にも成り立つ。なお、「見出し」は「段落」に包含している。

3・2　本文と注釈のレイアウトルール

　さて、〈本文の進行に注釈が付随する組版〉においては、文章の末尾や章末に注釈を置くのではなく、縦組で言うところの「頭注」「脚注」のような体裁をとることになります。この組版方法は、注釈をFootnoteとしてページの末尾に置くことに代表されるように、横組の書籍ではあまり一般的なものではないのかもしれませんが、縦組の書籍では古くから行われている伝統的なやり方です。

　「頭注」にせよ「脚注」にせよ、レイアウトルールの一貫として、注釈の配置位置をどのように決定するのかを定める必要があります。

　脚注の配置位置は、大きく言って脚注が発生した行の真下か、脚注が発生した行を含む段落の先頭／末尾のいずれかになりますが、今回のケースでは、「注釈が発生した行を含む段落の先頭行」としました［図6］。技術的な問題ですが、このルールを採ることにより、Flash側で注釈位置を設定する際に、段落の開始位置と注釈の開始位置を揃えるだけで済みます。段落末尾と注釈の末尾を揃える場合、前者に比べると数段階手間のかかる計算をしなければなりません。

図6　本文と注釈の関係。

3・3　図版とキャプションのレイアウトルール

　次に図版とキャプションの位置関係についてですが、キャプションの位置を注釈と同じく脚注位置に定めることにより、同様の考え方のもとに、図版とキャプションの位置関係を決定することにしました。ただし、図版に関しては、図版の寸法を単一にしてしまうと、図版相互の関係性を示すことが難しくなり、視覚的な理解が阻害されます。それでは図版を掲載する意味が半減してしまいますから、図版の大きさにある程度のバリエーションをもたせることにしました。

　図版の大きさのバリエーションが多すぎると、Flash側での処理が複雑化してしまうため、図版の大きさを（高さの上で）大・中・小の三つに限定にすることにしました。

　種別　　　　大きさ　　　　　　実寸法

　図　（大）　　版面一杯の高さ　　六〇二ピクセル

　図　（中）　　本文と同じ高さ　　三九二ピクセル

　図　（小）　　脚注と同じ高さ　　一八二ピクセル

　その上で、キャプション位置の決定方法を「常に図版直後の脚注部分に置く」と定めることにより、図版とキャプションの位置関係を簡潔に導くことができます［図7］。

図7　図版とキャプションの関係。上から図（大）・図（中）・図（小）の三つのパターンを示したもの。

　以上のレイアウトルールに従うことによって、〈本文の進行に注釈が付随する組版〉を実現することが可能です。Flash側でのコンテンツ表示プログラムも、ここに記した内容で処理を行を行っています。ここに記していない重要なルールとして、注釈やキャプションが次の段落にかかった場合の処理方法がありますが、内容としては注釈／キャプションの開始位置を後ろにずらすだけであり、付随的なものに過ぎません。

　このような単純なルールで済ませることができるのは、本文の進行を主体とするという基本的なルールによるものです。しかし、ここで特記しておく必要を感じるのは、この基本的ルールが、ページをスクロール操作することによって本文を読み進んで行くというウェブページのあり方と極めて親和性が高い点です。

　テキストは、行の進行方向に従って進行します。横組の場合は上から下、縦組の場合は右から左に向かって進行します。今回のケースでは、縦組＋横スクロール（Flash版）／横組＋縦スクロール（HTML版）としていますが、行の進行方向とスクロール方向を合致させることにより、印刷物のように、①ページの切れ目を考慮する必要がなくなります。②見開きを考慮する必要もありません。また、③上下左右を切り取られた見開き（あるいはページ）という視覚的世界の中で発生する天地左右の意味を考慮する必要もありません。レイアウトルールに従ってメイキャップされた表示内容も、本文を冒頭から読み進めながら、逐次的に処理を行った結果に過ぎません。

4　本文以外の要素を含めた組仕様の設定

　最後の仕上げとして、見出し、注釈、キャプションなどの組仕様を定めました。あまり細かく組仕様を定めて、いたずらに処理を複雑化したくなかったので、必要最低限の設定に留めています［注1］。

注1　とはいえ、この組仕様には、表組、リストなど、文章表現上（かなり）重要なものが抜けています。必要が生じた時に改めて設定するつもりです。

　要素　　　　　文字サイズ／行送り　タグ

　見出しA　　　一四／二八　　　　　h3

　見出しB　　　一三／二八　　　　　h4

　見出しC　　　一三／二八　　　　　h5

　見出しD　　　一二／二八　　　　　h6

　本文　　　　　一四／二八　　　　　p

　注釈　　　　　一三／二一　　　　　p.note_aside

　キャプション　一三／二一　　　　　p.caption_aside

　見出しは、文字サイズの他に行ドリの仕方を変えています。また、注釈・キャプションの文字サイズが13ピクセルになっていますが、これによって字詰数は14文字となります（14ピクセルの場合は13文字）。

　ここで定めた組仕様は、図5で示した階層構造を反映しながらHTML文書として表現されます［注2］。表中の「タグ」の欄は、HTMLタグとCSSのクラス属性です。Flashプログラムは、このタグを読み取って、表示処理を行っています。表示処理に関連する図版のタグも列挙しておきます。

注2　HTML5は、新規追加されたタグを用いて文書構造をより直截的にマークアップすることが可能です。が、未だブラウザ対応の問題が残っています。このサイトではHTML5が想定しているであろう文書構造に倣ってHTML/CSSのマークアップ作業を行っています。

　要素　　　　　　　　　　　　　　　タグ

　図　（大）　　　　　　　　　　　　　div.figure_whole

　図　（中）　　　　　　　　　　　　　div.figure_inside

　図　（小）　　　　　　　　　　　　　div.figure_aside

　図版のタグは2層構造になっており、divタグの中にimgタグとp.caption_asideタグが入ります。

　　おわりに

　以上で説明は終わりです。内容としては、そこまで複雑なものではなく、単純な定義、ルールの積み重ねという色合いが強いかと思います。したがって、Flashの内部動作も、そこまで複雑なものではありません（もし、複雑な処理を要するものであったら、私の力量では、実装しきれなかったでしょう）。むしろ、グリッドとそれに対応するレイアウトルールを、いかに簡潔なものとしてまとめるかが、焦点であったと言えます。その意味でもっとも重要な基軸となったのが〈本文の進行に注釈が付随する組版〉という方針です。

　このレイアウト方法は、縦組の書籍で伝統的に行われている手法です。具体例として私がパッと思いつくのは、岩波書店の『日本古典文学大系』や、杉浦康平のデザインした『四人のデザイナーとの対話』（多木浩二、新建築社、1975年3月5日）などですが、何も最近に限ったことではなく、明治・大正期の書物や、江戸期の往来物（頭書きの附されたもの）にも同じ例を見ることができます。

　もう少し踏み込んで考えてみると、このような縦書きの書籍の手法を適用することが可能だったのは、このサイトが縦組＋横スクロールの体裁を採用しているからだと気付きます。

　縦組＋横スクロールは、行の進行方向とスクロールの進行方向が一致している状態をもたらします。縦組の書籍を眺めていると気付くことですが、行の進行方向と左右に配された見開きページの進行方向が一致しています。

　言い換えれば、縦組のウェブページで、縦組の書籍と同じ考え方・体裁をとることができたのは、ブラウザウインドウ内のスクロール方向と、書籍の見開きページの進行方向が一致しているため、ということです。

　ここまできて、かえって縦組の書籍とスクロールの親和性に思いをいたさざるを得ません。その一方で、縦組の書籍で伝統的に行われてきた〈本文の進行に注釈が付随する組版〉の源流を、経本折りの書籍や、平安期の絵巻物にまで求めることができるのではないかと想像が広がるのを感じます。また、このような書籍とウェブページの連続性が、横組の書籍（冊子本）には見あたらないのではないか、という直観めいたものも芽生えてきます――この問題については、改めて考えてみたいところです。