Pages Navigation Menu

For Creative Communication

1日100サイト見て分かったWebレイアウトの傾向 2013/11-12

最近いいWebデザインを見る時間がなかったので、一念発起してAwwwardsから「1日で100サイト」見てみました。

100sites

だいたい1サイト3分で、3 x 100 = 300min = 100サイト見るのに5時間かかりました。対象はSOTD (Site Of The Day:入選みたいなやつ)と、”Business/Corporate”カテゴリのHonorable Mention(佳作みたいなやつ)です。12月と11月の更新分だけで100サイト以上ありました。

後半はだいぶ飽きてきたのですが、やはり集中して見ることでいろいろなパターンが見えてきます。昨今のWebデザインのトレンドは「フラットデザイン、可変グリッド、フルスクリーン、パララックス」とのことですが、日々ワイヤーフレームを描くWebディレクターの立場から、もう少し細かい気になった点をメモします。


縦長ページのどこにグロナビを固定させるか

パララックス効果が導入しやすくなったことで、「縦長のページに全部入れて、適度にアニメーションさせる」レイアウトが全盛となりました。そこで気になるのは、グローバルナビの置き方(下層へのリンクであることも、ページ内リンクであることもある)。

ふつう、「上」なんですが…

Glasvasen1

Glasvasen2

http://www.glasvasen.se/

(トップだけ下に固着させて、スクロールすると上に固定する。使いやすい)

特にきれいなサイトで見かけるのが「左ナビ固定」+縦スクロールの組合せです。タブレットのアプリを意識したUIと思われます。スクロールはすんなりでき、左から多段で出てくるメニューもけっこう使いやすい。

Casting-Moscow

Casting Moscow2

http://castingmoscow.ru/

意外なのは「下に固定」というマッカランのパターンですが、案外わかりやすい。

The-Macallan1

The-Macallan2

http://www.themacallan.com/the-whisky/the-1824-series/

いろんなパターンがありますね。個人的には左固定を一度うまくやってみたいです。

ちなみに、左固定のまま、コンテンツエリアの高さをほぼ固定にしたレイアウトにすると、一層アプリっぽくなり、優れた安定感を見せます。(ただしこのサイトは、13インチでもコンテンツエリアの高さが少し足りない感じ)

Travel Alberta Tripplanner

http://tripplanner.travelalberta.com/

オーバーレイによる詳細コンテンツの処理

トップばかりに目が行くデザインの世界で「下層ページをどう収めるか」は見逃されがちですが、情報設計上避けて通れないテーマです。

多段グリッドの展開とあわせて、よく見られるのが、「遷移しないでオーバーレイ」という下層コンテンツ展開のパターンです。

Names for Change1

Names for Change2

https://www.namesforchange.org/

このように、コンテンツが「左右」からにゅるっと出てきて、右上の「CLOSE(または×印)」で閉じる、というパターンが見られます。前述のTrip Plannerも同様。

他によくある下層の処理は、とにかく1カラムで全部入りにしてしまう、、というパターンです。「サイドバー」があるサイトはほとんどありませんでした。。あるのはWordPressの有料テンプレートぐらいだ。。

新着情報はどこへ?

トップページの情報配置で、ふつうのコーポレートサイトを作るときに困るのが「新着情報(ニュースリリース、更新情報など)」の処理です。

しかし、コーポレート系が多く含まれる100サイトを見ましたが、「新着情報エリア」的なるものはほぼ存在しません。

ブログエントリーが何件か(1件のことも)出ているのがせいぜいで、あとはBlogメニューとして独立させるか、”For more information” などと、Facebook/Twitterアカウントに飛ばしてしまうものがよく見られます。

よく言われる「更新感」があるサイトは非常に少ない。公式サイトはStaticなものと割り切り、更新系のコミュニケーションはBlogとソーシャルメディアに代替させる、というのがトレンドなのかもしれません。
(なぜ国内のコーポレート案件だと、かくも「更新感」が求められるのだろう…)

写真のクオリティ勝負

流行りの「フルイメージ」は、写真のクオリティ勝負。

ついディレクターはどーんと「メイン画像」っていう四角をワイヤーに置いて満足してしまいますが、これがばつっとはまる素材がない限り、フルイメージ作戦は成り立ちません。

コンテンツの面では、どこでも絵が撮れる旅行系業種は、圧倒的に強いですね。例えば”Westin Finds”は旅行雑誌AFARと連携し、綺麗な写真を背景全面に展開。ただし、下層にいくとけっこう写真選定が「粗い」印象を受ける。。

Westin1

Westin2

http://westinfinds.com/

ロシアのコーヒー生産者Soyuzのサイトは、うまく味のある写真を使って組み上げています。

soyuz1

soyuz2

http://www.soyuzcoffee.com/

こういった「いい写真」がない、特に「カメラマンを入れても撮りようがない」業種のときにどう攻めるか、考えどころですね。。


といったところで。
だいたい100件みて「びびっ」と来たサイトが15個ぐらい。十分な収穫だと思います。Awwwardsは本当は毎日チェックしておきたい(だいたいWebDesigning誌や国内のギャラリーサイトでも同じものが紹介される)のですが、没入してインプットする時間も定期的に取りたいと思います。

コメントを残す