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

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

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

PDFのキャプチャ

Web Design Book of Trend 2013-2014

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

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

PDFのキャプチャ

1. The Era of Content

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

2. Storytelling

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

3. Responsive Websites

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

4. Flat Design

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

5. Parallax Scrolling

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

6. Video Background

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

7. Non-Standard Navigation

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

8. Fixed Navigation

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

9. Metro Grid

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

10. Mix-and-Match Typography

複数の書体を組み合わせたタイポグラフィ
ウェブでのタイポグラフィと言えば、ミニマルなものを好きな人が多いですが、最近目立つのがこの複数の書体を組み合わせたタイポグラフィです。2つ、もしくは3つの書体を混ぜて、それに合わせてデザインします。
PDFのキャプチャ

11. Clarity and Simplicity

シンプル
分かりやすくシンプルであることは、2013年に大きなトレンドとなりました。これはコンテンツファーストのアプローチとなり、フラットデザインとも非常に相性がよく、強力なトレンドです。ユーザーのことを考え、効率的でシンプルなデザインを提供します。

Web Design Book of Trendのダウンロード

E-Book(PDF)をダウンロードするには、下記ページでメールアドレスを入力するとダウンロードページに移動するので、そこからダウンロードができます。

サイトのキャプチャ

Web Design Book of Trend 2013-2014

sponsors

top of page

©2018 coliss