パワポでビフォーアフターを見せる方法：工数・コスト削減グラフ

Q: グラフの元データはアップロードされますか？

グラフの生成と出力はブラウザ内で行います。操作の利用統計にグラフの文字や数値は含めません。自動保存はしないため、ページを閉じる前に画像を保存してください。

Q: 写真を並べるビフォーアフターにも使えますか？

このツールは数値の比較用です。写真はPowerPointで同じ大きさの画像を2枚挿入して並べます。生成したグラフと組み合わせることもできます。

Q: コスト削減の図を営業資料に使うとき、何を書けばよいですか？

前後の数値、単位、比較期間、対象業務、費用に含めた項目、出典を記載し、実績・見積もり・サンプルを区別します。

Name: Soren Atelier

更新日 2026/10/21

導入前後の違いをパワポで伝えるための図解ガイド。工数削減、コスト削減、作業内訳の3つのテンプレートから、数値を入力してSVG・PNGを作り、PowerPointに挿入する手順を紹介します。

導入効果を数値で伝えるなら、左に導入前、右に導入後、その上に削減率を置くと、変化を読み取りやすくなります。工数や費用には棒グラフ、作業手順の変更にはフロー図、見た目の変化には写真の並列比較が向いています。

ここでは、営業資料やサービス紹介で使う「工数・コスト削減グラフ」を作ります。ビフォーアフターグラフ作成ツール (opens in a new tab)でテンプレートを選び、前後の数値を入力すると、PowerPointに挿入できるSVG・PNGを保存できます。

この記事の数値は説明用のサンプルです。特定企業の実績や、製品の導入効果を保証するものではありません。

トレンド記事

伝えたい変化に合わせて、図の形式を選ぶ

「ビフォーアフター」は図解の構成を指す言葉です。必ずしも棒グラフにする必要はありません。

伝えたいこと	向いている図	資料に入れる情報
作業時間が短くなった	前後2本の棒と削減率	同じ業務の時間、集計期間、測定条件
年間費用が減った	コストの比較グラフ	同じ費目・期間の金額、導入後に含めた費用
どの作業が減ったか	導入前の内訳を積み上げた棒	作業別の時間と合計、導入後の合計
承認や転記の工程が減った	前後のフロー図	作業の順序、担当者、なくなった工程
画面やデザインが変わった	画像を左右に並べる	同じ縮尺・範囲の画像、変更箇所

以下のツールは、数値の前後比較を作るためのものです。複数の部署や製品を同じ時点で比較する場合は、棒グラフ作成ツール (opens in a new tab)も使えます。

手順1：導入前後で比較条件を揃える

まず、何の数値を比べるか決めます。たとえば「年間1,000回の会議について、議事録を作る作業時間」を対象にするなら、導入後も同じ会議回数を前提にします。

指標	導入前	導入後	単位
作業時間	3,000	90	時間
年間コスト	500	75	万円

前が「時間」、後が「分」では、そのまま計算できません。5時間と5分を比較するなら、300分と5分に揃えて入力します。費用も、導入前は人件費だけ、導入後は人件費と利用料の合計、といった比較の条件を注記に残してください。

手順2：テンプレートを選んで数値を入力する

グラフ作成ツールを開きます (opens in a new tab)。次の3種類から選べます。

テンプレート	用途
工数削減	作業時間など、1つの指標を大きく見せる
工数とコスト	時間と費用を横に並べて説明する
作業の内訳	導入前の時間を作業別に分け、合計を比較する

テンプレートを選ぶと、現在編集中のグラフが置き換わります。必要な図を保存してから切り替えてください。

「指標名」に、作業時間や年間コストなどの名前を入力します。
「単位」に「時間」「分」「万円」などを入力します。
「導入前の数値」「導入後の数値」を変更します。
複数の指標を編集するときは、番号ボタンで切り替えます。「指標を追加」で3つまで並べられます。

比較グラフの編集画面。テンプレート、文字、数値、ブランドカラーを編集し、プレビューを確認して保存できる。

削減率と棒の高さは、数値に合わせて更新されます。数値が増えた場合は「削減」ではなく「増加」になり、矢印の向きも変わります。

手順3：見出し、色、出典を整える

グラフだけをスライドに貼っても意味が通じるように、見出しと注記を入れます。

見出しは結論を具体的に。 「導入効果」だけより「議事録作成の作業時間を削減」の方が、何を比べた図か分かります。
導入前後のラベルを揃える。 「従来の方法」「新しい方法」など、実際の比較に合わせて変更できます。
導入後にブランドカラーを使う。 導入前はグレーにして、比較対象を見分けやすくします。白背景では、薄すぎる色を避けてください。
出典・注記を残す。 測定期間、対象件数、計算条件、データの出典を記載します。サンプルの注記を実績の説明に置き換える場合は、確認できた情報だけを使います。

入力した文字は図にそのまま入ります。狭い図で長い文章を使うと文字が小さくなるため、見出しは短くし、詳しい条件はスライド本文に分けると読みやすくなります。

手順4：SVGかPNGを保存し、PowerPointに挿入する

形式	選ぶ場面	確認点
PNG	表示を崩さずスライドやWebに貼りたい	標準は2,400 × 1,350。より大きく使う場合は3,600 × 2,025を選ぶ
SVG	拡大して使いたい、ベクター形式で保管したい	表示先の対応とフォントによって文字の見え方が変わることがある

白以外の背景に置くなら「背景を透過」をオンにして保存します。SVG・PNGともに透明背景に対応しています。出力には小さなkanaries.netの表記が入ります。

PowerPointでは、画像を置くスライドを開き、**「挿入」→「画像」**から保存したファイルを選びます。バージョンやOSにより「このデバイス」「ファイルからの画像」などの表示が異なります。画像を挿入する操作はMicrosoftの公式手順 (opens in a new tab)でも確認できます。

SVGに対応したPowerPointでは、同じようにSVGを挿入できます。編集機能の範囲はプラットフォームによって異なるため、MicrosoftのSVG対応・編集手順 (opens in a new tab)を確認してください。このツールが出力するのは画像で、編集可能なPowerPointグラフやPPTXテンプレートではありません。数値を直すときは、ツール側で変更して再度保存します。

このガイドの図と画面例は、作成ツールをブラウザで操作して生成しました。SVG・PNGの保存と数値変更を確認しています。PowerPointへの挿入手順はMicrosoftの公開ドキュメントに基づいており、本記事でPowerPointの全バージョンを実機検証したものではありません。

工数の内訳を入れる場合

「作業の内訳」テンプレートでは、導入前の値を3項目まで分けられます。たとえば、文字起こし300分、修正10分、確認30分なら合計340分です。導入後が5分なら、削減率は約98.53%になります。

文字起こし300分、修正10分、確認30分の合計340分から5分へ変化する工数削減グラフ。約98.53%削減。

「導入前の内訳を表示」をオンにすると、導入前の合計は項目の数値から自動計算されます。二重に合計を入力する必要はありません。内訳を外すときはチェックを外します。

削減率と棒の高さを正しく見せる

削減率は次の式で求めます。

削減率 =（導入前 − 導入後）÷ 導入前 × 100

3,000時間から90時間なら97%削減です。90時間は元の3%なので、「3%削減」と混同しないようにします。

費用が500万円から75万円なら85%削減です。ただし、これは費用の減少率であり、投資回収率や費用対効果そのものではありません。導入費用や収益を含めた判断には、別の計算が必要です。

棒グラフは長さで数量を伝えるため、0を起点に同じ尺度で描きます。ツールは指標ごとに前後の尺度を揃えています。時間と費用など、別々の指標の棒の高さを直接比べることはできません。

基準となる導入前が0の場合、削減率は計算できません。ツールでは割合を表示せず、前後の数値を残します。増加や変化なしの場合も、その状態に合わせて表示されます。

よくある質問

グラフの元データはアップロードされますか？

グラフの生成とSVG・PNGへの出力はブラウザ内で行います。入力したグラフの文字や数値を操作の利用統計に含めることはありません。自動保存はしないため、ページを閉じる前に必要な画像をダウンロードしてください。

写真を並べるビフォーアフターにも使えますか？

このツールは数値の比較用です。写真の比較は、PowerPointに同じ大きさの画像を2枚挿入して左右に配置します。図と写真を組み合わせる場合は、生成したグラフをスライドの別の領域に置けます。

コスト削減の図を営業資料に使うとき、何を書けばよいですか？

前後の数値と単位に加えて、比較期間、対象業務、導入後の費用に含めた項目、出典を記載します。自社の実績、見積もり、説明用のサンプルを区別してください。