レイアウトを決めるのはブラウザだ

Webレイアウトの最終アウトプットを決めるのはCSSではなくブラウザだよ、という話です。

情報は流し込むもの

Webレイアウトを実現するHTMLは情報を入れるハコにすぎません。情報に合わせてHTMLをマークアップすると、上から順にHTMLタグに応じた見た目で表示されます。

それをCSSでスタイリングしていきます。文字のジャンプ率やレイアウトのカラム数などをコントロールし、画像と組み合わせるなどして魅力的なデザインにしていきます。とは言えベースはHTMLですので根本的な情報の見え方は変わりません。

Webレイアウトは、流し込まれた情報をHTMLとCSSで整形し、ブラウザがその計算結果をレンダリングしているもの、という風に考えてみましょう。

CSSでレイアウト意図を記述する

CSSで記述できるのはレイアウトの「意図」だと考えています。「幅500pxのコンテナを2つ」という数値的な指定をした場合、コンテナが入りきれないブラウザではレイアウトが成立しません。

「最大幅500pxの領域を2カラム」という指定をすると、それは情報を流し込む領域をどのように表示したいか、という意図の指定になります。ブラウザが多少狭いものであっても、2カラムで表示したいというレイアウト意図は成立します。

そうしたレイアウトの意図を用意しておけば、最終的なレイアウトはブラウザが勝手にユーザーに合わせて計算してくれます。CSSで行うレスポンシブデザインの本質はここにあると考えて良さそうです。

デザインツールの進化

一昔前はPhotoshopなどでWebデザインを制作するケースが多かったかと思います。そうした静的なデザインツールで「レイアウト意図」を表現するのはむずかしかったのではないでしょうか。

それから時代はXDやFigmaへと移り変わり、可変する横幅や流し込むテキスト情報を想定したデザイン作成が可能になってきています。こうしたツールではもはや情報がセマンティックに扱われ始めているように感じられます。

たまに上手な人のデザインファイルを見ると、情報が意味を持ちながら可変レイアウトに対応してたりします。ここまで出来ていれば、あとはエンジニアを挟まずにそのままリリースすれば良いんじゃないかと思います。

最近ではFigmaからSTUDIOにそのまま変換できるものも出てきましたね。今後はデザイナーやエンジニア問わず、上手に情報を扱える人が重宝されていくんじゃないかと思います。