【生成AIハック】高精度な図解を低コスト・高スピードで作る方法

Webサイトやブログに載せる図解を、生成AIを使って低コストで作成したい。
でも、画像生成AIでいくらプロンプトを工夫しても、「なんか違う……」 となる。

よくある課題ではないでしょうか。

MidjourneyやDALL-E 3、Nano Banana 2などの画像生成AIは、グラフィック（絵）を描く能力は飛躍的に進化していますが、論理的な図解を作るのは苦手です。いかにもAI丸出しの質感、チープな色使いやあしらい、日本語の描写破綻など……。

そこで、以下のプロンプトを使います。

#前提条件： 
・タイトル：コンセプチュアルなビジュアル・イメージ（モック）生成プロンプト
・依頼者条件：抽象的なコンセプトやコアバリューを、洗練された視覚的イメージとして具体化したいディレクターやマーケター。
・制作者条件：世界最高峰のUI/UXデザイナー兼フロントエンドエンジニア。概念や手法をビジュアルに落とし込み、美しいコードで表現するエキスパート。
・目的と目標：ユーザーが指定する概念を、Tailwind CSSを用いた単一のHTMLファイルとして、スクリーンショット撮影が可能な洗練されたモノクロームのビジュアル・モックに変換すること。

#実行指示：
以下の【情報】の変数に基づき、【#デザインルール】に定義されたデザインシステムと要件を厳格に守り、ブラウザで即座にプレビュー・撮影が可能なビジュアル・イメージ（モック）のHTMLコードを作成してください。

【情報】
添付画像を参照。

#デザインルール：
・Tailwind CSSのPlay CDN（）を読み込むこと。
・フォントはGoogle Fontsから「Noto Sans JP」と「Inter」を読み込み、適切に使い分けること。
・カラースキーム：白（#ffffff）、黒（#222222）、グレー（#f5f5f5, #e5e5e5等の無彩色）のみを使用するモノクロームデザインを絶対遵守。他の色は一切使用禁止。
・レイアウト：中央にメインのビジュアルエリア（max-w-[800px]の正方形などを推奨）を配置し、余白（Padding/Margin）を大きめに取り、ゆとりのあるミニマルなレイアウトにする。
・ビジュアル表現：画像は使わず、HTML要素とTailwindのユーティリティクラス（border,
rounded-full,rotate等）、またはインラインSVGを用いた幾何学的な図形（円、放射状の線、ベクトルなど）によって概念を図式化すること。
・タイポグラフィ：文字の色に頼らず、フォントサイズ、ウェイト、字送り（tracking-widest等）、大文字化（uppercase）、透明度（opacity）を駆使して情報の階層と洗練された印象を作り出すこと。
・エフェクト：立体感は控えめにし、強い影は避ける（shadow-sm、あるいは限定的な強いドロップシャドウをアクセントとして使用）。
・【必須機能】スクリーンショットモードの実装：画面上部（ヘッダー）と下部（フッター）に.ui-element クラスを持つ装飾的なUI（タイトル、メタ情報、ボタン等）を配置する。ヘッダー内に「Screenshot Mode」ボタンを配置し、クリック時にscreenshot-mode
クラスを付与するJS関数を実装する。CSSで .screenshot-mode .ui-element { display: none !important; } を定義し、メインビジュアルのみが全画面に表示されるようにする。ESCキーを押下するとscreenshot-mode が解除されるイベントリスナーを記述する。モード移行時に「Press ESC to Return」と一時的に表示される通知バッジを実装する。
・トーン＆マナー：モダン、プロフェッショナル、洗練、無駄を省いたミニマル、コンセプチュアル。

#補足：
・指示の復唱はしないでください。
・自己評価やプロンプトへの感想（「承知いたしました」「洗練されたコードを作成しました」など）は一切記述しないでください。
・HTMLコードブロックのみを出力してください。

このプロンプトは、画像生成ではなくHTMLのモックを作らせて、それをスクショしよう、という発想で組まれています。元となる参考画像を添付してプロンプトを投げるだけで、HTML要素とTailwindのユーティリティクラス、SVGを組み合わせた高精度な図解が完成します。

実際にどんな図解が生成されるのか、以下のリンクからサンプルをダウンロードできます。

生成結果のサンプルはこちら

ここからは、上記のプロンプトを使った図解の生成フローの一例をご紹介します。

まずは、プロンプトに添付する元画像を用意します。

方法は何でも良いのですが、ここではNotebookLM※を使った方法を紹介します。NotebookLMの「Studio」 にある、スライド資料という項目。こちらを使います。

スライド資料の機能を実行すると、アップロードしたソースを元にしたスライド資料が生成されます。

構図は悪くありません。アイデアの構造は伝わります。しかし、AI丸出しです。洗練とは程遠い、「ちょっとダサい」 状態でしょう。日本語の描画（特に漢字）も所々怪しいです。このままWebサイトに掲載できるレベルではありません。

そこで、先ほどのプロンプトを使います。

NotebookLMのスライドのキャプチャ画像を添付して、生成AIに以下のプロンプトを送信してください。

#前提条件： 
・タイトル：コンセプチュアルなビジュアル・イメージ（モック）生成プロンプト
・依頼者条件：抽象的なコンセプトやコアバリューを、洗練された視覚的イメージとして具体化したいディレクターやマーケター。
・制作者条件：世界最高峰のUI/UXデザイナー兼フロントエンドエンジニア。概念や手法をビジュアルに落とし込み、美しいコードで表現するエキスパート。
・目的と目標：ユーザーが指定する概念を、Tailwind CSSを用いた単一のHTMLファイルとして、スクリーンショット撮影が可能な洗練されたモノクロームのビジュアル・モックに変換すること。

#実行指示：
以下の【情報】の変数に基づき、【#デザインルール】に定義されたデザインシステムと要件を厳格に守り、ブラウザで即座にプレビュー・撮影が可能なビジュアル・イメージ（モック）のHTMLコードを作成してください。

【情報】
添付画像を参照。

#デザインルール：
・Tailwind CSSのPlay CDN（）を読み込むこと。
・フォントはGoogle Fontsから「Noto Sans JP」と「Inter」を読み込み、適切に使い分けること。
・カラースキーム：白（#ffffff）、黒（#222222）、グレー（#f5f5f5, #e5e5e5等の無彩色）のみを使用するモノクロームデザインを絶対遵守。他の色は一切使用禁止。
・レイアウト：中央にメインのビジュアルエリア（max-w-[800px]の正方形などを推奨）を配置し、余白（Padding/Margin）を大きめに取り、ゆとりのあるミニマルなレイアウトにする。
・ビジュアル表現：画像は使わず、HTML要素とTailwindのユーティリティクラス（border,
rounded-full,rotate等）、またはインラインSVGを用いた幾何学的な図形（円、放射状の線、ベクトルなど）によって概念を図式化すること。
・タイポグラフィ：文字の色に頼らず、フォントサイズ、ウェイト、字送り（tracking-widest等）、大文字化（uppercase）、透明度（opacity）を駆使して情報の階層と洗練された印象を作り出すこと。
・エフェクト：立体感は控えめにし、強い影は避ける（shadow-sm、あるいは限定的な強いドロップシャドウをアクセントとして使用）。
・【必須機能】スクリーンショットモードの実装：画面上部（ヘッダー）と下部（フッター）に.ui-element クラスを持つ装飾的なUI（タイトル、メタ情報、ボタン等）を配置する。ヘッダー内に「Screenshot Mode」ボタンを配置し、クリック時にscreenshot-mode
クラスを付与するJS関数を実装する。CSSで .screenshot-mode .ui-element { display: none !important; } を定義し、メインビジュアルのみが全画面に表示されるようにする。ESCキーを押下するとscreenshot-mode が解除されるイベントリスナーを記述する。モード移行時に「Press ESC to Return」と一時的に表示される通知バッジを実装する。
・トーン＆マナー：モダン、プロフェッショナル、洗練、無駄を省いたミニマル、コンセプチュアル。

#補足：
・指示の復唱はしないでください。
・自己評価やプロンプトへの感想（「承知いたしました」「洗練されたコードを作成しました」など）は一切記述しないでください。
・HTMLコードブロックのみを出力してください。

使用する生成AIのモデルは何でも良いですが、ここでは、Google AI Studio × Gemini3.1 Proで実行してみます。

生成されたHTMLファイルを開きます。

調整が必要なら、チャットで追加指示を行います。問題なければ、右上の「SCREENSHOT MODE」 をクリックします。そうすると、余計なUIが消え、中央のビジュアルだけが表示されます。

F11でブラウザを全画面（フルスクリーン）にして、120～150％くらいに拡大表示したうえでスクショすると、高解像度の図解になります。