読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

#5 ウェブでは文字の前にレイアウト制御に精通しなければならない

TW草稿

注記:この記事から「タイポグラフィー」と書いてきたものを「タイポグラフィ」に統一する。

なぜ、実際にブラウザで(HTML+CSSで)タイポグラフィを組んでみるのが難しいのかと言うと、サイズ*1が明確じゃないからだ。紙ならだいたいサイズが規格として決まっていて、「それじゃあ版面考えましょうか」となる。しかし、ウェブサイトでは、widthは限りなく自由だ。デバイスの横幅を紙に擬えるはできそうだが、widthの指定はデバイスのサイズを問わないので、必ずしもこのアナロジーは正しくない。

まず、ここでどう始めようか戸惑ってしまう。加えて時代はマルチデバイスだ。さらにはウェアラブルから読まれることもいずれは考えなくてはいけない時代だ。しかし、ここでは少し目先のことだけを考えるようにして、スマートフォンやPCディスプレイのことのみを考えるようにしよう。

思い返せば、「960 Grid Design」は有益な基準だった(自分がウェブデザインを始めた頃にはもはや「960 Grid Design」の時代ではなかったが)。これはグリッドの構成から見てもRWD(レスポンシブ・ウェブデザイン)とも相性がよかった。しかし、いまはそういうような基準がない。「960 Grid Design」が廃れた理由は定かではないが、full widthの傾向に押されたためと思われる。

画面いっぱいに画像を広げるデザインは、ワンページレイアウト、LP界隈を中心に早く取り入れられ、Amazon.comでも採用されるに至った。そして、本国アメリカに少し遅れるようにして、Amazon.co.jpでも今ではトップページに使われるほどになった。最近のウェブデザインの傾向を要約すれば、「画面いっぱいで可変」ということになるだろう。

さて、RWDでないかぎり、つまりかつての固定幅レイアウトではないかぎり、1行あたりの文字数の制御などの潔癖性は確保されうる。むろん、widthも製作者の支配下にある。1行あたりの文字数を適切に設定するというのは、タイポグラフィデザインにおいては、基本中の基本である。だが、RWDを中心とする可変の傾向は、こうしたタイポグラフィにおけるコントロールを難しくする*2

それゆえ、タイポグラフィ指向のウェブデザイナーたるべきものは、文字にこだわる前に、レイアウトの制御に通じておかなければならない。いくら文字にこだわったとしても、レイアウトがそれを台無しにしてしまう、ということがRWDの時代にはあり得る。

レスポンシブ・ウェブデザインにおけるレイアウト操作(およびそれに関するコンテンツ設計)というのは、ひとつの分野として成立していて、それなりに技術も必要とされる。ここにタイポグラフィ指向ウェブデザイナーの活路を見いだせる。

これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)

これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)

*1:ここのサイズが何のサイズなのかはまだ明確じゃない。bodyに対するwidthなのか、containerとクラス名を付与される部分に対するwidthなのか、あるいはpタグが直下にくる包含ブロックのサイズなのか。加えて、対応するタイポグラフィ用語もまだ明確じゃない。ただ、ここではおぼろげにサイズと呼ばれるもので通してしまって構わないと思う。

*2:RWD以前にCMSによる制御不可能性が生まれたことについては、ここでは踏み込まない。