⑤ 表と画像：読みやすくする表と、画像の差しこみ

受講生

文字ばかりだと、読むのが大変そう…。

先生

比べるもの・並べるものは表に、
記事の顔にはアイキャッチ画像（記事のいちばん上の画像）を入れます。
表と差しこみは Claude Code に頼めます。画像づくりは、あとで話します。

このレッスンの全体図

まず、撮影で起きたこと：画像も作ってもらおうとした

最初は、「アイキャッチ画像を1枚作って images/eyecatch.png に保存して。明るい小さな教室で、大人の生徒と先生が英語で話している様子、横長、文字は入れないで」と、画像づくりも頼みました。

Claude Code は、写真のような画像を作ったのではありません。Python（Pillow という道具）のプログラムを書いて、四角や丸を組み合わせた、簡単なイラストを描きました。確認の画面に、その絵を描くプログラムが出てきます。

実際の画面赤枠：画像を保存する行（images/eyecatch.png）。絵を描くプログラムの確認が出た

イメージそのときできた画像（1200×630）。窓・黒板・机・2人の人物を、四角と丸で描いたイラスト

そこで、頼み方を変えて撮り直しました。次の見本は、用意した画像を差しこむ頼み方です。

見本：実際の画面（早送り）

録画（早送り）お願いを貼る → 表と画像を入れる → 確認ページを作る（早送り）

あなたの番

1. 画像を用意する

画像は、Canva や画像づくりの AI など、別の道具で作ります。ここでは練習なので、見本の画像（上の絵）を使います。下のボタンでダウンロードします。

2. 表と画像と確認ページを頼む

貼る文（全文）

draft.md の「中学英語を忘れていても心配いらない」の見出しの下に、体験メモ.txt にある練習の工夫を、表（「こんなとき」「教室でしていること」の2列、4行）にして足してください。メモにないことは書かないでください。次に、images/eyecatch.png を draft.md の1行目の下に入れて、画像の説明文（alt）も書いてください。画像は別の道具で用意したものなので、作り直さないでください。最後に、draft.md を見た目つきで確かめられる preview.html を作ってください（画像と表も表示）。

実際の画面赤枠：貼った文（claude を開いたままの続きです。/clear は、しなくてもかまいません）

確認の画面が出ます。この見本では、まず「使える道具があるか」を見る命令（読むだけ）、次に「draft.md を直して、preview.html を作る」命令（python3 の短いプログラム）、最後に確認ページを作り直す命令の、3回でした。どのファイルに何を書く命令かを読んでから、1番です。

実際の画面赤枠：確認の画面。draft.md の画像と表を足し、preview.html を作る命令。作業フォルダの中のファイルだけを書く

実際の画面終わると、表の4行・画像の説明文（alt）・確認ページの報告が出る。「preview.html を開いて確かめたわけではありません」と、自分で書いていた

できたページを開く

見た目を確かめるには、Finder で「ひだまり英会話」フォルダを開き、preview.html をダブルクリックします。ブラウザで開きます。

こうなっていればOK

受講生

この画像、ブログにそのまま使っていい？

先生

見本の画像は、本物の教室の写真ではありません。
使うなら「イメージです」と分かるようにするか、
本物の写真に差しかえます。人の顔が写る画像は、とくに気をつけます。
画像を差しかえても、表と説明文はそのまま使えます。

つまずきやすいところ

※「実際の画面」と録画は、2026年10月19日に吉田のiMac（Mac）のターミナルで、Claude Code（2.1.303）を動かして撮ったものです。モデルは Sonnet 5.5。確認の画面は、最初の設定のまま（毎回たずねる）で、毎回中身を読んでから自分で選びました（自動で許可する設定は使っていません）。時間は「たのんでから、入力欄にもどるまで」で、確認に答えた時間もふくみます。撮影用の作業フォルダの場所は /private/tmp/… です（あなたの画面では、フォルダを置いた場所が出ます）。どのプランで同じことができるか、Windows でどう見えるかは、この講座では確かめていません。アカウントの情報は消してあります。AI の答えの文は、毎回すこしずつちがいます。「ひだまり英会話教室」は架空の教室です。