グラフ作成ツール

スプレッドシートの表を貼り付け、棒・折れ線・円・ドーナツのグラフを選んで、PNGまたはSVGで書き出せます。描画はすべてブラウザー内で行われます。

表、プレビュー、2種類の書き出しは、すべてこのタブの中にとどまります。数値がアップロードされることはないので、機密性のある数字も安心してグラフにできます。

CSVをJSONに変換する

グラフ作成 について

グラフ作成ツールは、数値の表を、レポートやスライド、文書にそのまま貼り込めるグラフにします。ExcelやGoogleスプレッドシートのセルを貼り付けるか、表に直接入力すると、区切り文字を判別し、ヘッダー行を見つけて、「1,234.50」「45%」「$99」を普通の数値として読み取ります。集合棒グラフ・積み上げ棒グラフ・横棒グラフ、折れ線グラフ、面グラフ、円グラフ、ドーナツグラフから選び、プレビューが更新される様子を見ながら、タイトル、凡例、値の表示形式、色、キャンバスのサイズを調整できます。軸の目盛りは1・2・5のきりのよい刻みに収まるので目盛りのラベルが読みやすく、棒グラフと面グラフは必ず0から始まります。PNG（透過にもできます）か、どんなサイズでも鮮明なベクターのSVGで書き出せます。描画はすべてお使いの端末上で行われます。

機能

• 7種類のグラフ。集合棒・積み上げ棒・横棒・折れ線・面・円・ドーナツ
• ExcelやGoogleスプレッドシートから貼り付けられる。タブ・カンマ・セミコロン区切りのデータ、引用符付きのフィールド、ヘッダー行を自動で判別
• 「1,234.50」「45%」「$99」「(200)」を数値として読み取り、テキストや空白のセルは単なる欠損として扱う
• 軸の目盛りは1・2・5のきりのよい刻みで、棒グラフと面グラフでは0を含める
• 値の表示形式。そのまま、桁区切り、パーセント、好きな通貨記号から選べる
• 6種類のカラーパレットと、系列やスライスごとのカラーピッカー
• 円グラフとドーナツグラフ用の追加機能。スライスの並べ替え、開始角度、穴の大きさ、パーセントのラベル
• キャンバスの最大2倍のサイズまでのPNG（単色または透過の背景）、ベクターのSVG、または画像をクリップボードにコピー

グラフ作成 の使い方

1. スプレッドシートのセルを「Paste data」ボックスに貼り付けるか、表に直接入力します。最初の列がラベルで、それ以外の列はそれぞれ1つの系列になります
2. グラフの種類を選び、タイトル、軸のタイトル、凡例、値の表示形式を設定します
3. プレビューが更新される様子を見ながら、パレット、系列の色、フォントサイズ、キャンバスのサイズを調整します
4. PNGまたはSVGをダウンロードするか、PNGをクリップボードにコピーします

例

入力

Quarter	Online	In store
Q1	120	90
Q2	150	110
Q3	170	130
Q4	210	160

出力

Bar chart · 800×500 · SVG 4.5 KB
2 series (Online, In store) · 4 categories · legend at the bottom

スプレッドシートからそのまま貼り付けた4行の表です。タブ区切り、ヘッダー行、2つの系列が、設定なしで自動的に判別されます。

よくあるエラーとトラブルシューティング

• 数値の列が1つ、グラフに表示されません。 — グラフに描かれるのは、数値として読み取れるセルだけです。「n/a」やダッシュのようなテキストは欠損になり、数値がまったくない貼り付け列は除外されます。数値ではないセルは、表の中で赤い枠で囲まれます。
• 貼り付けたデータが、1つの列にまとまってしまいました。 — 値の間にタブ・カンマ・セミコロンがなかったためです。列が連続するスペースで区切られているのが、よくある原因です。スプレッドシートからセルを直接コピーするか、値の間にカンマを入れてください。
• 数値の最初の行がヘッダーとして扱われたり、ヘッダーがデータ行として扱われたりしました。 — ヘッダーの判別は自動です。貼り付けボックスの「Header row」の選択を「Yes」か「No」に切り替えると、強制的に指定できます。
• 要素が多いグラフで、値のラベルが表示されません。 — 重なってしまうラベルは、意図的に省略されます。キャンバスを広げるか、フォントサイズを小さくするか、行数を減らすか、正確な数値は表から読み取ってください。

よくある質問

ExcelやGoogleスプレッドシートのデータを、グラフ作成ツールに貼り付けるには？

スプレッドシートでセルを選んでコピーし、「Paste data」を押して貼り付けます。ExcelやGoogleスプレッドシートのタブ区切りのセルは、ヘッダー行も含めて自動で認識され、表に入力されます。表の任意のセルに、データのまとまりを直接貼り付けることもできます。

データに合わせて、グラフ作成ツールではどのグラフの種類を選べばよいですか？

棒グラフはカテゴリーどうしを比較し、積み上げ棒グラフは部分がどのように合計になるかを示します。横棒グラフはラベルが長いときに向いています。折れ線グラフと面グラフは時間による変化を表します。円グラフとドーナツグラフは全体に対する割合を示し、スライスが7つに満たない程度のときに最も読みやすくなります。

背景が透明なグラフをPNGで書き出すには？

「Background」を、明るいページ向けなら「Transparent (dark text)」、暗いスライド向けなら「Transparent (light text)」に設定してから、PNGをダウンロードします。プレビューの背景の市松模様は目印にすぎず、書き出されたファイルには本物のアルファチャンネルが入っています。

グラフ作成ツールのSVG書き出しは、どんなときに役立ちますか？

ベクターのアートワークなので、どんなサイズでも鮮明で、テキストも編集できるテキストのまま残ります。印刷、Figma・Illustrator・Inkscapeなどのデザインツール、Webサイトに向いています。多くのアップロードフォームやチャットアプリなど、SVGを受け付けないアプリでは、代わりにPNGを使ってください。

グラフ作成ツールで、系列やスライスごとに色を変えられますか？

はい。6つのパレットから選ぶか、系列の横（円グラフではスライスの横）にあるカラーピッカーで好きな色を設定できます。「Reset colours」を押すと、パレットの色に戻ります。

グラフ作成ツールでは、何行・何系列まで扱えますか？

1つのグラフにつき、最大200行・12のデータ列までです。これでも、グラフが見やすく表示できる量をすでに超えています。それより大きなデータを貼り付けた場合は、この上限に切り詰められ、その旨のメッセージが表示されます。

関連ツール

• CSV to JSON 変換 — CSV や TSV を型推論とネスト対応でクリーンな JSON に変換します。
• JSON から CSV — フラットなJSONオブジェクトの配列をCSVに変換します。
• 統計計算機 — 平均値・中央値・最頻値・標準偏差・四分位数を瞬時に計算。
• 平均値・中央値・最頻値・範囲 — 数値リストの平均値、中央値、最頻値、範囲を計算します。
• パーセント計算機 — X%はYのいくつか、割合、変化率をすぐに計算します。
• Markdown テーブル生成 — 編集可能グリッドで Markdown テーブルを作成し多形式に書き出し
• SVG から PNG への変換 — SVG マークアップや .svg ファイルを、任意のスケールで鮮明な PNG や JPG に変換できます。
• ワードクラウド作成 — テキストを貼り付けてワードクラウドを作成し、ストップワード・形・色を選んで、PNGまたはSVGでダウンロードできます。

画像の他のツール

• 画像オプティマイザー — 画像を再エンコードして軽量化（JPEG/WebP/PNG）、任意でリサイズします。
• 画像フォーマット変換 — 画像を PNG、JPEG、WebP 間でブラウザ内ですべて変換します。
• EXIF ビューア / 除去ツール — 写真のEXIFメタデータ（GPSを含む）を表示・削除します。何もアップロードされません。
• Base64 画像エンコーダー / デコーダー — 画像を HTML・CSS スニペット付きの Base64 Data URI に変換し、Data URI をダウンロード可能な画像にデコードします。
• アプリアイコンジェネレーター — 1枚の画像を iOS・macOS・Android の全アプリアイコンサイズに変換 — ブラウザ内で生成し ZIP でダウンロード。
• sprite sheet CSS アニメーション — sprite sheet を steps() の CSS アニメーションに変換。ライブプレビュー付き。
• SVG から PNG への変換 — SVG マークアップや .svg ファイルを、任意のスケールで鮮明な PNG や JPG に変換できます。
• 画像カラーピッカー — 画像をホバー・クリックして、任意のピクセルの HEX・RGB・HSL を取得できます。
• カラーフォーマットコンバーター — カラーを HEX・RGB・HSL・OKLCH など全形式に一度に変換します。
• バーコードジェネレーター — EAN・UPC・Code 128 バーコードを生成し SVG や PNG で保存します。
• カラーパレット抽出 — 画像から支配色とパレットを HEX・RGB・HSL で抽出
• 画像の反転・回転 — ブラウザで画像を回転・反転
• 画像トリミング — 自由範囲か固定比率で切り抜き、フル解像度で保存。
• 画像に透かし — テキストかロゴを固定またはタイルで、不透明度と回転つき。
• 画像の黒塗り — スクリーンショットの一部を恒久的にぼかし・モザイク・黒塗り。
• 画像の角丸 — 角丸長方形や円に切り抜き、透過PNGで書き出し。
• 色覚シミュレーター — 1型・2型・3型色覚での見え方を確認。
• 画像DPI変更 — ピクセルを保ったままPNG/JPEGのDPIを設定。
• BlurHash生成 — ぼかしたプレースホルダー画像をエンコード・デコード。
• プレースホルダー画像生成 — 任意サイズのSVG・PNG・data URIプレースホルダー。
• ASCIIアート生成 — コントラストを調整して画像をASCIIアートに変換。
• 画像フィルター — モノクロ・セピア・コントラスト・ぼかしなどを適用し、PNGとCSSを出力。
• 画像分割ツール — 画像をグリッド状のタイルに切り分け、ZIPでダウンロードします。
• 画像結合ツール — 画像を横並び、縦並び、格子状に結合。

画像のツールをすべて見る (35) · すべてのツール