Advertisement

2014trend_updated

[fancy_box]海外デザインブログJustCreativeで公開された「The Hottest Web Design Trends of 2014: Updated」の著者 Jacob Cassより許可をもらい日本語訳しています。Thank you, Jacob @justcreative!![/fancy_box]

 

数ヶ月前にも2014年Webデザイントレンドまとめたり予想したり、何度かご紹介しているのですが、Webデザイントレンドの移り変わりはとても早く、5月に入った今流行しているWebデザインを再度アップデート、まとめてご紹介します。

 

同時に2014年に入り消滅するかもしれないデザイントレンドもまとめています。一緒に比較しながら、今後のWebデザイン制作の参考にしてみてはいかがでしょう。

 

 

[list type=”star”][li]2014年に流行しそうな、注目Webデザイントレンド20個を大予想[/li]

[li]2014年に取り入れたい&消えていくデザイントレンド10個まとめ[/li][/list]

 

 

詳細は以下から。

 

 

 

【改訂版】2014年人気のWebデザイントレンドまとめ

 

トレンド 1

コンテンツ・ファースト

 

2014年に入りWebデザインはよりコンテンツを中心としたものとなっています。不必要なエレメントを省き、プレゼンテーションしたい内容に集中できるように心がけましょう。

 

以下のサイトではシンプルで、ユニークな三角形のナビゲーションメニューが、ユーザーをより色々なコンテンツに誘導する手助けをしています。

 

Enjoy-WishList-com1

Enjoy WishList

 

 

 

トレンド 2

革新的なコンテンツ誘導

 

ユーザーによりインタラクティブなwebブラウジングを体験してもらう、ユニークな仕掛けやコンテンツをより見かけるようになるでしょう。

 

以下ではアパートに入り、さまざまな小物やプライベートなアイテムに触ることができる面白い仕掛けを、Webサイト全体でたのしむことができます。。

 

Love-Carmen-Rose1

Love Carmen Rose

 

 

 

トレンド 3

大きなコンテンツ要素の利用

 

ユーザーの多くがテキストだけでなく、インフォグラフィックスなどを用いた、より視覚的なコンテンツは情報が理解しやすいというのを認めています。大きなコンテンツ要素は、レスポンシブWebデザインだけではなく、ストーリー性のあるコンテンツ作成にも向いています。

 

これらのコンテンツはユーザーの注目をひとつのテーマに対して、限られたスペースにあつめることができます。そして太字Webフォントや余白スペースをたっぷりと使ったり、配色でコンテンツを区切ったり、イメージ写真に合わせてみたりすることでより魅力的に仕上がります。

 

Joost-Huver1

Joost Huver

 

 

 

トレンド 4

太字タイポグラフィー

 

でかでかと表示された巨大なタイポグラフィーを見てみましょう。何を伝えたいかシンプルで分かりやすい、メッセージ性の強いデザインに仕上がります。

 

Digital-Werk1

Digital Werk

 

 

 

トレンド 5

鮮やかな配色

 

Pantone社は、毎年シーズンごとにトレンドカラーを発表しています。Webデザインで採用されている配色を確認してみましょう。

 

[list type=”star”] [li]プラシッド・ブルー(Placid Blue) – パステル調のうすい青色、空の様な色合い。平和で落ち着いた印象を与え、ほかのどんなパステル調カラーにも合わせやすい。[/li]

[li]バイオレット・チューリップ(Violet Tulip) – ラベンダーに近い色調で、ロマンチックでノスタルジックなビンテージ感を表現する。とてもフェミニンな色合い。[/li]

[li]ヘムロック(Hemlock) – うすい緑色で、ピスタチオのようなオリエンタルな雰囲気。トレンドのエメラルドグリーンやミント色とは異なる色調で、ほかの明るい色とも合わせやすい。[/li]

[li]サンド(Sand) – ベージュ色。ミルクを加えたコーヒーのような色合いで、ヘムロック・グリーンとの相性も良い。[/li]

[li]パロマ(Paloma) – 灰色でより自然にちかいアース色の質感。単独で利用しても、ほかの色と組み合わせても良い。[/li]

[li]カイエン(Cayenne) – またはコーラル・レッドの色合いで、落ち着いた気持ちにさせてくれるパステル調カラー。ほかのカラーとも合わせやすい。[/li]

[li]フリージア(Freesia) – あかるい太陽のような黄色は、今年も人気のカラーです。[/li]

[li]セロシア・オレンジ(Celosia Orange) – 鮮やかでネオン調のオレンジ色。パントーン社はバイオレット・チューリップとの組み合わせをアドバイスしています。[/li]

[li]ラディアント・オーキッド(Radiant Orchid)2014年トレンドカラーにも選ばれている紫色をベースとしたカラー。バイオレット・チューリップよりややピンクっぽく、フクシャのような色合いで、アース色との組み合わせも良い。[/li]

[li]ダズリング・ブルー(Dazzling Blue) – プラシッド・ブルーより力強くて、濃く、明るい色調。[/li][/list]

 

Fashion-Colors-2014-640x223

Fashion Colors of Spring

 

 

 

トレンド 6

高画質な写真とビデオ動画

 

解像度の高いHDイメージ写真は、ウェブサイトをよりプロフェッショナルに、そして魅力的にメインアイデアを理解してもらう手助けをします。

 

Eventeem1

Eventeem

 

 

 

トレンド 7

フルスクリーン動画

 

ビデオ動画ほどストーリー性のあるコンテンツを伝える良いツールはありません。動画を視聴することで、ユーザーはよりあなたのウェブサイトに長く滞在してくれ、会社や商品、サービスについてより知ってもらうきっかけになります。

Story-and-Heart1

Story and Heart

 

 

 

トレンド 8

シングルページ完結型ウェブサイト

 

より多くコンテンツがまとめられたシングルページ完結型レイアウトは、最後までスクロールされがちで、よりコンテンツ全体を強調することができます。

Fluger-Design1

Fluger Design

 

 

 

トレンド 9

HTML5

 

HTML5マークアップ言語は、Webサイトを構築するめにコアとなるテクノロジーとなり続けるでしょう。HTML5でマークアップされたサイトはコンテンツのストーリー性に注目した、オンラインマガジンのような形となっています。

 

Web-Flow1

Web Flow

 

Slam-Stop1

Slam Stop

 

Fh-Studio1

Fh Studio

 

 

 

トレンド 10

フラットデザイン

 

フラットデザインやシンプルで明快さに着目することで、不必要なエレメント、パーツをWebサイトから取り除き、よりコンテンツやユーザーエクスペリエンスにフォーカスすることができます。

 

Wanda-Print1

Wanda Print

 

Daniel-Moon1

Daniel Moon

 

 

 

トレンド 11

パララックス・スクロール・エフェクト

 

2014年はよりインタラクティブで、実験的なパララックススクロールを実装したサイトが登場するでしょう。以下の参考サイトでユニークなエフェクトを確かめてみましょう。

 

Soyuz-Coffee-Roasting1

Soyuz Coffee Roasting

 

 

 

トレンド 12

ミニマルアイコン

 

シンプルでミニマルスタイルのアイコン素材は、清潔感のあるフラットデザインとも合わせやすいだけでなく、ページ全体のビジュアルをまとめやすくしてくれます。

 


W3-markup1

W3 Markup

 

 

 

トレンド 13

固定ナビゲーション&ヘッダーデザイン

 

このテクニックは、ユーザーがページをスクロールしてもいつでもナビゲーションメニューを触ることができることが目的となります。実際に以下のサイトでレイアウトを確認してみましょう。

 


Level1

Level

 

 

 

トレンド 14

ミニマルスタイル

 

デザイナーはより大きなイメージ写真や余白スペースの取り方、ミニマルテキストの使い方などに注目し、ウェブサイト開発スキルを磨き続ける必要があります。

&nbps;

Goldee1

Goldee

 

 

 

トレンド 15

アクセスしやすいソーシャルアイコン

 

ソーシャルメディアアイコンは簡単にアクセスできるようにしましょう。Experian Marketing Services Studyの調査によると、アメリカ全体の27%のユーザーがソーシャルメディアを利用しています。ソーシャルアイコンを設置することで、ユーサビリティを改善し、エントリー記事の人気度を高め、トラフィックを増加させるでしょう。

 

Visit-Suffolk1

Visit Suffolk

 

 

 

トレンド 16

Retinaディスプレイへの対応

 

Retinaディスプレイに対応していないWebサイトを、MacBookProなどの高解像度スクリーンで確認するとぼやけて表示されてしまいます。アイコンフォントやSVGファイルを利用することが、現在注目されています。

 

Panic1

Panic

 

 

 

トレンド 17

無限スクロール読み込み

 

ユーザーがページの最後までスクロールすると、自動的に新しいコンテンツが読み込まれる「無限スクロール」は、PinterestやGoogle+フォトなどで人気となりました。これはよりインターネットでビジュアルが重視されていることが背景にあります。イメージ写真を多用するサイトでは、よりうまく実装することができるでしょう。

 

Read-Write1

Read Write

 

 

 

トレンド 18

モバイルデザインの増加

 

スマートフォンを中心としたモバイル端末は、今後もますます人気となるでしょう。これからもモバイル・ファーストの考え方を軸に、革新的なモバイル用Webデザインが登場するでしょう。

 

Carlsberg1

Carlsberg

 

 

 

トレンド 19

手続き完了までのクリック数の減少

 

もしあなたのサイトが数クリック以内に予約したり、商品を購入したりできない場合、潜在的な売り上げを失っている可能性があります。これはモバイルサイトだけではなく、デスクトップサイトでも同じことが言えるでしょう。

 

Mundita1

Mundita
 

 

2014年Webデザイントレンド ~ショッピングサイト編~

 

実際に買い物しているような感覚をユーザーに与えることで、よりたのしいショッピングを体験してもらいましょう。インタラクティブなテクノロジーやデザインツール、アプリケーション開発と重なることで、売り上げを向上させる手助けになるでしょう。

 

注目

カスタマイズ、パーソナル機能

 

最近のEコマースプロジェクトでは、ユーザーの好みやニーズに合わせて商品をカスタマイズできるオプションを提供しているケースがよくあります。

たとえばバーチャル試着室で、どのようなグラフィックスタイルが欲しいか自分で決めることができるようになるでしょう。

 

 

注目

ユーザー動向のトラッキング

 

カスタマイズに加えてユーザーの好みをトラッキングし、ユーザーが欲しそうなアイテムを表示してあげることもできるでしょう。Amazonがもっともよい具体例かもしれません。

 

 

 

2014年消えていくWebデザイントレンドまとめ

 

注意 1

無意味なスクロールの消滅

 

ユーザーは特定の目的、あなたのサイトの情報を見るためにスクロールします。しかしながら時々Web開発者は、信じられないほどのスクロールエフェクトを実装し、ユーザーのコンテンツ理解を妨げ、読み込み時間も余計にかかってしまいます。

 

 

注意 2

レスポンシブWebデザインの減少

 

レスポンシブWebデザインのテクノロジーは、モバイルデバイスからタブレット、デスクトップ端末すべてに反映されます。レスポンシブWebデザインが必要ないと言っているのではなく、不必要なサイトもあるということです。

 

たとえばあなたのサイトは、巨大なイメージ写真を使ったり、CSS3アニメーションを多用したり、ダイナミックな動きのあるコンテンツを使ったりしていませんか。そういうときはモバイルバージョンにリダイレクトさせることで、よりページ表示を改善したり、ほかのサービス開発に時間を充てることができるようになるでしょう。

 

参考リンク Separte Mobile Site or A Respoinsive Site – Smashing Magazine

 

 

注意 3

フラッシュWebサイトとイントロ画面の消滅

 

こちらは数年以上言われていることですが、2014年ついに消滅してしまうのではないでしょうか。

 

 

注意 4

キャプチャ・フォームの消滅

 

ボットかどうか確認するために、表示された特定のキーワードを入力させるキャプチャ・フォームもそろそろ使われなくなるでしょう。

 

 

注意 5

テキストボックスの中にあるラベル付きフォームの消滅

 

入力の手助けとなるフォームのテキストも、あらかじめ入力しておくことで、ユーザーの操作の邪魔をしないようになります。

 

 

このほかに消滅しそうなWebデザイントレンド

 

[list type=”hot”] [li]コンテンツ用カルーセルスライダー[/li]

[li]巨大すぎるヘッダーイメージ画像[/li]

[li]自動再生されるビデオ動画[/li]

[li]自動ポップアップ機能[/li]

[li]サイドバーへの広告掲載[/li]

[li]各ページの再読み込み[/li]

[li]読み込みスクリーン画面[/li]

[li]小さなフォントサイズ[/li]

[li]ロング・シャドウ・エフェクト[/li]

[li]ヒップスター風アイコンとロゴ素材[/li][/list]

 

 

いかがでしたでしょうか。これまでのWebデザイントレンドと比較してみると、すこしずつ違いが出てきているのが分かりますね。今後のWebデザインプロジェクトの参考にしてみてはいかがでしょう。

 

 

参照元リンク : The Hottest Web Design Trends of 2014 : Updated – Just Creative