最近のWEBデザインについて。カラムレイアウト編

1020blogtitle

こんにちは!インターン10月生のニシグチです!

今日はふたっぱの皆さんと近くのオサレなレストランでお昼いただきました!

そしてすごく勉強になる話をたくさんしていただきました!本当にありがとうございます!

そしてランチもすごく美味しかったです!美味いご飯が何よりも好きです!

 

さて、そんな今日のブログテーマはですね、またデザインの話です。

シリーズにするかわからないですけど、カラムレイアウト編なんて名前をつけてしまいました。

さて、カラムとは何なのか?というとこから説明します。

three

上の図で示した、縦のまとまり(段組み)の事をいいます。(図は3カラムです。)

つまりWEBページのレイアウトを考える上で、骨組みとなる部分です。

サイドには、メニューやらオススメの情報などを表示し、メインカラムでコンテンツを表示します。

3カラムは、画面に表示できる情報量を多くできるなどのメリットがありますが、デメリットとして目移りしやすい、見辛くなるなどがあります。

今日のタイトル画像のように、メインのコンテンツ的なものを3つ並べるデザインは増えています。しかしあのデザインを3カラムと言うのかは少しわからないです…。

そして次に、2カラムについて。

double

こんなレイアウトですね。

これは良くあるデザインだと思います。ブログなどに多いですかね?

こちらもサイドバーにメニューやサブのコンテンツなどを配置します。

サイドバーを右にするか?左にするか?と私も悩んだんですが、人は左側から順にものを見ていくので、メインのコンテンツを最も見せたい場合は左に、それよりも先に見てほしいコンテンツがあるなら、サイドバーを左に配置したほうが良いです。

ちなみにブログでは、右にサイドバーを配置しているところが多いようです。これによって滞在時間が長くなるんだとか。

左にサイドバーを配置した場合、直帰率が少し下がるようです。

そして次に1カラムについて。

single

このようなレイアウトですね。

メインビジュアル下のレイアウトは様々ありますが、要はサイドバーが無いレイアウトですね。

これは見やすくなる代わりに、縦方向の幅が長くなります。

しかしこのレイアウトは、スマホなどのレスポンシブデザインに適しており、デザインが崩れにくいなどのメリットがあります。

最近主流なのはこの1カラムレイアウトですね。

コーポレートサイトなどはこのデザインに切り替わっていってます。

そしてもう一つ、良く見るレイアウト

side

このようなレイアウトです。

サイドのナビゲーションバー(メニューなどを配置)は固定で、メインコンテンツのみスライドするデザインです。

写真などを大胆に配置できるので、インパクトをのこせるなどのメリットがあります。

また、こういったメインビジュアルで画像を大きく配置するなどは増えてきていて、その理由はPCやスマホなどの解像度が向上しているからです。

つまり、こういったレイアウトなどのデザインは、デバイスの能力によってどんどん新しいものになっていくということですね。

それでは今日はこの辺で失礼します。

ニシグチ

コメントを残す