Tatami Works 勉強会 · 体験ラボ

打つと、その場で変わる。

映画データを使って、JSON・YAML を自分の手でさわってみましょう。まちがえても大丈夫、なんど試してもOKです。

📱 スマホでもそのまま使えます
ジャンプ → ① JSONラボ ② JSON⇄YAML変換 ③ AI指示書メーカー ④ データビルダー ⑤ AIラウンドトリップ ⑥ 使う？使わない？ ⑦ スライドラボ
1

JSONラボ — 読んで・直して・表にする

映画JSONを打ちかえると、正しいか即チェック。「表にする」ボタンで、データが表に変身します。
やってみよう 1・2 に対応
JSON ここに打つ（自由に書きかえてOK）
⏳読み込み中…
🎬 結果
「📊 表にしてみる」を押すと、
JSONが映画ランキング表に変わります。
💡 つまずきポイント：文字は " " で囲む・項目の間は , で区切る・いちばん最後の項目にはカンマを付けない。エラーが出たら、赤いメッセージのヒントを読んでみてください。
2

JSON ⇄ YAML 変換ラボ

片方を打つと、もう片方がリアルタイムで変わります。「同じ中身が、形を変えるとどう見えるか」を体感。
やってみよう 3 に対応
JSON ここに打つ
↔️右にリアルタイムで変換されます
YAML 変換結果（読み取り専用）
コピーしました！
3

AI指示書メーカー（YAML）

条件をえらぶと、AIへの指示書（YAML）と、コピペで使えるプロンプトが自動でできます。
やってみよう 4・5 に対応
🔬 同じ条件を「自由文」と「YAML」の2通りで作りました。どちらもそのままAIに貼れます。両方コピーして、AIの返事や直しやすさを見比べてみましょう。
A・自由文 ふつうの文章で書くと
prompt-text.txtTEXT
コピーしました！
B・YAML 条件を整理して書くと
prompt-yaml.txtYAML
コピーしました！
自由文：手軽ですぐ書ける。でも条件が文章に埋もれて抜け漏れに気づきにくく、あとで一部だけ直したり使い回すのが少し大変。
YAML：条件が一覧になり抜け漏れが一目でわかる。1項目だけ直す・テンプレとして使い回す・チームで共有…が得意。
4

映画データビルダー — 打つと、JSON/YAMLが育つ

表に打ちこむだけ。むずかしい記号は書かずに、下のJSONとYAMLがリアルタイムで組み上がります。行の追加・編集・削除・並べ替え、ぜんぶさわれます。
「編集」をたっぷり体験
順位タイトル国興行収入 (USD)
JSON できあがったJSON
movies.jsonJSON
コピーしました！
YAML できあがったYAML
movies.yamlYAML
コピーしました！
5

AIラウンドトリップ — 送って、受け取って、直す

AIに指示を送り、返ってきたデータを自分の手で直して使う一連の流れを体験します。AIの出力は、形が正しくても中身が正しいとは限りません。
やってみよう 5 ＋「事実確認」を体験
1作って送る：③のAI指示書メーカーでプロンプトを作り、ChatGPT や Claude に貼りつけます。
2受け取る：AIが返した JSON を、下の枠に貼りつけます。（AIがない人は「🤖 デモAIで受け取る」でOK）
3直す：抜けや、あやしい数字を見つけて手で直し、「📊 表で確認」で仕上がりをチェック。
JSON AIから受け取ったデータ（直せます）
📥「🤖 デモAIで受け取る」を押すか、AIの出力を貼りつけてください
🎬 直したデータを確認
受け取ったデータを直したら、
ここで表にして確かめられます。
🔎 デモAIの出力には、わざと2か所の“まちがい”を入れています。どこがおかしいか探して直してみましょう（ヒント：抜けている項目と、ケタのおかしい数字）。これが「AIの出力は事実確認が必要」ということ。
本物のAIで試すときの手順
① 上の ③ AI指示書メーカー で「📋 プロンプトをコピー」
② ChatGPT / Claude / Gemini などに貼って送信
③ 返ってきた JSON部分だけをコピーして、この「AIから受け取ったデータ」欄に貼る
④ 抜け・あやしい数字を直して「📊 表で確認」。おかしければ AIにもう一度「ここを直して」と頼めばOK。
6

使う？ 使わない？ — AIの答えで、こんなに変わる

同じ質問「2025年の映画トップ3を教えて」を、ふつうに文章で頼む場合と、JSONで受け取る場合で。そのあと何ができるかが、まるで別ものです。
JSON/YAMLを「使う効果」を体感
❌ 使わない（ふつうに文章で）
あなたの依頼
2025年のヒット映画トップ3を教えて
「🤖 AIに聞いてみる」を押すと、AIの返事が出ます
この答えを使って…
⭕ 使う（YAMLで頼み、JSONで受け取る）
あなたの依頼（YAML）
task: 2025年 映画トップ3 output_format: JSON fields: [rank, title, country, gross]
「🤖 AIに聞いてみる」を押すと、JSONで返ってきます
この答えを使って…
💡 同じ質問でも、受け取り方でこんなに違う。文章はそのまま読むには良いけれど、表にする・並べ替える・抜けを見つけるのは手作業。JSONなら全部ボタン一発。だから「AIにデータを頼むときはJSONで」なのです。
7

Marp風スライドラボ — YAMLでスライドの見た目が変わる

「Markdown＋先頭のYAML」でスライドを作る Marp というツールの世界を、ミニ再現。YAMLを1行書きかえると、スライドのプレビューがその場で変わります。
やってみよう 7 に対応
YAML＋Markdown ここに打つ（自由に書きかえてOK）
⏳読み込み中…
🖥️ スライドのプレビュー（自動更新）
💡 試すこと：① paginate: true を false に → ページ番号が消える　② theme: を gaia や uncover に　③ footer: を自分の名前に　④ 本文に --- の行を足す → スライドが1枚増える。
色コードは backgroundColor: "#FFF8E1" のように " " で囲みます（YAMLでは # から後ろがメモ扱いになるため）。
🖥️ これは体験用のミニ再現です。このミニ版が表示できるのは見出し・箇条書き・太字などの基本だけ。本物は無料ツール Marp（マープ）で、画像・リンク・表などふつうの Markdown も全部使えます。VS Code の拡張機能「Marp for VS Code」を入れると、今と同じ「Markdown＋YAML」の書き方で本物のスライド（PDF・PowerPoint出力も可）が作れます。今日の3点セットが、そのまま実務ツールになっている例です。