2012年2月17日金曜日

カード型のグリッドレイアウトデザインが増えてきた!

スマートフォンの普及の影響で、FLASHでのWebサイト構築が敬遠され、PC版、ガラケー版、スマートフォン版、タブレット端末版、ゲーム機版など多デバイス対応のWebサイト構築が求められます。

FLASHでの表現は、ただ情報を伝えるだけではなく、インパクトあるコンテンツや機能的なコンテンツを可能とし、特にサイトのトップページやスペシャルコンテンツなどに導入するケースが多くありました。
しかし、FLASHコンテンツはiPhoneでは表示できないということもあり、別の表現(ファーストビューとしてのインパクトやデザイン性は大事にしつつ、スマートフォンにも対応した表現)が求められてきました。
そのような要望を実現すべく、jsでの表現やHTML5での表現など試行錯誤するなかで、一つの回答となるようなサイトが出てきました。

自分の記憶では、丸の内.comというサイトが一番印象的だったのですが、カード型といいますか、グリッドデザインでTOPページを構成するサイトです。
初めてこのサイトを見た時は「おおおお!!」っと感動してしまいました。

marunouchi.com:http://www.marunouchi.com/

ニュースやトピックスの多いサイトでは、トップページを上記のようなカード型の記事として掲載し、チラシを見ているかのように、閲覧できるレイアウトです。
オーソドックスな下記のようなレイアウトと違い、目新しく(インパクト)FLASHを用いずとも表現できる点が良いです。

marunouchi.comでは、ウインドウサイズによって、5列から4列→3列と可変するレイアウトにはなっておりませんが、技術的には可能です。

最近では、marunouchi.comのようなカード型のグリッドレイアウトを採用するサイトが増えていますので、気になるサイトをピックアップしました。


愛知工科大学 AUT SPOT 
神奈川大学 神大コミュニティ

株式会社メディアプロ

MARK DEARMAN DESIGNER & ART DIRECTOR

UNIQLO ユニクロ

BEAUTY&YOUTH

RaNa design associates, inc.(株式会社ラナデザインアソシエイツ)

THE EARTH NEWS  ジアス・ニュース

玉川大学 芸術学部 ビジュアル・アーツ学科
株式会社バーグハンバーグバーグ

Tango Gameworks <タンゴ ゲームワークス>

日産:第42回 東京モーターショー 2011

hinikudesign
masukoisamu.com

LOHABUU!! WAKKANAI

クライマークス
RIDE MEDIA&DESIGN株式会社  オフィシャルサイト
株式会社ナインデザイン
charary  キャラクター制作&販売サイト