Home > スポンサー広告 > 2014年の1月時点でのウェブトレンドをおさらい。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/95-f1897962
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 2014年の1月時点でのウェブトレンドをおさらい。

Home > デザイン > 2014年の1月時点でのウェブトレンドをおさらい。

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

2014_web_trends_1_01.jpg

2014年の1月時点でのウェブトレンドをおさらいします。豊富な表現と、ソースコードはシンプルに。画像データは大きく、でも軽く、といった相反するものが一緒にいるようなものになっています。どれもこれも、様々なデバイスに対応するため。どんな場所からでもアクセスできるようにするため。
インパクトだけを狙うのではなく、そのサイトでは一体どんなものが必要なのか、ということをきちんと把握した上で工夫ができたらいいなぁと思います。

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

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


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/
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/95-f1897962
Listed below are links to weblogs that reference
2014年の1月時点でのウェブトレンドをおさらい。 from バニデザノート

Home > デザイン > 2014年の1月時点でのウェブトレンドをおさらい。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。