最近のWebデザインのトレンドを「何故流行ったのか」から分析してみた。

こんにちは！デザイナーのiuchiです。
今回は10/10に行った社内セミナー「WebDesignTrend -2014 Autumn-」のまとめになります。
最近のWebデザインのトレンドを、「何故流行ったか」を意識しながら自分なりに分析してみました。

PC向けWebデザイン

【PCのスペックや回線速度の向上】

個人の有するWeb環境が向上したことで、重めの処理を使用するWebサイトが増加しました。

画像や動画の全面使用
canvasを使った3D表現
一度にデータを読み込む、遷移不要なデザイン　など

また、「一度にデータを読み込む、遷移不要なデザイン」＝「シングルページ完結型レイアウト」が流行ったことで、それに付随するトレンドも多数生まれました。

ファーストビューに横幅いっぱいのメインビジュアル（Hero Areas）
ゴーストボタン
パララックス　など

【モニタサイズの拡大】

モニタサイズが大きくなり、縦に長い画像を取り入れやすくなりました。

文字の縦書き　など

しかし、従来の960pxレイアウトではコンテンツ左右の余白が目立つようになりました。
そこで、その余白を逆手にとったトレンドが生まれました。

全体を枠で囲う
メインビジュアルのみコンテンツエリアからすこしはみ出させる　など

【スマートフォンの普及】

スマートフォンの普及によってモバイルファーストを意識したレスポンシブ対応しやすいデザインが主流になりました。

ワンカラム
フラットデザイン　など

また、iPhoneのFlash未対応対策として新たなアニメーション技術も生み出されました。

JaveScriptを使ったアニメーション
アニメーションPNG　など

スマートフォン向けサイト特有のルールがPC向けサイトにも適用され、トレンドになりつつもあります。

ハンバーガーアイコン　など

スマートフォン向けWebデザイン

【Webサイトへのスマートフォンでのアクセスの増加】

Webサイトへのスマートフォンでのアクセスの増加によって、表示速度がコンバージョンに響くようになりました。
そこで、少しでも速く早く表示できるようなデザインが求められるようになりました。

CSS3での装飾
Webフォント
オリジナルのSNS共有ボタン（公式のものは重いものが多い）　など

消えつつあるトレンド

ロング・シャドウ・エフェクト
フラットすぎるデザイン（クリックエリアが分かりにくい）
大掛かりなパララックス（ユーザーへのストレス）
カルーセルスライダー（一枚目しかクリックされにくい）

これらは記事や書籍などで「もう使わない方がいい」とよく言及されているものです。
しかし、例えば「フラットすぎるデザイン」なら「矢印をつける」「ほんのりグラデーションをつける」などのちょっとした工夫次第ではまだまだ有効なデザインです。
トレンドに流されすぎず、対象のコンテンツに合うデザインはなにかを考えるべきでしょう。
筆者が「最近見なくなったなあ」と感じているものも挙げておきます。

FacebookページやTwitterへの大げさな誘導（導入しているサイトの一般化）
凝った「ページの先頭へ」（固定ヘッダーに吸収）
パンくず（複雑なサイト階層の減少）

まとめ

【「何故流行ったのかを意識する」ことで、デザインに説得力が生まれる】

ただ「流行っているから」トレンドを取り入れるのではなく、「何故流行ったのかを意識する」ことで、デザインに説得力が生まれます。
（例）全体を枠で囲う→モニタサイズが大きいユーザーにも余白を意識させないデザインになる

【日本のWebデザインは独自進化している】

日本のWebデザインは、膨大な情報や文字数をいかに見やすく、破綻させずに構成するかに特化してきています。
よく、「日本のWebデザインは海外に比べて劣っている」と卑下されがちですが、日本のサイトを評価する海外の声も存在します。
日本のWebデザインってどう思いますか？-日本在住の外国人に聞いてみた
海外のトレンドに左右されすぎず胸を張るべきだと感じました。