creatersnest74

インフォグラフィックを駆使した魅力的なサイトまとめ


こんちには、YasuhiroYamamotoです。

インターネットが普及したことにより、
人類が日々受け取る情報量は飛躍的に倍増しました。

昨今の溢れる情報を効率的に伝えていくには、
文章だけでは表現の幅に限りがあります。

そんな情報や知識、データを表現するための手法として、
効果的にインフォグラフィックを取り入れているサイトを
ご紹介いたします。

NIPPON COLORS

nippon

NIPPON COLORSは、日本の伝統色を一覧で表示したサイトで、
クリックした色が画面の背景色になります。

RGBやCMYK、#HEXも各色毎に併記されてますので、
気に入った配色があればすぐに自分のサイトにも取り入れることが可能です。

なお、注意点として、Webkitを採用したブラウザ向けに作られたサイトですので、
ご覧になる際には、是非SafariかGoogle Chromeでアクセスしてみてください。

NIPPON COLORS – http://nipponcolors.com

 

ツタグラ-日本の人口推移-

tsutagura

日本はかねてより少子高齢化が進んでいると言われていますが、
そのデータを視覚的に表現したのがこのサイトです。

1950年から2000年にかけて増えてきた若年層に対し、
それ以降シニア層の比率が上がっていく事が
わかりやすくまとめられています。

ツタグラ – http://www.bowlgraphics.net/tsutagra/03/ 

 

ぐるなび-グルメ×インフォグラフィック-

gurunavi

地域のお店やクーポンを紹介しているぐるなびも
インフォグラフィックを作成し公開しています。

食に関わるものがメインですが、それ以外のテーマの作品もあり、
デザインも非常に参考になります。

ぐるなび – http://www.gnavi.co.jp/g-infographic/

 

Fukuoka Facts

fukuoka

福岡県の魅力的な情報をインフォグラフィックでまとめたのが
Fukuoka Factsになります。

福岡や福岡市がNo.1のデータ等を紹介しており、
統計データのダウンロードも可能です。

Fukuoka Facts – http://facts.city.fukuoka.lg.jp

 

The Internet map

internet

現在のインターネットを象徴するインフォグラフィックが
The Internet mapです。

世界中のWebサイトが宇宙の星のようにまとめられており、
トラフィック量が多いほど、サイズも大きくなっています。

紫は日本、水色はアメリカ、黄色が中国など、
国別でサイトの色も分けられています。

The Internet map – http://internet-map.net

 

予約マーケティング研究所

yoyaku

予約マーケティング研究所は、
お店の予約に関するマーケティングデータをまとめています。

フラットな配色で、デザインも良く、
シンプルにまとめられています。

予約マーケティング研究所 – http://yoyakulab.net/report/report02.php

 

Music Timeline

music

美しい配色で音楽ジャンルのインフォグラフィックで
表現したサイトがMusic Timelineです。

年代によってジャンルが移り変わっていく様や、
新しい音楽が生まれてきた事を視覚的に確認できます。

また、選んだジャンルの代表的な楽曲も
画面下部に表示しますのでわかりやすいですよね。

Music Timeline – http://research.google.com/bigpicture/music/

 

Webの進化

web

近年のWEB技術はブラウザ、HTML、CSSなど、
繰返される改善と進化で成長してきました。

これらWebの技術やインターネットの成長を
インフォグラフィックにしたのがこのサイトです。

過去存在したブラウザやバージョンなど、
年代別に推移がまとめられています。

Webの進化 – http://evolutionofweb.appspot.com

 

物語の可視化

son

一風変わったインフォグラフィックが
この物語の可視化になります。

ドラゴンボールの物語に応じて、
その時のキャラクターの戦闘力をインフォグラフィックで表現しています。

物語が進むに連れて、Z戦士が強くなっていくのを
数値で感じ取れるので、見ていて楽しいですよ。

物語の可視化 – http://antlabo.jp/html5/visualstory_db/

 

宇宙ヤバイ

space

物語の可視化を制作した作者によるもう一つのインフォグラフィックが
恒星の大きさを表現した宇宙ヤバイです。

地球や月をはじめとした星の直径を
数値と円の大きさで表現しています。

木星に比べると地球がとても小さいことなど
宇宙の壮大さを感じます。

宇宙ヤバイ – http://antlabo.jp/html5/visualstory_star/

 

最後に

多量の情報をテキストで表現すれば、
それだけサイトは冗長化しわかりにくいものになります。

正しく大量に伝えたいことを表現するために
インフォグラフィックを選択することは、
至極当然の流れだったのでしょう。

是非、あなたのサイトでも表現の1つの手法として
インフォグラフィックを取り入れてみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article背景のデザインに使える!無料のテクスチャ素材まとめ