レスポンシブな3カラム・レイアウトの変形パターンを考える

Advertisement

rwd-three-column-layout

ウェブサイトで3つのアイテム(製品ラインとか製品の特長とか)をフィーチャーしたい場合、ふつうに3カラムのレイアウトを使いますよね?ですが、いくつかの条件を満たしつつレスポンシブに対応しようとすると結構難しかったりします。

2つでもなく、4つでもなく、どうしても3つのアイテムをフィーチャーしたい。

four-and-two-column-layout

4カラムだとデスクトップサイズでも各アイテムが小さすぎるし、2カラムだとデカすぎる、みたいな。やっぱり、デスクトップサイズでは3カラムがちょうど良い場合もありますよね。

そんな時どういった対応ができるのか、ちょっと考えてみたいと思います。

レイアウトの条件

たとえば、以下のようなレイアウトの条件があったとします。

  • どの画面サイズでも表示を隠さない(コンテンツ・パリティ
  • アイテムの扱いは極力平等にしたい(コンテンツ・プライオリティ)
  • あえて優先順位をつけるなら、左から1、2、3番の順
  • 誘導用のキャッチコピーまたはアイテムの名称を入れたい(20文字程度)

よくある条件ですよね?

ということで、これらの条件を満たしつつレスポンシブにどんな画面サイズにも対応するレイアウトを考えてみます。

すべての画面サイズで3カラムで表示する

いっそのことスマホからデスクトップまで、すべて3カラムのままで対応してしまってはどうでしょう?

three-col-all-the-way-with-text

上のイメージのように、以下のような条件が揃っている場合は、すべて3カラムでも行けそうです。

  • アイコンやイラストなどで、画像を小さく見せてもOKな場合
  • 表示する文字数が少ない場合

ただ、幅が狭くなってテキストの改行が多くなると読みにくいので、以下のようにレイアウトを変更したほうが良いかもしれませんね。

three-col-another-mobile-layout

以下のような場合はスマホや小さめのタブレットでは3カラム表示はきつそうなので、違ったレイアウトを考えたほうがよさそうです。

  • 写真を使う場合などで、画像が小さすぎると詳細が見えなくなる場合
  • 表現に使いたい文字数が多い場合
  • 画像の上に文字をのせて表示したい場合

Advertisement

画面サイズによってカラム数を変える

たとえば、画面サイズによって表示するカラム数を変えたらどうでしょう?

単純に考えて、モバイルサイズでは1カラム、タブレットサイズでは2カラム、デスクトップサイズでは3カラムで表示するとします。

changing-number-of-columns

1カラムと3カラムの表示は良いとして、2カラムで3つのアイテムを表示する場合ちょっと複雑です。

たとえば、上のイメージの例だと、タブレットサイズの表示の際に一つだけアイテムが下の段に落ちていて、どうにもバランスが悪くなってしまいます。このバランスの悪さを回避するために、いくつかのレイアウト・パターンが考えられますが、どれも考慮する点があってドンピシャなレイアウトがないのが現状ですが、幾つか候補を挙げてみます(自分が思いついてないだけかもしれないけど)。

上下2段にして全幅で表示する

two-col-two-rows

デザイン的にはしっかりはまる感じですが、これだと各アイテムのビジュアル的な優先順位が変わってきます。上下に段を分けることで、どうしても上の段のアイテムに先に目が行きやすくなります。下の段が画面から切れてしまう場合などは特に、優先順位が変わってしまいます。また、全体が表示されている場合は、大きく表示されている方がより多くの注意を引きそうです。色やデザインの扱いでバランスを取るかもしれませんが、なかなか高度なデザイン・スキルが要求されそうです。

2カラムで左右の一方を2段、もう一つを1段で表示する

たとえば以下のようなレイアウトも考えられますが、基本的には上述のレイアウトと同様に、各アイテムのビジュアル的な優先順位が変わってしまうので、細かいデザインの調整で、うまくバランスを取る必要があります。

two-col-one-two-rows

あとは、画像の上に文字をのせるという条件を外しても良いのであれば、以下のようなレイアウトもありですかね?

three-rows-thumb-plus-text

いやぁ、3つのアイテムを平等に扱うレスポンシブなレイアウトというのはすごく難しいですね。汗

そもそもカルーセルは最初に表示されていないアイテムの認知度がかなり下がってしまうので、どのアイテムも平等に扱うという条件をクリアしていませんけど。。。でも、一応アイディアとして。。。

three-col-carousel

さいごに

以上、レスポンシブな3カラム・レイアウトの変形パターンを考えてみました。ここで紹介したレイアウトなら、メディア・クエリレスポンシブ・イメージを使えば、それほど苦労せずに実現できそうです(最後のカルーセルは別ですけど)。また、Flexboxを使えばかなり柔軟にレイアウトが組めるようになると思います。今回思いついたレイアウトはこれだけですが、他のレイアウトの可能性もまだまだあると思います。

「こんなレイアウトもあるよ」というアイディアがあったら、コメント欄やTwitter などで、ぜひ共有いただけたらと思います。

トランスフォーマーなレイアウト、楽しんでいきましょ〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です