Claude Codeを起動してサイトを作る
前回作成したディレクトリで、ターミナルに claude と入力してClaude Codeを立ち上げます。
今回は簡単なポートフォリオサイトを作ってみます。シンプルに「自分用のポートフォリオサイトを作っていきたいので作ってみてください」と伝えるだけで形になります。
指示の出し方
Claude Codeに指示を出すと、技術的な確認が返ってくることがあります。例えば「フレームワークは何を使いますか？」「デザインの方向性は？」といった質問です。
今回は以下のように答えました。
- 技術：HTML・CSS・JavaScriptだけでお願いします
- デザイン：ミニマルな感じで、白と黒基調でお願いします
- セクション：新たに考えてください。名前と肩書きは後でお伝えします
デザイン指定のコツ
「モダン」と指定すると、よくある紫のグラデーションが使われがちです。AIっぽさをなくしたい場合は、ミニマルやエレガントなど、具体的なデザイン用語を使うと良いです。参考サイトのURLを貼り付けて「このデザインに合わせてください」と指示することも可能です。
許可の出し方
実行前に許可を求められます。選択肢は2つあります。
- 1番：今回だけ許可
- 2番：このセッション内はすべて許可（おすすめ）
毎回の許可が面倒な場合は、起動時に --dangerously-skip-permissions オプションを指定すれば、全自動で実行してくれます（後のレッスンで解説）。
完成したサイトの確認方法
約20秒ほどで完成します。作成された index.html を確認するには、以下の方法があります。
- Ctrl + B でサイドバーを表示
index.htmlを右クリック →「Reveal in File Explorer」- エクスプローラーで
index.htmlを右クリック → Google Chromeで開く
自分の情報を反映させる
Claude Codeはネット検索機能（WebSearchツール）を持っているので、「〇〇で検索してポートフォリオサイトに設定してください」と伝えれば、自動で情報を取得して反映してくれます。SNSのプロフィールURLを貼り付ける方法でもOKです。
Claude Codeの仕組み
Claude Codeはツールと呼ばれる機能群を使って動作しています。WebSearch、Write、Read、Edit、Grepなど、様々なツールを呼び出してファイルの作成・書き換え・削除を行います。
