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サイトのデザイン事例をカテゴリに分けてまとめてみました。

20120131_00.jpg

前回のエントリーで、HTML5やCSS3のごく簡単なおさらいや、それらを使用した"次世代の可能性"を感じるwebサイトの事例を紹介させてもらいました。

今回のエントリーは"CSS3つながり"で、当バージョンから新たに導入された仕様「Webフォント」について、自分の備忘録的な意味合いが大きいのですが、まとめてみました。

20120123_00.jpg

ここ2~3年の間で、HTML5/CSS3に関連するブログ記事のエントリーやセミナーなども増えて、これらのキーワードもすっかり定着してきました。
このブログをご覧いただいている方も、各々抱えられているweb系の業務案件で、大なり小なりHTML5やCSS3などの技術を取り入れている方、その可能性を体験している方がほとんどではないでしょうか?

今回のエントリーでは、HTML5/CSS3/jQueryなどを組み合わせることによってどんどん変化していっている"webサイトの表現"について、事例をご紹介したいと思いますが、まず始めに少しだけおさらいを書かせてもらいます。

20120113_01.jpg

webサイトを構成する要素の中で、最も重要な要素のひとつに「ナビゲーションメニュー」があります。
グローバルナビゲーション、フッターナビゲーションなど、
サイト利用者を、利用者が目的としているコンテンツにスムーズに案内するためのメニュー機能です。

今回のエントリーでは、この「ナビゲーションメニュー」について、
昨年よく目にしたデザイン手法があるので、その事例を紹介したいと思います。

明けましておめでとうございます。
本年も、弊社コプロシステムと、当ブログ「Tips*Blog」を宜しくお願い申し上げます。

昨年の最も大きな出来事といえば、やはり誰もが「東日本大震災」を思い浮かべるでしょう。
それでは、IT業界に絞るとどうでしょう?
IT業界の大きな変化の一つに「スマートフォンの急速な普及」が挙げられるのは間違いないのではないでしょうか。
国内の各キャリアでは、昨年の夏モデルくらいからスマートフォン中心のラインナップになり、従来の携帯電話(フィーチャーフォン、ガラケー)からスマートフォンへシフトした年でした。
2012年ではこの急速な普及がさらに加速され、スマートフォンの販売台数は、携帯電話全体の6割を占めると予想されています。

そんな中、上記の変化はwebサイトの構築手法にも影響してきています。

20120106_00.jpg

弊社で先日配信したニュースレター内のコラム「ペルソナの横顔」でもピックアップしましたが、今年は飲料の中でも特に炭酸飲料の売上が好調のようです。

3月の地震による原発事故の影響で、今年は「節電の夏」なので、エアコン以外でも"涼"をとる方法がいろいろ試されていますね。

そこで今回は、飲料(主に炭酸)のFacebookページの事例を集めてみました。

先日アップした記事「[Facebookページ] プロフィール画像の活用事例」では、「プロフィール画像」をうまく活用してファンを楽しませているFacebookページ(以下、FBページ)の事例をご紹介しました。

今回の記事では、プロフィール画像/コンテンツ/写真以外にカスタマイズできるFBページのパーツとして、「メニューアイコン」をとても面白く活用しているFBページを発見したので、ご紹介します。

当ブログについて

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

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

Think Social Facebookページ

Think Social Twitterアカウント