『Every Layout』に到った背景と思想についての私の解釈
こんにちは、シフトブレインでエンジニアとして働いている安田（@_yuheiy）です。
先日、株式会社ボーンデジタルから出版された書籍『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』に、監訳者のひとりとして携わりました。
本書は、CSSにおけるレイアウトをテーマとしていますが、同時に、それをあらゆる環境においても破綻することなく、堅牢に実現するための、CSS全般について言える哲学を追求したような書籍です。レイアウトとはどのようにあるべきで、そしてCSSとしてどのように表現されるべきであるかという態度において、首尾一貫した理論を提示するものです。
このように、筆者独自の意見が強く主張される書籍はCSSの文脈では珍しく思えます。しかし本書の主張は、私自身のかねてからの問題意識とも重なるところが多く、また昨今の業界的な常識にアンチテーゼを唱える重要な問題提起だと感じられたのです。
この記事では、これまでのCSSにはどのような背景があり、いかにして『Every Layout』に到る流れがあったかについて、私なりに解説を試みたいと思います。
CSSとはなにか
CSSは、ウェブサイトに一貫したスタイルを適用するために設計された言語です。デザインにおいて、同じものが同じように見えることの重要性は言うまでもありませんが、その実装を愚直な方法ではなく、備えられた仕組みに則って効率的に行うことを目的としています。
加えて、いくつもの画面サイズやデバイス、ブラウザの種類やユーザー設定といった要素の掛け合わせからなる、到底想定しきれないほどの数の利用環境に対応すべく、しなやかで多義的とも言える性質が備わっています。
CSSを使うと、唯一の結果を求めるのではなく、いくつものルールに基づいた、生成のためのロジックを定義することになるのです。制作者がスタイルを完全に制御しようとするのではなく、こうしたCSSの性質を活かして、ある程度の判断をブラウザの自律的な処理に委ねることで、あらゆる状況に対する備えとなり、自ずと問題を回避できるようになります。こうしたCSSの性質を最大限活用した設計戦略が、レスポンシブデザインです。
これらは、決まったひとつの形を作り上げることを目的としたデザインツールの発想とは大きく異なっています。用途に応じてツールを使い分けることは大切ですが、そうしたツールの使用が中心になる場合でも、まず前提としてウェブが持つ目的意識について理解しておくことは欠かせません。
レスポンシブデザインの到来
スマートフォンが普及し始めたころ、デスクトップ向けのウェブサイトとは別に、スマートフォン用のウェブサイトを制作するというプロジェクトが数多くありました。アクセスしてきたユーザーのデバイスの種類に応じて、そのいずれかのサイトを提供するように振り分けるという戦略です。しかしこの場合、市場に新たなデバイスが登場するたびに対策を講じる必要があり、あまり潰しの効かないアプローチでした。
ウェブデザイナーのEthan Marcotteは2010年に、レスポンシブデザインという用語を作り出しました。要点としては、特定のデバイス専用のウェブサイトを作るのではなく、閲覧環境に対して段階的に適応できるようウェブサイトを設計することで、結果としてより多様な環境に備えることができるというものです。
私にとってこれは、未来により自然な形で適応するための、ウェブらしい開かれた解決策だと感じられました。固定されたターゲットに向けて逐一対応を行うのではなく、コンテキストに呼応するように計画された設計で備えること。耐久性のあるアプローチというのはこういうものだと思います。
しかしこうした発想は、現在の一般的な認識とは異なっているように思えます。
レスポンシブデザインという言葉については、もはやあえて言うまでもないというほどに当たり前になっていますが、その意味するところは人によって様々です。よくある認識としては、ページの幅が広がるとデスクトップ用、狭まるとスマートフォン用。これらの切り替えを一枚のHTMLで実現していれば、レスポンシブデザインである、というところでしょうか。結果的にはおおよそ間違いではないかもしれませんが、真意を取りこぼしています。たとえば、ページの幅が広がったときにはデスクトップ向けの機能を提供し、狭まったときにはスマートフォン向けの機能を提供する、というような切り分けになってしまうかもしれません。しかし、必ずしもその想定通りの使い方をされるとは限らないのです。
仮に、デスクトップに複数のウィンドウを同時に表示したいというとき、ブラウザのウィンドウサイズはデスクトップ向けサイトとして「典型的」なものにはならないでしょう。もし「タブレット用デザイン」や「スマートフォン用デザイン」があるならば、その形式で表示されるかもしれません。つまりデバイスの画面解像度を基準にしてデザインしても、あまり意味のない結果になってしまいます。
エッジケースの話をしているように思われるかもしれませんが、ユーザーにとってこれはごく自然な利用方法であるはずです。それに目を瞑って、理想的な状況だけを意識してデザインしても、それはごく限られたユーザーにしか届かない、言わば叶わぬ理想となってしまいます。それよりも私は、より多くの状況をカバーできる全体最適なデザインが必要であると考えます。
CSSアーキテクチャの複雑化
CSSは言語構造として、全体最適を指向する設計が実現しやすいようになっています。まず全体に関わる一般的なルールが先にあり、それに対して特殊なルールを複層的に積み上げていくようにスタイルが設計されることを前提としています。個別と全体の関係を意識しながら、より普遍的なルールに基づいて設計することで、CSSをシンプルに保つことができます。
しかしそれに反して、個別最適で複雑なルール設計が求められる場面があります。設計者がCSSについてよく理解していないとき、細部まで作り込まれたり変化に富んだスタイルが好まれるとき、制作プロセスを統制することができないとき、CSSの仕組みとして無理のある設計を受け入れざるを得ない状況になります。
個別最適を求めれば求めるほど、構造は複雑化して、不具合が生まれやすくなります。それに対処するために場当たり的なルールを増やすことになり、CSSの運用コストは指数関数的に増加していきます。
複雑性に対処するために、昨今の風潮としては、CSSの上に新たな仕組みを被せたような代替技術が提案・採用される流れがあります。CSSの仕組みを抽象化し、元来のCSSとはまた別の思想に基づいて、運用しやすいような形に落とし込まれたものです。
こうした代替技術によって、既存の問題のいくつかは解決できるようになる一方で、また別の問題を生み出してしまうという難点もあります。
保守的な立場から言うと、そうした技術の中から、継続的に利用し続けられるものを選定する難しさがあります。GitHubを眺めていると、その手の新しい技術が毎日のように生み出されていることがわかります。主流となる顔ぶれはある程度定まってきているようにも見えますが、登場したばかりの技術に大きな注目が集まることも多く、1年後の状況を予測することは容易ではありません。ウェブサイトやアプリケーションの多くは何年も運用が続いていきますが、途中で技術的な節目が訪れたとしても、一度採用した技術をそう頻繁に置き換えるわけにはいきません。あらかじめ適切な選択をしておくためには、膨大な調査も必要となってきます。
考え方によっては、複雑性を閉じ込めるための新たな箱を導入することとも言えます。それ以前ではとても許容できなかっただけの問題を、新たに抱え続けられるようになった、というわけです。すると、運用上でのある面での問題は解決できたとしても、スタイル設計の根本的なまずさを見過ごしてしまうことになるかもしれません。ある種の「痛覚」を失った結果、潜在的な立ち行かなさを抱えてしまうということです。もしかするとこの問題は、CSSらしい設計を意識していれば回避できるかもしれません。
フロントエンド技術の急進化によって、学ぶべきことを判断するのが難しい時代になったと感じています。個々の技術についての情報が膨大に増え続けてきた結果、普遍的な知識が埋もれてしまい、なにから手をつければいいのか見当もつかないという状況を見聞きします。CSSにおいても、さまざまな議論の背景があまりよく理解されていないように思う場面がよくあります。しかしフロントエンド技術があくまでCSSを前提としているかぎりは、CSSそのものについてのノウハウは欠かせません。なにかしらの形でCSSが抽象化されていたとしても、CSSそのものについての理解がないとうまく使いこなすことはできないのです。
『Every Layout』という思想
だから今こそ、CSSに立ち返らなければならないと考えました。それも個別具体的なテクニックだけではなく、CSS一般について言える汎用的な考え方のようなものが重要です。
『Every Layout』の根底にあるのは、まずCSS自体がデザインのための道具であるという意識です。多くのウェブ制作の現場でのワークフローでは、先にデザインカンプを作成し、そのデザインを見たままにブラウザ上で再現するという流れになるのが普通ですが、『Every Layout』では最初からCSSでデザインを始めるということを推奨しています。
CSSは結果を記述するものではなく、ルールを記述するものです。ある条件においてどのように振る舞うべきか、という宣言をいくつも組み合わせることで、望む結果が得られるようなシステムを形成するものです。スタイルがいかにあるのかという設計の形そのものを記述するのがCSSと言えます。
しかし設計のプロセスとしては、具体としての結果の前に、抽象としての設計が必ずしもあるわけではありません。これら複数の視点を行き来しながら、相互作用的にあるべきシステムの輪郭が描かれていくのです。CSSを使ってデザインするということには、こうしたイテレーションの必然性が含意されています。
このとき重要になるのは、ルールの宣言は綿密に張り巡らせるのではなく、あえて遊びを持たせることです。絶対の命令ではなく、意図の提示をすると考え、ブラウザにとっての解釈の幅を広げて、さまざまなコンテキストに応じた適切な判断ができるようにすることです。制作者が制御しようとするのではなく、ブラウザに委ねられるように、言わばマイクロマネジメントを避けることで、ブラウザに組み込まれた優れたアルゴリズムを引き出せるように工夫します。
逆に言えば、制作者による個々の場面での判断を徹底的に排除するということでもあります。あるパーツを選択しさえすれば、正しいレイアウトが自動的に行われるようになるため、ページの制作が大きく省力化されます。しかしこれは単純にコスト削減で終わる話ではなく、思慮深く設計されたフレームワークを採用することで、未知の状況に対する備えとしても機能するということを意味します。ウェブサイトの利用環境はつねに不定であり、取り扱うコンテンツも、パーツの組み合わせ方も、運用の中で目まぐるしく変化していくでしょう。そうした本質的に動的なウェブの性質を損なわないままに、尊重し、順応していくためには、『Every Layout』が示すような方法論が必要であると考えます。
方法論について
しかしCSSにおいて意図の提示が肝要であるように、『Every Layout』という方法論についても、すべてが絶対的な「命令」であると理解すべきではないでしょう。前段で述べたように、現在ではいくつもの選択肢があり、なにをどのように判断すべきかという基準も、周囲の環境によってまったく変わってしまうかもしれません。
そうした場合に、『Every Layout』を採用するかどうかという判断は二者択一ではないはずです。『Every Layout』で扱うテーマは多岐にわたり、細かいテクニックから原則に至るまで、CSSに関する数々の知見が余すことなく紹介されています。あるひとつのアイデアを採用できなかったとしても、それ以外で参考にできる部分はいくつもあると思います。
そして『Every Layout』の実践は、そこに書かれている内容だけでは終わりません。本書を読み終えたとき、言わばそこがスタート地点です。示された方法論を適用し、うまくいくこともあれば、そうならないこともあるでしょう。そんなとき肝心なのは、あなたなりの解釈です。『Every Layout』が示すのはひとつの答えですが、唯一の正しい答えなどというものは存在しないのです。あなたが必要とする答えは、あなたが見つけ出すしかありません。あなたなりのものだからこそ価値があるのです。
私は、ひとつの方法論に、絶対的な答えを求めるような風潮に違和感を抱いていました。そこに到達しさえすれば、あとはもう考えることを放棄してしまえるような。それはある種の理想ではあります。しかし現実的には、それほど簡単な問題ばかりではないはずです。
だから、よりよく考えられるようになるために学ぶのです。新しい足場を作り、その上で自分なりに創意工夫して新しい意味を見い出すために。
『Every Layout』 出版の経緯
原書に当たるウェブサイトが公開されたのは、今から2年と半年も前のことです。それが目について真っ先に読んだ私は、非常に感銘を受け、今すぐ各所に自慢して回りたいようなじれったさでどうしようもなくなりました。
それからしばらくしてから、縁あって、『Every Layout』の日本語版を出版するという企画が立ち上がります。きっかけは、株式会社ボーンデジタルの編集者である岡本さんにご興味を持っていただいたことです。岡本さんはこれまでウェブ系の書籍編集をいくつも手がけられており、『Every Layout』に近いテーマの書籍としては、『Design Systems―デジタルプロダクトのためのデザインシステム実践ガイド』や『ウェブタイポグラフィ─美しく効果的でレスポンシブな欧文タイポグラフィの設計』を担当されています。『Every Layout』では、訳あって途中で別の方と担当を交代することになってしまいましたが、岡本さんのご尽力がなければ本書が生まれることはありませんでした。
翻訳作業については、正直なところ私自身そのような経験がなかったため、翻訳についての書籍などを参考にしながら、見よう見まねで、それなりの苦労をしながら進めることになりました。どうしても小慣れた訳文にならず、時間をかけて考えて、何度も翻訳し直したりしているうちに、最初に想定していたスケジュールよりも大幅に出版日が遅れてしまいました。もっと早くこの本を日本の現場に届けられていればと後悔していますが、不幸中の幸いとしては、翻訳作業の終盤に原書が改訂することになり、日本語版もそれに合わせて最新の内容にアップデートすることができた、という出来事もありました。
書籍にまつわる作業は、少なくとも楽しい思い出とは言い難いものでしたが、得難い経験ができたことには感謝しています。
本書については、私のブログでも紹介していますので、ご興味があればこちらもご覧ください。
本書の存在によって、日本のウェブ制作者のみなさんにとってなにか得られるようなものがあれば、とてもうれしく思います。
▼ 採用情報
シフトブレインでは、新しい仲間を募集しています。全社フルリモートのため、全国からのご応募をいただけます。
募集の詳細は、Wantedlyにてご覧ください！
▼ SHIFTBRAIN GOODS STORE
Photographer: Koki Michiai