2026.11.05コラム

Claude Codeで始めるWebデザイン入門｜環境づくりから指示の出し方、公開まで

「AIでホームページをつくってみたいけれど、ターミナルやGit、SFTPでつまずいた」。そんな方に向けて、AIのClaude Codeを使ってWebサイトをつくり、公開するまでの手順を、最初の準備から順番にまとめました。CODE4が実際の制作で使っている進め方です。

01最初にそろえるもの

Claude Codeは、パソコンのフォルダの中で、ファイルを読み書きしながらWebサイトをつくってくれるAIです。チャットで答えを受け取るのではなく、AIが実際にファイルを作り、書き換えるのが大きな違いです。始めるのに必要なのは次の6つです。

Claudeの有料プラン: Pro・Max・Team・Enterpriseのいずれか、またはAPI用のConsoleアカウント。無料プランではClaude Codeは使えません。
ターミナル: Macは「ターミナル」、Windowsは「PowerShell」。最初から入っています。
コードエディタ: 無料のVisual Studio Code（VS Code）がおすすめ。AIが作ったファイルを目で確認するのに使います。
Git: 変更の履歴を残す道具。Macは最初にgitと打つと案内が出ます。WindowsはGit for Windowsを入れておくと安心です。
GitHubのアカウント: 履歴をインターネット上に保管する場所。無料で使えます（必須ではありませんが、パソコンが壊れたときの保険になります）。
レンタルサーバー: 完成したサイトを公開する場所。エックスサーバーなど、SFTPが使えるものなら何でも大丈夫です。

02ターミナルの基本

Claude Codeはターミナルで動きます。黒い画面に身構えてしまいがちですが、覚えるのは次の3つだけで十分です。

# いまいるフォルダを表示する
pwd
# フォルダの中身を見る（WindowsのPowerShellでも同じ）
ls
# フォルダを移動する（例：書類フォルダのmy-siteへ）
cd ~/Documents/my-site

作業用のフォルダは、名前を半角英数字にして、デスクトップや書類フォルダの中に作るのがおすすめです。日本語や空白の入ったフォルダ名は、後でエラーの原因になることがあります。

ヒント

Macでは、Finderのフォルダをターミナルにドラッグすると、そのフォルダの場所が入力されます。
VS Codeのメニュー「ターミナル」→「新しいターミナル」を使えば、開いているフォルダでそのままターミナルが開きます。

03Claude Codeを入れる

ターミナルに次のコマンドを1行貼り付けて、Enterを押します。

# Mac・Linux
curl -fsSL https://claude.ai/install.sh | bash

# Windows（PowerShell）
irm https://claude.ai/install.ps1 | iex

終わったら、ターミナルをいったん閉じて開き直し、次のコマンドで確認します。バージョン番号が表示されれば成功です。

claude --version

あとは作業用のフォルダに移動してclaudeと打つと起動します。初回はブラウザが開くので、Claudeのアカウントでログインしてください。

cd ~/Documents/my-site
claude

※インストール方法は変わることがあります。うまくいかない場合は、Claude Codeの公式ドキュメント（code.claude.com）を確認してください。

04Gitで「いつでも戻せる」状態にする

AIにファイルを書き換えてもらう以上、「前の状態に戻せる」ことがいちばんの安心材料です。Gitは、ファイルの変更をセーブポイントのように記録する道具です。最初に一度だけ、作業フォルダで次のように打ちます。

# このフォルダで履歴の記録を始める
git init
# 最初のセーブポイントを作る
git add .
git commit -m "最初の状態"

実は、このあたりの操作もClaude Codeに頼めます。「このフォルダでGitを始めて、最初のコミットをして」と日本語で伝えれば十分です。作業の区切りごとに「ここまでをコミットして」と頼む習慣をつけると、失敗しても怖くありません。

直前の状態に戻したい：「最後のコミットの状態に戻して」と頼む。
どこを変えたか知りたい：「前回のコミットから何を変えたか教えて」と頼む。
試しに大きく変えたい：「新しいブランチを作ってから試して」と頼む。うまくいかなければ元のブランチに戻るだけです。

GitHubを使う場合は、GitHubで空のリポジトリを作り、「このリポジトリにプッシュして」とURLを添えて頼みます。初回はGitHubへのログインを求められるので、案内にそって進めます。

05プロジェクトの説明書（CLAUDE.md）を用意する

Claude Codeは、フォルダにあるCLAUDE.mdというファイルを毎回最初に読みます。ここに「このサイトのルール」を書いておくと、毎回同じ説明をしなくて済みます。Claude Codeの中で/initと打つと、ひな形を作ってくれます。

# サイトの概要
- 仙台のカフェ「〇〇」の公式サイト。来店予約につなげるのが目的
- HTMLとCSSだけの静的サイト（WordPressは使わない）

# デザインのルール
- 色：背景 #FAF7F2、文字 #2B2B2B、アクセント #B5562C
- 文字：見出しは明朝、本文はゴシック
- 余白は8の倍数（8・16・24・40・64）

# 守ってほしいこと
- 変更する前に、何をどう変えるかを先に説明する
- 画像は img フォルダに入れる
- パスワードや鍵はファイルに書かない

06伝わる指示の出し方

AIは、あいまいな指示には「それらしい」答えを返します。思いどおりの結果に近づけるコツは、人に仕事を頼むときと同じです。

目的と相手を伝える「おしゃれなトップページを作って」ではなく、「30代の女性が、予約前にお店の雰囲気を知るためのトップページ」のように、誰が何のために見るかを伝えます。
見本を見せる参考サイトのスクリーンショットや、手書きのラフを画像で貼り付けられます。言葉で説明するより、ずっと正確に伝わります。
小さく頼む「サイト全部を作って」より、「まずヘッダーとメインビジュアルだけ」のほうが、確認と修正がしやすくなります。
先に計画を出してもらう大きな変更の前は「まだファイルは変えずに、進め方を提案して」と頼みます。Shift+Tabで切り替える「プランモード」も使えます。
見た結果をそのまま伝えるブラウザで確認して、気になるところのスクリーンショットに「ここの余白が狭い」「スマホで文字が切れる」と添えて送ります。

作業中、Claude Codeはファイルの変更やコマンドの実行の前に「実行してよいか」を確認してきます。最初のうちは内容を読んでから許可しましょう。分からないときは「このコマンドは何をするの？」と聞けば説明してくれます。

07SFTPでサーバーに公開する

完成したファイルをサーバーに送ることを「アップロード」や「デプロイ」と呼びます。初心者がいちばんつまずきやすいところなので、2つの方法を紹介します。

方法1：FileZillaなどのソフトで送る（おすすめ）

無料のFTPソフト「FileZilla」を使えば、フォルダをドラッグするだけでアップロードできます。サーバー会社の管理画面に書かれている「ホスト名」「ユーザー名」を入力し、接続方法は暗号化されるSFTPを選びます。エックスサーバーの場合、SFTPの接続には管理画面で作るSSHの鍵を使い、ポート番号は10022です。

方法2：Claude Codeに送ってもらう

慣れてきたら、「publicフォルダの中身を、サーバーの〇〇ドメインの公開フォルダにSFTPで送って」と頼むこともできます。このとき大事なのは、パスワードや鍵の中身をチャットに書かないことです。鍵ファイルはパソコンの決まった場所に置き、「鍵は〜にある」と場所だけを伝えます。

公開前のチェック

パスワード・鍵・.envのような秘密のファイルが、公開フォルダやGitHubに入っていないか（.gitignoreに書いて除外する）。
スマホとパソコンの両方で表示を確認したか。
ページのタイトルと説明文（検索結果に出る文章）が入っているか。

08よくあるつまずきと対処

「command not found: claude」と出る: インストール直後は、ターミナルを開き直すと解決することがほとんどです。それでもだめならclaude doctorで原因を確認します。
AIが勝手に大きく作り変えてしまった: Gitでコミットしてあれば「最後のコミットに戻して」で元通りです。だからこそ、こまめなコミットが大切です。
同じ修正を何度頼んでも直らない: 会話が長くなると、前の指示に引っ張られることがあります。/clearで会話をリセットし、今の状態と直したいことを短く伝え直します。
ブラウザで見ても変わっていない: 古い表示が残っていることがあります。再読み込み（Macは⌘+Shift+R、WindowsはCtrl+Shift+R）を試してください。
日本語が文字化けする: 「すべてのファイルをUTF-8で保存して」と頼み、HTMLの先頭に文字コードの指定が入っているかを確認します。
料金が心配: 有料プランの範囲で使う分には、追加の請求は発生しません。プランごとに使える量の上限があるので、大きな作業は小さく分けて頼むのがコツです。

09まとめとチェックリスト

Claude Codeは、パソコンのフォルダの中でファイルを作り、書き換えてくれるAI。
Gitでこまめにコミットしておけば、AIの変更はいつでも取り消せる。
CLAUDE.mdにルールを書き、目的・見本・小さな単位で指示を出す。
公開はSFTPで。パスワードや鍵はチャットにもGitにも入れない。

AIで「形にする」ことは、ずっと簡単になりました。それでも、誰に何を伝えるかを決め、見た目を整えて、安全に公開・運用するところには、まだ人の判断が欠かせません。「自分で始めてみたけれど、仕上げや公開は任せたい」というご相談も歓迎です。

※この記事は2026年11月時点の情報をもとにしています。

参考

Claude Code ドキュメント：セットアップ（Anthropic）