描写から構成へ

『Every Layout』とコンポジション指向CSS

ヘイドン・ピカリングとアンディ・ベルの共著『Every Layout』が日本語に翻訳された。光栄なことに僕も出版前のレビュワーのひとりとして、微力ながらお手伝いさせていただいている。

タイトルが示すとおり、本書はCSSによるウェブデザインのうち「レイアウト」の問題に焦点を絞ったものだ。レイアウトといってもページ全体のグリッドのことだけではなく、ボタンやアイコンのような小さな部品に至るまで、CSSが「ボックス」として扱うあらゆる要素を対象としている。

テーマの根底にあるのは「コンポジション」というコンセプトだ。CSSによってインターフェイス部品を形づくるとき、それらひとつひとつを独自の、独立したものとして捉えるのではなく、基本的で小さなレイアウトの組み合わせたコンポジションとして捉えるべきである、と著者は主張する。そしてそのように組み合わされる小さなレイアウトを「レイアウト・プリミティヴ」と名づけ、それらを再利用しやすい形で定義し、カタログとしてまとめている。

デザインにおけるコンポジション――日本語でいうところの「構成」とは、すでにある素材をただ組み上げることではない。構成には効率化や合理化といったものを超えた、より重要な意味がある。高安啓介は近代デザインにおける構成の概念について次のように述べている(『近代デザインの美学』、みすず書房、2015年)

近代デザインは、二十世紀のはじめに二つの流れが合流したところで見出されてきたものであり、二つの流れを含みながら発展してきた。その一つは、産業の流れで、そこでは、製品を装飾するよりも製品自体をいかに構成するかが強く意識された。もう一つは、美術の流れで、そこでは、対象を描写するよりも平面や立体それ自体をいかに構成するかが強く意識された。したがって、近代デザインにおいて構成はもっとも重要な理念だったといえる。

装飾や描写から構成へ、という運動が近代デザインの中心にあったわけである。『Every Layout』が主張するコンポジション指向のCSSも、まさにこの流れを汲むものといっていい。では構成がそこまで重要な概念であるのはなぜか。高安は構成とは素材に対する外部からのコントロールであると同時に、素材による内部からの運動を引き出すための行為でもあると指摘する。

構成とは何かをより掘り下げて考えてみるならば、構成とは素材をまとめあげる行為であるかぎり、素材にたいして何かを強いる行為であるにちがいない。誇張していうと、構成という行為には、支配がはらまれており、それゆえに、暴力がはらまれている。ただしそうみるときに、私たちは、内からの構成という理想をかかげることができる。すなわち、構成とはたしかに素材にたいして何かを強いる行為であるが、それでも、素材からの働きかけに応じながら、素材のなかから秩序をもたらす可能性にかけることはできる。そしてそれがもし成し遂げられたなら、支配という能動はなお維持されるにしても、素材にしたがうかぎり、模倣という受動がはらまれることになる。さらにまた、内からの構成がなしとげられたときには、作り上げられた形象の内部において、生きた交通がみとめられるはずである。すなわち、要素どうしの自由な相互作用がみとめられるはずである。

「描写よりも構成を」というと、造形が無機質で無個性なものになるのではないかと懸念する向きもあるかもしれないが、そうではない。むしろコンテンツの力を最大限に引き出し、さらにはコンテンツどうしの相互作用を促すのが、構成というものの本来の意図である。『Every Layout』が提唱している、コンテンツ自身によって内在的にレイアウトを決定させるという手法も、レイアウトという行為は絶対の命令ではなく意図の提示であるべきという視点も、まさに高安のいう「内からの構成という理想」を実現するためのものにほかならない。

CSSの仕様と実装の進歩は目覚ましい。作り手にとってCSSは、ブラウザーにこと細かな指示を与えるためのものではなく、デザインの意図を表現するためのものになりつつある。『Every Layout』の実例の数々は、ブラウザーが備える優れたアルゴリズムをごくシンプルなCSSによって引き出せることの鮮やかな証明だ。

それが何であるかを描写するためのCSSから、それがどのような形であるべきかを示すためのCSSへ。本書はそんな新しい視点を与えてくれる一冊と言える。