Webでの文字のレイアウトについて - 2011年に試してみたこと -

2011年の後半あたりから文字や文字組に興味を持ち始めました。元々、大学時代に文字についての勉強をちゃんとできていなかったことが、ある種のコンプレックスのように感じていました（今もそうです）。そのうえで「デザイナー」という肩書きを持っていることを嫌って、名刺にデザイナーではなく「制作」とわざわざ入れたこともありました。

そんなこんなで過ごしながら今年読んだ本が「文字をつくる―9人の書体デザイナー」と「文字講座」という本でした。どちらの本にも文字がどんなふうにできたのか、どんな想いでできたのかといったことが書かれていて、非常に面白かったです。それから書体や文字組に関する本を読んだりして少しずつですが勉強している毎日です。

最近では電子書籍が少しずつ読めるようになって来ました。私もiPhoneで読んだり、iPadで読んでみたりしています。私もWebに関する仕事をしているので、最近ではWebの文字組についていろいろ試してみたりしています。ここでは今試していることについて少し紹介したいと思います。

マルチカラムレイアウトで段組み（くらげだらだら）

まず最初に試したのはマルチカラムレイアウトです。はてなブログをテストしているときに私は長い文章を書いてテストしていました。そこで長い文章をキレイにレイアウトする方法について考えて、好きな雑誌を参考にしてマルチカラムレイアウトにしました。

CSS3のマルチカラムレイアウトはモダンブラウザで早くから実装されていましたが、あまり使用されている例を見たことがありませんでした。実際に作ったブログデザインではいろいろと意見をもらった上で、Media Queryを使ってエントリーの幅とカラム数を変化させています。最初は横幅のMedia Queryだけ適用させていました。しかし横幅を狭くして２カラムにすると、最初のカラムを読んで次のカラムへ移るときに上下スクロールしなくてはいけませんでした。これはこれで移動距離が長くなってしまうので縦方向のMedia Queryもつかったカタチにしています。

横方向のスクロールが出てしまうので、その点が気になりますが、Webkit系ブラウザの場合はスクロールバーもカスタマイズしています。他にもドロップキャップやtext justifyを使ったりしています。この時に試したことの詳しくは「くらげだらだら」にも書いています。

縦書きのレイアウト（くらげごはん。）

これも一冊の雑誌をモデルにして作りました。季刊誌「考える人」の2011年秋号では「考える料理」という特集が組まれていました。その中の１ページをモデルにレイアウトを構成したのがこのブログです。

Webの縦書きも結構前から試みられてきました。私も確か竹取JSとか試したことがあります。しかし、縦書きのレイアウトもいまだしっくりくる使用例があまりないように思います。縦書きにした時の問題としてあるのが、コンテンツが横に長くなっていってしまうという問題です。横書きであれば次の行が下へと続いて縦スクロールになりますが、縦書きの場合は次の行が左へと続いて横スクロールになってしまうのです。

「くらげごはん。」では雑誌のレイアウトを参考に、縦書きとカラムレイアウトを組み合わせることで自然に読めるように工夫してみました。ほかにも、記事のタイトルを写真の上にのせるレイアウトやキャプション、縦中横を表現したりしています。まだまだ実装されていない技術も多いので、意図したレイアウトで表示できるブラウザはWebkit系ぐらいですが、他のブラウザでも読むことができるようにある程度対応させています。

「くらげごはん。」のトップページも雑誌をイメージしていて、最新の記事の写真を一面に使って表紙のようなイメージを、記事タイトル一覧は目次をイメージしています。

ブログは書き方やレイアウトによっていろいろなカタチ・見せ方ができるものだと考えていました。例えば、写真を見せるためのブログやレシピを書くためのブログ、インタビューの様な対話を書くブログみたいなものもあるかもしれません。最初はそんな一つのブログのカタチを提示しようと思っていたのですが、そこまでは作り込むことができなかったかもしれません。一冊の雑誌のようなブログが出来ればと思ったのですが…。

スマートフォンの縦書き

f:id:kudakurage:20111029185918j:image:w200

少し前にiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【後編】というエントリーでスマートフォンの縦書きについて書きました。iPhoneのiOS5から明朝体フォントがサポートされたり、CSSの縦書きがサポートされたので試してみたというエントリーです。

これから増々モバイルデバイスでWebを見る機会が増えると思います。モバイルデバイスの文字組は、電子書籍のような縦組でなくても、Flipboardのようなリッチグラフィカルな見せ方など、まだまだ可能性の感じられるところだと思います。今はこの分野（モバイルデバイスと文字組み）が私のもっとも関心のある所で、2012年はこのあたりについて研究してみたいなぁと思っていたりしています。とはいえ、DTPの文字組みの知識もままならない状態なので少しづつではありますが勉強していきたいと思っています。