資料づくりやSNS投稿で、「サッときれいなグラフが欲しい」と思う場面は少なくありません。表計算ソフトのグラフは見た目の調整に手間がかかり、専用ソフトは操作を覚えるのが大変——そんな悩みに応えるのが本ツールです。
ASOBOADは、ブラウザだけでグラフを作成し、そのまま画像として保存できる無料ツール「Graph Sensei（グラフ先生）」を公開しました。登録もインストールも不要で、数字を入力すればすぐにグラフが形になります。
どんなツールか
Graph Senseiは、数値データを入力するだけで、デザインの整ったグラフをブラウザ上で作成できるツールです。専門的なソフトを用意する必要も、デザインの知識も必要ありません。入力に応じてグラフがその場で更新されるため、結果を見ながら調整を進められます。
完成したグラフは画像としてダウンロードでき、資料やSNSにそのまま使えます。「グラフを作る」という作業を、できるだけシンプルなステップに落とし込んだ点が本ツールの特徴です。スマートフォンからもアクセスでき、外出先で思いついたデータをサッと可視化したい場面にも向いています。
11種類のグラフに対応
Graph Senseiは、棒グラフ・横棒・積み上げ棒・折れ線・面（エリア）・円・ドーナツ・レーダー・散布図・バブル・ファンネル・複合・ウォーターフォール・パレートなど、実務でよく使うグラフに幅広く対応しています。比較・推移・構成比・分布・プロセスの歩留まりなど、伝えたい内容に合わせて最適な形を選べます。
グラフ選びに迷っても大丈夫です。「比較なら棒グラフ」「推移なら折れ線」「構成比なら円グラフ」というように、グラフごとのページで用途や使い方を解説しています。さらに「グラフ作成のコラム」では、配色の考え方や、よくある誤用、伝わるグラフの作法など、実務で迷ったときに読み返したい記事も用意されています。どのグラフを使えばよいか分からないという段階から、目的に合ったグラフを選ぶところまでサポートします。
3ステップで完成
使い方はシンプルで、次の3ステップで完成します。
- グラフの種類を選ぶ — 用途に合わせて、トップページから作りたいグラフを選択します。
- データを入力する — テーブルに直接入力するか、ExcelやGoogleスプレッドシートからCSV／TSVを貼り付けます。入力に応じてグラフがその場で更新されます。
- 画像として保存する — PNG／JPGでダウンロードできます。
すでにスプレッドシートでデータをまとめている場合は、コピーして貼り付けるだけで取り込めるため、入力の手間がかかりません。CSVは1行目にヘッダー（項目名／系列名）、2行目以降にデータを並べる標準的な形式に対応し、ダブルクォートのエスケープも処理してくれます。はじめての方でも、最初の一枚はおよそ1分で仕上がります。
資料にも、SNSにも、そのまま使える
Graph Senseiは、フォント・配色・余白をあらかじめ整えた状態でグラフを書き出します。デザインの調整に時間をかけなくても、PowerPointやKeynoteの資料に貼って浮きにくく、SNS投稿の画像としてもそのまま使える仕上がりになります。
書き出し形式はPNG・JPGに加え、SVG形式にも対応しています。SVGで書き出せばIllustratorやFigmaで再編集でき、資料のトーンに合わせた微調整や、ブランドカラーへの差し替えも可能です。スマートフォンでは、表示された画像を長押しすると保存用のプレビューが開き、そこからさらに長押しで「写真に追加」「画像を保存」といったメニューを呼び出せます。Chrome・Safari・Edge・Firefoxの最新版に対応し、iOS／AndroidのモバイルブラウザでもPCと同じ感覚で操作できます。
グラフは”種類選び”で半分決まる——盛るより、伝わる一種に絞る
資料のグラフを見ていて、いちばん多い惜しいケースが「グラフの種類が中身と合っていない」ことです。構成比を見せたいのに棒グラフを並べていたり、推移を伝えたいのに円グラフを使っていたり。どんなにきれいに装飾しても、形が目的と合っていなければ、読み手の頭にすっと入ってきません。私が資料をつくるときの基本は、比較なら棒、推移なら折れ線、構成比なら円かドーナツ、と「伝えたいこと」から形を逆算すること。そして、一枚のグラフに詰め込みすぎないことです。系列をいくつも重ねると、見た目は情報量豊かでも、結局どこを見ればいいか分からなくなる。Graph Senseiが配色や余白を整えた状態で書き出してくれるのは、この「伝わる見た目」の土台を肩代わりしてくれるからありがたいのですが、その前段の「どの種類を選ぶか」は人間の判断です。SVGで書き出してブランドカラーに寄せれば資料全体ともなじみます。装飾を足すより、種類を正しく選んで要素を引き算する——それだけで、グラフは見違えるほど伝わるようになります。
入力データはブラウザ内で処理
グラフの作成処理はお使いのブラウザ内でおこなわれ、入力したデータ（項目名や数値）が当方のサーバーに送信・保存されることはありません。社外に出せない数字や検討中の数字を扱う場面でも、データが手元の環境にとどまる仕組みです。
作業中のデータはブラウザの保存領域（localStorage）に一時的に残るため、ページを開き直しても続きから作業できます。ただしブラウザのキャッシュや履歴を削除した場合、別の端末・ブラウザでアクセスした場合には消失します。継続的に編集したい場合や他端末と共有したい場合は、入力欄からCSVをコピーしてExcelやGoogleドライブに保存しておくと安心です。なお、サイト改善のためアクセス情報の解析ツールを利用しており、利用情報が外部事業者へ送信される場合があります。
活用シーン
- 企画書やプレゼン資料に、見やすいグラフをすぐ用意したいとき
- SNS投稿用に、数字を視覚的に伝える画像を作りたいとき
- スプレッドシートのデータを、そのまま貼り付けてグラフ化したいとき
- IllustratorやFigmaでの再編集を前提に、ベースのグラフを用意したいとき
- 外出先でスマホからサッと一枚のグラフを書き出したいとき
よくある質問
Q. 利用は無料ですか？
A. はい。すべての機能を無料でご利用いただけます。登録もインストールも不要で、将来的にも基本機能は無料のまま提供される予定です。
Q. 作ったグラフは商用利用できますか？
A. はい。企業の資料・書籍・ブログ・SNSなど、用途を問わずご利用いただけます。商用利用も可能です。
Q. 入力したデータは外部に送信されますか？
A. グラフの作成処理はブラウザ内でおこなわれ、入力したデータが当方のサーバーに保存されることはありません。なお、サイト改善のためのアクセス解析情報は外部事業者に送信される場合があります。
Q. スマホで画像を保存する方法は？
A. 各グラフページで画像を長押しすると保存用のプレビューが開きます。そこから再度長押しで「写真に追加」「画像を保存」などのメニューが表示されます。
ご利用にあたって
作成したグラフ画像は、企業の資料・書籍・ブログ・SNSなど、用途を問わずご利用いただけます。商用利用も可能です。サイト内のサンプルデータは説明用のものであり、実在の企業・人物・統計値を正確に表すものではありません。資料に使う際は、必ずご自身のデータに置き換えてご利用ください。ブラウザ内の一時保存はあくまで作業途中の状態を保持するもので、長期保管や他端末との共有を前提とした機能ではありません。重要なデータは元のスプレッドシート側で保存しておくことをおすすめします。
数字を、そのまま伝わる一枚に。Graph Senseiをぜひお試しください。
▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴
この記事について
こんなページも読まれています
