AI_Prompt をテンプレートにして作成

開始行:
*AI Prompt AIとの対話をスムーズにする記法 ~ AIに画像やコードを生成させる際、指示（プロンプト）の構造... 文章でダラダラと書くと、AIは「どの修飾語がどの名詞にかか... -要素の孤立化：指示同士の混同を防ぐ。 -重み付けの明確化：何が重要で何が補足的なのかをAIが理解し... -漏れの防止：人間側も指示の出し忘れに気づきやすい。 ~ 構造化記法には、YAML記法、__[[Markdown]]__記法、__[[JSON]... ~ ~ **プロンプト構成の黄金律 どの記法を使うにしても、以下の4つの要素が整理されていると... -''役割 ( Role )''：AIに何者になってほしいか 例：「あなたはWebアプリ開発のスペシャリストです。」 -''文脈・目的 ( Context )''：どのような場面で何のために使... -''明確な制約 ( Constraints )''：制作上の条件や、禁止事項... -''出力例 ( Few-Shot )''：理想の成果物のイメージ 例：ワイヤーフレームや、理想の画像に近い参考テキスト ~ ~ **YAML記法（画像生成・複雑な設定に最適） YAMLは人間にとって最も読みやすく、かつAIにとってもネスト... ~ ***画像生成でのプロンプトの記載例 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ファイル等でも... #（見出し）や -（箇条書き）、```（コードブロック）を使うM... いわゆる「要件定義書」を作るイメージでMarkdownを使うと、... ~ ***コード生成でのプロンプトの記載例 サイトマップとワイヤーフレームをAIに読み込ませて、フォト... # 指示 添付したサイトマップとワイヤーフレームを元に、 レスポンシブ対応のフォトギャラリーサイトのプロトタイプを 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）。以下... |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は技術的な用語を定義どおりに解釈して、出力につなげます... 実際のプログラミングの仕事では、小さなバグも許されません... 便利なテクノロジーは、その利便性を上回るリスクを抱えてい... ~ ~ //**__[[JSON]]__記法（厳密なデータ連携・自動化に最適） //JSONは厳密な構文ルールを持つため、AIに「特定のデータ構... ~

終了行:
*AI Prompt AIとの対話をスムーズにする記法 ~ AIに画像やコードを生成させる際、指示（プロンプト）の構造... 文章でダラダラと書くと、AIは「どの修飾語がどの名詞にかか... -要素の孤立化：指示同士の混同を防ぐ。 -重み付けの明確化：何が重要で何が補足的なのかをAIが理解し... -漏れの防止：人間側も指示の出し忘れに気づきやすい。 ~ 構造化記法には、YAML記法、__[[Markdown]]__記法、__[[JSON]... ~ ~ **プロンプト構成の黄金律 どの記法を使うにしても、以下の4つの要素が整理されていると... -''役割 ( Role )''：AIに何者になってほしいか 例：「あなたはWebアプリ開発のスペシャリストです。」 -''文脈・目的 ( Context )''：どのような場面で何のために使... -''明確な制約 ( Constraints )''：制作上の条件や、禁止事項... -''出力例 ( Few-Shot )''：理想の成果物のイメージ 例：ワイヤーフレームや、理想の画像に近い参考テキスト ~ ~ **YAML記法（画像生成・複雑な設定に最適） YAMLは人間にとって最も読みやすく、かつAIにとってもネスト... ~ ***画像生成でのプロンプトの記載例 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ファイル等でも... #（見出し）や -（箇条書き）、```（コードブロック）を使うM... いわゆる「要件定義書」を作るイメージでMarkdownを使うと、... ~ ***コード生成でのプロンプトの記載例 サイトマップとワイヤーフレームをAIに読み込ませて、フォト... # 指示 添付したサイトマップとワイヤーフレームを元に、 レスポンシブ対応のフォトギャラリーサイトのプロトタイプを 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）。以下... |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は技術的な用語を定義どおりに解釈して、出力につなげます... 実際のプログラミングの仕事では、小さなバグも許されません... 便利なテクノロジーは、その利便性を上回るリスクを抱えてい... ~ ~ //**__[[JSON]]__記法（厳密なデータ連携・自動化に最適） //JSONは厳密な構文ルールを持つため、AIに「特定のデータ構... ~

ページ名: