• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• AI_Prompt へ行く。
  • 1 (2026-04-20 (月) 12:11:33)
  • 2 (2026-04-20 (月) 12:11:33)
  • 3 (2026-07-28 (火) 13:58:44)

---

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）です。

• 完成サイト：SampleSite.zip　
  • ↑ ダウンロードして index.hrml をブラウザで開いてみてください。
  • ３種のコード（HTML, CSS, JavaScript）が出力されたので、それを３つのファイルとして保存しただけです。
  • 上記の指示で出力されたプロトタイプです。修正要求はしていません。
    
    

AIにスケッチの意図を正確に読み取らせるには

• スケッチ自体の視認性を高める
  濃くはっきりと / 影や反射を避けて撮影 / 文字は丁寧なブロック体で

• スケッチ内に「役割」と「動き」を明記する
  矢印や波線で動きを表現する / レスポンシブのレイアウト変化を提示する

• プロンプト（テキスト）でスケッチを補助する
  • 何を描いたのか、何を重視してほしいか、などを記載します。
  • 「迷ったときはモダンなUI/UXのベストプラクティスを優先して」など
  • ビジュアルスタイルについては「黒ベースのミニマルなデザイン」など
• 段階的に指示を出す
  • 第1ステップ（骨組み確認）:
    スケッチのレイアウト構造だけを再現したHTML/CSSを作成してください
  • 第2ステップ（見た目・挙動の調整）:
    ヘッダーの余白を少し狭く、画像のホバーアニメーションを追加・・
  • 第3ステップ（修正・ブラッシュアップ）:
    画面のスクリーンショットをAIに渡して「この部分が崩れているので修正して」などと指示を出す。
    
    

重要な前提

AIは技術的な用語を定義どおりに解釈して、出力につなげます。したがって、あなた自身が、その技術に関する正しい基礎知識を持っていないと、正しい出力は得られません。「下請け」に指示を出せるだけの経験があれば、あなたの作業は大幅に効率が上がりますが、そうでない場合は、生成されるコードは混乱を極め、修正作業は泥沼化します。

実際のプログラミングの仕事では、小さなバグも許されません。あなたにそのバグを取るだけの知識があるか、あるいは、AIにその修正をさせるだけの指示能力があるか、自身の力量をわきまえて利用する必要があります。

便利なテクノロジーは、その利便性を上回るリスクを抱えています。AIの利用は、あなたの理解が及ぶ範囲で、また、あなたが責任を取れる範囲で・・というのが賢明です。