2014年、進化しているWebデザインのトレンドを実際に効果的に使用しているサイトともにチェックできる無料のE-Book

Post on:2014年6月4日

sponsors

Webデザインの現在のトレンドの多くは2013年頃から浸透しはじめ、さまざまな形に進化し続けています。そんなWebデザインのトレンドを実際に効果的に使用しているサイトともに紹介している無料のE-Bookを紹介します。

2014年も残り半年ちょい、早いものですね。

このE-Bookとは別に、トレンドの流れをさまざまな切り口からチェックしたい人は下記の記事も参考にしてみてください。

E-Bookは無料で、全187ページオールカラーのPDFです。各トレンドごとに説明と、実例が15サイトくらい掲載されています。
下記に各トレンドと中身をざっくり紹介します。

1. The Era of Content

コンテンツの時代: ウェブサイトのレイアウトやデザインは確かに、ビジターを引きつけます。しかし、それは実用的なコンテンツを持っているときだけ機能するものです。現在は、テキストや画像や動画をコンテンツに沿って効果的にデザインするサイトが増えています。

2. Storytelling

ストーリーテリング: ストーリーテリングは2013年ごろから重要視されるようになりました。ユーザーに単に情報を提示するだけではなく、物語性をもたせることでより強力なコミュニケーションツールになります。

3. Responsive Websites

レスポンシブウェブサイト: 「Responsive Web Design(RWD)」という言葉ができてから3年が過ぎました。レスポンシブはもう単なるトレンドではなく、テクニックの一つとして確立されていると言ってもよいでしょう。デスクトップPCの時代からスマフォへ、そしてウェアラブルPCへとその重要性は拡大していくでしょう。

4. Flat Design

フラットデザイン: フラットデザインは2010年にMicrosoftから発表された「Metro UI」を皮切りに、Google、Appleをはじめとする何千というデザイナーが後に続きました。2013年はフラットの年だったといってもよいでしょう。そして2014年になった今も変わりありません。
このフラットデザインはコンテンツファーストやレスポンシブといった他のトレンドと非常に相性がいいので、もうしばらくこの傾向は続くでしょう。

5. Parallax Scrolling

パララックススクロール: 2011年にローンチした「Nike Better World」は、ウェブデザインの世界に大きな衝撃を与えました。パララックス自体はアニメやゲームの世界で昔から存在していましたが、大胆なレイアウトと美しい背景が異なるタイミングでスクロールする錯覚が多くのユーザーを魅了しました。最近の傾向としては視差効果を単に使うだけでなく、想像を超える動きやさりげない動きをスクロール時に取り入れてコンテンツをより魅力的にデザインしています。

6. Video Background

動画の背景: 2013年に特に人気が高くなったテクニックが、動画を使った背景です。動画は最もエモーションを伝えることができるコンテンツで、HTML5と共により身近になりました。先に挙げたストーリーテリングにとっても不可欠なツールです。

7. Non-Standard Navigation

ちょっと変わったナビゲーション: コンテンツのどこにいるか？ここからどこにいけるか？ナビゲーションはウェブサイトで非常に重要な役割を担う要素です。多くのサイトでは上か左に配置されており、これはウェブの当初から使われてきたパターンです。
2013年あたりからこのパターンが変化してきたように思いませんか？ページを見る方法自体を変えてしまう面白いナビゲーションの人気が高くなっています。

8. Fixed Navigation

固定表示のナビゲーション: スクロールしても定位置に表示されるナビゲーションを実装する技術自体は、CSS2のposition:fixedやframeなど昔からありました。最近採用されるのはこれらの技術を使ったものではなく、レスポンシブに対応した固定表示のナビゲーションです。スマフォなどの小さい画面では小さく、デスクトップでは大きく表示されます。またアニメーションなどのエフェクトを加え、ウェブサイトにダイナミックな感じを与えています。

9. Metro Grid

メトロUI: 「Metro UI」はMicrosoftがWindows 8に採用し、著作権論争の後、「Windows 8-style UI」と名を変えました。名前は変わりましたが、このトレンド自体は廃れることはありませんでした。Pinterestのようなグリッドベースのサイトと非常に相性がよく、2013年に非常に高くなり、2014年になった今でも人気が高いままです。最近ではカード型のレイアウトとして、多くのサイトで利用されています。