Freepik AIでインタラクティブなSVGインフォグラフィックを作る方法
Freepik AIでSVG形式のインフォグラフィックを作る手順を解説。プロンプトの書き方から、調整、書き出し、活用方法まで紹介します。
👁 114閲覧数
Adobe Illustratorを使いこなすには、操作を覚える時間も必要です。Freepik AIでは、2026年2月からSVG形式のインフォグラフィックを生成できるようになりました。拡大しても劣化しにくく、編集やインタラクションにも対応する形式で、IllustratorやFigmaなどのデザインツールを使わずに作成できます。データと見た目の希望を入力して生成するのが基本です。
簡単すぎるように感じるかもしれませんが、顧客向けのレポートを作るフリーランス、小規模事業のプレゼン資料に図表を加えたい方、グラフ作成に手間をかけているコンテンツ制作者には便利な機能です。ここでは、最初のプロンプトから完成したSVGファイルの書き出しまで、Freepik AIの使い方を順に紹介します。
Freepik AIでSVGを作る前に準備するもの
Freepikのアカウントが必要です。無料プランでも試せますが、SVGの書き出しや高度なインタラクティブ機能はPremiumプランで利用できます。料金は月額約14〜18ユーロです。ブラウザーは最新バージョンのChromeまたはFirefoxを用意してください。ほかのソフトウェアは必要ありません。
図にしたいデータも準備しましょう。数値、カテゴリ、ラベルなどを整理しておくと、生成後に修正する手間を減らせます。プロンプトに具体的な条件がなければ、AIが内容を推測して補うことはできません。「売上が伸びた」だけでなく、「2025年第4四半期は第3四半期比で34%増」のように説明します。
手順1：SVGインフォグラフィックの生成画面を開く
freepik.comにログインし、上部のナビゲーションにある「AI Tools」を開きます。「Image Generator」に進み、画面左側の出力形式から「SVG Infographic」を選びます。選択肢が表示されない場合は、ページを再読み込みし、Premiumプランが有効か確認してください。SVG機能の一部は無料アカウントでは表示されない場合があります。
SVG形式を選ぶと、プロンプト入力欄や、カラーパレットまたは16進数による色指定、ビジュアルスタイルの選択肢が表示されます。スタイルには、ミニマル、コーポレート、データインフォグラフィック、イラスト風などがあります。インタラクティブ機能の切り替えを有効にすると、カーソルを重ねたりクリックしたりしたときに要素が反応する図を作れます。
ヒント
プロンプトを入力する前に「Style Preview」を開き、利用できるビジュアルテンプレートを確認しましょう。先にスタイルを選ぶと、AIがデザインに合わせて要素を配置しやすくなり、修正の反復を1〜2回減らせることがあります。
手順2：データを含む最初のプロンプトを書く
よくある失敗は、指示を曖昧にすることです。「会社の業績に関するインフォグラフィック」だけでは、AIに伝わる情報が限られます。数値、ラベル、色、レイアウトを指定しましょう。以下の例は、元の記事に掲載されたポーランド語のプロンプトを日本語に翻訳したものです。翻訳した例を使って、新たに生成や検証を行ったものではありません。
まずは、スタートアップの四半期売上を比較するグラフの例です。
四半期ごとの売上を比較するSVGインフォグラフィックを作成してください。データ：2025年第1四半期：120,000、第2四半期：185,000、第3四半期：210,000、第4四半期：290,000。スタイル：ミニマル。コーポレートブルーとグリーンの配色。棒グラフ形式。四半期ごとの成長率をラベルで表示してください。インタラクティブ機能：カーソルを重ねた棒を強調表示してください。軸のラベルは日本語にしてください。このプロンプトでは、具体的な数値、スタイルの指定、インタラクションをまとめて指示しています。生成結果は、カーソルを重ねたときに反応する棒グラフを想定しています。
次は、顧客向けのプレゼンや、サービスの進め方を説明するページに使えるプロセス図の例です。
マーケティング会社の業務フローを示す、5段階のSVGプロセスインフォグラフィックを作成してください。ステップ：1. 顧客へのヒアリング（書類のアイコン）、2. 市場分析（グラフのアイコン）、3. 戦略立案（電球のアイコン）、4. コンテンツ制作（鉛筆のアイコン）、5. レポート作成（チェックマークのアイコン）。スタイル：横方向のフロー、モダンなフラットデザイン。アクセントカラーは#E63946（赤）、背景はニュートラルなグレー。各ステップはクリックすると短い説明が開くようにしてください。フォントはサンセリフ体。テキストは日本語にしてください。色を「赤」とだけ指定せず、16進数のカラーコードを入力している点に注目してください。ブランドカラーを指定すれば、編集ソフトで色を直す手間を抑えられます。
ヒント
ブランド用のインフォグラフィックを作るなら、事前にブランドガイドラインから色の16進数コードを確認し、プロンプトに直接記載しておきましょう。Freepik AIは具体的なコードを指定できるため、書き出し後の色調整を減らせます。
手順3：データの種類に合わせたプロンプト例
マーケティングレポートで使いやすい、顧客の年代構成を示す円グラフの例です。
ECサイトの顧客構成を示すSVGの円グラフインフォグラフィックを作成してください。データ：18〜24歳：22%、25〜34歳：38%、35〜44歳：25%、45歳以上：15%。スタイル：中央が空いたドーナツグラフ。鮮やかなグラデーションカラー（コーラル、ティール、ネイビー、ゴールド）。中央に合計「4,200人」と表示してください。ページの読み込み時に各セグメントをアニメーション表示し、カーソルを重ねると割合と人数をツールチップに表示してください。背景は白。凡例は右側に配置してください。地域や商品ごとの販売実績などを比較するときに使える、ヒートマップの例です。
地域別の商品実績を示すSVGヒートマップのインフォグラフィックを作成してください。地域：マゾフシェ、マウォポルスカ、シロンスク、ヴィエルコポルスカ、ドルヌィ・シロンスク。商品：スマートフォン、ノートパソコン、タブレット、アクセサリー。評価尺度：1〜10。データ：マゾフシェ（スマートフォン：9、ノートパソコン：7、タブレット：6、アクセサリー：8）、マウォポルスカ（スマートフォン：7、ノートパソコン：8、タブレット：5、アクセサリー：6）、シロンスク（スマートフォン：8、ノートパソコン：6、タブレット：7、アクセサリー：9）、ヴィエルコポルスカ（スマートフォン：6、ノートパソコン：9、タブレット：8、アクセサリー：7）、ドルヌィ・シロンスク（スマートフォン：7、ノートパソコン：7、タブレット：9、アクセサリー：5）。色の尺度は、低い値を明るい黄色、高い値を濃い赤にしてください。各セルに数値を表示し、カーソルを重ねたときに行と列をまとめて強調表示してください。会社やプロジェクトの歩みを紹介するページで使える、タイムラインの例です。
ソフトウェア会社の沿革を示す、縦型のSVGタイムラインインフォグラフィックを作成してください。出来事：2019年 - クラクフで会社を設立（3人、最初の製品）、2020年 - 500,000の資金調達、2021年 - EUの5カ国に事業を拡大、2022年 - SaaSプラットフォームを公開、2023年 - アクティブユーザー10,000人、2025年 - 米国市場に参入。スタイル：左右交互のレイアウト。ブランドカラーは紫とオレンジ。各出来事にマイルストーンのアイコンを付け、年を太字で表示してください。スクロール時にタイムラインの線をアニメーション表示し、各イベントカードをフェードインさせてください。モダンなフラットデザインにしてください。ヒント
タイムラインのプロンプトには「スクロール時にアニメーション」と加えてみましょう。記事の説明によると、Freepik AIはSVGをページに埋め込んだ後、ブラウザー上で動作するスクロール連動のCSSアニメーションを生成します。
手順4：生成結果を修正する
最初の結果が理想どおりでなくても、最初から作り直す必要はありません。生成した画像の下にある入力欄で、具体的な修正内容を指定します。「配置を変えて」だけでは指示が曖昧です。以下の例のように、変更したい位置や文字サイズを明記しましょう。例は、元の記事に掲載されたプロンプトを日本語に翻訳したものです。翻訳した例を使った新たな生成結果ではありません。
データを変えずに色だけを修正する場合の例です。
データとレイアウトはすべてそのままにしてください。配色をネイビーブルーの単色系に変更してください。最も高い値は最も濃い色#003566、中間の値は#0077B6、最も低い値は明るい#90E0EFにしてください。赤い要素はすべて削除してください。カーソルを重ねたときのインタラクティブな効果は変更しないでください。文字が小さな領域からはみ出す場合に、レイアウトと読みやすさを調整する例です。
文字組みと余白だけを調整してください。すべてのラベルのフォントサイズを20%大きくしてください。グラフの各領域の内側に8pxの余白を追加してください。調整に合わせてアイコンを15%小さくしてください。文字が図形要素に重ならないようにしてください。色とデータは変更しないでください。注意
Freepik AIは修正を何度も繰り返すと、特にホバーアニメーションなどのインタラクティブ機能を失うことがあります。3回修正するごとにSVGをダウンロードし、ブラウザーで開いて動作を確認しましょう。機能しなくなった場合は、ひとつ前のバージョンに戻して書き出します。
手順5：SVGを書き出して使う
見た目が決まったら、プレビューの右上にある「Download」をクリックし、SVG形式を選びます。PNGでは拡大縮小のしやすさやインタラクティブ機能が失われます。ファイルサイズは通常20〜150 KBで、アニメーション用のCSSとJavaScriptを含むSVGコードが入っています。
完成したファイルは、主に4つの方法で使えます。1つ目は、SVGファイルの内容をコピーしてWebページのHTMLコードにインラインSVGとして貼り付ける方法です。ライブラリを追加せずにインタラクティブ機能を使えます。2つ目は、サーバーにアップロードしてimgタグで埋め込む方法です。この場合、インタラクティブ機能は失われますが、解像度に左右されずきれいに表示できます。3つ目は、無料のInkscapeやAdobe Illustratorで開いて手作業で調整する方法です。ファイルはベクター形式で編集できます。4つ目は、InkscapeからPNGまたはPDFに書き出して、印刷物やPowerPointのプレゼン資料に使う方法です。
オフラインのプレゼンに向けて、PNGに書き出しやすい図を作るプロンプトの例です。
印刷物とプレゼン資料に適した、SVG形式の比較インフォグラフィックを作成してください。比較対象は「従来型」と「AI支援型」の2つのビジネスモデルです。指標：プロジェクトの所要期間（従来型：14日、AI支援型：3日）、プロジェクトあたりの費用（従来型：8,000、AI支援型：2,500）、修正回数（従来型：8回、AI支援型：3回）、顧客満足度（従来型：72%、AI支援型：91%）。スタイル：2列のレイアウト。左列は従来型を表すグレー、右列はAI支援型を表す青。指標のラベルは太字、数値は大きく読みやすくしてください。アニメーションは使わず、静止画にしてください。サイズ：1920x1080px、アスペクト比16:9。背景は白。ヒント
プレゼン用の図では、プロンプトに「アニメーションなし、静止画のみ」と、16:9の寸法を加えましょう。余分なJavaScriptを含まないSVGを生成しやすくなります。InkscapeやIllustratorで開きやすく、PNGへの書き出し結果も安定します。
Freepik AIが得意な図と苦手な図
SVG形式のFreepik AIは、棒グラフ、円グラフ、折れ線グラフ、シンプルなタイムライン、比較インフォグラフィックの作成に向いています。カテゴリ別の変数、割合、実数などの説明的なデータも、プロンプトを具体的に書けば正しく処理できます。
一方、地理情報を含む図は結果が安定しません。コロプレスマップでは、地域や国の境界が模式的になり、正確でない場合があります。このような用途には、DatawrapperやFlourishなどの専用ツールが適しています。データの層が多い複雑なインフォグラフィックも苦手です。要素が詰め込まれ、文字が読みにくいほど縮小されることがあります。基本は「グラフは1つ、伝える要点は1つ、プロンプトは1つ」です。
Google · あなたの情報源GoogleでKiramesuをもっと上位に表示-ワンクリックで設定お気に入りの情報源に追加 →避けたい使い方
Excelからコピーした表を、そのままテキストとしてプロンプトに貼り付けないでください。タブや空白が連続したテキストとして解釈され、データ同士の関係が失われることがあります。「カテゴリ：値」の組み合わせを、カンマや括弧で区切って入力しましょう。読みやすく整理したデータは、予測しやすい結果につながります。
Freepik AIと手作業のデザイン、どちらを選ぶ？
毎月5社のEC事業者向けにレポートを作るフリーランスなら、グラフ一式の作成を3時間から1時間に短縮できる可能性があります。Illustratorを契約したり、外注したりする必要もありません。一方、代理店のシニアデザイナーがブランディング案件に使う場合は、向いていないことがあります。細部まで意図して決める必要がある仕事では、AIの出力にランダムさが残るからです。
使いどころは、その中間にあります。LinkedIn用の図を作りたい小規模事業の運営者、記事でデータを見せたいコンテンツ制作者、デザイナーを2日間拘束せずに四半期レポートを準備したいマーケティング部門などです。こうした用途では、SVG形式のFreepik AIによって数時間の作業を省き、外注費を抑えられる場合があります。細かなデザイン制御が必要な仕事にはIllustratorが引き続き役立ちます。
Kiramesuの関連記事
