2015年12月11日 - サイト紹介

「インフォグラフィック」と「インタラクティブ」を混ぜたコンテンツ「WHY WASEDA?」

もはや流行りではなく、社会全般に広がっているインフォグラフィック(Infographics)。
インフォグラフィックとは何なのか、Wikipediaで調べてみると…

インフォグラフィック(英語: infographics)は、情報、データ、知識を視覚的に表現したものである。インフォグラフィックは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。また、計算機科学や数学、統計学においても、概念的情報を分かりやすく表現するツールとしてよく用いられる。科学的情報の可視化にも広く適用される。

そもそも、情報(Information)とグラフィック(Graphic)の合成語だそうですね。

 

インフォグラフィックをウェブに埋め込んで…

最近のインフォグラフィックは、大量の情報をチャート、地図、ダイヤグラム、ロゴ、イラストを活用し、ひと目で理解できるように制作したデザインを示しています。
特に「情報の海」と言われるほど、大量の情報が広がっているインターネット業界でも、必要な情報をまとめて表現するのはとても重要な要素です。難しい内容でも、分かりやすいデザインでキレイにまとめたインフォグラフィックを見ると楽しいですね。

多くの場合は、インフォグラフィックを制作してPDF化するか、画像化してウェブサイトに載せる感じです。

視覚的!インフォグラフィック(infographics)のまとめサイト5選+作成ツール - LIGブログ

 

更に「インタラクティブ」を混ぜると…

インフォグラフィック化した資料をそのままウェブページとして載せるケースもあります。
しかし、大量の情報を載せることが多いので、ページが長くなって情報が上手く伝わらない恐れも考慮しなければなりません。

PDFや画像と比べてウェブページは「インタラクティブ」という強力な力を持っています。
インタラクティブとは、相互(Inter)と活動的(Active)の合成語で、「双方向的」という意味です。

つまり、ウェブページを閲覧しているユーザーがマウスをスクロールしたり、クリックしたりしてページが反応することを示します。

インフォグラフィックに、このインタラクティブを混ぜて完成したものが、今からご紹介するサイトでございます。

 

外国人留学生向けの「WHY WASEDA」

日本への留学を考えている留学生をターゲットにしたPRページ、「WHY WASEDA」です。

WHY WASEDA_5

サポートしている言語は、全て13ヶ国語。
英語、中国語(簡体・繁体)、韓国語、インドネシア語、ロシア語、フランス語、イタリア語、ドイツ語、スペイン語、アラビア語、タイ語、ベトナム語

海外向けなので、日本語ページは無いようです。

 

 

WHY WASEDA_top

インフォグラフィックによく使われているフラットなデザインです。

画面を下にスクロールすると、各情報がアニメーションで現れます。
これはユーザーの注目を集める効果があり、縦に長いページでもユーザーが最後まで見る可能性が高いですね。

 

WHY WASEDA_2

最初は学校を紹介する前に、東京の良さについて説明しています。
確かに、学校に通うだけではなく、その町に暮らすわけなので、町についてPRするのも大事ですよね。

 

WHY WASEDA_3

外部からの評価をランキング化し、RPGゲームの戦場のようにデザインしていますね。

 

WHY WASEDA_4

ここの部分は、宇宙を背景にして表示しています。
こういう風に、詳細の内容によって色や背景を分けると、とても分かりやすいですね。

 

WHY WASEDA

四角の部分はカードのようにパラパラと回りながら登場します。
色のみならずアニメーションのバリエーションも多くてなかなか楽しいです。

 

見ていて楽しく、分かりやすいサイト

インフォグラフィックのもう一つの特徴は、フラットでキレイなデザインでまとまって分かりやすく情報を載せることで、記憶に残りやすいということです。

それを考えると、インフォグラフィックをウェブページ化した時は、見ていて楽しくなるインタラクティブは欠かせない要素ですね。

 

みなさんも「WHY WASEDA」から伝われたいるインタラクティブの情報と、スクロールして動くインタラクティブ性を楽しんでみてください。

WHY WASEDA