生成AIとうまく付き合うためのプロンプトエンジニアリング

TECH PLAY主催のLT大会第1回目でお話しました際の資料です。

Transcript

1. プロンプトエンジニアリング 生成AIとうまく付き合うための GMOメイクショップ株式会社　　大橋有理
2. 大橋 有理 Ohashi Yuri GMOメイクショップ株式会社 デザイナー 2004年にWeb業界に入り、デザインを軸足として ディレクションなども行う。前職がEC関連の会社 でデザインをしていたこともあり、2019年から GMOメイクショップ⁩ にて社内のクリエイティブ全 般に携わる。 https://x.com/YuriOhashi_des
3. 本日のテーマ プロンプトエンジニアリング
4. 結論 とにかく詳しく書く
5. プロンプトとは・・・ AIへの指示・命令
6. なぜプロンプトを エンジニアリング（設計）するのか？
7. なぜプロンプトをエンジニアリング（設計）するのか？ 毎回ブレのない 回答を得るため
8. プロンプトエンジニアリングのメリット AIが明確な指示とコンテキストが得られる より正確で関連性が高く、有益な出力が得られる 期待する結果に沿った一貫性のある予測可能なレスポンスを確保できる ※https://cloud.google.com/discover/what-is-prompt-engineering?hl=jaより一部抜粋
9. 検証 画像生成
10. ポイント シーンを伝える
11. 例えば 「2人のエンジニアがコーディングしている様子」
12. 生成結果 「2人のエンジニアが 　コーディングしている様子」 ※ChatGPT 5で生成
13. 詳細なシーンを追加する 20代から30代のエンジニア2名（日本人の男女） モダンなオフィス環境（渋谷を想起させるような） カジュアルな服装（Tシャツ、パーカーなど） 一人がデスクでパソコンに向かってコーディングしていて、その傍らにもう一人が立って画面を指さしている様子 集中した表情、または協力して画面を見ている様子 デスク上には複数のモニター、キーボード、マウス、飲み物 背景には他のエンジニア、またはオフィスの内装 クリエイティブで活気のある雰囲気 リアルな写真のようなスタイル 高解像度、細部まで鮮明に
14. 生成結果 20代から30代のエンジニア2名（日本人の男女） モダンなオフィス環境（渋谷を想起させるような） カジュアルな服装（Tシャツ、パーカーなど） 一人がデスクでパソコンに向かってコーディングして いて、その傍らにもう一人が立って画面を指さしてい る様子 集中した表情、または協力して画面を見ている様子 デスク上には複数のモニター、キーボード、マウス、 飲み物 背景には他のエンジニア、またはオフィスの内装 クリエイティブで活気のある雰囲気 リアルな写真のようなスタイル 高解像度、細部まで鮮明に ※ChatGPT 5で生成
15. 比較 ※詳細プロンプト ※単純プロンプト
16. Geminiの場合 「2人のエンジニアが 　コーディングしている様子」 ※Geminiで生成
17. より自然に 20代から30代のエンジニア2名（日本人の男女） モダンなオフィス環境（渋谷を想起させるような） カジュアルな服装（Tシャツ、パーカーなど） 一人がデスクでパソコンに向かってコーディングして いて、その傍らにもう一人が立って画面を指さしてい る様子 集中した表情、または協力して画面を見ている様子 デスク上には複数のモニター、キーボード、マウス、 飲み物 背景には他のエンジニア、またはオフィスの内装 クリエイティブで活気のある雰囲気 リアルな写真のようなスタイル 高解像度、細部まで鮮明に ※Geminiで生成
18. 他の書き方
19. YAML形式 illustration_prompt: reference_styles: - name: "Techny" url: "https://icons8.jp/illustrations/style--techny" focus: "アイソレートされたオブジェクト中心" - name: "Indigo" url: "https://icons8.jp/illustrations/style--indigo" focus: "人物や状況描写が中心" style_characteristics: - "シンプルで親しみやすく、現代的なフラットスタイル。" - "アウトラインはしっかり目だが、線は細めでコントラストがある。" - "複雑なグラデーションや質感は使わず、べた塗りまたは軽い陰影のみ。" - "視点は正面かやや俯瞰、奥行きは浅め。" - "背景は白または透過を推奨。" color_palette: primary_colors: - 明るい青（ブランドのメインカラー） - 中間的な青 - 淡い水色 accent_colors: - 明るいオレンジ（注目ポイント用） logo: image_path: "logo-makeshop.png" position: x: 40 y: 40 size: width: 180 height: auto
20. 英語にする Isometric illustration of a [シーン詳細], [登場人数] [人物スタイル] figures in [服装] [配置/行動] a [主要オブジェクト] with [付属オブジェクトリスト]. The style is clean semi-flat vector style, viewed from a refined 3-quarter isometric view with gentle corner rounding. Background: [背景]. Color Scheme: A [配色形容詞] scheme using [基本色] with accents of [アクセントカラー]. Atmosphere: [雰囲気] with [構図]. Negative Prompts: [除外要素リスト：no ---, no ---, no ---].
21. とはいえ・・・ 長文のプロンプトを 考えるのは面倒・・
22. バイブコーディングで専用ツールを作る GeminiのGemを活用
23. Gemに登録しておくことで時間短縮できる あらかじめプロンプトを読み込 ませておき、チャットで指示す るだけ。
24. Gem_その１ Vibe Draw アイソメトリックなイラストを生成でき るツール。シーンとアクセントカラーを 指示するだけでクオリティーが統一され たイラストを生成可能。非デザイナーに 重宝されている。
25. Gem_その２ Vibe Prompt 短文、もしくは数個のキーワードを入力 すれば、詳細なプロンプトとそれを反映 した画像を生成してくれる。
26. プロンプトエンジニアリングの種類 ゼロショット 　　直接聞くパターン（アイデア出し、調査、要約など） ワンショット、少数ショット、マルチショット 　　例を出して法則性を与える（赤はリンゴ、緑はスイカ、黄色は？） チェーン オブ ソート 　　順を追って質問・回答を繰り返して思考してもらう 　　（あなたは••担当です、まずは～～、次に～～、それに対して～～）
27. プロンプトエンジニアリングから コンテキストエンジニアリングへ 複数の情報を与える 　　各種ドキュメントなど外部情報を 　　　参照できるようにしてあげる（RAGとも言えそう） 参照データが新鮮で回答の精度が高まる
28. まとめ 回答の精度を良くしていきましょう 丁寧に説明してあげる（役割、シーン、目的など） 書き方や聞き方を変えてみる（YAML、英語、段階的な推論など） 色々な情報にアクセスできるようにしてあげる（コンテキスト）
29. ご視聴ありがとうございました！