同じ幅の12のカラムでレイアウトというアプローチを捨てたウェブサイトが増えている気がする。Bootstrapですらバージョン3では12に分けることもできるよ的なアプローチ(12カラムでやれと言わんばかりではあるけど)になっており、より柔軟なカラム・レイアウトが求められているような気配がある。時代の流れは速い。

12カラムは多様なデバイスに溢れる今の時代にはもう向かないという話もあるけど、12カラムがなんとなく減ってきているのはそういった理由ではない。(r)em単位や%を使うなら7割くらいの問題は解消できるし、残りの3割は総カラム数の調節でどうにか出来る。

じゃあなんでかと言えば、枠を決めて物を詰め込むのではなくて、物がぴったり入るように箱をあつらえるという手法が可能であるということをようやく皆が理解し始めたから。このことは多様なデバイスがもたらした福音と言えるのかもしれない。唯一の、ではありそうだけど。

ウェブではコンテンツの多くは文字で、それは流動的なもののため、固定幅の12カラム(枠)にうまい具合に収まってくれることが多い。しかしそれは収まっているだけ。多様なデバイスに溢れる現在においては、その枠が物理的な制限によりまちまちになるので、ユーザーの読感もまちまちになってしまう。そこをならして、ユーザーの感じ方を強迫的にではなく均質化するには、コンテンツ(物)に合わせてカラム(箱)をあつらえる必要が出てくる。

ボトムアップ。


単純にコンテンツの占める幅を決めて、それで制限すれば良いということじゃない。幅を制限するとデバイスによって余白が変わるので、コンテンツに対するイメージは変化する。ギリギリおさまるような時と、左右にコンテンツと同じかそれ以上の余白がある時とでは、当然コンテンツの受け取られ方も変わってくる。

このことは、コンテンツと余白のどちらの均一化を取るか、というような二者択一になりそうだけど、それを両立させて解決しようとするアプローチはいくつも出てきている。例えば閲覧領域のサイズによってフォントサイズを調節すれば両立させやすい。Google+のように幅に応じてカラムを増やすというのも良い。


CSSでのレイアウトがfloatプロパティーと複雑怪奇なマージン操作でしか行えなかった時代には、12カラムは大きな利便性をもたらしてくれた。同時にその12のカラムにハメコミ合成するために、文章や画像、そしてHTMLを編集するという揺り戻しも起こってしまった。それはそれでレディ・メイドなウェブページを量産するために良しとし、コンテンツにあつらえたテーラーメイドなウェブページをじっくりと制作するために様々なアプローチを組み合わせる、というような時代になりつつあるのかなと思う。