2013年に流行るWebデザインのトレンドを見極める

2013年に流行るWebデザインのトレンドを見極める

更新日:カテゴリ:Webデザイン

2013年に流行るWebデザインのトレンドを見極める

2013年、Webデザイン業界では何が流行るのか?
書こう書こうと思ってたら、いつの間にか1月が終わるのですね。自戒です。

2013年に流行るWebデザインのトレンドBEST20

Web Design: 20 Hottest Trends To Watch Out For In 2013」を参考に2013年のトレンドをまとめました。

1.レスポンシブWebデザイン

2012年に引き続き今年もトレンドになりそうですね。
タブレットやスマートフォンも続々新しいのが出てきているので、サイト制作者としては大変ですが。。

2.Retina対応

タブレット、スマートフォンに続き、2012年はRetinaディスプレイ搭載のPCが出てきましたからね。今年も抑えておくべきところでしょうね。
あわせて、画像の圧縮系やretina.jsなどのプラグインも流行りそうですね。

retina.js

retina.js

3.固定ヘッダー

これはtwitter、Facebookのようなソーシャルサービスだったり、Pinterestのようなギャラリーサイトは必須かもしれませんね。2013年もこれ系のサイトは流行りそうです。

4.画面いっぱいに写真を使った背景

2012年終わり頃から背景に写真をデカデカとつかったインパクトのあるサイトが目立ってきたような気がします。
そのハシリは結構前ですが「about.me」ですかね。今やおしゃれなプロフィールサイトも多いです。

DAVIDIA

DAVIDIA

5.CSSによる透過

CSS3の普及につれてこれを使ったサイトは多くなってきましたね。
CSS3の対応ブラウザもどんどん増えてきています。

tunebow

tunebow

6.ミニマルデザインのLP(ランディングページ)

シンプルで無駄のないデザインのLPです。
今までの「○○できます!」「お買い得!」のようなLPのデザインからはシフトしていくのでしょうか。

PictoPro

PictoPro

7.QRコード

数年前に流行ったQRコードですが、2013年ではデザインの中にQRコードを取り入れるのがトレンドのようです。
個人的に推測するに、飲食店などが本格的にWeb上で集客を行うようになったこと、スマートフォンでもQRコードを使える端末が増えた(対応するアプリが増えた)からかなぁと思っています。

Keith Cakes

Keith Cakes

8.ソーシャルメディアボタンのバッジ

ソーシャルサービスが増えましたから、必然的というところでしょうか。
2012年はやはりLINEがすごかったですね。LINEボタンも出ましたし。

9.細かく再現したイラスト

個人的にですが、イラストを使ったサイトはあまり見ませんでした。
CSS3アニメーションで作られたサイトは多かったですけど。2013年に期待です。

Two Giraffes

Two Giraffes

10.無限スクロール

これもソーシャルサービスやギャラリーサイトでは必須ですよね。
特にPinterest、Tumblrなどの写真を読みこむサイトとは相性がよいです。

Pinterest

Pinterest

11.アプリやサービスなどの紹介サイト

2012年は特にiPhoneアプリやAndroidアプリが爆発的に流行ったので、あわせてその紹介サイトも増えそうですね。
(たしかアプリソムリエと名乗ってる人もいましたよね)

MediaFire

MediaFire

12.スライド型のページャー

これも最近ではよく見るようになりましたね。
ダイナミックにコンテンツ部分がスルスルッと移動するエフェクトで、インパクトのあるサイトに仕上がります。

CaptainDash

CaptainDash

13.アコーディオン型のナビゲーション

アコーディオン型のナビゲーションはスマートフォンが普及した頃から流行ってきましたね。
小さい画面でコンパクトに要素をまとめるには必要な機能なので、スマホサイトが増えるに比例してアコーディオン型のナビゲーションも増えていきそうです。

14.画面いっぱいに使ったフォント

画面いっぱいに写真を使った背景と同様、デカデカとフォントを使うのもトレンドのようです。
部分的にフォントを大きくすると英字新聞みたいでおしゃれですね。

Alex Pierce

Alex Pierce

15.APIやオープンソースの利用

Githubの影響でしょうか。jQueryを筆頭にCDNサービスも増加傾向にありますね。

16.ボックスシャドウ

Webデザインでは基本中の基本ですが、それがCSS3でできるようなったというのがポイントですね。ボックスシャドウの応用技を使っているサイトも多いです。

rareview

rareview

17.CSS3アニメーション

transition要素だったりとCSS3だけで動きのあるエフェクトができるようになったので、この手のサイトが増えそうです。JavaScriptに変わる技術としても注目ですね。

18.縦ナビゲーション

レスポンシブ対応するとなると必然的に縦ナビゲーションを考慮しないといけないので、そこからPCサイトでも増えてきそうです。

Riot Industries

Riot Industries

19.シングルページのサイト

アプリなどの紹介サイトもそうですが、1ページで完結型のデザインはこれからも目が離せないです。

Cage App

Cage App

20.丸型を使ったデザイン

丸型を使ったデザインは2012年のトレンドでしたが、引き続き大人気ですね。
CSS3で丸型を表現できるようになったといったところも引きが強い理由でしょうね。

Lucia Soto

Lucia Soto

個人的には

「レスポンシブ」「Retina」「CSS3」「インパクト」今年はこの4つがキーワードのような気がします。
2013年のトレンド、これからも要チェックです。

この記事に関連するタグ

あわせて読みたい記事