デザイン

デザイン

【厳選20選】アニメーション化されたインフォグラフィックのように見えるWebデザイン

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、20 Web Designs That Look Like Animated Infographics
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,105 views

読了時間 : 約4分41秒

ここ1、2年の間に、最新のCSSとJavascriptのアニメーション機能がWebページの閲覧体験を向上させるために使用されるようになっており、最近のサイトはアニメーションのインフォグラフィックやPowerpointのプレゼンテーションによく似ています。

 

もう奇妙な画像付きの文章をスクロールする必要はなくなりました。現在Webサイトは、私たちにコンテンツを楽しませるための予行練習を行っています。

 

この記事では、情報を巧みなアニメーションやモーションエフェクトで表現するインフォグラフィックWebサイトの最良の例をいくつか紹介します。下のコメント欄で、アニメーションのインフォグラフィックのように見えるこれらのWebデザインのうち、どれが好みか教えて下さい。

 

The Arnold Clark Savings Challenge (アーノルドクラーク貯蓄の挑戦)

 

このアニメーションのインタラクティブなWebサイトは、繊細なモーションエフェクトと美しい幾何学的イラストを使用することで閲覧者を引き付けます。

 

 

 

 

Species in Pieces (一片の中の種)

この素敵なインフォグラフィックWebサイトでは、主にフラットカラーとインタラクティブグラフを使用して3Dデザインを作成しています。

 

 

 

 

Why Your Brain Craves Infographics (なぜあなたの脳はインフォグラフィックを欲するのか?)

 

このクールなWebサイトでは、閲覧者はマウスのスクロールボタンを使用してインタラクティブな要素の速さを指示できます。

 

 

 

Good Morning Breakfast app (グッドモーニングブレックファーストアプリ)

 

これはより現実的なデザインのインフォグラフィックウェブサイトです。滑らかなトランジションと効果のある高品質の画像です。

 

 

 

 

Atlantis World’s Fair (アトランティスワールドフェア)

 

 

私共はこのインフォグラフィックWebサイトのイラストレーションが大好きです。楽しくインタラクティブな方法でデータを配信します。

 

 

 

 

Every Last Drop (最期の一滴まで)

 

 

これは私共が好きなもう一つの大胆なデザインのインフォグラフィックWebサイトです。本当に楽しい描画スタイルで、加えてアニメーションは滑らかで適切です。

 

 

 

 

Killing Kennedy

 

 

これは、ドラマティックでリアルな画像やデータを本格的な方法で提供する、より近代的なインフォグラフィックWebサイトです。

 

 

 

 

MailChimp Annual Report 2013 (MailChimp年次報告書2013)

 

 

MailChimpのAnnual ReportインフォグラフィックWebサイトを見て、訪問者が読んで楽しいインタラクティブな方法でのデータを届け方を学んでください。

 

 

 

 

Evolution of Insight (洞察の進化)

 

 

これは、タイムライン形式のアニメーション化されたインタラクティブなインフォグラフィックです。高品質のグラフィックと微妙なモーショントランジションを使用しています。

 

 

 

 

Inception Explained (インセプションの説明)

 

 

高品質のグラフィックとクールなアニメーション効果を組み合わせることによって、このインフォグラフィックWebサイトのデザインは際立ち、注目を集めます。

 

 

 

 

Highway One Ultimate American Road Trip (ハイウェイ1究極のアメリカロードトリップ)

 

 

3Dテキストとクールなイラストレーションや大きなトランジション効果を組み合わせたこのインフォグラフィックWebサイトは、注目を得ることに成功しています。

 

 

 

 

Ustream

 

 

これは、鮮やかで明るい色を使った、繊細だけど効果的なアニメーションと大胆なフォントの、全幅でインタラクティブなインフォグラフィックです。

 

 

 

 

MailChimp Annual Report 2015 (MailChimp年次報告書2015)

 

 

MailChimpは常に魅力的で有益な素晴らしい年次報告を配信します。このフルスクリーンのインタラクティブレポートは、鮮やかな色のオーバーレイ、太字のフォントなどを使用しています。

 

 

 

 

Mac Pro

 

 

最初から最後までこのWebサイトのアニメーションは、滑らかで繊細で、見た目は見栄えが良いだけでなく、情報を理解しやすくしています。

 

 

 

 

Shopify 2015 Annual Report (Shopify 2015年次報告書)

 

 

このインタラクティブなインフォグラフィックレポートは、数字と統計を非常に明快な方法で配信し、フレンドリーで親しみやすいスタイルを持っています。

 

 

 

 

Warby Parker Annual Report (ワービー・パーカー年次報告書)

 

 

この年次報告書は、通常の情報を提供するのではなく、訪問者に独自の報告書を作成するように頼むという点でユニークです。

 

 

 

 

The Evolution of Web (Webの進化)

 

 

このインフォグラフィックWebサイトでは、SVG要素を使用してブラウザとテクノロジーのタイムライン、およびインターネットの発展状況を表示しています。

 

 

 

 

Amazeelabs.com

 

 

これは、アニメーション化されたインフォグラフィックデザインスタイルを持つWebデザインスタジオのプレゼンテーションWebサイトです。Webサイトを見て、それで何が出来るのかを確認して下さい。

 

 

 

 

Digital Podge (デジタルポッジ)

 

 

これはDigital Podge Webサイト上のクールなインフォグラフィックページです。素敵なアニメーションが使われており、データはインタラクティブな方法で配信されます。

 

 

 

 

Imagemechanics.com.au

 

 

ここにもう一つの優れたインフォグラフィックWebサイトのデザインがあります。こちらはどれだけ素晴らしアプリを作ったかを紹介しています。

 

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ