どや!?2010年の傾向から予測する、2011年のWebデザイントレンド

05 1月

  • このエントリーをはてなブックマークに追加

2010年の傾向から予測する、2011年のWebデザイントレンド

あけましておめでとうございます。2011年が始まりました!
2011年のwebデザインのトレンドを纏めてみたので、よろしければご参考に。
本年もどうぞ宜しくお願い致します。
 

①CSS3+HTML5

2011年はまさにHTML5が当たり前になる年です。
HTML、CSS3、jQueryとの連携など、技術的な移行がおおいに予想されます。
それらの技術が一般的に浸透してからなどといわずに、
今からこつこつ勉強して高い表現をできるようにしておきたいところです。

2010年総まとめ:CSSの実用的なテクニック集

②シンプルな配色

シンプルな配色でデザインを施しましょう。
色は2~3つ程度に制限し、色の濃淡で色数を増やしてください。

Tori’s Eye
HTML5、CSS3、JavaScriptで作成されています。

2011年のWebデザイントレンド:シンプルな配色「Tori's Eye」

Collision | A Creative Design Studio
読みやすい高コントラストで、圧倒的な個性を出しています。

2011年のWebデザイントレンド:シンプルな配色「Collision | A Creative Design Studio」

③モバイル用のデザイン

2010年、スマートフォンやスマートパッドのモバイル端末が登場しました。
CSS3により、モバイルWebデザインは大きく飛躍しています。
2011年はモバイル対応のwebデザインがより伸びると予想されます。
遅れを取らないように勉強しておきましょう。

参考:iPhoneデザインのためのアイディアエンジン「iPhoneデザインアーカイブ」

④パララックススクロール

パララックススクロールとは、ファミコンなどの横スクロールゲームに使われていた、立体的な奥行きを表現する視差スクロールです。
これを使うことにより、奥行きのあるサイトを作成することができます。

Old Pulteney Row to the Pole
ページをスクロールしてください。
サイトの背景とコンテンツのスクロールの差で奥行きを感じられます。

2011年のWebデザイントレンド:パララックススクロール「Old Pulteney Row to the Pole」

CSS 3D Meninas
画像をマウスオーバーすると、カーソル位置に合わせて動きます。

⑤ウェブデザインにおける奥行知覚

3D効果を利用したwebデザインです。
見栄えと印象が格段に違うのが分かるはずです。

Plántate
遊び心満載のこのサイトは、3D効果を利用して惑星を回転させています。

2011年のWebデザイントレンド:ウェブデザインにおける奥行知覚「Plántate」

Jordan : History of Flight
靴と男性が流れるように表示されます。

2011年のWebデザイントレンド:ウェブデザインにおける奥行知覚「Jordan : History of Flight」

⑥大きな写真の背景

大規模な背景は、2011年に急増すると予想されます。
これらのイメージは、高解像度であり全体のサイトをカバーしています。
大きい写真は、サイト利用者をつかむための有効な方法です。

Somewhere: le film – Accueil
高解像度の写真を使用し、パララックス効果も使われています。

2011年のWebデザイントレンド:大きな写真の背景「Somewhere: le film - Accueil」

iFly Magazine
壮大なスケールの画像と遊び心のあるアニメーションが印象に残るサイトです。

2011年のWebデザイントレンド:大きな写真の背景「iFly Magazin」
 
以上、6つを紹介させていただきました。
トレンドは一通り把握しておいて、制作するサイトに応じて取り入れていきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL