--- title: 桜龍の名札で学ぶ　受講生用 図解でわかる YAML_202610130621 tags: author: [Yukiko](https://www.docswell.com/user/yukiko_it) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/Y76W98K97V.jpg?width=480 description: 桜龍の名札で学ぶ　受講生用 図解でわかる YAML_202610130621 by Yukiko published: October 13, 26 canonical: https://www.docswell.com/s/yukiko_it/ZR843W-2026-10-13-062127 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/Y76W98K97V.jpg) 図解でわかる YAML 桜龍の名札で学ぶ 受講生用 パソコンが苦手でも大丈夫。 絵を見ながら、ひとつずつ プログラミング経験は要りません # Page. 2 ![Page Image](https://bcdn.docswell.com/page/G75MN9PD74.jpg) この図解で分かる 8つのこと ♡ 1 3 5 7 YAMLってなに？ 気持ちが名札になるまで 見えない空白 半角と全角のちがい ならびと項目 いっしょに入れられない理由 描かないものの伝え方 書いたものは描かれやすい 図解でわかるYAML 桜龍の名札で学ぶ 2 4 6 8 1行のしくみ 項目名・区切り・中身 字下げ 小箱の中の小箱 設計図の地図 名札のどこを決めているか 変える所・変えない所 3つの箱に分ける 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/9J2952ZMER.jpg) YAMLを学ぶと、こんなにうれしい ★ 思 揃 再 伝 話 思いどおりに 近づく 雰囲気が そろう 何度でも 使える 人に 渡せる AIとの会話が 上手に 「やさしい雰囲気で」 が、ぶれずにAIに伝 わる 何枚つくっても、同じ お店の名札に見える 一度書けば、名前や イベントを変えるだけ 仲間に設計図を渡せ ば、同じ雰囲気でつく れる 気持ちをことばに分 ける力は、ほかでも 役立つ ヒント ぜんぶを一度に目指さなくて大丈夫。まずは「思いどおりに近づく」を体験しましょう 図解でわかるYAML 桜龍の名札で学ぶ 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/DEY4KYRPJM.jpg) 学ぶ前と、学んだ後 ★ 学ぶ前 学んだ後 頼み方 毎回、長い文章で説明する メモを貼るだけ 仕上がり 1枚ごとに、雰囲気がばらばら 何枚でも、同じ雰囲気でそろう 直し方 どこを直せばいいか分からない 気になる1行だけ直せばいい ヒント 最初はみんな「学ぶ前」から始まります。うまくいかないのは、あなたのせいではありません 図解でわかるYAML 桜龍の名札で学ぶ 4 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/VJNYRPDM78.jpg) ★ こんな場面で使える お茶会・交流会の名札 教室・サロンのメニュー表 推し活のオリジナルカード この講座でつくるもの 季節ごとに色を着せ替え 推しカラーで世界観を統一 季節のお便り・案内状 SNSに載せる告知画像 ハンドメイド作品のタグ 毎月の行事を差し替えるだけ 毎回同じ雰囲気で、すぐ分かる 作品名だけ変えて量産 ヒント この講座の「変えない所・変える所」の考え方は、どの場面でもそのまま使えます 図解でわかるYAML 桜龍の名札で学ぶ 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/YE9PM3GWJ3.jpg) 学ぶときの 6つのヒント ★ ぜんぶ覚えなくていい 1 1回に1か所だけ 2 見本をコピーして、少しずつ変えればOK 変えた所が分かると、楽しくなる 空白は半角 迷ったら日本語に 3 4 エラーの多くは、目に見えない空白から 訳してみると、分からない所が見つかる 疲れたら 1枚つくる AIに聞いてもいい 5 6 「このYAMLのまちがいを教えて」と頼める 図解でわかるYAML 桜龍の名札で学ぶ 絵ができると元気が出る。ひと休みも学び 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/GE8DLMVRED.jpg) ★ はじめる前の、よくある心配 Q パソコンが苦手です A コピーと貼りつけができれば大丈夫。ゆっくり進めましょう Q 英語が苦手です A 項目名は見本のままコピー。中身は日本語で書けます Q プログラミングは必要？ A いりません。YAMLはプログラムではなく、注文メモの書き方です Q 特別なソフトはいる？ A メモ帳と、画像をつくれるAIがあれば始められます ヒント 分からないことはQ&Aへ気軽に。質問は、つまずいた場所を教えてくれる宝物です 図解でわかるYAML 桜龍の名札で学ぶ 7 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LELML3527R.jpg) YAMLは、AIへの「注文メモ」の書き方 1 あなたの気持ち 注文メモ（ YAML） 画像AI 桜龍の名札 やさしい・幻想的 ことばに分けて書く メモを読んで描く 毎回少しちがう 口で頼むと… メモに書くと … 言うたびに順番も言い方も変わり、仕上がりもばらば ら 書く場所が決まっているので、いつも同じ注文が伝わ る ひとことまとめ YAMLは、メモの「書く場所の決め方」。動くプログラムではありません 図解でわかるYAML 桜龍の名札で学ぶ 8 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4JMYMD39JW.jpg) 1行は、3つのパーツでできている 2 base : "淡いクリームホワイト" 1 2 3 ① 項目名 ② 区切り（コロン＋空白） ③ 中身 何についての注文か 「ここで分けます」のしるし 注文の中身 英語の小文字と _ で書く うしろに半角スペースを1つ 日本語は " " でつつむと安心 ひとことまとめ 左が「何を」、真ん中が「区切り」、右が「どんなふうに」 図解でわかるYAML 桜龍の名札で学ぶ 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/PJR9V4Q979.jpg) 目に見えない「空白」にも、半角と全角がある 2 コロンのうしろ コロンそのもの ◯ 半角スペース 1つ base: "クリーム" 点線の箱が 細いすき間 : ： 半角 ◯ 全角 ✕ 日本語入力のままだと 全角になりがち 行のはじめの字下げ color: "桜ピンク" ひとことまとめ ◯ 半角2つ color: "桜ピンク" ✕ 全角1つ 見た目は同じ幅 記号と行のはじめの空白は、ぜんぶ半角。 " " の中の名前の空白は全角で OK 図解でわかるYAML 桜龍の名札で学ぶ 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/PEXQZ253JX.jpg) 字下げは「小箱の中の小箱」 3 typography（文字の箱） typography: header: header（小見出しの箱） text: " 幸 青龍…" color: " 桜ピンク" 色の帯1つ＝半角スペース2つ＝1段内側 ひとことまとめ text：幸 青龍ファン感謝祭 color：桜ピンク 字下げの深さ＝小箱の深さ。同じ箱の中身は、同じ深さにそろえる 図解でわかるYAML 桜龍の名札で学ぶ 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/3EK98M6NED.jpg) 字下げを「家系図」で見ると 3 字下げなし 半角2つ 半角4つ text: "幸 青龍…" header: color: "桜ピンク" typography: text: "金運が…" title: color: "ゴールド" 「親」の下に「子」がぶら下がる。右に行くほど、字下げが深くなる 図解でわかるYAML 桜龍の名札で学ぶ 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/L73W2Y6Z75.jpg) 「ならび」と「項目」はちがうもの 4 ならび（- ） 項目（名前: 中身） おなじ種類のものを、順番に並べる 名前のついた引き出し。名前で取り出す - 淡い桜の花 - 柔らかな雲 style decoration - 淡いピンク・クリーム… 桜モチーフ 金色の水流 ひとことまとめ ならびは「順番で」、項目は「名前で」中身を取り出す 図解でわかるYAML 桜龍の名札で学ぶ 13 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/87DKZ5V4JG.jpg) ひとつの小箱に、ならびと項目は同居できない 4 ✕ 同じ小箱にまざっている ◯ ならびを items の小箱へ information_panels information_panels - きっかけ items - 好き - きっかけ style: … style: … - 好き - 出身 decoration: … - 出身 どっちの箱？と AIが迷って読めない ひとことまとめ ならびは items という小箱に入れて、項目と別にする 図解でわかるYAML 桜龍の名札で学ぶ 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/VJPKDGVVE8.jpg) 設計図の地図 名札のどこを決めているか 5 typography （タイトル） 名札全体にかかる部品 emblem 金運上昇 design テーマ color_palette 色 background 花・雲・水 main_ illustration layout 配置と余白 nameplate （名前の板） quality 仕上げと avoid 桜龍 panel きっかけ 図解でわかるYAML 桜龍の名札で学ぶ panel 好き panel 出身 15 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/2EVV16ZREQ.jpg) 書いたものは、描かれやすい 6 ✕ woman: に 「削除」と書く 「女性」「右下」の ことばがAIに届く かえって描かれる ことがある ◯ 描くリストから 項目ごと消す avoid に 「人物」とだけ書く 描かれにくい たとえ：「ピンクの象を想像しないで」と言われると、つい想像してしまう。 AIも同じ ひとことまとめ 描かないものは、描くリストに書かない。 avoid にだけ書く 図解でわかるYAML 桜龍の名札で学ぶ 16 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/57GL2N46EL.jpg) 3つの箱に分ける brand・event・card 7 brand 変えない event イベントごと card 1人ずつ 色・桜龍・背景 光・配置・avoid タイトル 印章の文字 3つの欄の見出し 名前 書きかえ 0回 ひとことまとめ イベントごとに 1回 30人なら30回 箱の大きさ＝中身の多さ。いちばん大きい brand は、いちばん触らない 図解でわかるYAML 桜龍の名札で学ぶ 17 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/4EQYPQG2JP.jpg) 7 どの箱に入れる？ 2つの質問で決める はい Q1 1人ずつちがう？ card 1人ずつ（名前） いいえ はい Q2 イベントで変わる？ event brand イベントごと（タイトル） 変えない（色・龍） いいえ 図解でわかるYAML 桜龍の名札で学ぶ 18 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/KJ4WYN5P71.jpg) まちがいを防ぐ 3つの習慣 8 · · 半 ✓ 空白を見えるように 記号は半角モードで チェックツールに通す VS Codeなどのエディタは、空白を 点で見せてくれる。メモ帳より安心 「：」「－」を日本語入力のまま打つ と全角に。記号の前に半角へ 「YAML 構文チェック」などのWeb ツールは、読みとった形を見せてく れる ひとことまとめ お仕事のPCでは、外のWebサイトに貼ってよいか先に確認しましょう 図解でわかるYAML 桜龍の名札で学ぶ 19 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/LE1Y65WX7G.jpg) YAML記号の早見カード 8 : - [ ] 区切り 字下げ ならび 1行ならび 項目名と中身を分ける 半角2つで1段内側 順番に並べる 並びを1行で " " # items avoid ひとまとめ メモ ならびの小箱 入れないもの 中身をつつむ AIには届かない 項目とまぜない 描かないものはここ 図解でわかるYAML 桜龍の名札で学ぶ 20 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/GEWGW56KJ2.jpg) 1枚でふりかえり 8 1 # ===== 変えない ===== 1 brand: 2 # はメモ AIには届かない、自分へのお手紙 2 項目名と小箱 brand の中に色や avoid が入る colors: base: " クリーム" 3 3 項目名 : 中身 コロンのうしろに半角スペース avoid: 4 4 - "人物" 入れないものを並べる 5 card: name: "山田 ならび（ - ） 太郎" 図解でわかるYAML 桜龍の名札で学ぶ 5 1人ずつ変える所 " " の中の空白は全角でOK 21 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/47ZL5NYNJ3.jpg) ワークショップ YAMLを日本語に訳してみよう WS ゴール：見本の YAMLを、ふつうの日本語の文章に訳せる 1 読む YAMLを1行ずつ 指でなぞる お題1 やさしい 色 図解でわかるYAML 桜龍の名札で学ぶ 2 訳す 3 次のスライドで 見くらべる 1行を1文に メモに書く お題2 ふつう 主役と背景 答え合わせ お題3 ちょっと難しい 情報欄と avoid お題4 チャレンジ 日本語→YAML 22 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/YJ6W98D9JV.jpg) WS 訳し方の型 この 5つだけ覚えれば OK YAMLの形 日本語にすると 例 訳 項目名 : 中身 「項目名は、中身」 color: "ゴールド" 色はゴールド 字下げ（小箱の中） 「〇〇の」「〇〇について」 dragon: type: "桜龍" 龍の種類は桜龍 - ならび 「AとBとC」 - "桜" - "雲" 桜と雲 avoid 「〜は入れない」 avoid: - "怖い龍" 怖い龍は入れない # メモ 訳さない（自分へのメモ） # 変えない所 （訳さない） 図解でわかるYAML 桜龍の名札で学ぶ 23 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/GJ5MN93DJ4.jpg) 例題 いっしょに訳してみよう WS typography: 1 header: 2 text: "幸 青龍ファン感謝祭" 1 typography は「文字の箱」 3 4 文字について 2 color: "上品な桜ピンク" 小見出しの header の小箱の中に入る 3 「幸 青龍ファン感謝祭」と書き text は表示する文字そのもの 4 色は上品な桜ピンク color は色 訳の例 小見出しには「幸 青龍ファン感謝祭」と書き、色は上品な桜ピンクにする。 図解でわかるYAML 桜龍の名札で学ぶ 24 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/9E2952KM7R.jpg) WS お題1（やさしい） 色の設計図を訳そう color_palette: あなたの日本語訳 base: "淡いクリームホワイト" sakura_pink: "桃色 10%" light_green: "黄緑色 10%" accent: "上品なゴールド" 考える時間 3分。ヒント：10% は「1割」「少しだけ」と訳せます ファイル：09_WS_odai1.yaml 図解でわかるYAML 桜龍の名札で学ぶ 25 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/D7Y4KYNPEM.jpg) WS color_palette: base: "淡いクリームホワイト" sakura_pink: "桃色 10%" light_green: "黄緑色 10%" お題1 答え合わせ 1 1 色について color_palette は「色の箱」 2 3 2 地の色は淡いクリームホワイト base は土台の色 4 accent: "上品なゴールド" 3 桃色と黄緑色を 1割ずつ 2行をまとめて1文にしてもOK 4 アクセントは上品なゴールド accent は少しだけ使う色 訳の例 地の色は淡いクリームホワイト。桃色と黄緑色を1割ずつ、アクセントに上品なゴールド。 図解でわかるYAML 桜龍の名札で学ぶ 26 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/VENYRPXMJ8.jpg) お題2（ふつう） 主役と背景を訳そう WS main_illustration: あなたの日本語訳 dragon: type: "桜龍" position: "左側" expression: "優しく穏やかな表情" background: elements: - "淡い桜の花" - "柔らかな雲" 考える時間 3分。dragon の小箱の中は、ぜんぶ龍の説明 ファイル：09_WS_odai2.yaml 図解でわかるYAML 桜龍の名札で学ぶ 27 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/Y79PM38WE3.jpg) お題2 答え合わせ WS 1 main_illustration: dragon: type: "桜龍" 主役の絵には龍を描く main_illustration の中の dragon 1 2 2 position: "左側" 桜龍で、左側に、優しい表情 小箱の中の3行を1文にまとめる expression: "優しく穏やかな表情" background: 3 elements: 4 - "淡い桜の花" - "柔らかな雲" 3 背景には background の elements 4 淡い桜の花と柔らかな雲 ならびは「AとB」とつなぐ 訳の例 左側に、優しく穏やかな表情の桜龍を描く。背景には淡い桜の花と柔らかな雲。 図解でわかるYAML 桜龍の名札で学ぶ 28 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/G78DLM8R7D.jpg) お題3（ちょっと難しい） 情報欄と avoid を訳そう WS information_panels: あなたの日本語訳 items: - label: "きっかけ" - label: "好き" - label: "出身" decoration: "桜モチーフ" quality: avoid: - "怖い龍" - "人物・キャラクター" 考える時間 4分。ヒント：avoid は「〜は入れない」 ファイル：09_WS_odai3.yaml 図解でわかるYAML 桜龍の名札で学ぶ 29 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/L7LML3R2JR.jpg) お題3 答え合わせ WS 1 information_panels: items の中のならび＝3つの欄 items: - label: "きっかけ" 1 2 - label: "好き" - label: "出身" avoid: - "怖い龍" 飾りは桜モチーフ items と同じ深さの項目 2 3 decoration: "桜モチーフ" quality: 情報欄は「きっかけ」「好き」「出身」 仕上げでは、入れないもの quality の avoid 3 4 4 怖い龍と人物は入れない ならびを「AとB」でつなぐ - "人物・キャラクター" 訳の例 欄は「きっかけ」「好き」「出身」の3つで、桜モチーフで飾る。怖い龍と人物は入れない。 図解でわかるYAML 桜龍の名札で学ぶ 30 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/4EMYMDR9EW.jpg) WS お題4（チャレンジ） 日本語を YAMLに逆訳しよう この日本語を あなたの YAML 名前の板には「佐藤 花子」と書く。 文字は大きな明朝体で、色はゴールド。 ふちは細い金の装飾にする。 使う項目名：nameplate / text / style / color / border 考える時間 5分。コロンのうしろは半角空白、字下げは半角2つ 09_WS_odai4.yaml 図解でわかるYAML 桜龍の名札で学ぶ 31 # Page. 32 ![Page Image](https://bcdn.docswell.com/page/PER9V4R9J9.jpg) WS nameplate: text: "佐藤 花子" style: "大きな明朝体" color: "ゴールド" お題4 答え合わせ 1 1 名前の板 いちばん外の箱は nameplate 2 3 2 「佐藤 花子」と書く " " の中の空白は全角でOK 4 border: "細い金の装飾" 3 大きな明朝体で、色はゴールド 4つとも同じ深さ（半角2つ）にそろえる 4 ふちは細い金の装飾 border はふち 確かめ方 チェックツールに通して読めればOK。答えのファイル：09_WS_answers.yaml 図解でわかるYAML 桜龍の名札で学ぶ 32 # Page. 33 ![Page Image](https://bcdn.docswell.com/page/P7XQZ2R3EX.jpg) ワークショップのふりかえり WS 訳せたところ むずかしかったところ AIで答え合わせ もうYAMLが読めている所。自信 をもって大丈夫 図解のスライドに戻って見直す。 字下げとならびが多いつまずき 「このYAMLを日本語の文章にし て」とAIに頼むと、自分の訳と見 くらべられる ひとことまとめ 日本語に訳せる＝ YAMLが読めている。感想は Q&Aで教えてください 図解でわかるYAML 桜龍の名札で学ぶ 33 # Page. 34 ![Page Image](https://bcdn.docswell.com/page/37K98MRN7D.jpg) 絵で分かれば、 書けます • • • • • • 1行は「項目名・区切り・中身」 字下げは小箱の中の小箱 ならびと項目は別の小箱へ 描かないものは avoid にだけ 変えない・イベント・1人ずつに分ける 日本語に訳せたら、もう読めている