2012年2月アーカイブ

img_20120228_02.jpg

最近のwebデザインのトレンド手法のひとつとして、「レトロ感」「ヴィンテージ感」のあるwebデザインをよく見かけるようになりました。
webデザインのリンク集などを見ていても、昨年あたりからレトロなデザインのwebサイトの比率が増えてきたことが実感できます。

これらのサイトには、

  • 褪せたような色の組み合わせ
  • 紙っぽいテクスチャの使用
  • リボンや帯(テープ)をモチーフとしたパーツデザイン
  • ヴィンテージ感のあるフォントの利用
  • ノスタルジックなイラスト表現

などの特徴が挙げられ、それぞれ味のあるデザインになっています。


このような手法がトレンドになった背景として、

  1. まず、インフォグラフィック的表現が増えてきたこと。
    参考エントリー:
    楽しく統計データや歴史がわかるインフォグラフィックの事例
  2. CSS3の技術が浸透してきて、フォント表現のバリエーションが増えてきたこと。
    参考エントリー:
    Webフォントについてのまとめ
    HTML5やCSS3を駆使した「次世代の可能性」を感じるサイト
  3. ページ上に表示させる要素を必要最低限にしぼるミニマルwebデザインが増えてきたこと。

などの複数の要素が影響しているのでしょう。

20120216_00.jpg

ここ数年で海外メディアを中心によく目にするようになったインフォグラフィックについて、2回に分けて事例を紹介してきました。

今回のエントリーは、その3回目(最終回)です。

  1. 統計データ
  2. 歴史
  3. 脅威と呼びかけ
  4. 生活に役立つ知識
  5. 物事の順序・流れ(今回)
  6. 特徴からの分類(今回)
  7. その他(今回)

20120213_00.jpg


前回のエントリーに続き、様々なインフォグラフィックの事例をご紹介します。


  1. 統計データ
  2. 歴史
  3. 脅威と呼びかけ(今回)
  4. 生活に役立つ知識(今回)
  5. 物事の順序・流れ
  6. 特徴からの分類
  7. その他

(リストの順番とラベルを、前回から少し変更しています)


今回は、3.脅威と呼びかけ/4.生活に役立つ知識 に関するインフォグラフィックについて。

単純に数値をキレイにかっこよく見せるだけではなく、見ている人たちに考えさせ実際の行動に移させるような、"他人ごと"ではなく"自分ごと"に引き込む強い想い・メッセージ性をもったインフォグラフィックの事例をご紹介します。

20120210_00-01.jpg

前回のエントリーで、サークル・円の形を活用したwebサイトのデザインが増えている傾向にあり、その事例をカテゴリに分けて紹介しました。

この事例、特に「データのアウトプットとしてサークルデザインを取り入れている事例」をまとめている時に感じたのが、"まるで動きが加わったインフォグラフィックだな"という印象でした。

また、同エントリーに、

"円ベースのデザインが増えている傾向って、そもそもインフォグラフィックス的表現が増えたことともリンクしているんだろうね。"

というコメントをもらったのもあり、
今回のエントリーでは、ここ数年で海外メディアを中心によく目にするようになった「インフォグラフィック(infographics)」の事例について、カテゴリに分けてまとめてみました。

20120206_06.jpg


webデザインの2012年のトレンドのひとつとして、「サークル(円)」を使ったデザインを取り上げている記事をよく目にします。

Web Design Ledger | Web Design Trends in 2012
http://webdesignledger.com/tips/web-design-trends-in-2012

たしかに昨年くらいから、いろいろな形式でサークルを活用したwebサイトのデザインが増えてきている印象です。
CSS3で"円"を表現・装飾できるようになったり、Google+のサークル機能などからも影響を受けているんでしょうか。
単純にサイトデザインのワンポイントではなく、ナビゲーション/ギャラリーのサムネイル/サイト全体のモチーフなどでサークルが使用されるようになってきているようなので、今回のエントリーでは、サークルデザインを取り入れている参考になりそうなwebサイトのデザイン事例をカテゴリに分けてまとめてみました。

当ブログについて

株式会社コプロシステムの技術スタッフが、Web・モバイルに関するデザイン事例や役に立つTipsを配信しています。

運営会社:株式会社コプロシステム

Think Social Facebookページ

Think Social Twitterアカウント