桜龍の名札で学ぶ　受講生用 図解でわかる YAML_202610130621

図解でわかる YAML 桜龍の名札で学ぶ 受講生用 パソコンが苦手でも大丈夫。 絵を見ながら、ひとつずつ プログラミング経験は要りません

この図解で分かる 8つのこと ♡ 1 3 5 7 YAMLってなに？ 気持ちが名札になるまで 見えない空白 半角と全角のちがい ならびと項目 いっしょに入れられない理由 描かないものの伝え方 書いたものは描かれやすい 図解でわかるYAML 桜龍の名札で学ぶ 2 4 6 8 1行のしくみ 項目名・区切り・中身 字下げ 小箱の中の小箱 設計図の地図 名札のどこを決めているか 変える所・変えない所 3つの箱に分ける 2

YAMLを学ぶと、こんなにうれしい ★ 思 揃 再 伝 話 思いどおりに 近づく 雰囲気が そろう 何度でも 使える 人に 渡せる AIとの会話が 上手に 「やさしい雰囲気で」 が、ぶれずにAIに伝 わる 何枚つくっても、同じ お店の名札に見える 一度書けば、名前や イベントを変えるだけ 仲間に設計図を渡せ ば、同じ雰囲気でつく れる 気持ちをことばに分 ける力は、ほかでも 役立つ ヒント ぜんぶを一度に目指さなくて大丈夫。まずは「思いどおりに近づく」を体験しましょう 図解でわかるYAML 桜龍の名札で学ぶ 3

学ぶ前と、学んだ後 ★ 学ぶ前 学んだ後 頼み方 毎回、長い文章で説明する メモを貼るだけ 仕上がり 1枚ごとに、雰囲気がばらばら 何枚でも、同じ雰囲気でそろう 直し方 どこを直せばいいか分からない 気になる1行だけ直せばいい ヒント 最初はみんな「学ぶ前」から始まります。うまくいかないのは、あなたのせいではありません 図解でわかるYAML 桜龍の名札で学ぶ 4

★ こんな場面で使える お茶会・交流会の名札 教室・サロンのメニュー表 推し活のオリジナルカード この講座でつくるもの 季節ごとに色を着せ替え 推しカラーで世界観を統一 季節のお便り・案内状 SNSに載せる告知画像 ハンドメイド作品のタグ 毎月の行事を差し替えるだけ 毎回同じ雰囲気で、すぐ分かる 作品名だけ変えて量産 ヒント この講座の「変えない所・変える所」の考え方は、どの場面でもそのまま使えます 図解でわかるYAML 桜龍の名札で学ぶ 5

学ぶときの 6つのヒント ★ ぜんぶ覚えなくていい 1 1回に1か所だけ 2 見本をコピーして、少しずつ変えればOK 変えた所が分かると、楽しくなる 空白は半角 迷ったら日本語に 3 4 エラーの多くは、目に見えない空白から 訳してみると、分からない所が見つかる 疲れたら 1枚つくる AIに聞いてもいい 5 6 「このYAMLのまちがいを教えて」と頼める 図解でわかるYAML 桜龍の名札で学ぶ 絵ができると元気が出る。ひと休みも学び 6

★ はじめる前の、よくある心配 Q パソコンが苦手です A コピーと貼りつけができれば大丈夫。ゆっくり進めましょう Q 英語が苦手です A 項目名は見本のままコピー。中身は日本語で書けます Q プログラミングは必要？ A いりません。YAMLはプログラムではなく、注文メモの書き方です Q 特別なソフトはいる？ A メモ帳と、画像をつくれるAIがあれば始められます ヒント 分からないことはQ&Aへ気軽に。質問は、つまずいた場所を教えてくれる宝物です 図解でわかるYAML 桜龍の名札で学ぶ 7

YAMLは、AIへの「注文メモ」の書き方 1 あなたの気持ち 注文メモ（ YAML） 画像AI 桜龍の名札 やさしい・幻想的 ことばに分けて書く メモを読んで描く 毎回少しちがう 口で頼むと… メモに書くと … 言うたびに順番も言い方も変わり、仕上がりもばらば ら 書く場所が決まっているので、いつも同じ注文が伝わ る ひとことまとめ YAMLは、メモの「書く場所の決め方」。動くプログラムではありません 図解でわかるYAML 桜龍の名札で学ぶ 8

1行は、3つのパーツでできている 2 base : "淡いクリームホワイト" 1 2 3 ① 項目名 ② 区切り（コロン＋空白） ③ 中身 何についての注文か 「ここで分けます」のしるし 注文の中身 英語の小文字と _ で書く うしろに半角スペースを1つ 日本語は " " でつつむと安心 ひとことまとめ 左が「何を」、真ん中が「区切り」、右が「どんなふうに」 図解でわかるYAML 桜龍の名札で学ぶ 9

目に見えない「空白」にも、半角と全角がある 2 コロンのうしろ コロンそのもの ◯ 半角スペース 1つ base: "クリーム" 点線の箱が 細いすき間 : ： 半角 ◯ 全角 ✕ 日本語入力のままだと 全角になりがち 行のはじめの字下げ color: "桜ピンク" ひとことまとめ ◯ 半角2つ color: "桜ピンク" ✕ 全角1つ 見た目は同じ幅 記号と行のはじめの空白は、ぜんぶ半角。 " " の中の名前の空白は全角で OK 図解でわかるYAML 桜龍の名札で学ぶ 10

字下げは「小箱の中の小箱」 3 typography（文字の箱） typography: header: header（小見出しの箱） text: " 幸 青龍…" color: " 桜ピンク" 色の帯1つ＝半角スペース2つ＝1段内側 ひとことまとめ text：幸 青龍ファン感謝祭 color：桜ピンク 字下げの深さ＝小箱の深さ。同じ箱の中身は、同じ深さにそろえる 図解でわかるYAML 桜龍の名札で学ぶ 11

字下げを「家系図」で見ると 3 字下げなし 半角2つ 半角4つ text: "幸 青龍…" header: color: "桜ピンク" typography: text: "金運が…" title: color: "ゴールド" 「親」の下に「子」がぶら下がる。右に行くほど、字下げが深くなる 図解でわかるYAML 桜龍の名札で学ぶ 12

「ならび」と「項目」はちがうもの 4 ならび（- ） 項目（名前: 中身） おなじ種類のものを、順番に並べる 名前のついた引き出し。名前で取り出す - 淡い桜の花 - 柔らかな雲 style decoration - 淡いピンク・クリーム… 桜モチーフ 金色の水流 ひとことまとめ ならびは「順番で」、項目は「名前で」中身を取り出す 図解でわかるYAML 桜龍の名札で学ぶ 13

ひとつの小箱に、ならびと項目は同居できない 4 ✕ 同じ小箱にまざっている ◯ ならびを items の小箱へ information_panels information_panels - きっかけ items - 好き - きっかけ style: … style: … - 好き - 出身 decoration: … - 出身 どっちの箱？と AIが迷って読めない ひとことまとめ ならびは items という小箱に入れて、項目と別にする 図解でわかるYAML 桜龍の名札で学ぶ 14

設計図の地図 名札のどこを決めているか 5 typography （タイトル） 名札全体にかかる部品 emblem 金運上昇 design テーマ color_palette 色 background 花・雲・水 main_ illustration layout 配置と余白 nameplate （名前の板） quality 仕上げと avoid 桜龍 panel きっかけ 図解でわかるYAML 桜龍の名札で学ぶ panel 好き panel 出身 15

書いたものは、描かれやすい 6 ✕ woman: に 「削除」と書く 「女性」「右下」の ことばがAIに届く かえって描かれる ことがある ◯ 描くリストから 項目ごと消す avoid に 「人物」とだけ書く 描かれにくい たとえ：「ピンクの象を想像しないで」と言われると、つい想像してしまう。 AIも同じ ひとことまとめ 描かないものは、描くリストに書かない。 avoid にだけ書く 図解でわかるYAML 桜龍の名札で学ぶ 16

3つの箱に分ける brand・event・card 7 brand 変えない event イベントごと card 1人ずつ 色・桜龍・背景 光・配置・avoid タイトル 印章の文字 3つの欄の見出し 名前 書きかえ 0回 ひとことまとめ イベントごとに 1回 30人なら30回 箱の大きさ＝中身の多さ。いちばん大きい brand は、いちばん触らない 図解でわかるYAML 桜龍の名札で学ぶ 17

7 どの箱に入れる？ 2つの質問で決める はい Q1 1人ずつちがう？ card 1人ずつ（名前） いいえ はい Q2 イベントで変わる？ event brand イベントごと（タイトル） 変えない（色・龍） いいえ 図解でわかるYAML 桜龍の名札で学ぶ 18

まちがいを防ぐ 3つの習慣 8 · · 半 ✓ 空白を見えるように 記号は半角モードで チェックツールに通す VS Codeなどのエディタは、空白を 点で見せてくれる。メモ帳より安心 「：」「－」を日本語入力のまま打つ と全角に。記号の前に半角へ 「YAML 構文チェック」などのWeb ツールは、読みとった形を見せてく れる ひとことまとめ お仕事のPCでは、外のWebサイトに貼ってよいか先に確認しましょう 図解でわかるYAML 桜龍の名札で学ぶ 19

YAML記号の早見カード 8 : - [ ] 区切り 字下げ ならび 1行ならび 項目名と中身を分ける 半角2つで1段内側 順番に並べる 並びを1行で " " # items avoid ひとまとめ メモ ならびの小箱 入れないもの 中身をつつむ AIには届かない 項目とまぜない 描かないものはここ 図解でわかるYAML 桜龍の名札で学ぶ 20

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

ワークショップ YAMLを日本語に訳してみよう WS ゴール：見本の YAMLを、ふつうの日本語の文章に訳せる 1 読む YAMLを1行ずつ 指でなぞる お題1 やさしい 色 図解でわかるYAML 桜龍の名札で学ぶ 2 訳す 3 次のスライドで 見くらべる 1行を1文に メモに書く お題2 ふつう 主役と背景 答え合わせ お題3 ちょっと難しい 情報欄と avoid お題4 チャレンジ 日本語→YAML 22

WS 訳し方の型 この 5つだけ覚えれば OK YAMLの形 日本語にすると 例 訳 項目名 : 中身 「項目名は、中身」 color: "ゴールド" 色はゴールド 字下げ（小箱の中） 「〇〇の」「〇〇について」 dragon: type: "桜龍" 龍の種類は桜龍 - ならび 「AとBとC」 - "桜" - "雲" 桜と雲 avoid 「〜は入れない」 avoid: - "怖い龍" 怖い龍は入れない # メモ 訳さない（自分へのメモ） # 変えない所 （訳さない） 図解でわかるYAML 桜龍の名札で学ぶ 23

例題 いっしょに訳してみよう WS typography: 1 header: 2 text: "幸 青龍ファン感謝祭" 1 typography は「文字の箱」 3 4 文字について 2 color: "上品な桜ピンク" 小見出しの header の小箱の中に入る 3 「幸 青龍ファン感謝祭」と書き text は表示する文字そのもの 4 色は上品な桜ピンク color は色 訳の例 小見出しには「幸 青龍ファン感謝祭」と書き、色は上品な桜ピンクにする。 図解でわかるYAML 桜龍の名札で学ぶ 24

WS お題1（やさしい） 色の設計図を訳そう color_palette: あなたの日本語訳 base: "淡いクリームホワイト" sakura_pink: "桃色 10%" light_green: "黄緑色 10%" accent: "上品なゴールド" 考える時間 3分。ヒント：10% は「1割」「少しだけ」と訳せます ファイル：09_WS_odai1.yaml 図解でわかるYAML 桜龍の名札で学ぶ 25

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

お題2（ふつう） 主役と背景を訳そう WS main_illustration: あなたの日本語訳 dragon: type: "桜龍" position: "左側" expression: "優しく穏やかな表情" background: elements: - "淡い桜の花" - "柔らかな雲" 考える時間 3分。dragon の小箱の中は、ぜんぶ龍の説明 ファイル：09_WS_odai2.yaml 図解でわかるYAML 桜龍の名札で学ぶ 27

お題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

お題3（ちょっと難しい） 情報欄と avoid を訳そう WS information_panels: あなたの日本語訳 items: - label: "きっかけ" - label: "好き" - label: "出身" decoration: "桜モチーフ" quality: avoid: - "怖い龍" - "人物・キャラクター" 考える時間 4分。ヒント：avoid は「〜は入れない」 ファイル：09_WS_odai3.yaml 図解でわかるYAML 桜龍の名札で学ぶ 29

お題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

WS お題4（チャレンジ） 日本語を YAMLに逆訳しよう この日本語を あなたの YAML 名前の板には「佐藤 花子」と書く。 文字は大きな明朝体で、色はゴールド。 ふちは細い金の装飾にする。 使う項目名：nameplate / text / style / color / border 考える時間 5分。コロンのうしろは半角空白、字下げは半角2つ 09_WS_odai4.yaml 図解でわかるYAML 桜龍の名札で学ぶ 31

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

ワークショップのふりかえり WS 訳せたところ むずかしかったところ AIで答え合わせ もうYAMLが読めている所。自信 をもって大丈夫 図解のスライドに戻って見直す。 字下げとならびが多いつまずき 「このYAMLを日本語の文章にし て」とAIに頼むと、自分の訳と見 くらべられる ひとことまとめ 日本語に訳せる＝ YAMLが読めている。感想は Q&Aで教えてください 図解でわかるYAML 桜龍の名札で学ぶ 33

絵で分かれば、 書けます • • • • • • 1行は「項目名・区切り・中身」 字下げは小箱の中の小箱 ならびと項目は別の小箱へ 描かないものは avoid にだけ 変えない・イベント・1人ずつに分ける 日本語に訳せたら、もう読めている