【動画あり・無課金歓喜】Gemini CLIで図解・プレゼンを無料AIコーディング完全ガイド
みなさん、こんにちは。
プレゼン資料作りで夜遅くまで格闘した経験、きっとあなたにもありますよね。
「デザインセンスがない」
「有料ツールは予算が厳しい」
「時間ばかりかかって思うような仕上がりにならない」
...そんな悩みを抱えながらも、仕事や学習で質の高い資料が求められる現実。
でも、もう安心してください。
実は今、完全無料でプロ顔負けのインフォグラフィックやダッシュボード形式のプレゼン資料が作れる、まったく新しい方法があるんです。それがGemini CLIを活用したAIコーディング術。
この記事では、
「無課金でもここまでできるの？」
と驚くような実践テクニックを、初心者の方でも迷わず実行できるよう、段階的に丁寧にお伝えします。特別なスキルも高額なソフトも必要ありません。必要なのは、ほんの少しの好奇心だけ。
さあ、一緒に新時代の資料作成術を身につけていきましょう。
【関連動画】
1. はじめに：無課金でプロ級資料が作れる時代
なぜGemini CLIなのか？
AI時代の資料作成において、選択肢は大きく2つあります。Claude Codeのような有料の高性能ツールか、Gemini CLIのような無料で使えるツールか。
もちろん、課金できるならClaude Codeは素晴らしい選択肢です。しかし「まずは無料で試したい」「継続的なコストを抑えたい」という方には、Gemini CLIが圧倒的におすすめ。なぜなら、適切な使い方を覚えれば、有料ツールに匹敵するクオリティの成果物を生み出せるからです。
本記事で学べること
この記事を読み終える頃には、以下のスキルが身についています：
SVGとHTMLを使い分けた効率的な資料作成
プロンプト継承による作業の自動化
トラブル発生時の的確な対処法
Gemini CLIの性能を最大限引き出す裏技
2. 基礎知識：2つの出力形式を理解する
SVG形式とHTML形式の特徴
Gemini CLIで資料を作る際、まず理解すべきは出力形式の選択です。ここを間違えると、後々の修正作業が大変になります。
SVG形式の特徴
適用場面：シンプルな図解、ワンセクションの説明
メリット：軽量、拡大縮小しても美しい、後編集が容易
デメリット：文字がはみ出しやすい、複雑な内容だと崩れる
HTML形式の特徴
適用場面：プレゼン資料、ダッシュボード、長文コンテンツ
メリット：レイアウトが安定、インタラクティブ要素が追加可能
デメリット：複雑な図形表現には限界がある
使い分けの黄金法則
実践では、この処理方法の違いを理解して選択しましょう：
SVG形式：長い文章でも使えるが、セクションごとに分けて作成する必要がある
HTML形式：長い文章を一気に全部投げ込んで処理できる
つまり、同じ長い文章でも：
SVGなら「第1章」「第2章」と分割して複数回に分けて作成
HTMLなら全章を一度に投入して一気に完成
この処理方法の違いを理解するだけで、作業効率が劇的に向上します。
3. 実践編①：SVG図解の作成手順
基本的な作成プロセス
まずは実際にSVG図解を作ってみましょう。例として、ChatGPTの概要図を作成します。
ステップ1：テキストファイルの準備
ChatGPTの概要
- 概要：OpenAIが開発した会話型AI
- 料金：基本無料、Plus版は月額20ドル
- 特徴：自然な対話、創作支援、コード生成
- 開発者視点：API連携可能、カスタマイズ性高い
ステップ2：プロンプトの投入
以下を参照して、SVG形式で図を作成してください：
[先ほどのテキスト内容を貼り付け]
ステップ3：段階的な改良 最初の出力がシンプルすぎる場合は、以下のように追加指示を出します：
もっとリッチに、ハイテク風にしてください
日本語で表示してください
アニメーションを追加してください
よくあるトラブルと対処法
文字のはみ出し問題 SVGで最も頻繁に起こるのが、文字が枠からはみ出す現象です。この場合：
文字が枠からはみ出さないよう、レイアウトを調整してください
枠と枠が重ならないよう配置してください
レイアウト崩れの修正 複雑な内容を詰め込みすぎた場合は、分割アプローチを取ります：
この内容を3つのセクションに分けて、それぞれ別のSVGで作成してください
4. 実践編②：HTMLダッシュボードの作成
ダッシュボード形式のメリット
HTML形式の真価は、インフォグラフィック風のダッシュボード作成にあります。これにより：
1ページで完結する情報整理
ホバーエフェクトなどのインタラクティブ要素
ダークモード対応のハイテクなデザイン
スクロール形式による自然な情報の流れ
効果的なプロンプト例
以下は、高品質なダッシュボードを生成するためのプロンプトテンプレートです：
以下の内容でインフォグラフィックなダッシュボード形式のHTMLを作成してください：
【形式】
- 1ページのスクロール形式
- 各情報項目を独立したカードとして表示
【デザイン】
- ダークモードを基調としたサイバーでハイテクなデザイン
- 発光、グローエフェクト、グラデーション、グリッド背景を適用
【内容】
[ここに作成したい内容を記載]
【言語】
- すべて日本語で記述
スライド形式からスクロール形式への変更
最初にスライド形式（ページめくり型）で生成された場合、以下で修正できます：
スライド形式をやめて、スクロール形式に変更してください
ナビゲーションボタンを削除し、縦に並べて表示してください
5. 効率化テクニック：プロンプト継承術
基盤プロンプトの作成方法
同じスタイルの資料を複数作る場合、毎回同じ指示を入力するのは非効率です。そこで「基盤プロンプト」を作成します。
基盤プロンプト例（300文字程度）
以下の要件でHTMLダッシュボードを作成してください：
【形式】1ページのスクロール形式、各情報項目を独立したカードとして表示
【デザイン】ダークモード基調のサイバーでハイテクなインフォグラフィック、発光・グロー・エフェクト・グラデーション・グリッド背景を適用
【掲載項目】概要、特徴、料金体系、技術仕様、ワークフロー、比較分析
【言語】全て日本語で記述
対象内容：[ここに具体的な内容を記載]
参考資料を活用した複製テクニック
既存の優秀な資料がある場合、それを参考にして新しい資料を作ることができます：
添付したHTMLファイルを参考にして、今度は[新しいテーマ]版を作成してください
雰囲気は同じで、内容を[新しいテーマ]に関する情報に変更してください
この方法により、一度完成度の高いテンプレートができれば、それを元に無限に応用展開できます。
6. トラブルシューティング：スクリーンショット修正法
部分修正の実践手順
完成した資料に部分的な問題がある場合、スクリーンショットを使った修正が効果的です。
ステップ1：問題箇所のスクリーンショット撮影 レイアウト崩れや文字の重なりなど、具体的な問題部分を画面キャプチャします。
ステップ2：画像添付での修正依頼
[スクリーンショットを添付]
この画像の通り、文字が重なっています。部分修正してください
ステップ3：効果的な指示の出し方
「部分修正して」
「文字が重なっている」
「レイアウトを調整して」
などの具体的な指示により、ピンポイントで問題を解決できます。
修正成功率を上げるコツ
問題箇所を赤枠で囲む
「この部分の」「ここが」など明確な指示語を使う
1回の修正で1つの問題に集中する
7. 【裏技】Gemini CLIを最強のまま使い続ける方法
Flash版への自動切り替え問題
Gemini CLIを使っていると、知らないうちに高性能な「Pro」から低性能な「Flash」に切り替わってしまうことがあります。以下のような感じです。
これが起こると：
生成能力が著しく低下
エラーが頻発
期待した品質の成果物が作れない
スレッド新規作成による解決法
この問題の解決策はスレッドの新規作成です：
現在のスレッドを終了
新しいスレッドを開始
「Pro」表示を確認してから作業再開
継承データの効率的な保存・移行
スレッドを変更すると、これまでの作業履歴が失われます。これを防ぐ方法：
方法1：MDファイル活用法
これまでのやり取りをまとめて、基盤プロンプトを作成してMDファイルで保存してください
方法2：重要部分の手動保存
完成した成果物をローカル保存
効果的だったプロンプトをメモ
設定内容をテキストファイル化
方法3：継承用プロンプトの作成
新しいスレッドで以下のMDファイルを参照して、同じスタイルで作業を継続してください
[MDファイルを添付]
この裏技により、Gemini CLIの性能低下を回避しながら、継続的に高品質な成果物を作り続けられます。
8. まとめ：無課金AI活用の新境地
実践で得られる3つの価値
この記事でお伝えしたテクニックを実践することで、以下の価値を手に入れられます：
コスト削減効果 月額料金を払わずに、プロ級の資料作成環境を構築。年間で数万円から数十万円の節約になる場合も。
作業効率の向上 テンプレート化とプロンプト継承により、従来の半分以下の時間で高品質な資料を量産可能。
創作の自由度拡大 予算を気にせずに試行錯誤できるため、より創造的で実験的なアプローチが可能に。
次のステップへの展望
今回マスターしたスキルは、単なる資料作成にとどまりません。AI共創の本質である「人間の創造性とAIの処理能力の融合」を体感できたはずです。
この経験を活かして、さらに高度な応用にチャレンジしてみてください：
動的なWebアプリケーションの作成
データ可視化ダッシュボードの構築
インタラクティブな学習教材の開発
無課金でも、工夫次第でここまでできる。それがAI時代の新しい可能性です。
それでは、また！
【プロフィール】
ワンダー・佐藤源彦（さとう もとひこ）
MBBS & AI共創イノベーション主催。
医療系の研究所、心理学の研究所の勤務を経て独立し、現在はAIと心身に関する研究をしている。
主著『東洋医学と潜在運動系』、2年間専門誌に連載、論文執筆などの執筆業を行いつつAI共創ライティングを開発中。
心理学・カウンセリング・コーチングをAIに技術転用し、AI共創学を開発している。
AIスクール・AI企業研修・AIアプリ開発などを行う。
✅AI共創イノベーションの本
✅note記事（Youtube連動記事あり）
https://note.com/mbbs
✅AI共創イノベーション
https://mbbs-ai.jimdofree.com/
✅Facebook
https://www.facebook.com/motohiko1977
✅佐藤源彦総合リンク
https://linktr.ee/motohiko.sato
【AI共創イノベーションおすすめ動画】
https://www.youtube.com/watch?v=IXbKlwHUdbg&list=PLTcSHWqKTOojc8R-brID5q06JrmtiWRTl
いいなと思ったら応援しよう！
チップをいただけると、とても励みになります✨
いただいた分はすべて研究活動や記事制作に使わせていただきます🍀