数字や統計データを、もっとわかりやすく、印象的に伝えたい。
そこで、楽しみワークスでは、ブラウザ上でインフォグラフィックを作成できる「インフォグラフィック・グラフメーカー」を用意しました。
15種類の表現方法から好きなグラフを選び、データを入力するだけ。色や背景を調整しながら、オリジナルのグラフィックを制作できます。
完成したデザインは、PNG・SVG・HTML形式で書き出し可能。 ブログ記事やプレゼンテーション資料に使用する画像だけでなく、Webページで活用するためのHTMLデータも作成できます。
15種類の表現方法から好きなグラフを選び、データを入力するだけ。色や背景を調整しながら、オリジナルのグラフィックを制作できます。
完成したデザインは、PNG・SVG形式で保存可能です。
インフォグラフィック・グラフメーカーとは？
インフォグラフィック・グラフメーカーは、数値データを視覚的なグラフィックに変換するWebツールです。
一般的な棒グラフだけでなく、街並みをモチーフにしたスカイライングラフ、アイコンを並べたピクトグラム、年輪型グラフ、花びら型の比較図など、さまざまな表現方法を用意しています。
目的に合わせてグラフの形を選べるため、データの内容や掲載媒体に適した見せ方を考えながら制作できるのが特徴です。
作成画面は、左側に設定パネル、右側にプレビューを配置した構成。データや色を変更すると、その結果をプレビューで確認できます。
専用のデザインソフトを使わず、ブラウザだけでグラフィックを制作できます。
15種類のグラフ表現に対応
本ツールでは、15種類のグラフを選択できます。
単純な数値比較から構成比、時系列の変化まで、データの性質に応じて表現方法を切り替えられます。
| グラフの種類 | 表現できること |
|---|---|
| スクエアバー | 棒の長さで項目ごとの数値を比較 |
| スカイライン | 建物の高さで数値の大小を表現 |
| タイルバー | タイルの段数で値を近似表示 |
| ピクトバー | アイコンの個数で数値を比較 |
| 波型グラフ | なめらかな曲線で数値の変化を表現 |
| 渦巻き | 入力順と数値を渦巻き上に表現 |
| リボン | 帯の幅の変化で推移を表現 |
| 年輪 | 同心円の長さで項目ごとの値を比較 |
| ドット | 100個の点で割合を表示 |
| ワッフル | 100マスの塗り分けで割合を表示 |
| 変形ドーナツ | 全体に占める各項目の構成比を表示 |
| ピクト割合 | アイコンで割合を表現 |
| 花びら | 花びらの長さで複数項目を比較 |
| ビーズ | 連なる玉の個数で値の大小を比較 |
| 階段 | 段差のある線で数値の変化を表現 |
数値の比較には、スクエアバーやピクトバー
売上高、利用者数、社員数など、複数項目の数値を比較したい場合には、スクエアバーが便利です。
人物や車、建物などのアイコンを使うピクトバーでは、数値をアイコンの個数に置き換えて表現できます。
たとえば、部署別の人数や店舗別の来店者数などを、親しみやすいビジュアルで紹介できます。
割合を伝えるなら、ワッフルやドーナツ
アンケート結果や満足度、回答者の構成比などには、割合を表すグラフが適しています。
ワッフルは100マスを塗り分けて割合を示すため、「全体のうち何％なのか」を直感的に伝えられます。
複数項目の構成比を見せたい場合には、変形ドーナツを使うと、全体のバランスを把握しやすくなります。
時系列の変化には、波型グラフやリボン
年度別の売上推移や、月ごとの利用状況など、時間による変化を見せたい場合には波型グラフやリボンが使えます。
波型グラフでは線が描かれていくアニメーションも確認できるため、データの推移を印象的に表現できます。
色と背景を自由にカスタマイズ
インフォグラフィックは、グラフの形だけでなく、色や背景によっても印象が変わります。
本ツールでは、12種類のカラーテーマを用意しています。
FIRE、ICE、OCEAN、FORESTなどのテーマから選ぶだけで、グラフや背景の配色をまとめて変更できます。
さらに、メインカラーとアクセントカラーは、カラーピッカーから個別に調整可能です。
企業のブランドカラーに合わせたり、掲載する記事のデザインに統一感を持たせたりできます。
背景パターンも、無地、方眼紙、ドット、斜線、波模様、等高線、和紙風、設計図、木目など13種類から選べます。
背景の濃さも調整できるため、情報の見やすさを保ちながらデザインを仕上げられます。
アニメーションで数値の変化を確認できる
制作したグラフは、静止画として確認するだけでなく、アニメーションで再生できます。
棒グラフが下から伸びる、線が徐々に描かれる、アイコンが順番に現れるなど、グラフの種類に応じた動きを用意しています。
数値もグラフィックの動きに合わせて変化します。
アニメーションは、標準・ゆっくり・なしから選択できます。「再生」ボタンを押せば、動きをもう一度確認できます。
なお、PNG・SVGで保存されるのは、アニメーション終了後の静止画です。 GIFやMP4などの動画ファイルの出力には対応していません。
インフォグラフィックの作り方
操作は、次の5ステップです。
- STEP 1：グラフの種類を選ぶ15種類の中から、作成したいグラフを選びます。
- STEP 2：タイトルと数値データを入力するグラフのタイトル、サブタイトル、項目名、数値を入力します。データは「項目名,数値」の形式で、1行に1項目ずつ記入します。
- STEP 3：色と背景を調整するカラーテーマ、背景パターン、メインカラー、アクセントカラーなどを設定します。
- STEP 4：表示サイズとアニメーションを設定する記事用、正方形、SNS縦型、スライド用などからサイズを選び、必要に応じて数値表示やアニメーションを調整します。
- STEP 5：完成したグラフを保存するプレビューを確認したら、「PNG保存」または「SVG保存」をクリックします。
データの入力例
たとえば、年度別の利用者数を表現したい場合は、次のように入力します。
2022年,42
2023年,58
2024年,75
2025年,68
2026年,90項目名と数値をカンマで区切って入力すれば、その数値に合わせてグラフが生成されます。
なお、割合型のグラフには0〜100の値を使用します。変形ドーナツでは、入力した各項目の合計を100％として構成比が計算されます。
PNG・SVG・HTML形式で書き出しできる
PNG・SVG・HTML形式で書き出しできる
完成したグラフィックは、PNG・SVG・HTMLの3形式で書き出せます。
用途に合わせて保存形式を選ぶことで、Webサイトへの掲載から資料制作まで幅広く活用できます。
| 出力形式 | 特徴・主な用途 |
|---|---|
| PNG | ブログ記事、SNS、プレゼン資料などに使いやすい画像形式 |
| SVG | 拡大・縮小しても輪郭が劣化しにくいベクター画像形式 |
| HTML | Webページへの掲載やHTMLファイルとしての利用に適した形式 |
PNG・SVGは、完成したグラフィックを静止画として保存する場合に利用します。
一方、HTML形式は、作成したインフォグラフィックをWebコンテンツとして活用したい場合に便利です。
なお、HTML書き出し時にアニメーションが保持されるかどうかは、出力されるHTMLの仕様によります。
用途に合わせてキャンバスサイズも変更できる
記事用の1200×675px、正方形の1080×1080px、SNS縦型の1080×1350pxなど、複数のプリセットを用意しています。
幅・高さを任意指定するカスタムサイズにも対応しているため、掲載先に合わせた制作が可能です。
こんな場面で活用できます
インフォグラフィックは、数値データを扱うさまざまな業務に活用できます。
- 企業広報・会社案内： 社員数、拠点数、事業別売上、実績などを視覚的に紹介
- 採用広報： 年齢構成、男女比、社員アンケート結果などをグラフ化
- 社内報・プレゼン資料： 活動実績や目標達成率、業務改善の成果をわかりやすく表現
- ブログ・Webメディア： 統計情報や調査結果を記事中の画像として掲載
- SNS投稿： 数字を中心とした視覚的なコンテンツを制作
グラフの形を工夫することで、情報の内容に合わせた多様なビジュアルを制作できます。
よくある質問
Q. HTML形式でも保存できますか？
はい。PNG・SVG形式に加えて、HTML形式での書き出しにも対応しています。作成したインフォグラフィックをWebコンテンツとして活用できます。
Q. WordPressでも使用できますか？
PNG・SVGは、WordPressのメディアライブラリなどを通じて掲載できます。ただし、SVGのアップロードはWordPress側の設定によって制限される場合があります。
HTML形式については、出力内容に応じた設置方法を選ぶ必要があります。JavaScriptやCSSを含む場合は、WordPress側の制限や既存テーマとの競合にも注意してください。
Q. アニメーションを動画として保存できますか？
アニメーションのプレビューは可能ですが、GIFやMP4形式での書き出しには対応していません。
PNG・SVGでは完成状態の静止画を保存します。Q. デザインソフトがなくても使えますか？
はい。ブラウザ上でグラフを作成し、PNG・SVG形式で保存できます。専用ソフトは必要ありません。
Q. 入力したデータは外部サーバーに送信されますか？
ツールのグラフ生成・保存処理はブラウザ内で行われ、入力したデータを送信する仕組みはありません。
Q. Excelのデータを使えますか？
Excelやスプレッドシートのデータを「項目名,数値」の形式に整えれば、テキスト欄に貼り付けて利用できます。Excelファイルを直接読み込む機能はありません。
Q. グラフを動画として保存できますか？
アニメーションはブラウザ上で再生できますが、動画形式での保存には対応していません。画像保存はPNGまたはSVG形式です。
まとめ：伝えたい数字を、わかりやすいビジュアルに
数値データをわかりやすく伝えるには、数字を並べるだけでなく、どのように見せるかを考えることが重要です。
インフォグラフィック・グラフメーカーなら、15種類の表現方法からグラフを選び、色や背景を調整しながら、目的に合ったビジュアルを制作できます。
ブログ記事の補足資料から、会社案内、社内報、SNS投稿まで、幅広い用途に活用してみてください。
