#author("2026-07-21T18:33:09+09:00;2026-07-21T18:22:27+09:00","default:inoue.ko","inoue.ko") #author("2026-07-21T18:37:58+09:00;2026-07-21T18:22:27+09:00","default:inoue.ko","inoue.ko") *AI Prompt AIとの対話をスムーズにする記法 ~ AIに画像やコードを生成させる際、指示（プロンプト）の構造化は生成の精度を劇的に向上させます。LLM（大規模言語模型）や画像生成AIのフロントエンドは、単なる文章よりも''属性（キー）と値（バリュー）''の関係性が明確なテキストを好みます（CSSの書き方と同じです）。 文章でダラダラと書くと、AIは「どの修飾語がどの名詞にかかっているのか」を見失う（トークンのアテンションが分散する）ことがありますが、一般に「構造化記法」と呼ばれる書き方で、指示内容を構造化することで以下のメリットが生まれます。 -要素の孤立化：指示同士の混同を防ぐ。 -重み付けの明確化：何が重要で何が補足的なのかをAIが理解しやすい。 -漏れの防止：人間側も指示の出し忘れに気づきやすい。 ~ 構造化記法には、YAML記法、__[[Markdown]]__記法、__[[JSON]]__記法などがありますが、以下、一般論に加えて、代表的な YAML記法と__[[Markdown]]__記法 、それぞれについて概説します。 ~ ~ **プロンプト構成の黄金律 どの記法を使うにしても、以下の4つの要素が整理されていると、AIは迷わず正確な出力を返します。 -''役割 ( Role )''：AIに何者になってほしいか 例：「あなたはWebアプリ開発のスペシャリストです。」 -''文脈・目的 ( Context )''：どのような場面で何のために使うのか -''明確な制約 ( Constraints )''：制作上の条件や、禁止事項の明記 -''出力例 ( Few-Shot )''：理想の成果物のイメージ 例：ワイヤーフレームや、理想の画像に近い参考テキスト ~ ~ **YAML記法（画像生成・複雑な設定に最適） YAMLは人間にとって最も読みやすく、かつAIにとってもネスト（階層構造）を理解しやすい記法です。特に画像生成AI（MidjourneyやStable Diffusionなど）への指示や、コード生成の前提条件定義で威力を発揮します。 ~ ***画像生成でのプロンプトの記載例 Target: Subject: A boy on a horse Action: Standing on a hill, looking at the sunrise Visual_Style: Art_Style: Japanese anime style Lighting: Volumetric golden hour light Composition: Medium shot, low angle Technical_Settings: Aspect_Ratio: 16:9 Quality: High, 8k resolution ~ ~ **__[[Markdown]]__記法（コード生成に最適） Wikipediaの編集、GitHubリポジトリの ReadMeファイル等でも利用される汎用的な書き方です。命令、前提条件、出力フォーマットの区別が視覚的に明確になる点がその強みで、各種プログラミングにおけるコード生成に向いています。 #（見出し）や -（箇条書き）、```（コードブロック）を使うMarkdownは、コード生成AI（ChatGPT, Claude, Geminiなど）に対して最も自然で強力に機能します。AI自体がMarkdownのパース（解析）に極めて最適化されているためです。 いわゆる「要件定義書」を作るイメージでMarkdownを使うと、正確なコードが生成されます。特に「# 制約事項」などとして、制約条件や禁止事項などを明記すると、手戻りが減ります。 ~ ***コード生成でのプロンプトの記載例 サイトマップとワイヤーフレームをAIに読み込ませて、フォトギャラリーサイトのプロトタイプ（HTML/CSS/JSコードやUIデザイン）を出力させるためのプロンプトサンプルです。 # 指示 添付したサイトマップとワイヤーフレームを元に、 レスポンシブ対応のフォトギャラリーサイトのプロトタイプを HTML / CSS / JavaScript のコードとして出力してください。 サイトは、シングルページ（index.htmlのみ）とします。 ## 1. サイトの概要 * サイト種別: フォトギャラリーサイト * 目的: ポートフォリオとしての作品展示および自己紹介 * デザインのテイスト: モダン、ダークモードベース ## 2. 入力素材（添付画像）の説明 1. サイトマップ: 全体構造とセクション間の遷移を示しています。 2. ワイヤーフレーム: ページのレイアウト構成を示しています。 ## 3. プロトタイプ作成の条件 * 言語・技術: HTML, CSS, JavaScript * レスポンシブ対応: PCとスマートフォンの２種類に対応 * ダミーデータ: 写真画像は無料素材リンクを差し込んでください。 * インタラクション: 画像クリックで拡大、Lightbox（CDN）機能の実装 ## 4. 求める出力ファイル 1. index.html: ページの構造 2. style.css: スタイリング・レスポンシブ設計 3. script.js: 動的な挙動・モーダル等 ~ ***実際に用いた添付ファイルと完成サイト 上記のプロンプトを Gemini に依頼しました（2026.07）。以下、実際に使った添付ファイルと、生成されたサイト（.zip）です。 |70|30|c |#image(SiteMap.png)|#image(WireFrame.png)| |SiteMap.png|WireFrame.png| -完成サイト：&ref(SampleSite.zip); --↑ ダウンロードして index.hrml をブラウザで開いてみてください。 --３種のコード（HTML, CSS, JavaScript）が出力されたので、それを３つのファイルとして保存しただけです。 --上記の指示で出力されたプロトタイプです。修正要求はしていません。 ~ ***AIにスケッチの意図を正確に読み取らせるには -スケッチ自体の視認性を高める 濃くはっきりと / 影や反射を避けて撮影 / 文字は丁寧なブロック体で -スケッチ内に「役割」と「動き」を明記する 矢印や波線で動きを表現する / レスポンシブのレイアウト変化を提示する -プロンプト（テキスト）でスケッチを補助する --何を描いたのか、何を重視してほしいか、などを記載します。 --「迷ったときはモダンなUI/UXのベストプラクティスを優先して」など --ビジュアルスタイルについては「黒ベースのミニマルなデザイン」など -段階的に指示を出す --第1ステップ（骨組み確認）: スケッチのレイアウト構造だけを再現したHTML/CSSを作成してください --第2ステップ（見た目・挙動の調整）: ヘッダーの余白を少し狭く、画像のホバーアニメーションを追加・・ --第3ステップ（修正・ブラッシュアップ）: 画面のスクリーンショットをAIに渡して「この部分が崩れているので修正して」などと指示を出す。 ~ ***重要な前提 AIは技術的な用語を定義どおりに解釈して、出力につなげます。したがって、''あなた自身が、その技術に関する正しい基礎知識を持っていないと、正しい出力は得られません。''「下請け」に指示を出せるだけの経験があれば、あなたの作業は大幅に効率が上がりますが、そうでない場合は、生成されるコードは混乱を極め、修正作業は泥沼化します。 実際のプログラミングの仕事では、小さなバグも許されません。あなたにそのバグを取るだけの知識があるか、あるいは、AIにその修正をさせるだけの指示能力があるか、自身の力量をわきまえて利用する必要があります。 便利なテクノロジーは、その利便性を上回るリスクを抱えています。AIの利用は、''あなたの理解が及ぶ範囲で、また、あなたが責任を取れる範囲で''・・というのが賢明です。 ~ ~ //**__[[JSON]]__記法（厳密なデータ連携・自動化に最適） //JSONは厳密な構文ルールを持つため、AIに「特定のデータ構造でコードを出力させたいとき」の指定に最適です。画像生成のプロンプトとしては冗長（記号が多くトークンを無駄に消費する）なため、あまり向きません。 ~