みなさん、こんにちは！テツメモです。
「YAML（ヤムル）って何だろう？」
「プログラミングの専門用語？難しそう...」
「JSON（ジェイソン）とかXML（エックスエムエル）とは何が違うの？」
私のXのポストではYAML形式のプロンプトを紹介するため、こんな疑問を持ったことがあると思います。私も1年前はそうでした。
実は、YAMLは私たちの日常生活にとても近いところで使われている、とても親しみやすいデータ形式なんです。
そして、このAIが理解しやすく、人間も他の言語より理解できる「YAML」形式での指示を身につけることで、AIを今までよりも自由自在に動かすことができます。
これはまるで自分がAIたちを動かすマネジャーとなり、様々なスキルを持つAIを動かす状況と似ています。
つまり、今回の記事はAIと付き合っていくための本質的な内容となっています。
今回は、私のようにビジネスサイドの方でも理解できるように、YAMLの基本から応用まで、具体例を使って分かりやすく解説していきます。この記事を読むことで、AIプロンプトの設計や、様々な設定ファイルの作成が簡単にできるようになりますよ！
💡 この記事を読むことで得られる3つのメリット
- YAMLの基本を理解し、複雑な情報を整理して表現できるようになる
- AIへの指示書をYAMLで書けるようになる（※AIにYAMLを書かせる）
- Claudeのプロジェクト機能とYAMLを連携させた効率的なワークフローを構築できる
いつも通り気合が入りすぎて長文になってしまいますが、YAMLの可能性を深掘りしまくっています。一度に読み切るのは大変だと思いますので、ブックマークしてぜひ最後までお楽しみください♪
🔗参考）YAML形式のプロンプトで実行した事例6選
📝どう考えても「Claude 3.7 Sonnet」×「Web検索」はメチャ強い！
テツメモ｜AI図解×検証｜Newsletter @tetumemo
✅例
①、リサーチ用プロンプトを実行
②、①のプロンプトでWebリサーチ
③、②の結果を元に1万文字のnote記事執筆
④、③の結果を元にサムネ用プロンプト生成
これ、Claudeにyamlで指示して余裕で一撃出力する
本日記事で解説♪ https://t.co/Ng1vTFTkf9pic.twitter.com/kSVDbXlrO1— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) April 7, 2025
📝ChatGPTで「シニア向けオンラインヘルスケアサービスの概念図」を作成してもらったけど良い感じ♪
テツメモ｜AI図解×検証｜Newsletter @tetumemo
誰でも概念図作成ができるプロンプトはリプ欄へ ↓ https://t.co/LagxgOT2Fipic.twitter.com/HniUM9g2Q4— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 31, 2025
📝ChatGPTで「ピクトグラム×概念図」も良い！
テツメモ｜AI図解×検証｜Newsletter @tetumemo
文字の修正も”楽”できそう
「オンライン英会話サービスの概念図」を作成
プロンプトはリプ欄へ ↓ https://t.co/LagxgOT2Fipic.twitter.com/JgadiK0k9s— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 31, 2025
📝どうしよう、ChatGPTで再現性の高いLINEスタンプ作りまくれちゃうよ
テツメモ｜AI図解×検証｜Newsletter @tetumemo
- すぐるさんの画像を参考に構造分解
- 好みのキャラを設定して画像生成
セリフもアクションも再現性高いスタンプ完成！
プロンプトはリプ欄へ↓ https://t.co/G79Ea0Ajj9pic.twitter.com/eW2yyAooFu— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 28, 2025
📝これ、ChatGPTの画像生成で一撃出力…感動！
テツメモ｜AI図解×検証｜Newsletter @tetumemo
詳細プロンプトはリプ欄へ
応用してお楽しみください♪ https://t.co/j9gULtLxhYpic.twitter.com/JgJhkjTB1O— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 31, 2025
📝これは確かにエグい…
テツメモ｜AI図解×検証｜Newsletter @tetumemo
ChatGPTに写真を投げたら一撃でオシャレなインスタ映えする「ファッションボード」が完成！
カスタマイズしやすいプロンプトはリプ欄へ ↓
お楽しみください♪ https://t.co/qY8Def4MuGpic.twitter.com/jQw1NpYeYV— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) April 1, 2025
YAML形式を活用して、ChatGPTでLINEスタンプを作る方法は、こちらの記事で解説 ↓
| 【ビジネス活用！】ChatGPT 4o画像生成の衝撃〜プロンプトだけで高精度画像が爆速で作れる時代へ |
|
||
|
YAMLとは何か？その歴史と目的
YAML（ヤムル）は「YAML Ain't Markup Language」の略で、「YAMLはマークアップ言語ではない」という再帰的な意味を持っています（最初は"Yet Another Markup Language"だったんですよ）。2001年に誕生したこのデータ形式は、「人間が読みやすく、書きやすいこと」を最優先に設計されました。
つまり、YAMLは「人間とコンピュータの両方が理解しやすいデータ形式」なんです。例えるなら、人間とコンピュータの間の「通訳」のような存在と言えるでしょう。
天ぷらそばのレシピを例に考えてみましょう。普通のレシピ本では、材料リストと手順が分かりやすく整理されていますよね。YAMLも同じように、データを整理して表現するための形式なのです。
YAMLとJSON・XMLの違い
データを表現する形式には、YAMLの他にもJSONやXMLなどがあります。これらの違いを簡単に説明しましょう。
天ぷらそばのレシピを例に、それぞれの形式で書くとこんな感じになります：
YAML形式：
レシピ:
名前: 天ぷらそば
材料:
- そば: 2人前
- めんつゆ: 100ml
- 水: 400ml
- 海老天ぷら: 2尾
- 長ねぎ: 1/4本
JSON形式：
{
"レシピ": {
"名前": "天ぷらそば",
"材料": [
{"そば": "2人前"},
{"めんつゆ": "100ml"},
{"水": "400ml"},
{"海老天ぷら": "2尾"},
{"長ねぎ": "1/4本"}
]
}
}
XML形式：
<レシピ>
<名前>天ぷらそば</名前>
<材料>
<項目>
<名称>そば</名称>
<量>2人前</量>
</項目>
<項目>
<名称>めんつゆ</名称>
<量>100ml</量>
</項目>
<!-- 以下省略 -->
</材料>
</レシピ>
見比べてみると、YAMLが一番シンプルで読みやすいことがわかりますね！
特に注目したいのは以下の点です：
- YAMLは余計な記号が少ない：JSONの
{ }や の多用、XMLの< >タグなどがなく、すっきりしています - インデント（字下げ）で階層を表現：視覚的に構造がわかりやすい
- コメントが書ける：
# これはコメントですのように説明を加えられます（JSONにはこの機能がありません）
YAMLが選ばれる理由：人間が読みやすく、書きやすい特性
なぜYAMLが多くの場面で選ばれるのでしょうか？その理由は以下の通りです：
- 視覚的に構造が分かりやすい：インデントによって階層が一目で分かります
- タイプ量が少なく済む：JSONやXMLより記号が少なく、効率的です
- コメントが書ける：設定の意図や説明を残せるので、後から見返すときに便利です
- 複雑なデータ構造も表現できる：入れ子構造や参照機能など、高度な表現も可能です
YAMLの活用シーン：設定ファイル、AI指示書、データ交換など
YAMLは様々な場面で活用されています：
- 設定ファイル：Docker、Kubernetes、GitHubActionsなどのツールの設定
- AI指示書：画像生成AIやテキスト生成AIへの詳細な指示
- データ交換：システム間でのデータのやり取り
- ドキュメント：構造化された文書の作成
特に最近注目されているのが「AIプロンプトエンジニアリング」におけるYAMLの活用です。AIに複雑な指示を出す際、YAMLを使うことで指示を構造化し、再利用しやすくなります。
私たちのサンプルである「天ぷらそばレシピ」も、実は画像生成AIへの指示書なんです。この後のセクションで詳しく解説していきますね！
ワンポイントTip：YAMLは「ヤムル」と読みます。また、拡張子は「.yaml」または「.yml」のどちらかが使われます。どちらも同じYAMLファイルを表しているので混乱しないでくださいね！初めてYAMLを書く時は、オンラインのYAMLバリデーター（検証ツール）を使うと便利です。インデントのミスなどを簡単に見つけられますよ。
🧩 YAML構文の基礎
さて、YAMLとは何かを理解したところで、実際にYAMLがどのように書かれているのか、その基本的な構文について見ていきましょう。天ぷらそばレシピのYAMLを例に、一つずつ解説していきます。
💡YAMLは自分で書かなくてOK！AIに書かせることを目的としています。
ただし出力されたYAMLの意味を人間がわからなければ”修正依頼”も苦労しますので、YAMLの基本構造を理解していきましょう！
インデントによる階層構造の表現
YAMLの最大の特徴は、インデント（字下げ）を使って階層構造を表現することです。これはちょうど、本のアウトラインや目次のような感じですね。
天ぷらそばレシピYAMLの一部を見てみましょう：
# 1. 画像全体の定義
image_description:
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示すミニマルスタイルのレシピインフォグラフィック。
白い背景に、俯瞰視点で撮影された材料写真（ラベル付き）、アイコンと点線で繋がれた調理手順、最下部に完成品の写真を配置する。
全体的にクリーンで分かりやすいデザイン。
style:
- 写真 (材料、完成品 - 俯瞰視点)
- シンプルな線画アイコン (調理手順)
- ミニマルスタイル (Minimal style)
- インフォグラフィック (Infographic)
ここでは、image_description がトップレベル、その下に overall_prompt と style があり、さらに style の下に4つの項目がリストとして含まれています。この階層関係がインデントによって視覚的に表現されているのがわかりますね。
重要なポイント：
- インデントには通常、スペース2つか4つを使います（タブは使わないのが一般的）
- 同じレベルの項目は同じだけインデントする必要があります
- インデントはYAMLの構造を決める重要な要素なので、正確に揃えることが大切です
キーと値のペア（key: value）の書き方
YAMLでは、データはキーと値のペアで表現されます。これは辞書のような構造です。
background:
color: "#FFFFFF" # 白背景
上の例では、background がキー、その値が別のキーと値のペア（color: "#FFFFFF"）を含むマップになっています。つまり、入れ子構造になっているわけです。
書き方のポイント：
- キーと値はコロン（:）で区切ります
- コロンの後には、通常スペースを入れます（
key: value） - 値には文字列、数値、真偽値、リスト、別のマップなど様々なデータ型を指定できます
リスト（配列）の表現方法
YAMLでリスト（配列）を表現するには、ハイフン（-）を使います。天ぷらそばレシピYAMLの例を見てみましょう：
style:
- 写真 (材料、完成品 - 俯瞰視点)
- シンプルな線画アイコン (調理手順)
- ミニマルスタイル (Minimal style)
- インフォグラフィック (Infographic)
ここでは、style の下に4つの項目がリストとして記述されています。
より複雑な例も見てみましょう：
items:
- type: image_with_label
id: soba_noodles
image_description: 乾麺のそば 2人前分 (約200g) の束、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["そば (乾麺)", "2人前 (200g)"]
この例では、リストの各項目自体がキーと値のペアを含んでいます。items の下にリスト項目があり、その各項目にはさらに複数のキーと値のペアが含まれているのです。
リスト表現のポイント：
- リスト項目はハイフン（-）で始まります
- ハイフンの後にはスペースを入れます
- リスト項目はすべて同じレベルのインデントである必要があります
- リスト項目自体が複雑なデータ（マップや別のリスト）を含むこともできます
文字列、数値、真偽値などの基本データ型
YAMLでは様々なデータ型を表現できます：
文字列（String）
title: "天ぷらそば" # クォートは省略可能
description: 美味しい天ぷらそばのレシピです
数値（Number）
servings: 2
cooking_time: 15 # 単位は分
真偽値（Boolean）
is_vegetarian: false
can_be_frozen: true
配列/リスト（内部にも様々な型を含められる）
ingredients:
- そば
- めんつゆ
- 水
- 海老天ぷら
- 長ねぎ
# または一行で書くこともできます
ingredients: [そば, めんつゆ, 水, 海老天ぷら, 長ねぎ]
天ぷらそばレシピYAMLの中では、例えばこのような使われ方をしています：
label_text: ["そば (乾麺)", "2人前 (200g)"] # 配列
position: 上部中央 (Top Center) # 文字列
aspect_ratio: 縦長 (例: 9:16 or A4 ratio) # 文字列
コメントの書き方と活用法
YAMLではハッシュ記号（#）を使ってコメントを書くことができます。これはコード内にメモや説明を残すのに非常に便利です。
# 1. 画像全体の定義
image_description:
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示すミニマルスタイルのレシピインフォグラフィック。
# ここは全体的な指示内容
background:
color: "#FFFFFF" # 白背景
コメントは行の途中から始めることもできます（上の例の # 白背景 のように）。その行の # 以降はすべてコメントとして扱われ、YAMLデータとしては解釈されません。
コメントの活用法：
- 複雑な構造の説明
- データの意図や目的の記録
- 一時的に特定のデータを無効化（コメントアウト）
- セクションの区切りの明示
💡【重要】AIにYAMLの修正や補足をお願いする際は「各項目にコメントで説明を追加して」と指示すれば、非常にわかりやすいYAMLができます。
マルチライン文字列の表現方法
YAMLでは複数行に渡る文字列を表現するための方法がいくつかあります。天ぷらそばレシピYAMLでは、パイプ記号（|）を使った方法が採用されています：
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示すミニマルスタイルのレシピインフォグラフィック。
白い背景に、俯瞰視点で撮影された材料写真（ラベル付き）、アイコンと点線で繋がれた調理手順、最下部に完成品の写真を配置する。
全体的にクリーンで分かりやすいデザイン。
パイプ記号（|）を使うと、改行がそのまま保持されます。つまり、3行の文章はそのまま3行として解釈されます。
別の方法として、大なり記号（>）を使うこともできます：
description: >
これは長い説明文です。
この改行は空白として扱われます。
つまり1行の文章として解釈されます。
ただし、空行は段落の区切りとして保持されます。
マルチライン表現の使い分け：
- パイプ記号（|）：改行をそのまま保持したい場合（詩や整形済みテキストなど）
- 大なり記号（>）：改行を空白に変換して一つの流れるような文章にしたい場合（長い説明文など）
実際にYAMLを書いてみよう
ここまでの知識を使って、簡単な天ぷらそばの材料リストをYAMLで書いてみましょう：
# 天ぷらそばの材料リスト
recipe:
name: 天ぷらそば
servings: 2
ingredients:
- name: そば
amount: 2人前
notes: 乾麺約200g
- name: めんつゆ
amount: 100ml
notes: 3倍濃縮タイプ
- name: 水
amount: 400ml
notes: めんつゆ希釈用
- name: 海老天ぷら
amount: 2尾
- name: 長ねぎ
amount: 1/4本
notes: 小口切り
preparation_time: 5分
cooking_time: 10分
AIに「天ぷらそば二人前（海老天ぷら＆長ネギ付き）の簡単レシピをYAML化してコードボックスへ出力して」と書かせたYAML ↓
title: 天ぷらそば（海老天ぷら＆長ネギ付き）
servings: 2
ingredients:
- name: そば
amount: 2人前
- name: 海老
amount: 4尾 # 中サイズの海老
- name: 長ネギ
amount: 1本
- name: 薄力粉または片栗粉
amount: 適量 # 海老にまぶす用
- name: 天ぷら粉
amount: 100g
- name: 冷水
amount: 150ml
- name: 揚げ油
amount: 適量
- name: だし汁
amount: 600ml
- name: 醤油
amount: 大さじ2
- name: みりん
amount: 大さじ1
- name: 砂糖
amount: 小さじ1
- name: 塩
amount: 少々 # 海老下味用
instructions:
- 海老は殻をむき、背わたを取り除いた後、軽く塩をふって下味をつける。
- 長ネギは斜め薄切りにする。
- ボウルに天ぷら粉と冷水を入れ、さっくりと混ぜる（混ぜすぎに注意）。
- 海老に薄力粉または片栗粉をまぶし、衣（天ぷら粉液）にくぐらせる。
- 中温（約170℃）の油で海老をカラッと揚げる。
- 別の鍋でだし汁を温め、醤油、みりん、砂糖を加えてつゆを作る。
- 別の鍋でそばを茹で、ザルにあげて水気を切る。
- 器にそばを盛り、長ネギを散らし、揚げた海老天をのせる。
- 温めたつゆをかけて完成。お好みで七味唐辛子や天かすをトッピングしてもよい。
notes:
- 天ぷらの衣は混ぜすぎないことで、サクサクに仕上がります。
- そばは茹で過ぎないように注意し、コシを残すと美味しくいただけます。
これで、YAMLの基本的な構文要素についての理解が深まったのではないでしょうか。次のセクションでは、より複雑なYAMLデータ構造について学んでいきます。
ワンポイントTip：YAMLを書く際はスペースとインデントに特に注意しましょう。タブとスペースを混在させないこと、同じレベルの項目は同じだけインデントすることが重要です。また、AIを使えばYAMLを書かせたり修正も簡単にできます。構造を理解してAIといっしょにYAMLを作る流れを身につけていきましょう！
🏗️ YAMLでデータを構造化する
前のセクションでYAMLの基本的な書き方を学びましたが、ここからはより実践的な内容に入っていきます。YAMLの真価は、複雑なデータを分かりやすく構造化できる点にあります。引き続き天ぷらそばレシピYAMLを例に、データ構造化の手法を見ていきましょう。
🔗天ぷらそばのレシピYAML
# 画像生成AI向け設計書 (天ぷらそば レシピインフォグラフィック)
# 1. 画像全体の定義
image_description:
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示すミニマルスタイルのレシピインフォグラフィック。
白い背景に、俯瞰視点で撮影された材料写真（ラベル付き）、アイコンと点線で繋がれた調理手順、最下部に完成品の写真を配置する。
全体的にクリーンで分かりやすいデザイン。
style:
- 写真 (材料、完成品 - 俯瞰視点)
- シンプルな線画アイコン (調理手順)
- ミニマルスタイル (Minimal style)
- インフォグラフィック (Infographic)
aspect_ratio: 縦長 (例: 9:16 or A4 ratio)
background:
color: "#FFFFFF" # 白背景
# 2. 構成要素 (Components)
components:
# 2.1 タイトル
- type: text
id: title
content: "天ぷらそば"
position: 上部中央 (Top Center)
font:
family: シンプルなゴシック体 (例: "Helvetica Neue", "Arial", "Noto Sans JP")
size: 大きい (Large)
weight: 中程度 (Medium) or やや太め (Semi-bold)
color: 黒 (#000000)
# 2.2 材料セクション (俯瞰写真とラベル)
- type: section
id: ingredients_section
layout: グリッド (Grid layout, neatly arranged)
position: タイトルの下 (Below title)
items:
- type: image_with_label
id: soba_noodles
image_description: 乾麺のそば 2人前分 (約200g) の束、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["そば (乾麺)", "2人前 (200g)"]
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
- type: image_with_label
id: mentsuyu
image_description: 濃縮めんつゆが入ったボトル、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["めんつゆ (3倍濃縮)", "100ml"] # 例
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
- type: image_with_label
id: water
image_description: 透明な計量カップに入った水、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["水", "400ml"] # めんつゆ希釈用例
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
- type: image_with_label
id: tempura_shrimp
image_description: 揚げたての海老天ぷら 2尾、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["海老天ぷら", "2尾"]
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
- type: image_with_label
id: green_onion
image_description: 小口切りにした長ねぎ、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["長ねぎ", "1/4本"]
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
# (任意) 他の天ぷらや薬味
# - type: image_with_label
# id: shichimi
# image_description: 七味唐辛子の小瓶、俯瞰撮影 (Top-down view)
# image_style: 写真
# label_text: ["七味唐辛子", "少々 (お好みで)"]
# label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
# 2.3 調理手順セクション (アイコンと点線)
- type: step_by_step_instructions
id: cooking_steps
position: 材料セクションの下 (Below ingredients section)
layout: 縦方向または横方向のシーケンス (Vertical or Horizontal sequence)
connection: 点線 (Dotted lines connecting steps/icons)
items:
- step: 1
icon: boiling_pot # 鍋アイコン
description: "たっぷりのお湯でそばを袋の表示時間通りに茹でる。"
style: { font_family: "シンプルなゴシック体", size: "中 (Medium)", color: "#333333" }
- step: 2
icon: sauce_pan # 小鍋アイコン
description: "小鍋にめんつゆと水を入れて火にかけ、温める（沸騰させない）。"
style: { font_family: "シンプルなゴシック体", size: "中 (Medium)", color: "#333333" }
- step: 3
icon: chopping_board # まな板と包丁アイコン
description: "長ねぎを小口切りにする。"
style: { font_family: "シンプルなゴシック体", size: "中 (Medium)", color: "#333333" }
- step: 4
icon: bowl_assembly # 丼アイコン
description: "茹で上がったそばを湯切りし、温めた丼に入れ、②のつゆを注ぐ。"
style: { font_family: "シンプルなゴシック体", size: "中 (Medium)", color: "#333333" }
- step: 5
icon: garnishing # 盛り付けアイコン (例: 手で具材を乗せている)
description: "海老天ぷらと③のねぎを盛り付ける。お好みで七味唐辛子を振る。"
style: { font_family: "シンプルなゴシック体", size: "中 (Medium)", color: "#333333" }
# 2.4 完成写真 (俯瞰)
- type: image
id: final_dish
image_description: |
白いシンプルな丼に盛り付けられた天ぷらそば。真上からの俯瞰ショット (Top-down view)。
温かいつゆの中にそばがあり、中央に海老天ぷら2尾が配置され、刻みねぎが散らされている。
背景は完全に白。ミニマルでクリーンな印象。
image_style: 写真 (Realistic photo, minimal style, top-down view)
position: 最下部中央 (Bottom Center, main focus)
# 3. その他・調整項目
additional_notes:
- 全体を通してミニマルデザインを維持する。余計な装飾は避ける。
- アイコンはシンプルで分かりやすい線画スタイルにする。
- 点線は各ステップのアイコンや説明文をスムーズに繋ぐように配置する。
- フォントは一貫してシンプルなゴシック体を使用し、読みやすさを重視する。
- 材料写真、完成写真はすべて真上からの俯瞰視点で統一する。
- 色数は抑え、白背景を基調とする。
ネストされた階層の作り方と読み方
例を見てみましょう：
components:
# 2.1 タイトル
- type: text
id: title
content: "天ぷらそば"
position: 上部中央 (Top Center)
font:
family: シンプルなゴシック体 (例: "Helvetica Neue", "Arial", "Noto Sans JP")
size: 大きい (Large)
weight: 中程度 (Medium) or やや太め (Semi-bold)
color: 黒 (#000000)
この例では次のような階層になっています：
components（最上位レベル）- リスト項目（
-で始まる部分） - リスト項目内の各プロパティ（
type,id,content,position,font） fontの下の各プロパティ（family,size,weight,color）
このように、データを論理的なグループに分けて整理することで、非常に複雑な情報でも分かりやすく表現できます。
ネスト階層を読むコツ：
- インデントの深さに注目する
- 親子関係を意識する（親の下に子が来る）
- 同じインデントレベルは同じ階層に属する
マップ（オブジェクト）とシーケンス（配列）の組み合わせ
- マップ（オブジェクト） キーと値のペアの集まり
- シーケンス（配列） 順序付けられたリスト
天ぷらそばレシピYAMLでは、これらが複雑に組み合わされています：
# マップの例
image_description:
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示す...
style:
- 写真 (材料、完成品 - 俯瞰視点)
- シンプルな線画アイコン (調理手順)
# シーケンス（配列）の例
components:
- type: text
id: title
content: "天ぷらそば"
- type: section
id: ingredients_section
layout: グリッド
上の例では：
image_descriptionはマップで、その中にoverall_prompt（値は長い文字列）とstyle（値はリスト）という2つのキーがありますcomponentsはリスト（シーケンス）を値に持つマップで、リストの各項目自体がマップになっています
このような入れ子構造を使うことで、非常に複雑なデータでも整理された形で表現できるのです。
アンカーとエイリアス：参照と再利用の仕組み
YAMLには、データの一部を「アンカー」として定義し、別の場所から「エイリアス」として参照する機能があります。これは、同じデータを複数回使いたい場合に便利です。
天ぷらそばレシピYAMLでは使われていませんが、使い方を例示します：
# アンカーの定義 (&で始まる)
default_font: &default_font
family: シンプルなゴシック体
size: 中程度 (Medium)
color: 黒 (#000000)
components:
- type: text
id: title
content: "天ぷらそば"
font:
<<: *default_font # エイリアスを使ってdefault_fontを参照
size: 大きい (Large) # 一部だけ上書き
- type: text
id: subtitle
content: "2人前"
font: *default_font # エイリアスを使ってdefault_fontをそのまま使用
上の例では：
&default_fontでアンカーを定義*default_fontでそのアンカーを参照（エイリアス）<<: *default_fontと書くと、参照先のマップをインラインで展開できる（マージキー）
アンカーとエイリアスのメリット：
- コードの重複を減らせる
- 共通設定を一箇所にまとめられる
- 変更時に一箇所だけ修正すればよくなる
YAMLファイルの分割と結合
大規模なYAMLは、複数のファイルに分割して管理することもできます。多くのYAMLパーサーやアプリケーションでは、別ファイルのインポート機能をサポートしています。
例えば、天ぷらそばレシピの構成要素だけを別ファイルにすることができます：
main.yaml
# 1. 画像全体の定義
image_description:
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示す...
style:
- 写真 (材料、完成品 - 俯瞰視点)
- シンプルな線画アイコン (調理手順)
# 構成要素は別ファイルからインポート
components: !include components.yaml
components.yaml
# 2.1 タイトル
- type: text
id: title
content: "天ぷらそば"
position: 上部中央 (Top Center)
# ...残りの構成要素...
なお、!include はYAMLの標準機能ではなく、アプリケーション側で実装される機能です。使用するツールやライブラリによって、インポート方法は異なります。
よくあるエラーとその対処法
YAMLを書く際によく遭遇するエラーと、その解決法を見ていきましょう。
1. インデントのミス
# 間違い
components:
- type: text
id: title # このラインはインデントが足りない！
content: "天ぷらそば"
# 正しい
components:
- type: text
id: title # リストの項目の下なので、さらにインデントが必要
content: "天ぷらそば"
2. コロンの後のスペース忘れ
# 間違い
background:
color:"#FFFFFF" # コロンの後にスペースがない！
# 正しい
background:
color: "#FFFFFF" # コロンの後にスペースがある
3. 特殊文字の扱い
# 間違い
description: 特殊記号の例: コロン、引用符 "など # コロンが2つあるとエラー
# 正しい
description: "特殊記号の例: コロン、引用符 \"など" # 引用符で囲んで、エスケープする
4. タブとスペースの混在
インデントにタブとスペースを混在させるとエラーの原因になります。必ずどちらか一方（通常はスペース）を使いましょう。
5. 改行の扱い
# 間違い
description: これは改行を含む
文章です # この行はキーがないのでエラー
# 正しい
description: |
これは改行を含む
文章です
実践的なYAML構造設計のコツ
天ぷらそばレシピYAMLのような実践的なYAMLを設計する際のコツをご紹介します。
1. トップダウンで設計する
大きな構造から小さな詳細へと設計を進めましょう。まず全体の構成を考え、徐々に詳細を追加していくアプローチが効果的です。
天ぷらそばレシピYAMLでは：
- 画像全体の定義
- 構成要素の定義
- 追加的な調整項目
という大きな枠組みから始まっています。
2. 論理的なグループ分け
font:
family: シンプルなゴシック体
size: 大きい
weight: 中程度
color: 黒
このように、フォントに関する情報を別々に書くのではなく、font というグループにまとめています。
3. 共通設定は上位に
複数の場所で使う設定は、できるだけ上位のレベルで定義しましょう。
# 全体的な設定
background:
color: "#FFFFFF" # 白背景
additional_notes:
- 全体を通してミニマルデザインを維持する。
- アイコンはシンプルで分かりやすい線画スタイルにする。
4. コメントを効果的に使う
複雑な構造や意図の説明には、コメントを活用しましょう。
# 1. 画像全体の定義
image_description:
# 全体的な説明文
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示す...
5. 一貫性を保つ
命名規則やインデントのスタイルは一貫させましょう。天ぷらそばレシピYAMLでは、すべての構成要素に id が含まれているなど、一貫した形式が使われています。
- type: text
id: title
content: "天ぷらそば"
- type: section
id: ingredients_section
layout: グリッド
ここまでで、YAMLでデータを構造化する方法について学びました。次のセクションでは、天ぷらそばレシピYAMLを詳細に分析していきます。
ワンポイントTip：複雑なYAMLを書く際は、段階的にアプローチすることが重要です。まずは骨格となる主要な構造を作り、それからテストしながら詳細を追加していきましょう。
また、アンカーとエイリアスを使った参照機能は、繰り返しの多いYAMLで特に威力を発揮します。たとえば、複数の場所で同じようなスタイル設定を使うなら、一度定義してから参照するようにすると、メンテナンスがずっと楽になりますよ！
🍜 ケーススタディ：天ぷらそばレシピYAMLの分析
ここまでYAMLの基本と構造化について学んできました。ここからは、具体的な例として「天ぷらそばレシピYAML」をさらに詳しく分析していきましょう。
このYAMLは画像生成AIに指示を出すための設計書になっています。どのようにYAMLが実際のプロジェクトで使われるかを理解するのに最適な例です。
構造の全体像：画像生成AIへの指示設計
まず、天ぷらそばレシピYAMLの全体像を見てみましょう。このYAMLは大きく分けて3つの主要セクションから構成されています：
# 1. 画像全体の定義
image_description:
# ...
# 2. 構成要素 (Components)
components:
# ...
# 3. その他・調整項目
additional_notes:
# ...
この構造は非常に論理的です：
- 最初に全体的な説明と設定
- 次に個々の構成要素の詳細
- 最後に補足情報や調整指示
これは、多くの設計書やドキュメントで使われる「全体から詳細へ」というアプローチを踏襲しています。画像生成AIに指示を出す際に、まず全体像を伝え、その後で詳細を指定するという流れは非常に効果的です。
階層構造の分解と解説
それでは、各セクションをさらに詳しく見ていきましょう。
1. 画像全体の定義
# 1. 画像全体の定義
image_description:
overall_prompt: |
天ぷらそばの作り方をステップバイステップで示すミニマルスタイルのレシピインフォグラフィック。
白い背景に、俯瞰視点で撮影された材料写真（ラベル付き）、アイコンと点線で繋がれた調理手順、最下部に完成品の写真を配置する。
全体的にクリーンで分かりやすいデザイン。
style:
- 写真 (材料、完成品 - 俯瞰視点)
- シンプルな線画アイコン (調理手順)
- ミニマルスタイル (Minimal style)
- インフォグラフィック (Infographic)
aspect_ratio: 縦長 (例: 9:16 or A4 ratio)
background:
color: "#FFFFFF" # 白背景
このセクションでは：
overall_prompt- 全体的な指示内容を複数行のテキストで表現style- 画像全体のスタイルをリスト形式で指定aspect_ratio- 画像のアスペクト比（縦横比）を指定background- 背景の設定（白色を指定）
ここでのYAMLの活用ポイントは：
- 複数行テキストには
|を使用して改行を保持 - スタイルなどの複数項目はリスト（
-で始まる）で表現 - 色情報はネストされた構造（
backgroundの下にcolor）で整理
2. 構成要素 (Components)
# 2. 構成要素 (Components)
components:
# 2.1 タイトル
- type: text
id: title
content: "天ぷらそば"
position: 上部中央 (Top Center)
font:
family: シンプルなゴシック体 (例: "Helvetica Neue", "Arial", "Noto Sans JP")
size: 大きい (Large)
weight: 中程度 (Medium) or やや太め (Semi-bold)
color: 黒 (#000000)
# 2.2 材料セクション (俯瞰写真とラベル)
- type: section
id: ingredients_section
layout: グリッド (Grid layout, neatly arranged)
position: タイトルの下 (Below title)
items:
- type: image_with_label
id: soba_noodles
image_description: 乾麺のそば 2人前分 (約200g) の束、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["そば (乾麺)", "2人前 (200g)"]
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
# その他の材料項目...
# 2.3 調理手順セクション (アイコンと点線)
- type: step_by_step_instructions
# 手順の詳細...
# 2.4 完成写真 (俯瞰)
- type: image
id: final_dish
image_description: |
白いシンプルな丼に盛り付けられた天ぷらそば。真上からの俯瞰ショット (Top-down view)。
温かいつゆの中にそばがあり、中央に海老天ぷら2尾が配置され、刻みねぎが散らされている。
背景は完全に白。ミニマルでクリーンな印象。
image_style: 写真 (Realistic photo, minimal style, top-down view)
position: 最下部中央 (Bottom Center, main focus)
このセクションは非常に複雑ですが、論理的に整理されています：
componentsはリスト（-で始まる）で、各項目が異なる構成要素を表現- 各構成要素には
typeとidが含まれ、一意に識別可能 - 階層は何段階にもネストされている（例:
components→ 各項目 →items→ 各材料項目）
ここでのYAMLの活用ポイントは：
- 共通の構造を持つ項目をリストで表現
- 異なる種類の要素（テキスト、セクション、画像など）を同じリストに含めつつ、
typeで区別 - 深いネストを使いながらも、コメント（
# 2.1 タイトルなど）で区切りを明確に
3. その他・調整項目
# 3. その他・調整項目
additional_notes:
- 全体を通してミニマルデザインを維持する。余計な装飾は避ける。
- アイコンはシンプルで分かりやすい線画スタイルにする。
- 点線は各ステップのアイコンや説明文をスムーズに繋ぐように配置する。
- フォントは一貫してシンプルなゴシック体を使用し、読みやすさを重視する。
- 材料写真、完成写真はすべて真上からの俯瞰視点で統一する。
- 色数は抑え、白背景を基調とする。
このセクションでは：
- 全体に関する補足指示をリスト形式でまとめている
- 各項目は短く明確に記述されている
コンポーネント定義の理解
天ぷらそばレシピYAMLでは、コンポーネント（構成要素）が非常に詳細に定義されています。特に注目すべきは、各コンポーネントが一貫した形式で記述されている点です。
以下は、タイトルコンポーネントの例です：
- type: text
id: title
content: "天ぷらそば"
position: 上部中央 (Top Center)
font:
family: シンプルなゴシック体 (例: "Helvetica Neue", "Arial", "Noto Sans JP")
size: 大きい (Large)
weight: 中程度 (Medium) or やや太め (Semi-bold)
color: 黒 (#000000)
各コンポーネントの共通要素：
typeコンポーネントの種類（text, section, image など）id一意の識別子position配置位置
このような一貫した構造を持たせることで：
- 画像生成AIが指示を理解しやすくなる
- 人間が読んでも構造が把握しやすい
- 必要に応じて変更や追加がしやすい
スタイル・レイアウト指定の方法
天ぷらそばレシピYAMLでは、視覚的な要素のスタイルとレイアウトを詳細に指定しています。
例えば、材料セクションのレイアウト指定：
- type: section
id: ingredients_section
layout: グリッド (Grid layout, neatly arranged)
position: タイトルの下 (Below title)
items:
# 各材料項目...
また、調理手順セクションでは、ステップ間の接続方法まで指定されています：
- type: step_by_step_instructions
id: cooking_steps
position: 材料セクションの下 (Below ingredients section)
layout: 縦方向または横方向のシーケンス (Vertical or Horizontal sequence)
connection: 点線 (Dotted lines connecting steps/icons)
items:
# 各ステップの詳細...
このような詳細なスタイル・レイアウト指定により：
- 画像生成AIがより具体的なイメージを生成できる
- デザインの一貫性が保たれる
- 最終的な出力が予測しやすくなる
画像・テキスト要素の組み合わせ
天ぷらそばレシピYAMLでは、画像とテキストを組み合わせた複合要素も定義されています。特に興味深いのは、材料リストの各項目です：
- type: image_with_label
id: soba_noodles
image_description: 乾麺のそば 2人前分 (約200g) の束、俯瞰撮影 (Top-down view)
image_style: 写真
label_text: ["そば (乾麺)", "2人前 (200g)"]
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
この例では：
image_with_labelという複合型を定義- 画像部分の詳細（
image_description,image_style） - ラベル部分の詳細（
label_text,label_style）
注目すべき点は、label_text が配列形式になっていることです：
label_text: ["そば (乾麺)", "2人前 (200g)"]
これにより、主要テキスト（そば (乾麺)）と補足情報（2人前 (200g)）を分けて指定できます。
また、label_style はインライン形式で記述されています：
label_style: { font_family: "シンプルなゴシック体", size: 小 (Small), color: "#333333" }
これは、以下と同等です：
label_style:
font_family: "シンプルなゴシック体"
size: 小 (Small)
color: "#333333"
YAMLでは、シンプルな構造はインライン形式で記述することもできます。
YAMLでビジュアル要素を表現する工夫
天ぷらそばレシピYAMLでは、ビジュアル要素を効果的に表現するためのいくつかの工夫が見られます：
1. 詳細な説明文
image_description: |
白いシンプルな丼に盛り付けられた天ぷらそば。真上からの俯瞰ショット (Top-down view)。
温かいつゆの中にそばがあり、中央に海老天ぷら2尾が配置され、刻みねぎが散らされている。
背景は完全に白。ミニマルでクリーンな印象。
このように、視覚的な要素を言葉で詳細に説明することで、画像生成AIが理解しやすくなります。
2. 具体的なスタイル指定
style:
- 写真 (材料、完成品 - 俯瞰視点)
- シンプルな線画アイコン (調理手順)
- ミニマルスタイル (Minimal style)
- インフォグラフィック (Infographic)
異なる要素に異なるスタイルを適用する方法が明確に指定されています。
3. 参照情報の括弧書き
position: 上部中央 (Top Center)日本語の説明に英語を括弧書きで添えることで、国際的に通用する参照情報を提供しています。
4. 色情報のHEXコード表記
color: "#FFFFFF" # 白背景色情報はHEXコードで明確に指定しつつ、コメントで人間が理解しやすい説明を添えています。
これらの工夫により、画像生成AIはより正確に指示を理解でき、人間も読みやすいYAMLになっています。
まとめ：天ぷらそばレシピYAMLから学ぶこと
天ぷらそばレシピYAMLの分析から、効果的なYAML設計のポイントをまとめると：
- 論理的な構造設計：全体から詳細へ、共通要素と固有要素の整理
- 一貫性のある形式：各コンポーネントで同じ構造を維持
- 適切なネスト：関連する情報を階層的に整理
- 詳細かつ具体的な指示：曖昧さを排除した詳細な記述
- 読みやすさへの配慮：コメント、説明的な命名、参照情報の追加
このような設計原則は、画像生成AI向けの指示書に限らず、あらゆる種類のYAML文書作成に応用できます。複雑な情報を構造化し、人間にもコンピュータにも理解しやすい形式で表現するというYAMLの強みを最大限に活かした例と言えるでしょう。
次のセクションでは、YAML活用の実際の例をさらに見ていきます。
ワンポイントTip：AI向けの指示YAMLを作成する際は、「AIの視点」と「人間の視点」の両方を意識しましょう。AIが処理しやすい論理的な構造と、人間が後から読んで理解・編集しやすい形式のバランスが重要です。
また、最初は小さなテストケースから始めて、徐々に複雑化させていくアプローチが効果的です。新しい要素を追加するたびにAIに生成させてフィードバックを得ることで、より効率的に完成度の高いYAMLが作成できますよ！
🌐 実際のYAML活用例
ここまでは天ぷらそばレシピYAMLを中心に解説してきましたが、実はYAMLは様々な分野で幅広く活用されています。このセクションでは、実際の現場でどのようにYAMLが使われているのかを見ていきましょう。
AIプロンプト設計書としてのYAML
近年特に注目されているのが、AI向けの指示（プロンプト）設計にYAMLを活用する方法です。天ぷらそばレシピYAMLもその一例ですが、他にもさまざまな応用があります。
キャラクター設定例
character_setup:
name: 佐藤健太
age: 16
occupation: 高校2年生
personality:
- 明るく社交的
- 好奇心旺盛
- 科学が得意
- 少し心配性
appearance:
height: 175cm
build: 普通
hair: 黒髪、ショート
clothing: 学生服または普段着のTシャツとジーンズ
background: |
東京の一般的な家庭で育った健太は、幼い頃から科学実験に興味を持ち、
自宅で様々な実験を行っていた。現在は地元の高校の科学部に所属し、
友人たちと一緒に科学コンテストに向けたプロジェクトに取り組んでいる。
goals:
- 科学コンテストで全国大会に出場すること
- 将来は研究者になること
- 友人関係を大切にすること
relationships:
- name: 山田美咲
relation: 幼馴染み
description: 同じ高校の文芸部に所属する女子生徒
- name: 鈴木先生
relation: 科学部顧問
description: 健太の才能を認め、積極的に指導してくれる物理教師
このようなキャラクター設定を使うことで、AIに一貫性のあるキャラクターを演じさせたり、小説やシナリオの生成に活用したりできます。YAMLの階層構造を活かして、人物の様々な側面を整理して表現できるのが特徴です。
画像生成指示例
# アニメスタイルの犬のキャラクターデザイン
character_design:
subject: 柴犬
style: アニメ/漫画風
pose: 立ち姿、若干斜め向き
expression: 元気で明るい笑顔
attire:
top: 赤い首輪
accessory: 小さな星形の名札
background: シンプルなグラデーション背景（水色から白）
lighting: 明るく柔らかい全体照明
composition: キャラクターを中央に配置、全身が見えるショット
additional_notes:
- 目は大きく表情豊かに
- 毛並みは簡略化されたアニメ調で
- 全体的に親しみやすい印象に
このような指示書を使うことで、AIに具体的な画像生成を依頼する際、必要な要素を漏れなく指定できます。また、一度作成したテンプレートを再利用することで、同じスタイルで異なるキャラクターや物を生成することも容易になります。
ビジネス用途でのYAML活用事例
ビジネスシーンでもYAMLは幅広く活用されています。特に情報の整理や計画策定において効果を発揮します。
商品企画書
product:
name: エコスマートボトル
category: 持ち運び用水筒
target_audience:
primary: 20-40代の環境意識の高いビジネスパーソン
secondary: アウトドア愛好家
unique_selling_points:
- 100%リサイクル素材使用
- 温度表示機能付き
- 軽量デザイン (250g)
- 24時間保温・保冷機能
price_point:
retail: 3,980円
wholesale: 2,200円
margin: 45%
production:
initial_lot: 5,000個
lead_time: 2ヶ月
minimum_order: 1,000個
marketing_strategy:
channels:
- インスタグラム広告
- 環境系インフルエンサー起用
- アウトドアイベントでのサンプリング
key_message: "地球に優しく、あなたの健康も守る、次世代スマートボトル"
timeline:
design_finalization: 2024-06
production_start: 2024-07
market_launch: 2024-09
sales_target_1y: 30,000個
このYAMLテンプレートを使えば、新商品の企画情報を整理し、チーム内で共有しやすくなります。企画の各要素が階層的に整理されているため、必要な情報を素早く見つけることができます。
マーケティングキャンペーン計画
campaign:
name: 夏の健康応援キャンペーン
period:
start: 2024-07-01
end: 2024-08-31
budget: 5,000,000円
kpi:
website_traffic: 50,000 PV増
conversion: 販売数15%増
social_media: フォロワー数10,000増
target_audience:
demographics:
age: 30-50代
gender: 全性別
interests:
- 健康・ウェルネス
- フィットネス
- オーガニック食品
content_plan:
blog_posts:
- title: 夏バテ防止のための5つの簡単レシピ
publish_date: 2024-07-05
- title: 在宅ワークでも実践できる簡単エクササイズ
publish_date: 2024-07-15
- title: 熱中症対策と水分補給の新常識
publish_date: 2024-07-25
social_media:
frequency: 1日2回投稿
content_themes:
- ユーザー体験談
- 朝活応援
- 健康豆知識
promotion:
- type: 期間限定割引
detail: 対象商品20%オフ
- type: サンプリング
detail: 新商品お試しセットプレゼント
- type: タイアップ
detail: 有名フィットネスインフルエンサーとのコラボ動画
success_metrics:
- 売上目標達成率
- SNSエンゲージメント率
- メルマガ登録者数増加率
マーケティングキャンペーンの計画をYAMLで整理することで、チームメンバー全員が同じ情報を共有しやすくなります。また、過去のキャンペーンのYAMLをテンプレートとして再利用することで、効率的に新しいキャンペーンを計画できます。
デザイン分野でのYAML活用
デザイン関連の情報や指示をYAMLで構造化することで、一貫性のあるデザイン制作やブランディングが可能になります。
ブランドガイドライン
brand_guidelines:
brand_name: テックスマイル
tagline: "テクノロジーで、もっと笑顔に"
brand_story: |
テックスマイルは、最新テクノロジーを活用して人々の日常生活をより快適にすることを
ミッションとして2020年に設立されました。私たちは複雑なテクノロジーをシンプルで
使いやすい形で提供し、すべての人が笑顔になれる未来を目指しています。
logo:
primary_logo: "logo_primary.svg"
secondary_logo: "logo_secondary.svg"
clear_space: ロゴの高さの50%以上の余白を確保
minimum_size: 印刷物では20mm以上、デジタルでは60px以上
incorrect_usage:
- ロゴの変形
- 承認されていない色での使用
- 背景との区別がつかない配置
colors:
primary:
- name: テックブルー
hex: "#0066CC"
rgb: "0, 102, 204"
usage: ロゴ、ヘッダー、主要ボタン
- name: スマイルイエロー
hex: "#FFCC00"
rgb: "255, 204, 0"
usage: アクセント、ハイライト
secondary:
- name: クラウドグレー
hex: "#F2F2F2"
rgb: "242, 242, 242"
usage: 背景、セカンダリーエレメント
typography:
primary_font: "Noto Sans JP"
secondary_font: "Roboto"
header_styles:
h1: "Noto Sans JP Bold, 32px"
h2: "Noto Sans JP Bold, 24px"
h3: "Noto Sans JP Medium, 20px"
body_text: "Noto Sans JP Regular, 16px"
imagery:
style: 明るく、クリーンで、人物中心
photo_treatment: 自然光を活かした温かみのある処理
illustrations: シンプルでフラットなスタイル、ブランドカラーを使用
tone_of_voice:
- フレンドリーで親しみやすい
- 専門的だが堅苦しくない
- ポジティブで前向き
- シンプルで分かりやすい
このようなブランドガイドラインをYAMLで作成することで、デザイナーやマーケティング担当者がブランドの一貫性を保ちやすくなります。また、YAMLファイルから自動的にスタイルガイドWebサイトやPDF文書を生成することも可能です。
Web/アプリUIコンポーネント仕様
ui_component:
name: プライマリーボタン
version: 1.2.0
description: |
最も重要なアクションに使用するボタンコンポーネント。
ページ内で最も目立つアクションに使用します。
variants:
- name: デフォルト
style:
background: "#0066CC"
text_color: "#FFFFFF"
padding: "12px 24px"
border_radius: "4px"
font: "Noto Sans JP Bold, 16px"
- name: ホバー
style:
background: "#0055AA"
text_color: "#FFFFFF"
padding: "12px 24px"
border_radius: "4px"
font: "Noto Sans JP Bold, 16px"
- name: 無効
style:
background: "#CCCCCC"
text_color: "#666666"
padding: "12px 24px"
border_radius: "4px"
font: "Noto Sans JP Bold, 16px"
responsive_behavior:
mobile:
width: "100%"
padding: "14px 20px"
font_size: "14px"
tablet:
width: "auto"
padding: "12px 24px"
font_size: "16px"
desktop:
width: "auto"
padding: "12px 24px"
font_size: "16px"
accessibility:
contrast_ratio: 4.5:1以上
focus_state: 青色の2pxアウトライン
screen_reader_text: ボタンのテキストと同一
usage_guidelines:
- 一画面に設置するプライマリーボタンは原則1つまでとする
- ボタンテキストは動詞または動詞フレーズで、簡潔に行動を表す
- アイコンを追加する場合は、テキストの前または後ろに配置
code_examples:
- language: HTML
code: '<button class="btn-primary">ボタンテキスト</button>'
- language: CSS
code: |
.btn-primary {
background-color: #0066CC;
color: #FFFFFF;
padding: 12px 24px;
border-radius: 4px;
font-family: 'Noto Sans JP';
font-weight: bold;
font-size: 16px;
border: none;
cursor: pointer;
}
このようなUIコンポーネント仕様をYAMLで管理することで、デザイナーと開発者が同じ情報を参照でき、一貫性のあるUIの実装が可能になります。
実践的なYAML活用テクニック
より実践的なYAML活用法として、既存コンテンツからYAMLを生成したり、YAMLを使って効率的に新しいコンテンツを生成したりする方法を紹介します。
🖼️画像をYAML形式に変換するプロンプト
以下は、画像の内容をYAML形式に変換するためのClaudeプロンプトです：
task: 画像からYAML生成
instructions: |
添付された画像を分析し、その内容を構造化されたYAML形式に変換してください。
以下の要素を特に注目して抽出してください。
parameters:
subject:
description: 画像の主題または中心的な要素
required: true
visual_elements:
description: 画像に含まれる主要な視覚要素のリスト
format: list
required: true
colors:
description: 画像で使用されている主要な色
format: list
required: true
composition:
description: 画像の構図や要素の配置方法
required: true
mood:
description: 画像から感じられる全体的な雰囲気や感情
required: true
text_elements:
description: 画像に含まれるテキストや文字情報
format: list
required: false
technical_aspects:
description: 画像の技術的側面（撮影方法、フィルター効果など）
required: false
output_format: |
以下の形式でYAMLを出力してください：
```yaml
image_analysis:
subject: [主題]
visual_elements:
- [要素1]
- [要素2]
# ...
colors:
- name: [色の名前]
description: [色の説明]
# ...
composition: |
[構図の説明]
mood: [雰囲気/感情]
text_elements:
- [テキスト要素1]
# ...
technical_aspects:
format: [画像形式]
style: [撮影/作成スタイル]
notable_techniques: [特筆すべき技術]
example: | 例えば、海辺の夕日の写真が添付された場合：
image_analysis:
subject: 海辺の夕日
visual_elements:
- 沈みゆく太陽
- 水平線
- 砂浜
- 波打ち際
colors:
- name: オレンジ
description: 夕日の温かみのある色調
- name: 青紫
description: 夕暮れの空と海
- name: 金色
description: 海面に映る太陽の反射光
composition: |
水平線を中心に配置し、太陽は画面の右側3分の1付近に位置。
前景には砂浜と波が見え、遠近感を演出している。
mood: 穏やかで瞑想的、ノスタルジックな雰囲気
text_elements: []
technical_aspects:
format: 風景写真
style: 自然光撮影
notable_techniques: シルエット効果、ゴールデンアワーの光の活用
このプロンプトをAIに与え、画像を添付すれば、画像の内容を構造化されたYAML形式に変換できます。デザイナーやクリエイターは、このYAMLを参考に類似の画像を生成したり、デザイン要素を抽出したりすることができます。
🖊️文章スタイル分析・複製YAMLジェネレーター
以下は、ブログ記事やニュース記事を分析し、そのスタイルで新しい文章を生成するためのYAMLを作成するプロンプトです：
task: 文章スタイル分析と複製
instructions: |
提供された文章（ブログ記事、ニュース記事など）を分析し、そのスタイル、トーン、構造を詳細に分析してYAML形式でまとめてください。
このYAMLは、同じスタイルで新しい文章を生成するためのガイドとして使用できるものにします。
parameters:
source_text:
description: 分析対象の文章全文
required: true
target_topic:
description: 新しく生成したい文章のテーマやトピック
required: false
analysis_aspects:
- voice_and_tone
- sentence_structure
- vocabulary_level
- rhetorical_devices
- organizational_pattern
- transition_techniques
- hook_and_conclusion_style
output_format: |
以下の形式でYAMLを出力してください：
```yaml
writing_style_template:
source_analysis:
overall_tone: [全体的なトーンの説明]
voice: [一人称/二人称/三人称、フォーマル/カジュアルなど]
average_sentence_length: [短い/中程度/長い]
vocabulary_level: [シンプル/一般的/専門的/高度]
paragraph_structure: [段落の典型的な長さと構成]
rhetorical_patterns:
frequently_used_devices:
- name: [修辞的技法の名前]
example: [原文からの例]
frequency: [高/中/低]
# 複数の技法を列挙
content_structure:
introduction:
pattern: [導入部の典型的なパターン]
techniques: [使用されている技法]
body:
section_pattern: [本文の区切り方やセクションの構成]
transition_style: [セクション間の接続方法]
conclusion:
pattern: [結論部の典型的なパターン]
techniques: [使用されている技法]
distinctive_elements:
- [この文章スタイルの特徴的な要素1]
- [この文章スタイルの特徴的な要素2]
replication_guide:
key_phrases:
- [特徴的なフレーズやセンテンス構造1]
- [特徴的なフレーズやセンテンス構造2]
do:
- [このスタイルで書く際にすべきこと1]
- [このスタイルで書く際にすべきこと2]
avoid:
- [このスタイルで書く際に避けるべきこと1]
- [このスタイルで書く際に避けるべきこと2]
application_example:
topic: [指定されたターゲットトピック]
outline: |
[分析したスタイルに基づくターゲットトピックの記事構成]
example: | 与えられた文章がテクノロジーブログの場合：
writing_style_template:
source_analysis:
overall_tone: 教育的かつ啓発的、専門知識をわかりやすく説明しようとするアプローチ
voice: 主に二人称（「あなたは」「～できます」）を使用し、読者に直接語りかける形式
average_sentence_length: 中程度、複雑な概念を説明する際は長め、重要ポイントは短い文で強調
vocabulary_level: 技術用語と一般用語のバランスが取れている、専門用語は使用後に簡単な説明が続く
paragraph_structure: 3-5文の比較的短い段落、一つのアイデアごとに区切られている
rhetorical_patterns:
frequently_used_devices:
- name: 比喩
example: "クラウドストレージは、インターネット上に浮かぶ巨大な本棚のようなものです"
frequency: 高
- name: 問いかけ
example: "あなたのデータはどれくらい安全ですか？"
frequency: 中
content_structure:
introduction:
pattern: 問題提起または驚きの事実から始まり、記事の目的を明確に述べる
techniques: 共感を誘う質問、統計データの引用
body:
section_pattern: 見出しで明確に区切られたセクション、各セクションは概念説明→事例→実践的アドバイスの流れ
transition_style: 論理的な接続詞（「したがって」「一方で」）や、次のセクションを予告する文
conclusion:
pattern: 主要ポイントの要約と実践的な次のステップの提案
techniques: 行動を促す表現、未来への展望
distinctive_elements:
- 箇条書きや番号付きリストを多用して情報を整理
- 「ワンポイントTip」などのコールアウトボックスで補足情報を提供
- 専門用語の後に括弧書きで簡単な説明を加える
replication_guide:
key_phrases:
- "～を理解することが重要です"
- "簡単に言えば、～ということです"
- "ここで重要なポイントは～です"
do:
- 各段落の最初で主要ポイントを述べる
- 複雑な概念は身近な例えを使って説明する
- 定期的に読者に問いかける形の文を入れる
avoid:
- 過度に技術的な説明が続くこと
- 主観的な意見の強い表明
- 長すぎる段落や文
application_example:
topic: 人工知能の基礎
outline: |
1. 導入：AI技術が日常生活に与えている影響についての問いかけ
2. AIの定義：身近な例を使った簡潔な説明
3. AIの種類：箇条書きでの分類と各タイプの簡単な説明
4. 実生活での活用例：読者が体験している可能性が高いAI応用例
5. AIの限界と誤解：よくある誤解の訂正
6. ワンポイントTip：AIツールを使い始める際の簡単なアドバイス
7. 結論：AIリテラシーの重要性と次のステップの提案
このプロンプトを使用すれば、特定の文章スタイルを分析し、そのスタイルを再現するための詳細なガイドラインをYAML形式で得ることができます。これは、ブランドの一貫したトーン・オブ・ボイスを維持したり、特定の著者のスタイルを学んだりする際に非常に役立ちます。
実用的なYAMLテンプレート集
実際の作業ですぐに使えるYAMLテンプレートをいくつか紹介します。
1. ブログ記事テンプレート
title: 記事のタイトル
author: 著者名
date: YYYY-MM-DD
categories:
- カテゴリ1
- カテゴリ2
tags:
- タグ1
- タグ2
thumbnail: images/thumbnail.jpg
description: |
この記事の概要を2-3文で説明します。
検索結果やSNSシェア時に表示される文章です。
draft: true # 下書き状態を示す（公開時にfalseに変更）
---
ここから本文を書きます。
このようなテンプレートを使って、ブログプラットフォームやCMSでの記事作成が効率化できます。
2. AI画像生成プロンプトテンプレート
image_prompt:
subject: 主題（人物、風景、物体など）
style:
artistic_style: 芸術的スタイル（写実的、アニメ調、水彩画風など）
inspiration: 参考にしたい芸術家や作品（任意）
composition:
angle: 視点（俯瞰、アイレベル、あおり角など）
framing: フレーミング（クローズアップ、全身、風景全体など）
focus: 焦点（何に注目させたいか）
lighting:
type: 光源タイプ（自然光、人工光、ドラマチックなど）
time: 時間帯（朝、昼、夕暮れ、夜など）
color:
palette: 色調（明るい、暗い、モノクロ、特定の配色など）
mood: 色による雰囲気（暖かい、クール、神秘的など）
details:
foreground: 前景の詳細情報
background: 背景の詳細情報
important_elements: 特に重視したい要素
technical:
aspect_ratio: アスペクト比（1:1、16:9、9:16など）
quality_keywords: 品質キーワード（高解像度、詳細、シャープなど）
このテンプレートを基に、具体的な内容を埋めていくことで、AI画像生成の精度を高めることができます。
3. プレゼンテーション構成テンプレート
presentation:
title: プレゼンテーションのタイトル
target_audience: 対象視聴者（例：マーケティング部門、経営陣、一般顧客）
duration: 予定時間（分）
objective: |
このプレゼンテーションの目的を簡潔に記述します。
（例：新製品の紹介、四半期決算報告、プロジェクト提案など）
key_takeaways:
- 視聴者に覚えておいてほしいポイント1
- 視聴者に覚えておいてほしいポイント2
- 視聴者に覚えておいてほしいポイント3
structure:
opening:
hook: 聴衆の関心を引く導入（質問、データ、エピソードなど）
overview: プレゼンテーションの流れの簡単な説明
main_content:
- section: セクション1タイトル
key_points:
- 要点1
- 要点2
visuals:
- type: グラフ/チャート
description: データの視覚化
- type: 画像/写真
description: 具体例や説明用の写真
duration: このセクションの目安時間（分）
- section: セクション2タイトル
key_points:
- 要点1
- 要点2
visuals:
- type: デモンストレーション
description: 製品やサービスのデモ
duration: このセクションの目安時間（分）
# 必要に応じてセクションを追加
conclusion:
summary: 主要ポイントのまとめ
call_to_action: 視聴者に取ってほしいアクション
q_and_a: 質疑応答の予想質問と回答
visual_style:
color_scheme: 使用する主要な色（会社のブランドカラーなど）
typography: 使用するフォントファミリー
slide_template: 使用するスライドテンプレート
notes:
preparation:
- 準備しておくべき資料やデータ
- リハーサルのポイント
technical:
- 必要な機材（プロジェクター、マイクなど）
- デモに必要な環境設定
このテンプレートを使えば、プレゼンテーションの構成を論理的に整理し、準備漏れを防ぐことができます。スライド作成前に全体像を把握することで、より効果的なプレゼンテーションを計画できます。
4. ビジネスミーティングアジェンダテンプレート
meeting:
title: ミーティングタイトル
date: YYYY-MM-DD
time:
start: HH:MM
end: HH:MM
location: 会議室名/オンラインリンク
facilitator: 進行役の名前
note_taker: 議事録担当者の名前
participants:
required:
- 必須参加者1
- 必須参加者2
optional:
- 任意参加者1
objective: |
このミーティングの目的を簡潔に記述します。
preparation:
- 参加者が事前に読んでおくべき資料
- 参加者が準備してくるべき情報
agenda_items:
- topic: 議題1
presenter: 発表者名
duration: 配分時間（分）
type: 情報共有/ディスカッション/決定事項
description: 議題の詳細や背景
expected_outcome: この議題で達成したい結果
materials: 関連資料へのリンクや参照情報
- topic: 議題2
presenter: 発表者名
duration: 配分時間（分）
type: 情報共有/ディスカッション/決定事項
description: 議題の詳細や背景
expected_outcome: この議題で達成したい結果
materials: 関連資料へのリンクや参照情報
# 必要に応じて議題を追加
wrap_up:
- アクションアイテムの確認
- 次回ミーティングの日程調整
follow_up:
action_items:
- task: タスク1
owner: 担当者名
due_date: 期限
- task: タスク2
owner: 担当者名
due_date: 期限
next_meeting: 次回ミーティング予定日
このテンプレートを使用すれば、ミーティングの目的や議題を明確に整理でき、参加者全員が準備して参加できるようになります。また、議事録やフォローアップも効率的に行えます。
ワンポイントTip：YAMLテンプレートは一度作成したら、チームやプロジェクト内で共有し、標準化することで大きな効率化が図れます。また、個人用のテンプレート集を作っておくと、同じような作業を繰り返す場合に時間短縮になります。テンプレートは最初はシンプルに始めて、実際の使用経験を基に徐々に改良していくことをおすすめします！
💡 ここからのコンテンツ
ここから先は有料購読者限定のプレミアムコンテンツです。Claudeを使った「リサーチ用プロンプト生成」×「Webリサーチ」×「note記事執筆」×「サムネ用プロンプト生成」までの流れを一発で実行するYAMLの指示書を紹介。
あわせて以下のスタップで利用するプロンプトもすべて公開します
- 雑な指示でもDeep Research用のプロンプトへ変換
- Webリサーチ用の指示書
- リサーチ結果を1万文字のnote記事に変換
- 記事内容を元にサムネ画像用のプロンプトを生成
これはあくまでnote記事への転用ですが、リサーチ結果をスライド化、グラレコ化、マニュアル化、教材化、LP化などプロンプトを用意すれば自由自在にAIを操り操作できます。
プロンプトを作ったり集めたりするのではなく、それらを組み合わせで、効率良くどのように使いこなすのか？
次のセクションで紹介する流れを学ぶことでアイデアの数だけ応用して楽しむことができます。また、今後ClaudeだけではなくGoogleのGeminiの「Gem」、Feloの「トピック」などでも活用できると思います。
ご購読お待ちしています。
💡有料購読者限定で紹介している手法に「グラレコ化」をプラスして実行した結果はこちら ↓
🔗【実践】Claude×YAMLが優秀！：1回の指示でリサーチ、記事執筆、サムネ生成、グラレコ化が完了する夢のワークフロー結果
https://note.com/tetumemo/n/nbb8f07bb41c9
📝 発行者
🎤Spotify：AI QUEST（今日から始めるAI生活）
📹️YouTube：AI QUEST（今日から始めるAI生活）
📝noteでも、たまにAIなどの記事を書いています。
🎟️お得な招待コード
💡★イチオシ★無料で高機能なAI検索エンジン「Felo」（月額100円引きの招待コード）
💡Perplexity Pro（初月10ドルの招待コード）
💡Genspark（フル機能が1ヶ月無料で使える招待コード）
| ここから先は有料コンテンツです |
| |
| この続き：26507文字 / 画像21枚 |