2014年の１月時点でのウェブトレンドをおさらい。

モバイルファースト / レスポンシブ

様々なデバイスに対してフレンドリーなコンテンツを作成する方針は相変わらずあるようです。特に、モバイルで表示されたときに素早く表示できるように軽量化されていっています。

EXPOSURE STAFF EDIT
https://featured.exposure.so/

スクロールしたら出現するjsアニメーション

縦長サイトが流行中。スクロールしたら画像などのコンテンツがイージング風に出現するものなど、すこしギミックが凝ったものを見かけるようになりました。
あんまりスクロールさせすぎるのは疲れてしまう気がするので、適度に、そしてスクロールしたくなるような仕掛けが大事だなぁと思います。

Justin Aguilar
http://www.justinaguilar.com/

Every Last Drop
http://everylastdrop.co.uk/

CSS3を利用したアニメーションボタン

CSSのみで動作するアニメーションボタンは、見せる範囲を拡張できてさらに画像ボタンのロールオーバーではやりにくかった動きもコードだけで入力でき、「新しい」感が出ます。

Simple Icon Hover Effects with CSS Transitions and Animations
http://tympanus.net/Development/IconHoverEffects/

Hero Areas

「Hero Areas」は、長いページのファーストビューの位置に表紙のようなデザインを入れること。
サイトのテーマや概要を入れたり、ロゴだけですっきりまとめたりします。
わかりやすい、シンプルで簡潔な言葉で表現したほうがかっこいい感がでます。

Plain
http://plainmade.com/

スライドのナビゲーションをほんのすこし凝る

jqueryなどの画像スライド部分のナビゲーションをほんのすこし凝るのがかわいいです。

Eva black designでは、丸が縦になっています。
http://evablackdesign.com

IXI Storeでは、×のボタンになっています。
http://www.ixistore.be

アイコンをフォント化

アイコンをフォント化することで、Retina対応の場合に速度がはやくなったり、CSS3でアニメーションをつけやすくなったりします。サイズの変更も容易になりますね。
Webフォントのアイコン版、のような感じで考えると入りやすいかもしれません。

IcoMoonでは、既存のアイコン類からアイコンフォントファイルを生成できます。
http://icomoon.io/app/

作り方の詳しい説明：無料で出来る！オリジナルアイコンフォントを作ってみよう
http://liginc.co.jp/web/design/font/33237

アイコンフォントのメリットが書かれています
[試] サイト表示速度を高速化する方法 | アイコンフォント（Webフォント）による表示速度改善
http://marubon.info/method-speed-up-display-of-web-site-with-web-font-3540/

色でコントラストを出して、領域を差別化する

フラットデザインの展開ともいえるとおもうのですが、長いサイトの場合に背景色をわかりやすい色に変化させることで、領域を差別化し、いまどこにいるのかを伝える手法です。

Cyclemon
http://cyclemon.com/index.html

その他

・ロゴに印象的な手書き風、スクリプト系のフォントを入れる
・横幅いっぱいの大きな画像
・上記で紹介した動きが含まれるフレームワーク等が今後も生まれてくることでしょう。

参考

2014 Web Design Trends – To Follow or Not to Follow?
http://vandelaydesign.com/blog/design/2014-web-design-trends-to-follow-or-not-to-follow/