デザイン日記（1月12日）＃レイアウトの種類

今日のテーマはwebサイトのレイアウトの種類について。
前に書いた記事で特徴的なものは触れたんですけど、一つ一つの特徴とか把握してなかったんで、ここらでまとめておきます。

今日のポイントはレイアウトそれぞれのメリット・デメリット、採用理由などが何なのかについてです。言語化が難しいかもしれませんが、頑張っていきましょう。
今日のwebサイト
・SENN / セン：https://sen-n.com/
・湖都コーポレーション：http://www.koto-cp.com/
・Championオンラインストア：https://www.hanesbrandsinc.jp/champion/c/c20/

掲載内容への集中を促す１カラムレイアウト

こちらはSENNのトップページです。
１カラムのレイアウトは、視線の誘導が少ないため、下に続くコンテンツに集中しやすい感じがします。また、こちらのページではより一層伝えたいことを明確に伝えるために、上の画像のファーストビューに限らず余白をたっぷりとって見せるコンテンツを絞っています。
１カラムはこのサイトのようなストーリー性のあるコーポレートや、LPに使われることが多いようです。
逆に、多くの情報を載せたい場合は、優先順位をしっかりとつけておかないと、ユーザーは混乱してしまいそうです。
あと、メニューの出方がすごいかっこいいので、トップ右上のハンバーガーメニューを押してみて欲しいです。

整理された情報を美しくまとめるグリッドレイアウト

こちらは湖都コーポレーションのトップページです。
一見すると写真が多く、ごちゃごちゃしてしまいそうですが、グリッドにそって並べられているため、整然とした印象を受けます。
コードをみていくと、各コンテンツの幅と高さは、サイトの幅の25％を基準に決まっているようです。少しの隙間なくピッタリ並んでいるので、気持ちがいいレイアウトですね。窮屈という印象はなく、安定してるって感じ。
グリッドレイアウトの難しい部分は、要素の区別がつきにくい点でしょうか。一見しただけでは、どれがどの情報に結びついているのか、わかりにくいですね。

要素を並列に整理して並べるカード型レイアウト

Championのオンラインショップのジャケットのページにきてみました。
画像と値段がグルーピングされて一目でたくさんの情報を目にすることができます。
洋服は特に、たくさんある中から選んでいくので、一度にたくさんの情報をザッピングするように見ることができるカード型デザインは最適ですね。
そのほかのジャンルでも、カード型レイアウトはECサイトに用いられるケースが圧倒的に多いようでした。
デメリットとしては、要素を配置できる領域が決まっているので、詳細な情報が載せづらいということでしょうか。
そのため、主力商品などの情報はトップページや特設ページに載せ、商品一覧のページをカード型レイアウトで並べる構造がECでは多いようでした。
商品の個別ページもありますので、一覧ページはあくまで導線という位置付けのようです。