皆様こんにちは。澤田です。最近あったかくなってきた、と思ったら急に冷えましたね。当社にも体調を崩すスタッフがちらほらいて、全国的に寒暖差とインフルエンザ流行のダブルパンチがきているのでしょうか。皆様もお気をつけください。 さて、本日は今までの定番のものとは違う「ユニークなグリッドデザイン」についてお話しします。こちらの記事によると、2016年のトレンドのひとつには、「ユニークなグリッドデザイン」が予想されるそうです。私は英語が苦手なので翻訳サイトさんに頼って記事を読んだのですが、それによると、z-indexを使った重なりの表現や、カラム・格子状のレイアウトにこだわらない個性的なグリッドレイアウトが増えてきているようです。
ユニークなグリッドデザインとは
整然としたグリッドデザインが主流となった今、少し個性的なサイトに増えてきたのがこのレイアウトです。 ぱらぱらと撒かれているかのように、ホームページ内に点々とコンテンツが配置されているものが多いです。この記事で取り上げられているWebサイトはさらに、重なりや厚みを意味するZ軸を指定するz-indexの使用で、サイトに重なりを表現しています。クリックやマウスオーバーすると、重なっているコンテンツの上下が入れ替わり、操作性の面白さと、画面内の距離感を感じさせます。パララックスとはまた違う、空間を意識させるサイトデザインです。はっきりとカラム分けされたデザインは見やすいですが、型にはまっている印象があるのも確かです。こういったユニークなグリッドデザインは日本のサイトより海外サイトでよく見かける気がします。日本ではまだ流行がきていないのでしょうか？ 個性的なグリッドデザインは、カラムデザインに見慣れた人にとって真新しく目を引くでしょう。操作してみてさらに興味が湧くと思いますよ。
ユニークグリッドデザインのWebサイト
ユニークグリッドなWebサイトはまだ少ないのか、「重なりを表現したユニークグリッド」というものはあまり見つけられませんでした。少し上記でご説明したようなデザインには当てはまらないかもしれませんが、カラムデザインや整然としたレイアウトに縛られていないレイアウトのWebサイトをご紹介します。
CURIOUS SPACE
冒頭で紹介した記事でも取り上げられていたWebサイトです。重なり合ったコンテンツのどれをとっても、お互い積み重なったように動きが変化します。しっかりレスポンシブ対応もされています！
Ricanza
PC版の一番最初のページは、トップの見出しの下に果物の写真が配置されています。しかし果物にマウスオーバーすると見出しが下に、果物の写真が上にチェンジします。果物の色まで揃えられた全体のカラーリングもいいですね。こちらもスマートフォンにも対応したレスポンシブWebサイトです。
Yahoo!JAPAN採用サイト 社長メッセージページ
グローバルメニューのあるHeaderの端まで超えるインパクトのある見出しがメリハリを与えています。このページのように一見適当に見えたりばらばらに見えてしまうコンテンツを美しく配置することも技術がいることなんですよね。
holo shirts.
無彩色の使い方、写真の落ち着いた雰囲気がお互いを引き立てたデザインですね。ステッチのように動く点線が静的だけれど、目を惹きます。
Territory The Storyページ
格子状に縛られないグリッドレイアウトが写真アルバムのようにも見えますね。
さいごに
ユニークグリッド、おもしろいですね。
見た目だけじゃなく操作感の面でも流行がありあらためてWebのおもしろいところを発見できました。これからカラムデザインに縛られない日本産のユニークなグリッドのホームページが増えていくことを期待しています。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。