2013年、絶対に流行るwebデザイントレンド まとめ

By@mtoksuyOn
2013年、絶対に流行るwebデザイントレンド まとめ

2013年の webデザイントレンド をまとめてみました。

webデザイン を表現している素晴らしいサイトを紹介していますので

参考にしながらトレンドを見ていきましょう。

レスポンシブwebデザイン

web系に携わる人で知らない人はいないくらい浸透したレスポンシブwebデザイン。タブレット、 スマートフォンの普及は2015年-2016年まで伸びますので、2013年は更にwebサイトは レスポンシブ に対応しなければならない年になります。

CLEAR AIR WORKS

CLEAR AIR WORKS

複数のトレンドを採用していて、ザラつき感が巧いです。

Treehouse Blog

Treehouse Blog

海外の web系ブログ で、シンプルなデザインで色の使い方が好きです。レスポンシブ もこのくらいな感じが一番ユーザーに優しいと思います。

Mashable

Mashable

有名情報サイト。広告がなければ良い レスポンシブwebデザイン じゃないでしょうか。

関連記事

レスポンシブwebデザインの作り方とSEOとUXを考察

目次に戻る

Modern UI

Micrsoft が Windows8 タッチパネル画面で提唱しているUIなのですが、各webサイトがデザインに取り入れている流れがあり、今年絶対に流行るデザインパターンの大本命。基本はカラーテーマに沿った色合いでデザインしていき「お洒落、わかりやすい、モダン」なデザインです。

Metro UI CSS

Metro UI CSS

Modern UI っぽい。こんな色合いが Modern UI ですね。因みに、このサイトは Modern UI の CSS と レスポンシブ の CSS を無料配布しています。

Interactive Advent Calendar

Interactive Advent Calendar

タッチパネル対応、ランダムでパネルが変わります。ロゴの位置が斬新。

Calorie Mate

Calorie Mate

均一ブロックで見やすいですね。ナビゲーションもシンプルで良い感じです。

とは言っても Modern UI サイト はまだ少ないです。

後に記述する フラット UI サイト が多いのかもしれません。なので、がっつり Modern UI なサイト作成の為に「Modern UI アクセントカラー」を紹介します。

Modern UI アクセントカラー

■Lime

#A4C400

164,196,0

■Green

#60A917

96,169,23

■Emerald

#008A00

0,138,0

■Teal

#00ABA9

0,171,169

■Cyan

#1BA1E2

27,161,226

■Cobalt

#0050EF

0,80,239

■Indigo

#6A00FF

106,0,255

■Violet

#AA00FF

170,0,255

■Pink

#F472D0

244,114,208

■Magenta

#D80073

216,0,115

■Crimson

#A20025

162,0,37

■Red

#E51400

229,20,0

■Orange

#FA6800

250,104,0

■Amber

#F0A30A

240,163,10

■Yellow

#E3C800

227,200,0

■Brown

#825A2C

130,90,44

■Olive

#6D8764

109,135,100

■Steel

#647687

100,118,135

■Mauve

#76608A

118,96,138

■Taupe

#87794E

135,121,78

参考サイト

アクセントカラーまたは背景のテーマの変更 | Windows Phone の使い方(日本)

目次に戻る

フラットデザイン

フラットデザイン とは シャドウ や グラデーション を使い立体的に見せる所を フラットな表現 をする デザイン方法 です。一番身近な フラットデザイン はGoogleが使用しているアイコンが参考になります。

SpellTower

SpellTower

色合いが優しくて必要な事だけをちゃんと伝えられています。とても素敵なサイト。

Bärnt & Ärnst

Bärnt & Ärnst

シンプルなフラット感がスゴい。

LayerVault

LayerVault

最新なフラットデザインで、もの凄く勉強になるサイトです。

Flat UI

UIデザインキットFlat UIが公開されています。フラットデザインの勉強になると思いますのでダウンロードをお勧めします。

Flat UI HTMLデモページ

目次に戻る

パララックスデザイン

視差効果を利用し、何枚もの半透明なスクリーンをスクロールで移動させるスピードを変える事によって面白い仕掛けが出来る手法です。今までは1ページで完結するページが多かったですが、もっと簡易的なパララックスを使用したページが多数あるサイトでも取り入れられていくと思います。

ZURB Manifesto

ZURB Manifesto

去年、このサイトを見て本当にびっくりしました。今でも一番良いパララックスを施しているサイトだと思っています。

Soleil Noir 2012

Soleil Noir 2012

流行の色をふんだんに使い一画面毎にテーマがあり秀逸ですね。

Jan Ploch

Jan Ploch

瓶に入っている飲み物がスクロールしていくと減っていくアニメーションが面白いです。

目次に戻る

サークルデザイン

円を取り入れるデザインでアイコンやナビゲーションやギャラリーをサークルにしているサイトが多くなってきました。特徴としては柔らかく、なおかつ新しい印象をユーザーに与える事が出来るデザインだと思います。

Motion

Motion

サークルを最小に使いシンプルにまとめていて良い印象を与えますね。

Always With Honor

Always With Honor

ポートフォーリオサイトでサークル満載な感じ。ギャラリーも新しいデザインがちりばめられていますので時間がある方、フラットデザインが好きな方は必見です。

cultural solutions uk

cultural solutions uk

これ作成した人はサークル大好きなんでしょうね、オールサークルです。パララックスにもなっています。

目次に戻る

ミニマルデザイン

ミニマルデザイン は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計するデザインです。appleのサイトが参考になります。

Lisi Design

Lisi Design

ナビゲーションの数は多いですがコンテンツはしっかりシンプルに伝えられているポートフォリオサイトです。

iconwerk

iconwerk

1ページで全てを表現しています。こちらもポートフォリオサイト。

Sean Gaffney

Sean Gaffney

超シンプル!!こちらもポートフォリオサイト。

目次に戻る

レトロデザイン

1950年代のアメリカを彷彿とさせるレトロ感や古き良きヨーロッパの風合いをwebに取り入れるデザインです。コンテンツによりけりですがインパクトはかなり高く忘れられないサイトになる可能性が高いです。

Amazee Labs

Amazee Labs

壁に落書きしたかのようなデザインになっており色合いがレトロ感を出しています。

Buy and use a digital meat thermometer

Buy and use a digital meat thermometer

スー○ーマン?なにわともあれアメコミ要素があると面白いですね。

Lord Likely

Lord Likely

質の悪い紙の新聞と古い書体でレトロ風を出しているサイト。

目次に戻る

斜めグリッドデザイン

「 Diagonal Grid Design 」とでも呼びましょうか。グリッドを斜めにしてスタイリッシュに魅せるデザイン手法です。画像主体のサイトに向いており、テキスト主体サイトには不向きなデザイン手法ですが、未来感が出せるので新しい商品や前衛的なサイトと相性が良いのではないでしょうか?

Arnaud Beelen

Arnaud Beelen

シンプルかつ近未来的なデザインになっています。

Gleb Leksikov

Gleb Leksikov

正方形のデザインでクールに表現しています。

Piropixel

Piropixel

ここまで流行の手法を取り入れているサイトも珍しいです。

目次に戻る

ブラーエフェクト

写真をボヤケさせて商品名やくっきりした画像を載せて目立たせる手法です。

3年前あたりから流行りだしたのを覚えています。現在ではアプリを紹介するページのベーシックな手法になっていますね。

Over

Over

Chris Broganによるカメラアプリを紹介ページです。しっかりとしたブラーになっており名前やアプリだという事が明確になっています。

G2

G2

お肉が旨そうです。色味も食欲をそそる深いオレンジを使用しており興味を煽っています。

Do

Do

1枚目のブラーが個人的には好きです。エフェクトが深すぎず浅すぎない絶妙です。

目次に戻る

リアル素材テスクチャ

現実にある素材を画面上で表現する手法で紙系が人気です。これからはさらにリアル感がある様々な物が表現されていくのではないでしょうか?

Think Up

Think Up

かなり凝ってます。くしゃっとした紙がナビゲーションになっており手書き感も出ています。

Texture Lovers

Texture Lovers

高級皮手帳なイメージ。かっこいいです。

My Name is Jarad Johnson

My Name is Jarad Johnson

表現出来ないんですが粗い紙?布?を表現出来ていてとても良いです。粗いものって何故か好きになれるんですよね。

目次に戻る

フルスクリーン

画面いっぱいにクリエティブな写真を表示してインパクトを与える手法です。 レスポンシブwebデザイン とも相性が良く2013年は更にフルスクリーンのデザインは取り入れられていくのではないでしょうか?

Shaw and Shaw Photography

Shaw and Shaw Photography

牛さんかわいいです。I LOVE 牛。30枚くらいの良い写真が見れます。異文化に触れられます。

Thomas Brun

Thomas Brun

ランダムで大きい写真がフルスクリーンで表示されてます。一画面で完結されていて見やすかったです。

岡村靖幸 | YASUYUKI OKAMURA

完全な個人趣味で載せます。フラッシュ嫌いなんですが唯一このフラッシュは好きで岡村さんの良さを引き出しているなって感じました。

目次に戻る

横スクロール

横にスクロールしてコンテンツを魅せる手法です。一般向けのコンテンツには適さないですが斬新なコンテンツを魅せる時に役立ちます。

Eric Johansson

Eric Johansson

楽しそうなポートフォリオサイトですね。一応ノーマルサイトもあります。

Visuall

Visuall

横に行ったり斜めに行ってみたりで動きが面白いです。

claire baxter

claire baxter

横スクロールのサイトを手掛けるならこのサイトを参考にした方が良いです。サクサクな横スクロールコンテンツはやはり好印象です。

目次に戻る

ホワイトスペース

デザインの基本中の基本で一番大事なのがホワイトスペースだと考えています。ボックスとボックスの余白や文字と文字の余白を空けるデザインですが、サイトテーマに沿った余白の大きさを決めるようにして、余白が広ければ高級感や余裕が出る印象になり、余白が狭ければサイト自体が見えづらくなりますので適度な余白を入れましょう。

The Mealings

The Mealings

絶妙なホワイトスペースが巧い2人組のポートフォリオサイトです。

BeoPlay A9

BeoPlay A9

ホワイトスペースというより余白を大きく使い近未来的な雰囲気を上手く出しています。ボトムにあるクリックするだけで製品の色を変える所もいいですね。

Andrew Lucas

Andrew Lucas

必要な事だけを書いてたっぷりと余白を使っており、好印象な個人サイト(一応ポートフォリオ?)です。

目次に戻る

タイポグラフィ

タイポグラフィとは、活字を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸であります。この考え方はwebにも深く根付いています。サイトの基本コンテンツはテキストだからです。可読性、視認性、そしてその美しさを得るために、テキストの配置・構成の最適化。書体、文字の大きさ、太さ、文字と文字との間隔、行と行との間隔に法則性を持たせるようにしましょう。

Capsule

Capsule

大きな紙媒体のようなサイトです。トップディレクトリはすっきりとした印象です。

I love Typography

I love Typography

I love Typographyな人はこのサイトは必見です。ILT。

MÉTIERS D`ART - FLORILÈGE

MÉTIERS D`ART - FLORILÈGE

センターによるテキストで良い風合いを醸し出しているサイトです。

目次に戻る

ダーク

ダークカラーを使いますと、高級感、落ち着いた雰囲気、静かさ、恐怖感、等の効果が狙えます。インパクト大ですのでまだまだダークカラーは使われていくと思います。

Batman 3D

Batman 3D

カッコ良すぎて鼻血出そうです。

Mike Poss` Rock Guitar Blog

Mike Poss` Rock Guitar Blog

ポップダークで柔らかさを出していてとても良いです。

BootB

BootB

ダークな黒板にカラーチョークで書いたような表現ですね。言語もかなり用意しています。

目次に戻る

3D

3Dによる表現は奥行きを持たせ、細かい所も魅せれるコンテンツになりますが、一番のデメリットはコンテンツの読み込みの遅さ。これを解決すれば一躍良質なコンテンツになります。今後も更に回線の速さはUPしていきますのでJavaScriptによる3D表現は加速していくのではないでしょうか?

PNC Christmas Price

PNC Christmas Price

Google APIを利用したコンテンツです。可愛らしい地球がいいですね。

ROME

ROME

重いコンテンツが大嫌いな僕でも、このユーザー体験は感動しました。

Accueil | UNIVERSERIES

Accueil | UNIVERSERIES

宇宙をイメージしたコンテンツを魅せていて面白いですね。

目次に戻る

まとめ

トレンドを取り入れるだけで今風なサイトになります。ですが、サイトテーマに合ったデザイン、またはターゲットユーザーに合わせたデザイン、UIが求められますのでトレンドばかりを追い求める事なくサイト作成をやっていきたいですね。

あのはてなブさえもデザインを一新した事によって長い議論の的になりました。自分好みのデザインにしてユーザーが離れていくのは避けなければなりません。ターゲット層の年齢を調べ、的の得たデザインにしていければいいなと考えています。

益々、表示スピードが求められていますのでユーザーの回線状況を考慮しつつ新しいデザインを取り入れていかねばなりません。「早くて新しい、面白いコンテンツ」が最高のコンテンツだと考えています。

目次に戻る

webサービス