① 雰囲気を決める：3つの案をムードボードで見比べる

受講生

雰囲気を決めるのって、
参考サイトを集めて…
いつも半日かかるんです。

先生

そのたたき台を Claude Code に作ってもらいます。
色の番号もフォントも、
3案ぶん並べてくれます。

ムードボード（雰囲気を伝えるための、色や文字や写真を集めた1枚）は、お客さんと「どんな感じにするか」をそろえるための道具です。今回は、トップの一番上の見本まで入れてもらいます。

見本：Claude Code でのムードボード作り

録画（早送り）頼んでから、ムードボードができるまで（早送り）

AIが作った実物Claude Code が作った moodboard.html（ブラウザで開いたところ）

あなたの番：3つの案を作ってもらおう

レッスン0と同じように、ひだまりヨガのフォルダで claude を起動してから、この文を貼ります。

貼る文（全文）

教室のメモ.txt を読んで、ひだまりヨガのサイトの雰囲気の案を3つ考えてください。案ごとに、色5つ（色の番号つき）、見出しと本文のフォント（Google Fonts）、雰囲気を表す言葉3つ、トップの一番上の見本を入れて、moodboard.html という1枚のページにまとめてください。3案を並べて見比べられるようにしてください。

受講生

英語の画面が出た！

先生

「このファイルを作ってよい？」です。
名前が moodboard.html なら、
1. Yes のまま Enter で大丈夫。

/exit で Claude Code を終えてから open moodboard.html と打つと、ブラウザでページが開きます（Finder でフォルダを開いて、moodboard.html をダブルクリックしても同じです）。

こうなっていればOK

どれを選ぶ？

お客さんの希望は「あたたかくて、落ち着いた感じ」「木と、窓から入る朝の光」でした。この講座では、木と落ち着きにいちばん近い案B（木の部屋）で進めます。Claude Code も画面の最後に「AかBが近い。はじめての人の安心を一番にするならC」と、選ぶときの目安を書いてくれました。あなたの画面の案は、見本とちがっていて大丈夫です。近いものを1つ選んでください。

つまずきやすいところ

※「実際の画面」「録画」は、2026年10月19日に吉田のiMac（Mac）のターミナルで、Claude Code 2.1.303 を動かして撮ったものです。確認の画面は「毎回たずねる」設定のまま、毎回中身を読んでから選びました。アカウントの情報（メールアドレス・プラン名）は消してあります。どのプランで同じことができるか、Windows でどう見えるかは、この講座では確かめていません。作業時間は、画面に出た Claude Code の作業時間（「✻ … for 1m 14s」など）です。