こんにちは、だいきです。
2013年になってからもう二週間以上過ぎてしまいました。
新年になって海外の多くのブログで「2013年のWebデザインのトレンド！」
のような記事が出ていたので、UIデザイン会社であるGoodpatchのブログでは
「2013年に流行るであろうUIデザインのトレンドまとめ」をしてみたいと思います！

1. アニメーション

(参照: The Good Man http://thegoodman.cc/ )

このサイト「The Good Man」はブラジルのデザイナーさんが学校の卒業制作として作ったサイトだそうです。
一切画像を使わずHTMLとcss3で作られたのにも関わらず、一つのムービーを見ているかのようです！
このようなアニメーションがWebサイトで使われることで、コンテンツやサービスをよりユーザーに理解してもらえたり、Webサイトにおもしろい効果をつけられそうです。

2. ページ遷移がないサイト

(参照: SNOWBIRD http://www.snowbird.com/)

Ajaxなどを用いてページ遷移がないサイトです。
参照元のサイトは各コンテンツをクリックすると左側から折り畳まれるようにしてそのコンテンツの詳細が出てきます。
他にも右上の黒い気温などが書かれているボックスにマウスオンすると、一週間の天気などが左に広がるようにして出てくるのもすごいです！

3. メトロUI

(参照: BootMetro http://aozora.github.com/bootmetro/hub.html)

2012年の10月に発売されたwindowsの最新OSであるwindows8のメインページのUIです。
メトロUIはグラデーション等が排除されたとてもシンプルなデザインです。
他にもメトロUIと少し似ていますが、グラデーションなどがかかっていない、シンプルなデザインのWebサイト増えてきた印象です。
代表例としてはMicrosoftのWebサイトがあげられます。

(参照: Microsoft http://www.microsoft.com/)

(参照: DeNA http://www.dena.jp/)

(参照: IFTTT https://ifttt.com/)

4. 横スクロール

(参照: 菊池凛子オフィシャルファンサイト（女優）http://www.rinkokikuchi.com/)

2012年の終わりころから見られ始めた、横スクロール。
ナビゲーションをクリックしたり、スクロールすると画面が横に流れます。
上記のサイトは女優の菊池凛子オフィシャルファンサイトですが、スクロールすると写真や文章、動画が流れてきて、見ていて楽しいです。

5, リアルなボックスシャドウ

(参照: Panic Blog http://www.panic.com/blog/)

シャドウを使ってより写真やボックスを立体的に表現するデザインです。
僕が個人的に好きなボックスシャドウが使われているサイトは
Macのテキストエディタで有名なCodaを作っているPanicという会社のブログです。
トップにある四枚の紙の浮き具合がとてもリアルです。
マウスオンするとさらにふわって浮き上がります！
（chromeではマウスオンの動きが確認できましたが、Firefoxではなぜか見ることができませんでした）

6. 左右非対称スクロール

(参照: National LGBT Museum http://nationallgbtmuseum.org/ )

画面をスクロールすると左右で違う動きをするサイトです。
初めてこの手のサイトを見たときは動きにびっくりしました！
まだ触ったことがない人はぜひ！
左右の絵がスクロールによって一つの絵になる瞬間は快感です！

7. IE6 7の排除

photo credit: kk+ via photopin cc

みなさんご存知のブラウザInternet Explorer
cssやjavascriptがIEでは上手く反映されず、その対応に大きなコストがかかることから、youtubeやYahoo Japan、pixivなど大手サイトがIE6の対応を打ち切っています。
よって、これからはIE6 7の対応をしないWebサイトが増えるのではないでしょうか。
（これはトレンドというよりWebデザイン業界の願望です！w）

以上が「2013年に流行りそうなUIデザインのトレンドまとめ」でした！
みなさんの参考になれば幸いです！

Share on

Goodpatch
Goodpatch公式アカウントです。