こんにちは、haruです。
秋の味覚がおいしい時期です。お芋、栗ご飯、etc……夢が広がります！

さて、2016年も残り２カ月とわずかですね。
今年を振り返り、昨今のWebトレンドの中から気になるものをピックアップして紹介します。
記念すべき（？）第一回は縦2・3カラム構成のページをテーマにしました。

 

 

縦2・3カラム構成のページ

現状のwebページは1カラムのページが多い印象ですが、任天堂やスターバックス、トヨタ、富士フィルムなど大手企業も縦2.3カラム構成のページを採用しています。
以下にそれらのサイトを掘り下げながら紹介していきます。

 

スターバックスコーヒージャパン　http://www.starbucks.co.jp/

みなさんご存知のコーヒーチェーン店の日本版webサイト。
季節の商品を魅力的なビジュアルで全面的に推しつつナビ情報や更新履歴などをカード型デザインで左右にまとめ、見やすいサイトになっています。
トップがレスポンシブ、下層ページは出しわけです。

 

pcデザインはリキッドデザイン（Webブラウザの横幅を変更するとコンテンツの表示サイズも変更されるWebデザインのこと）かつ、スプリットスクリーンです。

 

spデザインは情報をコンパクトにまとめ、見やすくすっきりした印象になっています。

 

このページはどんなページなのか？

• 左ナビ・メインコンテンツ・最新情報やトピックス・右ナビでまとめてあるレスポンシブページ。
• pc/spでもメインビジュアルが魅力的に見えるよう考慮されている。
• 情報コンテンツはカード型デザインになっている。
• モニター解像度の高いpcページでは多くの最新情報をのせられるよう計算されている。
• spページでは情報量をあえて削ることでページの長さを抑え、スッキリしたページになっている。

 

 

任天堂　https://www.nintendo.co.jp/

言わずもがなの日本最大手のゲーム制作会社。
こちらもメインのゲームを動画やビジュアルを用い訴求しつつ、ナビ情報や更新履歴などを左右にまとめ、見やすいサイトになっています。
出しわけのサイトですが、一部画像を使いまわしたりと更新効率を考えられ設計されています。

 

どのように設計されているのか全体の比率も調べてみました。
pcは幅1920ｐｘで閲覧した際の比率になります。

 

新作情報などpc/sp共通のカード型デザインでまとめてあります。

 

このページはどんなページなのか？

• 左ナビ・メインコンテンツ・右クラブ情報/トピックスでまとめており、見やすく配置されているページ。
• 高品質の動画を用いメインのゲーム商材を推しつつも、モニターサイズを考慮し、次点に推したい商材も意識されデザインされている。
• 情報コンテンツはカード型デザインになっている。
• pc/spで出しわけのサイトだが、一部画像を使いまわしたりできるよう、更新効率が考えられている。

 

 

その他 縦2・3カラム構成のページ

他にも下記のような縦2.3カラム構成のページがありました。
どのサイトもビジュアルを立たせつつ、整理された情報が掲載され魅力的です。

• トヨタ自動車株式会社 公式企業サイト
  http://www.toyota.co.jp/
• 踏み出せ、道を拓け。　 THE SPIRIT OF INNOVATORS | 富士フイルム
  http://brand.fujifilm.co.jp/spirit/
• TF Corporation | ティー・エフコーポレーション
  http://www.tf-corp.co.jp/
• 小豆島商店
  http://shodoshima-s.jp/
• Good Morning Sunshine
  http://gms.life/

 

 

 

縦2・3 カラム構成サイトの 共通点

上記サイトの共通点をまとめてみました。

動画・高解像度の画像の取り入れやモバイルフレンドリーを意識したレスポンシブサイトなど、昨今のトレンドが共通点になっています。

 

 

縦2・3カラム構成のメリット

各ページごとにどうして縦2・3カラム構成を選択したかの細かい理由は変わるとは思いますが上記踏まえて縦2.3カラムを選択する大まかなメリットを考えまとめました。

 

ビジュアルと情報の両立

1カラムのページだとビジュアルを大胆に扱いつつ 情報を掲載するにはどうしても画像・動画自体にぼかしや 色面を薄く引くなどビジュアルを抑える処理を加えなくてはなりません。

2・3カラム構成だとビジュアルと情報をきっぱり分けることにより、 ビジュアルを立たせつつ、情報を伝えることができます。またサイト構成によってはスクロール必要なしで、 一画面でほぼすべての情報を掲載することが可能です。 (スターバックス・ティー・エフコーポレーション)

 

画面の余白を無駄にせずフル活用できる

昨今の環境で高い画像解像度の割合が高くなってきたことにより 1カラムのページだと両端に余白ができやすくなってきたの解消し、 ビジュアルと情報を同時に見せることができます。

 

モバイル対応のしやすさ

モバイル対応する際、各コンテンツによって細かい調整を 都度しなければいけません。

縦2.3カラム構成のページなら、ビジュアルは画像の拡大縮小のみ を想定したデザインがたやすく、情報コンテンツなどはカード型・ ブロック型デザインを利用することで、デザインをそのまま流用し デザイナーコーダーともに効率の良い作業が可能になります。

以上のメリットは昨今の情報を1リソースで管理したい考えと画面解像度の高まりの需要がマッチした結果です。

 

 

縦2・3カラム構成のデメリット

縦2・3カラム構成のデメリットも考えあげてみます。

 

閲覧者の視点を迷わせてしまう

見る箇所が複数あることで、どこから何を見るサイトなのか わからなくなり、ユーザーを迷わせる恐れがあります。

 

情報が少ないサイトには向いていない

あまりに情報量がないのならば、 分割デザインよりもシンプルスクリーンでより大きく画像を使い 世界観や商材のビジュアルを見せたほうが効果的です。

 

 

まとめ

●縦2・3カラム構成のページは昨今の情報を1リソースで管理したい考えと モニター解像度の高まりがマッチしたデザイン。

●特にビジュアルも情報も両方重視したいときに有効です。

●モバイル・レスポンシブ対応もメインビジュアルを正方形・縦長想定にしたり 情報コンテンツにカード型・ブロック型デザインを使用すれば、 デザインにあまり手を加えず対応することが可能なので比較的しやすいです。

●明確な意図をもって制作しないと、閲覧者の視点を迷わせてしまう可能性があります。

 

いかがだったでしょうか？

2.3カラムのページはしっかり狙いをもって設計をすれば、機能性も保ちつつトレンドも抑えることができる、魅力的なデザインであることがわかりました。今後積極的に制作の中に取り入れていきたいものです。