wds

Web Design ScratchWebデザインからガジェットまで、web制作に役立つまとめ情報をお届けします

  • はてブ
  • twitter
  • RSS
2011.10.07 10:20

カード型グリッドレイアウトで作られた国内の素晴らしいWebサイトと情報の扱い方について

grid
twitterやってます

更新日時:2011.10.07 10:20

カテゴリ:Webデザイン

最近では誰もが見たことがあるトップページ全体にカードを並べたようなグリッドレイアウト。去年の始め頃から流行し始め、今ではよく見かけるレイアウトとなり一般化してきた感もあります。

まずはこのレイアウトによって得られるメリットとデメリットについて少し考えてみたいと思います。
メリット

  • 情報量の多さから華やかさやインパクトがある
  • コンテンツの一覧性が高く量をアピール出来る
  • カード内に質の高い画像を多く配置できれば全体のクオリティが上がる
  • グリッド配置により多少遊びを入れてもレイアウトの規則性を保持しやすい
  • 各ページにユーザーを誘導しやすい

デメリット

  • コンテンツの量が一定数存在しないと成立しづらい
  • カードの量によって、何から見るべきか迷う可能性がある
  • カード内の画像やデザインが全体のイメージを左右する
  • レイアウトの規則性は発生するが、情報の整理整頓はまた別に考える必要がある
  • 更新頻度が高いと以前見たページを探すのが困難になりやすい(可変の場合は特に)

ちょっと考えた所ではこんな感じでしょうか。全てがこのレイアウトに限った事ではありませんし、個人的なイメージですのでまだまだあると思います。

総合的に考えるとポートフォリオや会社案内などコンテンツの限られてる特設サイト、またシーズン毎にメインの商品を入れ替えるECサイトなどと相性が良いかもしれません。しかし情報量の多いサイトでこれを採用すると、見る側の混乱をまねく可能性があるので工夫や注意が必要ですね。

それではカード型グリッドレイアウトを採用している国内の素晴らしいwebサイトを、情報の扱い方という視点も合わせて見ていきましょう。

可変グリッド

THE-EARTH-NEWS-_-ジアス・ニュースTHE EARTH NEWS | ジアス・ニュース
ナビゲーションをカテゴリ別に色分けし、カード下部にカテゴリカラーを配したデザイン。色によって情報の関連性を気づかせるデザイン。カードクリックで画面遷移は行わず、その場で記事が開く。
スタジオパークスタジオパーク
NHKスタジオパークの案内サイト。カードタイトルと色が見取り図と連動している。
ライフスタイルWEBマガジン|Hellomag(ハロマグ)ライフスタイルWEBマガジン|Hellomag(ハロマグ)
ファッション、グルメ、ビューティなどの情報を扱うWebマガジン。左側にメニューを用意し、カード下にカテゴリ名とカテゴリカラーを明記している。
Tango-GameworksTango Gameworks <タンゴ ゲームワークス>a division of ZeniMax Asia K.K. | HOME
ゲーム好きにはお馴染み、世界的に有名なバイオハザードなどを作った三上真司氏のスタジオ。ゲームクリエイターらしく遊び心に溢れたサイトとなっている。こちらも左側にメニューでカード下部に色分けしたカテゴリを明記。
デザイン・ホームページ制作作成福岡-大分【CONDENSE】デザイン・ホームページ制作作成福岡 大分【CONDENSE】
制作会社のコーポレートサイト。上部にナビゲーションを置き、カードの左上に色分けされたカテゴリを明記している。
SPOTLIGHT---Web-MagazineSPOTLIGHT – Web Magazine|できる30代男のライフスタイル提案ウェブマガジン
30代の男性に向けたwebマガジン。深い黒と浅い黒を上手く使ったデザイン。右側に置いたメニューで情報を整理したスタイル。

固定グリッド

株式会社バーグハンバーグバーグ株式会社バーグハンバーグバーグ
オモロコでお馴染みの会社。スタッフのブログが更新される度に新着が表示される様子。
島根県公認コミュニティ観光・コラム・裏情報・イベント情報満載の島根を応援する島根県公認コミュニティ
連載記事ごとにデザインしたカードを作り、新着記事が表示される仕組み。

mouf-designmouf design

webサイト制作やゲームのUIデザインの制作を中心に活動されているmouf designのポートフォリオとブログ。カード内に必要な情報を明記したスタイル。
BudweiserBudweiser
左上にあるメニュー内のページへダイレクトに移動する為にカードを利用したスタイル。

更新日時:2011.10.07 10:20

カテゴリ:Webデザイン

この記事へのコメント

この記事へのコメントはありません。

コメントフォーム

CAPTCHA


トラックバックのURL

この記事へのトラックバック

この記事へのトラックバックはありません。

About Me

WDSロゴ

「web制作の新しい情報が知りたいけど、仕事が忙しい!」「RSSは登録したものの消化しきれない」WDSはそんな貴方の為に、web制作に関する最新情報をはじめ、おやすみ前の10分間で今日1日の話題が読み取れるサイトを目指します。