はじめに：作るサイトと、Claude Code の準備 | SkillhubAI（スキルハブエーアイ）

このレッスンでできること

この講座で作るサイトのできあがりを見て、Claude Code を入れ、練習用フォルダで最初のお願いを1つ送ります。

受講生

AIでWebデザインって、
デザイナーの仕事がなくなるってこと？

先生

いいえ。AIが速くするのは
手を動かす部分です。
選ぶ・決める・見直すのは、あなたです。

受講生

何を作るの？

先生

小さなヨガ教室「ひだまりヨガ」のサイトを、
6回かけて1つずつ育てます。
できあがりを先に見てみましょう。

ひだまりヨガは、駅から歩いて5分、古い家を直した2階の小さな教室（定員8名）です。先生から「あたたかくて、落ち着いた感じにしたい。はじめての人が安心できるように」と相談を受けた、というお話で進めます。

レッスン	あなたが決めること	Claude Code がやること
① 雰囲気	3つの案から1つ選ぶ	色・フォント・言葉・見本を3案ぶん作る
② 配色とフォント	使う案を伝える	読みやすさ（コントラスト比）を計算して色を直す
③ トップページ	区切りの順番を決める	決まりどおりにページを組む
④ スマホ	崩れを見つけて言葉にする	スマホの見た目を直す
⑤ 写真	どの写真をどこに入れるか	写真を縮めて軽くし、差しかえる
⑥ 見直し	直す所を選ぶ	プロの目で見直し、選んだ所を直す

ターミナル入門の続きです

ターミナル入門で覚えた cd・ls や「AIが確認を出したら、読んでから Enter」は、そのまま使えます。この講座では、ターミナルで動く AI を Claude Code（Anthropic の AI）に替えます。

準備1：Claude Code を入れる（はじめの1回だけ）

1ターミナルを開いて、下の1行を貼り、Enter

2「Claude Code successfully installed!」と出るまで待つ（このiMacでは約5分）

3claude と打って Enter。文字の色を選んだあと、サインインの方法を選ぶ画面が出ます

4「1. Claude account…」を選ぶと、ブラウザが開きます。画面の案内にそってサインインし、ターミナルに戻ります

貼る1行（Mac）

curl -fsSL https://claude.ai/install.sh | bash

ここがポイント

Claude Code を使うには、Claude のアカウントが要ります。どのプランで使えるか・料金は、この講座では書きません（変わることがあるため）。公式の案内で確かめてください。サインインしたあとの画面は、この講座では撮っていません。

準備2：練習用フォルダを開く

練習用フォルダをダウンロード

hidamari_yoga.zip（数KB）・教室のメモが1つだけ入っています

1ダウンロードしたら、出てきた「ひだまりヨガ」フォルダをデスクトップに移します（中は「教室のメモ.txt」1つだけ）

2ターミナルで cd ~/Desktop/ひだまりヨガと打ち、Enter（このフォルダに入る）

3ls と打って Enter。「教室のメモ.txt」と出れば、正しいフォルダにいます

ここがポイント

この講座では、ずっとこのフォルダで作業します。隣に別のファイルを置かないでください。AIが関係ないファイルまで読みに行くことがあります。

見本：Claude Code を起動して、最初のお願いを送る

録画（早送り）起動 → フォルダの信頼 → メモを読んでもらう（早送り）

このiMacでの実測（2026年10月19日・Claude Code）

頼んでから返事まで：4秒（画面の表示）

確認の画面：1回（最初にフォルダを使ってよいかを聞かれただけ）

あなたの番：起動してみよう

受講生

英語の画面が出た！

先生

「このフォルダを使ってよい？」です。
最初は No にカーソルがあるので、
↓を1回押してから Enter です。

お願いカード

教室のメモ.txt を読むどんな教室か3行で

貼る文（全文）

教室のメモ.txt を読んで、どんな教室か3行で教えてください。

こうなっていればOK

つまずきやすいところ

こうなったら：「command not found: claude」と出る

こうする：ターミナルを一度閉じて、開き直します。それでも出るときは、入れ方の1行をもう一度流します。

こうなったら：「No, exit」のまま Enter を押して終わってしまった

こうする：もう一度 claude と打ちます。今度は↓で「Yes, I trust this folder」に合わせてから Enter。

こうなったら：メモの中身とちがうことを言う

こうする：ls で、いるフォルダが「ひだまりヨガ」か確かめます。ちがうときは /exit で終わり、cd で入り直してから claude を起動します。

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

まとめ

この講座では、ヨガ教室のサイトを6回で育てる
Claude Code は1行で入れて、ブラウザでサインインする
練習用フォルダの中で claude を起動。フォルダの信頼は↓で Yes

準備ができました！
次のレッスンでは、教室のメモからサイトの雰囲気の案を3つ作ってもらいます。

レッスン一覧へ