動くSVGコピペグラフメーカー｜Excelから「SVG画像」作成

Excelデータをコピペするだけで、おしゃれで動くグラフを即座に作成。特定データの強調（ピックアップ配色）も自由自在。WordPressやWebサイトへの埋め込みコード生成、高画質なSVGダウンロードにも対応しています。プレゼン資料やブログ記事の図解をプロ級の仕上がりに。

グラフはスマートフォンでも閲覧できますが、作成は【パソコンのみ対応】しております。作成したグラフは、個人のブログやSNSから、企業のプレゼン資料、商用サイトまで、用途を問わずすべて無料で自由にご利用いただけます！またきてね

⚠️ 【重要】プレゼン資料（PowerPointなど）でご利用の方へ

PowerPointやGoogleスライドに画像を貼り付ける場合、ソフトの仕様上「動くSVG」のアニメーションは再生されません。プレゼン資料に貼り付ける際は、必ず「静止画SVG」をダウンロードしてご使用ください。（※Webサイトやブログに専用コードで埋め込む場合はアニメーションが可能です）

📊 グラフメーカー 使い方ガイド

このツールは、Excelやスプレッドシートのデータをコピーして貼り付けるだけで、美しくて動きのあるグラフを簡単に作成・保存できるWebツールです。

このページでは、ツールの基本的な使い方から、作成したグラフを自分のWebサイト（WordPressやGoogleサイトなど）に貼り付ける方法までを詳しく解説します。

作成できるグラフのサンプル

実際にこのツールを使って作成し、Webサイトに埋め込んだグラフのサンプルです。（※スクロールして表示された瞬間にアニメーションが再生されます）

基本的な使い方

1. データを入力する

グラフの元になるデータを入力します。方法は以下の3つです。

• 直接入力する: テキストエリアにキーボードで直接入力します。項目と数値の間は「Tabキー」または「スペース」で区切ります。
• Excelからコピペする（おすすめ）: ExcelやGoogleスプレッドシートの表をマウスで選択してコピー（Ctrl+C）し、ツールのテキストエリアに貼り付け（Ctrl+V）ます。
• CSVファイルを読み込む: 「CSV読込」ボタンを押し、パソコンに保存されているCSVファイルを選択します。

2. グラフの種類と見た目を設定する

• データの並び替え: 値が大きい順、小さい順に自動で並び替えることができます。
• グラフの種類: 縦棒グラフ、横棒グラフ、折れ線グラフ、円グラフから最適なものを選びます。
• タイトル・ラベル・単位: グラフのタイトルやX軸/Y軸の名前、数値の単位（円、％など）を設定できます。
• 全体のサイズ指定: 幅と高さを指定できます。幅を「100%」にすると、スマホで見た時などに画面幅に合わせて自動で縮小されます。

3. 色をカスタマイズする

「配色タイプ」から、目的に合わせて色の塗り方を選べます。

• ピックアップ: 全体を「ベース色」で塗り、目立たせたい特定の項目だけを「目立たせる色」で強調します。「6. 目立たせる項目」でチェックを入れたものが強調されます。
• 個別指定: すべての棒や線の色を自分で自由に決めたい場合に使います。「色設定の対象」で、列（系列）ごとに色を分けるか、行（項目）ごとに色を分けるかを選択できます。

CSV（シーエスブイ）とは？

「CSV（Comma Separated Values）」は、データをカンマ（ , ）などで区切って並べた、非常にシンプルなテキストファイルのことです。

なぜ使うの？

Excel専用のファイル（.xlsx）は専用のソフトがないと開けませんが、CSVファイルはどんなソフトやシステムでも簡単にデータをやり取りできる「世界共通のデータ形式」だからです。

CSVの作り方

ExcelやGoogleスプレッドシートで表を作成した後、「ファイル」→「名前を付けて保存（またはダウンロード）」を選び、ファイル形式として「CSV（カンマ区切り）」を選択するだけで簡単に作成できます。

作成したグラフの保存と貼り付け方

グラフが完成したら、右上のボタンを使って保存・共有しましょう。

パターンA：画像として保存する（プレゼン資料などに）

PowerPointなどの資料に貼り付けたい場合はSVG画像として保存します。SVGはどれだけ拡大しても画質が荒くならない魔法の画像形式です。

• 静止画SVG: アニメーションのない綺麗な画像として保存します。
• 動くSVG: 開いた瞬間にフワッと動くアニメーション付きの画像として保存します。（※ブラウザで開いた時のみ動きます。PowerPoint上では静止画になります）

パターンB：コードをコピーしてWebサイトに埋め込む

ツールの「コードをコピー」ボタンを押すと、グラフを表示するためのHTMLコードがクリップボードにコピーされます。このコードを自分のサイトに貼り付けることで、アニメーション付きの綺麗なグラフを直接埋め込むことができます。

WordPressへの貼り付け方（ブロックエディタの場合）

1. 記事の編集画面を開きます。
2. ブロック追加ボタン（＋マーク）を押し、「カスタムHTML」ブロックを選択します。
3. 入力欄に、コピーしたコードをそのまま「貼り付け（Ctrl+V）」します。
4. 「プレビュー」を押すと、記事上でグラフが動くことを確認できます。

Googleサイトへの貼り付け方

1. 編集画面を開き、右側のメニューから「埋め込む（< >のアイコン）」をクリックします。
2. 表示されたウィンドウで「コードを埋め込む」のタブを選択します。
3. 入力欄に、コピーしたコードを「貼り付け（Ctrl+V）」して「次へ」を押します。
4. プレビューが表示されたら「挿入」をクリックします。
5. 挿入されたグラフの枠のサイズを、見やすいようにマウスで引っ張って調整してください。

💡 ポイント サイトに埋め込んだグラフは、ユーザーが画面をスクロールしてグラフが見えた瞬間にアニメーションが再生される仕様になっています。訪問者の目を引くリッチな表現が可能です！