【第1部-6回】AIで"見る"ブログを作る!グラレコからインタラクティブグラフまで爆速で作成した話
ブログに視覚的な「見るコンテンツ」を導入する方法を解説。生成AI(Gemini)をデザイナーとして活用し、HTML/CSSコードを使ったインフォグラフィックやグラフを短時間で作成する具体的なテクニックと共創のコツを紹介します。

この記事はシリーズ構成となっており▶️マークが現在の記事となります
プロローグ
AIは「新人」であり「Web開発」である - 成果を最大化する生成AIとの付き合い方
第1部 僕がAIを最高の相棒にするまで:ブログ運営改善プロジェクト全記録
【第1回】写真の表を瞬時にCSV化!業務効率を劇的に改善するGemini活用術
【第2回】月次レポート作成を完全自動化!GASコードをGeminiに丸投げしてブログ運営を効率化した話
【第3回】「ただの数字」から「伝わる物語」へ。AIを“データアナリスト”にした思考プロセス
【第4回】企画からSNS拡散まで!AIを相棒にブログ記事をゼロから作り上げた全記録
【第5回】AIと一緒にWebサイトをリニューアル!トップページをGeminiと作った全記録
▶️【第6回】AIで「見る」ブログを作る!グラレコからインタラクティブグラフまで爆速で作成した話
【第7回】AIは最高の壁打ち相手!対話と深掘りでコンテンツの質はここまで上がる
第2部 PMP資格の学習教材を、AIを相棒にしてゼロから作り上げる
第3部 AIを相棒にしたシステム開発プロジェクト全記録
テーマ: サイト全体の戦略設計
前回の記事はこちら:https://axis.migalo.co.jp/column/k015
① はじめに:その記事、文字ばかりで読者を疲れさせていませんか?
どんなに価値のある情報も、長い文章や無味乾燥な数字の羅列だけでは、読者の心に届く前に離脱されてしまいます。読者の理解を深め、心を動かすには、情報を視覚的に伝える 「見るコンテンツ」 が不可欠です。
しかし、インフォグラフィックやインタラクティブなグラフの作成には、デザインスキルやプログラミング知識が必要で、多くの人にとって高いハードルでした。
この記事では、そんな課題を解決するために、生成AI(Gemini)を「専属デザイナー」として活用し、突発的な出来事に対する解説インフォグラフィックを “爆速” で作成した事例をご紹介します。
この記事を読めば、専門スキルがなくても、AIとの対話を通じて、複雑な情報を分かりやすく魅力的なビジュアルに変える具体的なテクニックを学ぶことができます。
② 課題・目的:タイムリーな情報を、いかに「早く」「分かりやすく」伝えるか
2025年9月5日、私が住む首都圏は記録的な大雨に見舞われ、自宅の太陽光発電量が86日ぶりに10kWhを下回るという出来事がありました。
課題:このタイムリーな「事件」を、X(旧Twitter)での速報だけでなく、ブログ記事として深く解説したい。
しかし、単なる文章と数字だけでは、この日の発電量がいかに「異常」だったのか、そして「それでも問題ない」という安心感が伝わりにくい。
注目度が高いうちに記事を公開したいため、デザイン性の高いインフォグラフィックを、数時間という短時間で作成する必要がある。
目的: AIを活用して、「太陽光が機能停止した日」の状況と、それでも問題ない理由をまとめた一枚のインフォグラフィックを、迅速かつ高品質に作成すること。
③ AIへの具体的な指示(プロンプト)
この目的を達成するため、私はまず記事全体の構成案を練り、それをAIに渡して「デザイナー」としての役割を依頼しました。
【私からGeminiへの指示:インフォグラフィック化】 ありがとうございます。この内容を元にインフォグラフィックを作成していただけますか? 内容は抜粋やハイライトではなくてすべての要素を含んでください。 今回はそのインフォグラフィックをベースに投稿する予定です。
ここでのポイントは、AIにデザインの裁量を大きく委ねつつも、 「すべての要素を含んで」 と指示することで、私が伝えたいストーリーの骨格は絶対に外さないように制約をかけた点です。
④ AIの応答と結果
私の指示を受け、AI(デザイナー)は、テキストベースの構成案を、驚くほど迅速に、HTMLとTailwind CSSで記述された、デザイン性の高いインフォグラフィックへと変換してくれました。
応答時間: 指示を出してから、最初の完成版が出てくるまでわずか数分。
品質:「悲報」というテーマに合わせて、ダークテーマを基調としたデザインを自主的に提案。
これまでの輝かしい実績と、この日の衝撃的なデータを対比させるレイアウト。
読者の不安を払拭するための「3段構えの備え」という安心材料の提示。記事全体の結論をまとめるフッター。
このAIからの提案により、私はコーディングやデザイン調整にほとんど時間を費やすことなく、企画からわずか数時間で、読者の関心を強く引く高品質なビジュアルコンテンツを完成させることができました。
⑤ 考察・ポイント:AIとビジュアルコンテンツを共創するコツ
AIは「HTML/CSS」を話すデザイナーである: AIにビジュアル作成を依頼する際、最終的なアウトプットがコードであることを意識すると、活用の幅が大きく広がります。静的な画像だけでなく、Webページにそのまま埋め込めるリッチなコンテンツを生成できるのが、AIの強力な特徴です。
まず「物語の骨格」を人間が作る: いきなり「インフォグラフィックを作って」と依頼するのではなく、まず人間が 「何を、どの順番で伝えたいか」という構成案(物語の骨格) をしっかり作ることが重要です。その骨格さえあれば、AIが最適な肉付け(デザイン)をしてくれます。
スピードが求められる場面でこそ、AIは真価を発揮する: 今回のようなタイムリーな話題や、速報性が求められるコンテンツ制作において、企画から公開までの時間を劇的に短縮できるAIの能力は、個人だけでなく企業のメディア運営においても強力な武器となります。
今日からできるアクション あなたが伝えたいと思っている情報や、ブログ記事の要点を3〜5つの箇条書きにまとめてみましょう。そして、そのテキストをAIに渡し、「この内容を魅力的なインフォグラフィックにするためのHTMLコードを生成して」と依頼してみてください。AIが、あなたの言葉を「見るコンテンツ」に変えてくれます。
⑥ まとめと次回予告
今回は、AIを「デザイナー」として活用し、ブログを「見る」コンテンツへと昇華させる具体的なプロセスをご紹介しました。AIとの協業は、私たちの表現の選択肢を大きく広げ、コンテンツの品質と制作スピードを新たな次元へと引き上げてくれます。
さて、これまでの連載で、ブログ運営の様々な側面(自動化、分析、執筆、デザイン)におけるAI活用術を紹介してきました。しかし、これらの成功体験の根底には、実は共通する一つの「考え方」が存在します。
次回、いよいよこのシリーズの最終回。AI活用の成否を分ける、最も本質的なマインドセットについてお話しします。
(シリーズ第1部第1回はこちらから:https://axis.migalo.co.jp/column/k11)


