どのようにあなたのサイトのための美しいグラフやInfographicsを作るには?

書かれた記事:
  • 特集記事
  • 最終更新日:Apr 15、2019

インターネットが一つのことならば、それは視覚的です。

人々はすばやく簡単にアクセスできる情報を好み、インフォグラフィックはまさに​​そのようなタイプのデータの視覚化を提供します。 複雑なデータでも、円グラフ、グラフ、写真と組み合わせると理解しやすくなります。

トップマーケティングスクールによるインフォグラフィックによると、インフォグラフィックは約15百万人に達する可能性があります。

なぜインフォグラフィック?

マーケティング会社のBell Pottingerは、インフォグラフィックのようなデジタル商品のビジネス予算が55%増加しました。

infographicsについてのinfographicでは、 Unbounce インフォグラフィックを検索する人の数は、過去2年間で800%増加したと述べています。 そのような統計では、インフォグラフィックス形式のデータ視覚化が否定的ではありません ウェブサイトやブログのための良いコンテンツ/マーケティング.

インフォグラフィック統計

メリット#1 - 新規訪問者

infographicsを追加すると、新しいサイト訪問者がいくつかの方法で描画されます。

  • Web検索:インターネットユーザーはあなたのインフォグラフィックが載っているトピックについて研究をしているかもしれません。 ブルーベリーがあなたを賢くする理由についてのインフォグラフィックを持っている唯一のサイトであるならば、あなたはそのトピックについてのインフォグラフィックを捜している誰かからのトラフィックを得るでしょう。 特に画像を検索している人は、あなたのインフォグラフィックにも出くわすかもしれません。
  • ソーシャルメディア:トップマーケティングスクールからのインフォグラフィックは伝統的な投稿が75つぶやきについて、インフォグラフィックはほぼ600になることを示しています。 単純な投稿よりもTwitterであなたの情報を共有する可能性が非常に高いので、ソーシャルメディアを介して新しい訪問者にアプローチする可能性は非常に高いです。

ニールソン/ノーマングループ 平均ページ訪問は1分以内に終わると見積もっています。 読者の興味を引かない限り、彼女はあなたのページを見て次のサイトに進みます。

サイト訪問者は情報とニュースをスクロールする習慣があります。 これが、インフォグラフィックが読者の興味を引くためにうまく機能するもう1つの理由です。 興味深い事実を視覚的に表現することは、テキストの段落よりも情報を表示するためのより速い方法です。 読者はあなたのインフォグラフィックを素早く読み飛ばし、必要な情報を吸収し、他に何を提供しなければならないかを調べるためにもう少し長く滞在するか、あるいは後で使うためにあなたのサイトをブックマークすることができます。

情報豊富なインフォグラフィックを提供することの技術的課題

しかし、別のことは、infographicsが価値を付加する一方で、読み込みに時間がかかる重い画像が訪問者を追い払うのに役立つかもしれないということです。 Pew Internetによる調査によると、平均的なサイト訪問者はページが3秒以内に読み込まれると予想しています。 サイトの読み込み速度が速いほど、コンバージョン率が向上します。

あなたのサイトが視覚的に豊かな体験を提供する一方で、まだ超高速ロードを確実にすることは、非常にバランスの取れた行為です。 これを実現する最善の方法は、高速サーバーと最適化されたイメージを使用することです。 あなたは私たちに気づくでしょう ウェブホスティングレビュー、私たちはスピードを重視し、Webホストを評価する際に多数のスピードテストを行います。

メリット#2 - 訪問者を保持

ニールソン/ノーマングループ 平均ページ訪問は1分以内に終わると見積もっています。 読者の興味を引かない限り、彼女はあなたのページを見て次のサイトに進みます。

サイト訪問者は情報とニュースをスクロールする習慣があります。 これが、インフォグラフィックが読者の興味を引くためにうまく機能するもう1つの理由です。 興味深い事実を視覚的に表現することは、テキストの段落よりも情報を表示するためのより速い方法です。 読者はあなたのインフォグラフィックを素早く読み飛ばし、必要な情報を吸収し、他に何を提供しなければならないかを調べるためにもう少し長く滞在するか、あるいは後で使うためにあなたのサイトをブックマークすることができます。

しかし、別のことは、infographicsが価値を付加する一方で、読み込みに時間がかかる重い画像が訪問者を追い払うのに役立つかもしれないということです。 Pew Internetによる調査によると、平均的なサイト訪問者はページが3秒以内に読み込まれると予想しています。 サイトの読み込み速度が速いほど、コンバージョン率が向上します。

あなたのサイトが視覚的に豊かな体験を提供する一方で、まだ超高速ロードを確実にすることは、非常にバランスの取れた行為です。 これを実現する最善の方法は、高速サーバーと最適化されたイメージを使用することです。 あなたは私たちに気づくでしょう レビューページのホスティングA2を最速のホスティング企業の1つとして挙げています。 幅広い種類のウェブホストに関する完全なレビューを読んだり、どちらがスピードやその他の機能に対するニーズを最も満たしているかを確認することができます。

メリット#3 - 権限を追加

ほとんどの人は視覚的な学習者です。 ネオマム Google Trends、Nielson、Pearsonなどの研究によれば、70%の感覚受容器が目に入っており、人々は1 / 10thのちょうど下で視覚的な場面に入り込んで理解できると示唆しています。

人々はそれをよりよく理解するため、見るものを信じる傾向があります。 調査を行い、あなたのインフォグラフィックにバックアップを取ることで、あなたのブランドに権限を与えることができます。 必ず:

  • 確固たる統計を提供する
  • インフォグラフィックの下部によく尊重されたリソースを追加する
  • これらの統計情報を視覚的に表示するグラフとグラフを追加する

これらの統計から得られたNeoMamインフォグラフィックなどのインタラクティブ機能と視覚的感覚を組み合わせると、読者の興味を引くだけでなく、それを引き出すことができます。

あなたは何をもっと気づきますか? あなたは、ページ上のプレーンなグラフィック、またはビデオを動かしたり、点滅させたり、始めるかもしれませんか?


何が良いインフォグラフィックになるのか

今後は、今日のデータ視覚化に最適なリソースとツールのいくつかを検討します。 あなたがブランドの目的のために単に美しいインフォグラフィックを作成したいだけのカジュアルなブロガーでも、この分野をより深く掘り下げる必要があるキャリアグラフィックデザイナーでも関係ありません。 この記事が役に立つと確信しています。

情報アーキテクチャ

一般に、優れたデータ視覚化は、3つの主要な要素で構成されます。

  1. 意味のあるデータ、
  2. 適切な情報デザイン、および
  3. 美しいグラフィックス。

infographicsとchartsはblogsphereとソーシャルメディアのユーザーから注目を集める傾向がありますが、 彼らは単にブランドプロモーション以上のことを行うべきです - インフォグラフィックスとチャートは、最初は使い勝手の良い方法で退屈で面倒なデータを提供すると考えられています。

したがって、前に グラフまたはインフォグラフィックを作成する、あなたは1する必要があります)あなたのデータを整理し、フィルターをかけ、洗練してください。 2)データの表示方法(データ視覚化設計とも呼ばれます)を決定します。

データマイニング

Enter OpenRefine - 強力なデータマイニングツールで、Excelワークシート上の行ごとにデータを整理する手間を省きます。 以前はGoogle Refine(およびFreebase Gridworks)として知られていたこのツールは、ユーザーがデータの検索とクリーンアップ、あるフォーマットから別のフォーマットへのデータの変換、およびさまざまなWebサービスによる拡張を支援します。

大量の順序付けされていないデータを扱う場合、OpenRefineはあなたのツールキットに含まれている必要があります。 このツールは現在GitHubでホストされています。 このページをご覧ください 必要なすべての情報と役立ちます。 更なるフォローアップと最新のニュースについては、新しく立ち上げたウェブサイトもご覧ください。 http://openrefine.org/

データプレゼンテーション

データの準備ができたら、視聴者にどのように表示するかを決定します。

円グラフ、ダイアグラム、折れ線グラフ、ヒストグラム、ヒートマップ、フローチャート、周期表など、数多くのアプローチがあります。 これらのアプローチのそれぞれは、特定のタイプのデータに完全に適合します(悪用​​された場合、悪臭を帯びます)。

あなたの統計を美しく、目を引くように、分かりやすいように、あなたのデータをどのように提示するべきですか?

この問題では、 視覚リテラシー データを視覚化するために使用できるすべてのオプションについて、非常に便利な周期表を作成しました(下の図を参照)。

周期表にマウスを重ねるときに興味深いいくつかの例が表示されるので、サイト上の実際の表を必ず確認してください。

データ視覚化における周期表

あなたが非伝統的なアプローチを探していた場合は、チェックアウトする必要があります この素晴らしい記事 スマッシング誌で ポストはもう少し前に出版されていますが、それでも非常に役立ちます。


使用するインフォグラフィックおよび課金ツール

情報アーキテクチャを使い終えたらすぐに、実際の生産に取り掛かります。 生データから見栄えの良いチャートを作成することは決して簡単な作業ではありません。幸いなことに、仕事を成し遂げるための無数のツールがあります。

はい、無数のデータ視覚化ツールがあります。 複雑なデータからインタラクティブなグラフィックスを生成する包括的なツールがあります。 単純な2軸線グラフを生成するだけの簡単なWebアプリケーションもあります。

現実的な理由から、私たちは両面を調べて、先進的なユーザーと一般ユーザーの両方のための複数のグラフィックツールを一覧にします。

アドバンスチャートツール

まず、いくつかの高度なものを見てみましょう。

1。 ggPlot2とR

Rとggplot2

R データ操作、計算、およびグラフィック表示のためのコンピュータ言語および環境です。 ggplot2一方、複雑な多層グラフィックを作成するのに役立つRのプロットシステムです。 例えば、上記のヒートマップは、ggplot2とRを使って構築されています。

Rとggplot2の学習に熱心であれば、 LearnR さらに読むための素晴らしいブログです(ブログはしばらく更新されていませんが)。

2。 jqPlot

jqPlot

jqPlot は、jQuery Javascriptフレームワーク用のプロットおよびチャートプラグインです。 jqPlotは、美しい折れ線グラフ、棒グラフ、および円グラフを生成します。 このツールには、ユーザーがWebブラウザーで調整できるインタラクティブポイントの生成など、いくつかの便利な機能が備わっています。 ただし、このツールは完全にテストされておらず、特定のWebブラウザー(7の下のChromeおよびIE)でサポートされていない可能性があることに注意してください。

3。 JPグラフ

JPグラフ

JPグラフ は、さまざまなプロットタイプをサポートするPHP駆動のチャート作成ツールです。 グラフ作成ライブラリを必要とするPHPプログラムを作成している場合、これを検討する必要があります。 JP Graphは初心者向けの簡単なツールとは言えませんが、Webサーバーからグラフやチャートを生成する必要がある場合、ツール(またはPHPライブラリ)は非常に役立ちます。 JP Graphは非営利目的での使用は無料であり、PHP 4.3.x以上をサポートするWebサーバーが必要です。

4。 JS InfoVisツールキット

JavaScript InfoVisツールキット

JavaScript InfoVisツールキット Nicolas Garcia Belmontによって開発されたライブラリです。 ライブラリにはさまざまな視覚化の選択肢があり、完全に無料で使用できます。

5。 多くの目

IBMの多くのアイズ

IBMアナリティクス ほとんどの種類のデータセットから視覚化することを可能にする無料のツールです。

IBMのサーバーでホストされているMany Eyesは、データの視覚化だけでなく、サーバーに保存されているデータに基づいて新しい視覚化モデルを生成するだけでなく、独自のデータセットをアップロードすることもできます。

6。 Google Chart

Googleのチャート

Googleのチャート 自由で強力で柔軟性があり、多くの他の開発ツールによってサポートされています。

Google Chartでのチャート作成は、HTML5 / SVGテクノロジーのみに基づいています。 このツールは、美しいアニメーションやインタラクティブなコントロールを備えたさまざまなフォーマットのチャートを作成するのに役立ちます。

7。 軸

軸

Axiis Tom GonzalezとMichael VanDanikerによって開発されたオープンソースのデータ視覚化フレームワークです。 このツールは、初心者や専門家の開発者のために特別に設計されています。 Axiisは、事前に構築されたビジュアライゼーションコンポーネントと抽象的なレイアウトパターンと、独自のビジュアライゼーションを作成できるレンダリングクラスの両方を提供します。

初心者向けの簡単なインフォグラフィックツール

確かに、ほとんどのブロガー(自分自身を含む)は、通常のブログ操作のための上記の包括的なチャート作成ツールを必要としません。 私たちが必要とするのは、簡単なWebアプリケーションや仕事を素早く完了させるための簡単なツールです。

そう言えば、学習の手間がほとんどなく、ユーザーフレンドリーな作成ツールのリストがあります。

1 ヴィンス

視覚

ヴィンス ユーザーがプロフェッショナルなプレゼンテーションやインフォグラフィックを作成できるようにするDIYプラットフォームです。

350,000の個人および組織(IBMやDisneyなどの大企業のユーザーを含む)は、このツールを使用してインタラクティブなグラフィックスやプレゼンテーションを通じてより良いコミュニケーションを図ります。

2。 Easel.ly

Easel.ly

Easel.ly 視覚データをオンラインで簡単に作成して共有するのに役立ちます。 Webアプリケーションは、いくつかのプリセットテンプレートとドラッグアンドドロップ機能を備えたシンプルなインターフェイスを備えています。 Easel.lyはまだ現在ベータモードになっていますが、130,000以上のユーザーが作成したビジュアルはすでにサーバー上にあります。

3。 Vizualize.me

VIsualize.me

Vizualize.me 個人に関する美しいインフォグラフィックを作成するのに役立ちます(はい、したがってVizualize Meという名前です)。 遊ぶのに楽しいツールで、数回クリックするだけで美しい履歴書やプロフィールを作成できます。 LinkedInを使用している場合は、これを実際に試してみてください。このツールは、LinkedInのプロファイルとリンクでき、データに基づいて見事なグラフィックを生成できます。

4。 ホヒリ

ホヒリ

シンプルなグラフビルダーが必要ですか? その後、 ホヒリ 訪問する場所です。 このWebアプリケーションは、さまざまな種類のチャートを12種類のサイズでサポートしています。すべてのユーザーは、データと設計の詳細をキー入力するだけです。

5 ピッコチャート

ピクトチャートインフォグラフィック

Piktochart デザイナー以外のデザイナーが美しいグラフィックやチャートを作成するのに役立つテンプレートベースのインフォグラフィックツールです。

このツールはドラッグアンドドロップ機能をサポートしており、プリセットテンプレート、アイコン、ベクトル、および画像の幅広い選択肢を提供します。 あなたが簡単なグラフィックツールを探していて、サービスのためのわずかな料金を支払ってもかまわないのであれば、Piktochartは間違いなくあなたの最良の選択の1つです。

6。 Infogr.am

インフォグラム

Infogr.am infographicsを作成するための使いやすいWebアプリです。 数回のクリックでインタラクティブなインフォグラフィックとチャートを作成し、記事に投稿したり、ブログ投稿を投稿したり、友達と共有したりできます。 200 000の一部のインフォグラフィックスが作成され、10 000の新しいサインアップが週に一度で世界で最も急成長するデータ視覚化コミュニティです。


始める前に:インフォグラフィックのインスピレーション

だからあなたは自分のinfographicsのいくつかを作成する準備ができていますか? 待つ。 私たちはまだもう少しここに行きます。

ここでは、インターネットから取り込まれた最も人気のあるインフォグラフィックスとチャートを紹介します。

私はあなたが過去にソーシャルメディアネットワーク上でそれらのいくつかを見てきたことを確信しています - それは意味のあるデータを持つきれいなグラフィックスが付いていることを証明します!

また、最近ではインフォグラフィックギャラリーが大量に入稿されている理由もあります。

他の人の作品に言及することで、観客に何がうまくいくかを学ぶことができます。

  • 一般的なインフォグラフィックの平均サイズは?
  • どのような種類の話題が視聴者から最も歓迎されていますか?
  • できるだけ多くのデータをチャートに含めるべきですか?
  • あなたのinfographicsでいくつの弾丸ポイントをカバーする必要がありますか?
  • このインフォグラフィックは何のために人気がありますか?

実生活の例:インフォグラフィックの種類

これらは、サンプルをブラウズしているときに質問する質問です。

コーヒードリンクのイラスト

コーヒードリンクのイラスト
ソース: lokeshdhakar.com

ファンボーイズのフィールドガイド

PCワールドファンボーイズフィールドガイド
ソース: PC World

アメリカのベストビール2008

アメリカのベストビール
ソース: Mikewithart.com

書体の周期表

書体の表

救済措置

救済措置
ソース: ニューヨーク·タイムズ紙

電話の進化

タイムラインインフォグラフィックス
ソース:Pow Wow Now

グラフをチェックイン

グラフインフォグラフィック
出典:フォースクエア

深く掘る

私はこの記事のために私の研究をしていたときに私たちの話題に関連する数十の興味深いブログやウェブサイトにぶつかった。 真剣に、読んで学び、遊ぶことが大変です! 私はそれほど多くのデータが自由に利用可能であることを知らなかった ギャップマイナー そして より良い世界のフラックス; 私は有益なサイトやブログのように多くを読んだことがある UXブース (データの視覚化に完全に関連するものではありませんが、視覚化によるウェブユーザーエクスペリエンスの向上に関する有用な記事がたくさんあります) ダイナミックダイアグラム, フローデータ、 と同様 ボックスと矢; 私は深く感銘を受けたすべての素晴らしい作品を賞賛します RandyのPinterestボード そして チャートポルノ.

単にデータの視覚化を開始している場合は、上記のサイトとブログを参照することを強くお勧めします。

マーケティングキャンペーンでデータ視覚化の力を活用していない場合は、今すぐに開始することができます。

ジェリーローについて

WebHostingSecretRevealed.net(WHSR)の創設者 - 100,000のユーザによって信頼され、使用されているホスティングレビュー。 15年以上のWebホスティング、アフィリエイトマーケティング、およびSEOの経験。 ProBlogger.net、Business.com、SocialMediaToday.comなどへの貢献者。