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

更新日:21年2020月XNUMX日/記事:Jerry Low

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

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

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

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

マーケティング会社のBellPottingerは、インフォグラフィックなどのデジタルアイテムのビジネス予算が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秒以内に読み込まれると予想しています。 サイトの読み込み速度が速いほど、コンバージョン率が向上します。

非常に高速にロードしながら、サイトが視覚的に豊かなエクスペリエンスを提供することを確認することは、非常にバランスの取れた行為です。 これを達成するための最良の方法は、高速のWebホスティングサーバーと最適化された画像を使用することです。 ホスティングレビューではスピードを重視していることに気付くでしょう–を参照してください。 A2ホスティングレビュー 例えば 他のレビューをご覧ください 速度のニーズに最適なWeb​​ホストを確認します。

メリット#3 –権限を追加する

脳の50%が視覚処理に関与しています(source).

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

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

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

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

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

 


 

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

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

情報アーキテクチャ

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

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

インフォグラフィックやチャートはブロゴスフィアやソーシャルメディアユーザーから注目を集める傾向があることを覚えておいてください。 彼らは単なるブランドプロモーション以上のことをすべきです–インフォグラフィックとチャートは、そもそもユーザーフレンドリーな方法で退屈で厄介なデータを提供することを想定しています。

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

データマイニング

OpenRefineを入力してください–Excelワークシートでデータを行ごとに整理する手間を省く強力なデータマイニングツール。 以前はGoogleRefine(およびFreebase Gridworks)として知られていたこのツールは、ユーザーがデータを探索してクリーンアップし、データをある形式から別の形式に変換し、さまざまなWebサービスで拡張するのに役立ちます。

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

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

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

これを実現するには、円グラフ、図、折れ線グラフ、ヒストグラム、ヒートマップ、フローチャート、周期表など、無数のアプローチがあります。 これらのアプローチはそれぞれ、特定の種類のデータに完全に適合します(誤用すると悪臭を放ちます)。

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

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

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

Periodic Table On Data Visualization

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

 


 

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

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

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

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

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

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

1。 ggPlot2とR

R and ggplot2

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

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

2。 jqPlot

jqPlot

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

3。 JPグラフ

JPグラフ

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

4。 JS InfoVisツールキット

JavaScript InfoVis Toolkit

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

 5。 IBM Analytics(以前はMany Eyesとして知られていました)

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

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

6。 Google Chart

Google Chart

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

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

7.軸

Axis

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

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

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

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

1 ヴィンス

視覚

ヴィンス は、ユーザーがプロのプレゼンテーションやインフォグラフィックを作成できるDIYプラットフォームです。

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

2.ベンジ

Venngage 2011以来存在していたユーザーフレンドリーな視覚ツールです。 このツールは、ドラッグアンドドロップエディター、自由形式のキャンバス、1,000 +の例と事前に作成されたテンプレートを使用して、インフォグラフィックを簡単に作成する方法を提供します。

3。 Easel.ly

Easel.ly

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

4。 Vizualize.me

VIsualize.me

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

5。 ホヒリ

Hohli

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

6 ピッコチャート

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

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

 


 

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

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

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

過去にソーシャルメディアネットワークでそれらのいくつかを見たことがあると確信しています。これは、意味のあるデータを備えた美しいグラフィックが定着していることを証明しています。

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

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

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

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

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

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

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

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

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

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

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

書体の周期表

Typefaces Table

救済措置

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

電話の進化

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

 

グラフをチェックイン

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

深く掘る

この投稿の調査をしているときに、私たちのトピックに関連する何十もの興味深いブログやWebサイトに出くわしました。 真剣に、読んだり、学んだり、遊んだりすることがたくさんあります! 自由に利用できるデータがたくさんあることを私は知りませんでした ギャップマイナー 及び より良い世界のフラックス; 私は有益なサイトやブログのように多くを読んだことがある UXブース (データの視覚化に完全に関連するものではありませんが、視覚化によるウェブユーザーエクスペリエンスの向上に関する有用な記事がたくさんあります) ダイナミックダイアグラムフローデータ; に展示されている素晴らしい作品すべてに深く感心しています RandyのPinterestボード 及び  チャートポルノ.

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

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

ジェリーローについて

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