投稿日:

2012年Webデザイントレンド

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そしてスマートフォン対応がトレンドになりそうです。

投稿日:

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

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

詳しくはこちらでご覧下さい。

さて、ここでどのくらいスマートフォン向けテンプレートが強化されたのか比べてみたいと思います。

旧バージョンのスマートフォンテンプレート

EC-CUBE 2.11.1

まずはこちらが、旧バージョン2.11.1のスマートフォン向けテンプレートです。

新バージョン(2.11.2)のスマートフォンテンプレート

EC-CUBE 2.11.2

そして、こちらが新バージョン2.11.2のスマートフォン向けテンプレートです。

やはり見比べてみるとJavaScriptを多用してタッチインタフェースを意識したスマートフォン向けのサイトに仕上がっています。

ちなみに、ロックオン様本家サイトに比較表が掲載されていたので、引用させて頂きます。

スマートフォンテンプレートの各種対応状況

機能比較表 EC-CUBE R社
(モール)
Y社
(モール)
O社
(ASPカート)
M社
(海外OSS)
L社
(国産OSS)
ページ遷移せずに、
ポップアップでログイン
× × ×
ページ遷移せずに、
商品をお気に入り登録
× × × × ×
横スクロールで、
おすすめ商品を表示
× × × × ×
顧客情報を
ヘッダーに表示
× × ×
新着情報の
バックナンバー化
× × × ×
「もっと見る」ボタンによる
一覧の追加機能
× × ×
ビューポート(コンテンツの
表示領域)の最適化
× × ×

 

 

投稿日:

ECサイトとデザイン

少し前の記事になりますが、マーケティングブログKISS metricsの
How do colors affect purchases?」(どの色が購入に影響を与えるか)
というエントリーがあったのでご紹介します。

Webクリエイターボックスさんが日本語でまとめてくださっております。

記事はこちらにあります。

色が与える印象というのはやはり、重要でECサイトのデザインにおいても、ターゲットに合わせて、ブランドを大切にしたいのか、万人に受け入れてもらえるようなサイトを目指すのか、ECサイトそれぞれに合わせた配色が必要になります。

これを読んで頂けると、マクドナルドにドンキホーテ、マツモトキヨシ、松屋といった安さを売りにしているお見せの看板が黄色を貴重にしているのか分かりますね。

出典:kissmetrics

投稿日:

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

毎年ウェブデザインのトレンドを紹介しているサイトから、抜粋した記事を年別にまとめました。
また関連ニュース記事を取り上げ、何故トレンドとなるのか、時代背景も追えるようにご説明致します。

ウェブデザインの寿命は3年と言われています。

3年を過ぎたデザインはユーザーに直感で古いデザインとみなされ、

直帰率が増加する傾向にあります。ただトレンドを取り込めばいいというものでも

ありません。部分部分で取り込むと全体のバランスを崩してしまいかねません。

ここでは、6年分の記事をまとめましたので、ご参考下さい。

ウェブデザイントレンドのまとめ

  • 2012年Webデザイントレンド
    レスポンシブウェブデザイン/ 固定ナビゲーション/ 円形/ 大きなベクター画像/ マルチカラムメニュー/ jQuery/CSS3/HTML5アニメーション/ リボンとバナーの画像/ ウェブフォント/ インフォグラフィックス/ シンプルな機能性
  • 2011年Webデザイントレンド
    もっとHTML5+CSS3/ シンプルなカラースキーム/ モバイル対応/ 視差スクロール/ タッチスクリーン対応/ 奥行き/ 大きい写真の背景/冒険的なドメイン名/ QRコード/ サムネイルデザイン/ 個人の活動
  • 2010年Webデザイントレンド
    特大のヘッダとロゴ/ スケッチ風/手描き風/ 大胆で大きなフォント/ タイポロジー/ 1ページ レイアウト/ 巨大な画像/ パースの変化/ インタラクティブで直感的なデザイン/ モーダルボックス/ ミニマリズム/ オーバーサイズのフッタ/ レトロ/ イントロボックス/ 雑誌風のレイアウト
  • 2009年Webデザイントレンド
    浮き出し/ リッチユーザーインターフェイス/ 透過PNG/ 巨大なタイポグラフィ/ フォント置換/ モーダルボックス(ライトボックス)/ メディアコンテンツ/ 雑誌のような見た目/ スライドショー/ 大事なメッセージ
  • 2008年Webデザイントレンド
    ヴィンテージでレトロ/ 手書きノートと付箋/ グランジ/ はねたインク/ 水彩画/ コラージュ/ スケッチと手書き風フォント/ 大きなフォント/ 筆記体/ 木目調/ ジグザクのパターン
  • 2007年Webデザイントレンド
    かわいい漫画とマスコットキャラ/ 細かな渦巻きや滴/ 境界線を使わない/ 大きなRSSアイコン/ 高品質なテクスチャー/ 暗い背景に明るい配色

 

投稿日:

2007年Webデザイントレンド

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

  • かわいい漫画とマスコットキャラ
  • 細かな渦巻きや滴
  • 境界線を使わない
  • 大きなRSSアイコン
  • 高品質なテクスチャー
  • 暗い背景に明るい配色

続きを読む 2007年Webデザイントレンド