2012年Webデザイントレンド

      2013/06/03

Web Design Trends in 2012というトレンドやテクニックを紹介しているサイトから、抜粋してご紹介します。また、関連するニュースを取り上げて、何故トレンドとなるのか、時代背景も追えるようにご説明致します。

  1. レスポンシブウェブデザイン
  2. 固定ナビゲーション
  3. 円形
  4. 大きなベクター画像
  5. マルチカラムメニュー
  6. jQuery/CSS3/HTML5アニメーション
  7. リボンとバナーの画像
  8. ウェブフォント
  9. インフォグラフィックス
  10. シンプルな機能性

ウェブデザインのトレンド2012

  1. レスポンシブウェブデザイン

    関連ニュース:スマホ対応の新潮流「レスポンシブWebデザイン」とは? – ASCII.jp
    2011はまさに、スマホ元ともいうべき、大躍進を遂げました。このブログでもスマホ関連の記事は再三取り上げていますが、スマホサイトを対応させるための新しい技術として、レスポンシブウェブデザインが注目されています。画像のリンク先のサイトを開いて、ブラウザの横幅を伸ばしたり縮めたりしてみてください。ようするに、タブレットサイズやスマホサイズにすることによりデザインが変わることが確認頂けると思います。
  2. 固定ナビゲーション
  3. 円形

    関連ニュース:CSS3でドラえもんを描いてみたあれこれ考えずに上の参考記事をご覧下さい。実はこれ、画像を一切使っていないのです。おなじみHTML5と合わせた新しい技術CSS3というもので、いままで画像でしか出来なかった円を簡単に表現することが出来るようになったので、このような円形デザインがより普及していくと予想されています。
  4. 大きなベクター画像
  5. マルチカラムメニュー
  6. jQuery/CSS3/HTML5アニメーション

    上記サイトは、jQuery/CSS3/HTML5といった最新技術を3分動画で学べるサイトです。見ておいて絶対損はないです。
  7. リボンとバナーの画像
  8. ウェブフォント

    関連ニュース:CSS3のWeb Fontを使ってみたよ。
    ウェブフォントを使えばパソコンにインストールされていないフォントを表示させることができます。これも新しい技術CSS3を使用します。いままで画像を用意しなければ出来なかったことが、どんどん表現出来るようになっています。
  9. インフォグラフィックス
  10. シンプルな機能性

    関連ニュース:apple製品に影響を受けた美しいWebサイトデザイン35個まとめ
    これを最もわかりやすく表しているのがappleのウェブサイトですね。

出典:Web Design Trends in 2011

2012はとにもかくにもHTML5とCSS3そしてスマートフォン対応がトレンドになりそうです。

 -デザイン

  関連記事

no image

2007年Webデザイントレンド

2007: More Web Design Trends & Clichesというトレンドや

2010年Webデザイントレンド

Web Design Trends for 2010というトレンドやテクニックを紹介しているサイトか

no image

2008年Webデザイントレンド

web designer wall 2008 design trendsというトレンドやテクニックを

no image

EC-CUBEスマートフォン向けテンプレート搭載!

2011年8月10日、EC-CUBEがスマートフォン向けのテンプレートを強化した新バージョン2.11

no image

2009年Webデザイントレンド

Web Design Trends For 2009というトレンドやテクニックを紹介しているサイトか

no image

ECサイトとデザイン

少し前の記事になりますが、マーケティングブログKISS metricsの 「How do color

no image

Webデザイントレンドのまとめ年別

毎年ウェブデザインのトレンドを紹介しているサイトから、抜粋した記事を年別にまとめました。 また関連ニ

Logicool Flowが素晴らしすぎる話

数年ぶりにキーボードとマウスを買い替えました。 デバイスが増えてきて、MacとWindowsとタブレ

Benq BL2420PTで突然「シグナルが検出されません」と出たら・・・

BenQ 23.8インチワイド 高解像度モデル (2560×1440/IPSパネル/DisplayP

嫌われる勇気

嫌われる勇気―――自己啓発の源流「アドラー」の教え posted with ヨメレバ 岸見 一郎,古

マンガでやさしくわかるアドラー心理学

マンガでやさしくわかるアドラー心理学[Kindle版] posted with ヨメレバ 岩井俊憲,

1億円の壁を越えるビジネス思考

1億円の壁を越えるビジネス思考: 年商1000万円に満たない会社の売上を数年で10億円にまで成長させ