ウェブ・データ

グラフ作成ツール

棒・折れ線・円グラフを作成。Excel から貼り付けて PNG・SVG で保存。

  • 即時
  • 無料
  • プライベート(ローカル処理)
  • 登録不要

ヒント:Excel や Google スプレッドシートでコピーした範囲を、そのままセルに貼り付けられます。Enter キーで次の行へ移動します。最大 50 行・6 系列。

表を貼り付け(Excel、Google スプレッドシート、CSV)

1 行目:系列名、1 列目:ラベル。区切り文字はタブ・セミコロン・カンマに対応。桁区切りや小数点のカンマも認識します。

ℹ️ グラフの計算と描画はすべてブラウザ内で行われ、データがサーバーに送信・保存されることはありません(グラフを復元できるよう、この端末内にだけコピーを保存します)。

手元のデータからグラフを作成する

無料のグラフ作成ツールで、縦棒グラフ、横棒グラフ、積み上げ縦棒グラフ、折れ線グラフ、面グラフ、円グラフ、ドーナツグラフを数秒で作れます。数値は表に直接入力するか(最大 50 行・6 系列)、Excel や Google スプレッドシート、CSV ファイルからコピーした範囲を貼り付けるだけ。入力するたびにプレビューが描き直され、完成したグラフは PNG や SVG でダウンロードしたり、クリップボードにコピーしたりできます。

表計算ソフトを開く必要も、アカウント登録も不要です。レポートや卒業論文、自由研究の図、会議用のスライド、LinkedIn や Instagram への投稿画像、小さなお店の売上や家計の管理などにすぐ使えます。書き出した画像に透かしは入らず、目盛りはきりのよい数値、数値は日本語の書式(1,234.5、12%)で表示されます。

  1. グラフの種類を選ぶ

    縦棒・横棒・積み上げ縦棒・折れ線・面・円・ドーナツのいずれかをクリックします。円グラフとドーナツグラフは表の最初の系列を使います。

  2. データを入力または貼り付ける

    「データ」タブで表に入力するか(1 列目にラベル、系列ごとに 1 列)、「表を貼り付け」を開いて「取り込んで置き換え」を押します。「行を追加」「系列を追加」「行と列を入れ替え」で表を組み替えられます。

  3. タイトルとデザインを整える

    「タイトルと軸」タブでタイトル、サブタイトル、軸のタイトルを設定し、「デザイン」タブで配色、凡例、数値の表示形式(接頭辞・接尾辞・小数点以下の桁数)、文字サイズ、データラベルを調整します。

  4. 画像を書き出す

    「画像サイズ」(16:9、正方形、縦長、4:3)と「背景」を選び、「PNG をダウンロード」「SVG をダウンロード」、または文書に貼り付けるなら「画像をコピー」を押します。

グラフの描画のしくみ

グラフは、このサイトのために書かれた描画エンジンが外部ライブラリを使わずに SVG で描いています。データを変えるたびに目盛り、ラベル、色を計算し直し、データ量にかかわらず読みやすい画像になるよう調整します。

  • きりのよい目盛り:目盛線の間隔は 10 のべき乗の 1 倍・2 倍・5 倍(0、20、40、60、80)。Paul Heckbert が Graphics Gems(1990 年)で紹介した「nice numbers」の方法に基づいています。
  • 0 から始まる軸:棒の長さは値に比例する必要があるため、縦棒と横棒は常に 0 から描きます。負の値は基準線の下に伸びます。折れ線と面では「軸を 0 から始める」をオフにして変化を拡大できます。
  • ラベルの重なり防止:項目名は 2 行に折り返す、45° 傾ける、1 つおきに表示するなどして重なりを避けます。円グラフの小さな扇形には引き出し線つきの外側ラベルを付けます。
  • 滑らかな線:「線を滑らかにする」をオンにすると、単調補間(Steffen の方法)ですべての点を通りつつ、データにない山や谷を作らずに描きます。
  • 言語に合わせた数値:日本語の桁区切り、大きな数の自動短縮表記(2万、123万)に対応し、接頭辞・接尾辞(¥、円、%、kg)も自由に設定できます。
  • 忠実な書き出し:SVG は色を直接指定し、システムフォントを使用します。PNG はその SVG から、選んだサイズ(例:1200 × 675 ピクセル)ちょうどで書き出され、高解像度オプションではその 2 倍(2400 × 1350)になります。

データに合ったグラフの選び方

目的グラフの種類よい使い方避けたいこと
項目どうしの値を比べる縦棒軸は 0 から、項目は 12 個まで、並び順に意味を持たせる軸を途中から始めること(2 倍の高さは 2 倍の値でなければならない)
名前の長い項目を順位づけする横棒値の大きい順に並べる順位を見せたいのに五十音順やアルファベット順にすること
構成の変化を見せる積み上げ縦棒系列は 2〜4 個、いちばん重要な系列を下に区分が多すぎること(比べやすいのは合計と一番下の系列だけ)
時間の推移を追う折れ線間隔をそろえ、線は 5 本まで順序のない項目(国、商品)を線で結ぶこと
量の推移を強調する面系列は 1〜3 個、軸は 0 から多くの系列を重ねて互いに隠してしまうこと
全体に占める割合を見せる円・ドーナツ扇形は 6 個まで、パーセントを表示ほぼ同じ大きさの扇形や負の値

データ可視化の定番の目安です。迷ったら、並べ替えた棒グラフがいちばん読み取りやすい選択です。

こんな場面で使えます

  • 学校・大学:レポート、自由研究、卒業論文に使えるくっきりしたグラフを、Word や Google ドキュメントにそのまま貼り付け。
  • 会議・プレゼン:PowerPoint や Google スライド向けの 16:9。背景を透明にすれば色付きのテンプレートにもなじみます。
  • SNS 投稿:Instagram や LinkedIn 向けに正方形 1080 × 1080 や縦長 1080 × 1350。「文字サイズ」を大きくすればスマホでも読みやすくなります。
  • 小規模事業・団体:月別売上、予算の内訳、来場者数などを、ソフトの契約なしでグラフ化。
  • ブログ・メルマガ・記事:数 KB の SVG なら、高精細ディスプレイでもくっきり表示されます。

よくある失敗と対処法

  • 系列と項目が逆になっている:横軸に月ではなく年が並んだら、「行と列を入れ替え」を押します。
  • セルが赤くなる:「12kg」「約40」のように文字が入ったセルは無視されます。数値だけを残し、単位は「接尾辞」に入力しましょう。
  • 円グラフの扇形が多すぎる:6 個を超える場合は小さな値を「その他」の行にまとめるか、横棒グラフに切り替えます。
  • 色が見分けにくい:「バイオレット」は 1 色の濃淡で構成されています。系列が 3 つを超えるなら「ビビッド(色覚の多様性に配慮)」を選ぶか、表の見出しにある系列の色見本をクリックして色を変えましょう。
  • スマホで文字が読めない:SNS 用の画像は、正方形か縦長のサイズを選び、文字サイズを「大」にします。

処理はすべてブラウザ内で行われ、データが端末の外に出ることはなく、アカウントも不要です。前回のグラフはブラウザのストレージにローカル保存されます(「サンプル」ボタンで消去)。制限:最大 50 行・6 系列(そのため行と列の入れ替えは 6 行以下のときだけ可能)。円グラフとドーナツグラフは最初の系列だけを使い、0 や負の値は除外します。SVG はシステムフォントで表示されるため、パソコンによって見た目がわずかに変わることがあります(PNG は固定です)。

よくある質問

Excel の表からグラフを作るには?

Excel や Google スプレッドシートで、1 列目にラベル、1 行目に系列名が入った範囲を選択し、Ctrl+C(Mac は ⌘+C)でコピーします。「表を貼り付け」に貼り付けて「取り込んで置き換え」を押すと、見出し行とラベル列が自動で認識され、桁区切りや小数点のカンマも正しく読み取られます。既存の表に追加したいときは、見出しを除いたセル範囲をデータ表のセルに直接貼り付けることもでき、そのセルを起点に入力されます。

割合(パーセント)を表すにはどのグラフがよいですか?

全体に占める各項目の割合を示すなら、5〜6 項目までは円グラフやドーナツグラフが向いています。項目が多い場合や割合が近い場合は、大きい順に並べた横棒グラフのほうが正確に比べられます。人は角度より長さを比べるほうが得意だからです。構成比の時間的な変化を見せたいときは積み上げ縦棒を使います。

PNG と SVG、どちらでダウンロードすべきですか?

PNG はピクセル画像で、Word、PowerPoint、Google スライド、メール、SNS などどこでも使えます。SVG はベクター形式で、どのサイズでも鮮明なまま、数 KB と軽く、Inkscape や Illustrator、Figma で編集できます。ポスターや印刷には「高解像度 PNG(×2)」にチェックを入れるか、SVG を使ってください。

Word や PowerPoint、Google スライドに貼るには?

いちばん早いのは「画像をコピー」を押して、文書内で Ctrl+V(Mac は ⌘+V)で貼り付ける方法です。PNG をダウンロードして「挿入」→「画像」から追加することもできます。Word と PowerPoint(Microsoft 365、Office 2019 以降)は SVG にも対応し、拡大しても鮮明です。Google スライドは SVG を読み込めないため PNG を使ってください。

色覚に配慮したグラフにするには?

日本人男性の約 20 人に 1 人は、赤と緑の一部を見分けにくい色覚の特性を持つといわれます。配色は「ビビッド(色覚の多様性に配慮)」を選んでください。岡部正隆氏と伊藤啓氏が提案した、よく見られる色覚のタイプでも区別しやすい配色(Okabe-Ito パレット)に基づいています。凡例を残し、できれば値も表示して、色だけに頼らないようにしましょう。

無料ですか?データは外部に送られませんか?

はい、完全無料で、登録は不要、書き出した画像に透かしも入りません。グラフはブラウザ内で計算・描画されるため、数値がサーバーに送られることはありません。前回のグラフを復元できるよう端末内にだけコピーを保存しますが、「サンプル」ボタンで消去できます。