読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

『プロとして恥ずかしくない新WEBデザインの大原則』でレイアウトについて考える

f:id:yamato-yamamura:20160217094344j:plain


今日は真面目な記事なので「今日は何の日」は無しです。

Webレイアウトの基本パターン

f:id:yamato-yamamura:20160217092358j:plain

シングルカラム

最近主流になりつつあるレイアウトです(個人的に)

画面の端から端まで使うので、写真を大きくのせることができます。
内容が煩雑ではない4~6ページ程度の小規模なサイトに向いている。

メリット

  • レスポンシブ対応がしやすい
  • 訪問者が内容に集中できる

デメリット

  • ナビゲートが他のレイアウトに比べて劣るため訪問者が他のページに変移し辛い
  • 人の目はZの動きで内容を読んでいくため、

端から端まで文字ばかりになると動きが大きくなり、離脱されやすい。

f:id:yamato-yamamura:20160217093503j:plain

マルチカラム

メインカラムに対し、サイドバー(サイドカラム)と呼ばれる
サブ要素を掲載するレイアウト。
病院や学校など、関連する情報を表示したい際に向いている。

メリット

  • より多くの情報を掲載しやすい

デメリット

  • 内容がごちゃごちゃしやすい

カード型

小さな情報をカード型に掲載するレイアウト。
一度に多くの商品を訪問者に表示できる。
頻繁に新しいコンテンツが追加さ荒れるサイトや、
リアルタイムで表示されるようなもの、
見比べられるものなど、ファッション系のECに向いている。

メリット

  • 一度に多くの商品を訪問者に表示できる

デメリット

  • 整列されていないため、見づらく感じる

グリッドシステム

構築側でないとよくらからないと思う。
コンテンツを12個のボックスとして考えて、
その中に内容を入れて配置していくレイアウト。

メリット

  • 整列されているため構造が解りやすい

デメリット

  • 慣れるまで構築・レイアウトしづらい

フルスクリーン型

最近特に目立つようになってきたレイアウト。
イメージ写真や動画を画面いっぱいに表示させるレイアウト。
雰囲気が伝わりやすいためブランディングに最適。

メリット

  • ブランドのイメージが伝わりやすい

デメリット

  • テキストが表示されない分、何のサイトかわかりづらい
  • 読み込むファイルサイズが大きいため表示までに時間が掛かる

結局、どのレイアウトがいいのか?

業種や掲載する内容にもよるので一概に
「このレイアウトがいい」とは断言できない。

SINGLEカラムレイアウトにこだわりすぎて、
コンテンツが多いのに毎回ページ上部までスクロールしなければ
他のメニューを見られない、というような利便性の悪いサイトになってしまっても本末転倒だ。

ユーザー側に立ち、

「ユーザーはどんな情報を求めているだろう?」
「この後どんなページを見るだろう」

を考えてレイアウトを決める必要がある。


www.amazon.co.jp

今回はこちらの本を読んだので、
その中空一部抜粋して紹介しました。




f:id:yamato-yamamura:20160217094757j:plain

今日は何の日、無いと思いました?
安心してください、ありますよ。

ページトップ