*

2014年に流行るウェブデザイン5+1個


洋服がそうであるようにウェブデザインにも流行りがあります。今年はフラットデザインが猛威を振るいました。アンテナの高い先進的なウェブサイトを皮切りに、Windows8iOS7でのフラットデザイン採用で一気に広がった というところでしょうか。フラットデザインは多デバイス対応=レスポンシブデザインと密接に関係しているので、今後数年でこの波はイノベーター理論でいうところの、マジョリティーに到達することが予想されます。

そんな中で少し気が早いですが2014年のトレンド予測です。

1. ネオン

街中を歩いていると、店の看板や入り口にきらびやかなネオン光を見ることがあります。洋服でもたしか去年か一昨年に流行りましたよね。Webの世界にも到来するかもしれません。

  • neon1
  • neon2
  • neon3
  • neon4

2. アイキャッチーな文字デザイン

今までのウェブサイトでは見たことがないような、魅力的でかっこいい文字デザインを前面に出すウェブサイトデザイン

  • typo1
  • typo2
  • typo3
  • typo4

3. ブロックデザイン

全く異なる色やデザインのブロックを隣り合わせに、そして不揃いに並べる手法です。フラットデザインにはとても親和性が高い方法で、ひと目でサイトの構成やスローガンを伝えることができます。

  • block1
  • block2
  • blok3
  • blok4

4. 最小化

1ページに載せる情報を最大限まで減らし、掲載する画像で情報を伝える方法です。訪問者はサイト内で迷うことがなく、かつ頭の中で”膨大な情報を処理する”という仕事をする必要がありません。

  • minimize1
  • minimize2
  • minimize3
  • minimize4

5. 白黒

1のネオンと相反するデザインです。白黒にすると高級感がでたり、歴史を感じさせることができるため、私のクライアントにも商品の開発ストーリーページなどで白黒ページを提案することがあります。

  • blackandwhite
  • blackandwhite2
  • blackandwhite3
  • blackandwhite4

6. 地図をバックグラウンドにする

オフィスやお店の場所をマークした地図を背景として使ってしまう方法です。お問い合わせページのみに使ったり、サイト全体で使ったりします。

  • map1
  • map2
  • map3
  • map4

デバイスが多様化している現在、サイトを閲覧する状況も様々です。カフェ、電車、学校、職場、外、家の中、家の中でも自分の部屋、トイレ、お風呂など、部屋の数だけ場所の数だけ可能性があります。

それぞれの場所で光の強さも違いますし、デバイスの物理的な安定性、ネットワーク速度も違います。デバイス自体がそれぞれのシーンに合わせて進化してきたように、中身のウェブサイトもそれにあわせて進化していくのが必然だと思います。

今回は6つのトレンド予測をご紹介しましたが、デザイナーの数だけ、人の数だけ可能性はあります。投稿した本人が言うのもなんですが、本当はここで挙げた予測を大きく裏切った、全く新しい手法が現れてくれることを、心から楽しみにしていたりします!当方プログラマー寄りの人間のため、大半をCSSで実装できるデザインが流行ることを切に希望。。

参考URL&Photo: http://www.smartcheck.me/en/web-design-trends-in-2014/

Ads by Google

Ads by Google

関連記事

CSS user-selectを使うときは要注意 !

.test{-webkit-user-select: none;} CSSの要素でuser

記事を読む

『Google トレンド』急上昇ワードの新しい表示方法

Googleが無料で提供している『Googleトレンド 急上昇ワード』ですが、表示方法を変更する

記事を読む

Webサイトでペナルティにならない引用文の設置の仕方を GoogleのMatt Cutts氏が解説

ご存知のとおり、他のサイトの文章をコピペするとGoogleやBing,Yahooなどの検索エンジ

記事を読む

no image

スマートフォンで横長のテーブルを扱う方法

table,table tr,table td,table th{border:1px solid

記事を読む

2014年、デスクトップで閲覧するウェブサイトはこうなる。スマートフォン時代のサイトデザイン予測。

スマートフォン経由でインターネットを閲覧している人が日に日に多くなっているのはもはや周知の事実で

記事を読む

no image

簡単にWebサイトモックアップをつくる方法

仕事としてWebサイトやE-commerceサイトの提案をされている方なら恐らくいつも直面する問

記事を読む

Ads by Google

Ads by Google

Message

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

Ads by Google

Ads by Google
新着記事をRSSで受けとる
PAGE TOP ↑