マルチカラムレイアウトのすすめ
WEBデザイン界隈は１カラムレイアウトが相変わらず大流行中ですが、この１カラムレイアウトってどうなんでしょう？
枠にとらわれずに画面全体を自由にデザインできる反面、非デザイナーにとっては見栄えのいい記事を書くのが難しい面もあります。
１カラムレイアウトのホームページは昨今非常に多くなっていますが、だからといってそれに流されず囚われず、訪問者や編集者にとって本当に利用しやすいサイトとは何なのか、考えてみませんか？
１カラムレイアウトのメリットとデメリット
私が普段担当している案件は９割がデザイン支給で、その９割以上が１カラムレイアウトです。
１カラムレイアウトの場合、デザイナーがしっかりと作り込んだ画面レイアウトでは魅力的なページを作りやすいのですが、非デザイナーが記事やページを作成する場合、表示領域が広すぎるときれいにバランスよくレイアウトするのは難易度が高くなります。
そのため、デザイン的に力を入れたいページ以外ではコンテンツ領域の表示幅を最大1000px〜1200pxとして、両端を余白としています。
日本の文化的にフライヤーやバナー広告などでは表示領域の隅々までできるだけ情報で詰め込んだデザインが多い反面、WEBサイトではトップページなど見栄えにこだわったページ以外では、画面の両端がぽっかりと余白になっていることが多く、そのちぐはぐさに違和感を感じることがあります。
特にニュース記事のように見栄えをあまり気にしないページでは、画像やテキストをシンプルに上から順番に配置するだけということになりがちで、テキスト量や構成次第では画面の右側がぽっかり空いてしまう場合があります。
また画像を画面幅全体にぶち抜きで掲載することがありますが（トップページのメインビジュアル・スライドバナーなど）、スマホ表示時とPC表示時のサイズ差がかなり大きくなります。
スマホ表示に合わせたサイズで画像を作成するとPCで１画面に収まらないほど巨大になってしまいますし、PC表示に合わせてサイズではスマホ表示時に天地が狭すぎる、文字がある場合小さくて読めない、ということになってしまいます。
画像の隅々までテキストがあって画像のトリミングが許されない場合、閲覧環境によってはバランスが悪いと感じてしまうことも
これを解決するには概ね以下のいずれかの手法をとります。
- PC版とスマホ版で画像を切り替えて表示する
- 背景画像と上に乗せるキャッチコピー画像を分離して重ねたうえで、背景画像の縦横比を動的に切替えつつ、重ねるキャッチコピー画像の位置やサイズを調整する
デザインや見せたい画像の仕様に合わせた対策が必要になりますが、いずれにしても比較的多めの工数がかかることは間違いありません。
マルチカラムレイアウトのすすめ
そこで、当サイトでは１カラムレイアウトを３カラムレイアウトとしました。
スマホでは全幅がコンテンツ、タブレットでは左側にメニューやバナー等のサイドバーが追加され（２カラム）、PCで画面幅が広い場合にはさらに右側にサイドバーが追加されます（３カラム）。
マルチカラムレイアウトでは、サイドバーに便利なウィジェットを多く追加できるというメリットがありますが、最大のメリットは、コンテンツ領域の幅を狭めることができるという点です。狭いコンテンツ領域では上に記述したようなページ作成の難しさから解き放たれると同時に、一行の長さが抑えられるため長い文章も読みやすくなるというメリットがあります。
Understanding WCAG 2.0によれば一行の文字数は最大で全角40字程度、とされています。
参考：https://qiita.com/takuya0301/items/0cd391701f6a673461ae
また２カラムや３カラムがよく使われていた10年以上前はサイドバーを画面に固定してスクロールしても常に表示するのは難易度が高かったと思いますが、CSSの発展によって簡単に不具合の心配なく実装することができるようになりました。
これによって、コンテンツ領域が狭い＝コンテンツ量が多い場合に長いスクロールが発生＝スクロールするとサイドバーが画面外に隠れてしまい、画面上に広大な空白が発生してしまう、というマルチカラムのデメリットが解消されました。
お問い合わせや申込みフォームなど、訪問者に強く訴求したいページへの導入リンクを目立つ位置に常に表示させておくこともできます。
こうしたご要望は比較的多く、１カラムでは画面右上や右下に常に固定表示されるフローティングバナー（ボタン）として実装することになります。
そうしたご要望に対応させていただいている時によく思うのです。マルチカラム化した方がいいのでは？と。
マルチカラムレイアウトは今は流行遅れかもしれません。
10年以上前にはほとんどのサイトがこうだったという、いわゆる平成レイアウトです。が、このレイアウトには確かにメリットがあったし、サイトの特性によっては１カラムのメリットを上回る場合があるはずです。
折しも平成リバイバルブームが到来しています。なぜかデジカメが流行しているそうです。
３カラムレイアウトの時代がまた来ても全然おかしくないじゃないかと、そう私は思うのです。