Claude CodeでWeb開発を始める前に
Claude Codeは、Webサイトの構築を自然言語だけで進められるツールです。HTML/CSS/JavaScriptの基礎知識があればベストですが、知識ゼロでも対話しながら作り上げることができます。
このチュートリアルでは、ポートフォリオサイトをゼロから構築する流れを通して、Claude CodeによるWeb開発の実践的な進め方を解説します。
プロジェクトの初期設定からセクション作り込みまで
フォルダを作成して起動する
mkdir my-portfolio cd my-portfolio claude
プロジェクトの方向性を伝える
最初の指示で、作りたいサイトの全体像を伝えます。
個人のポートフォリオサイトを作りたい。 - シングルページ構成（ヒーロー、自己紹介、実績、お問い合わせ） - レスポンシブ対応 - HTML/CSS/JSのみ（フレームワーク不使用） - モダンでクリーンなデザイン
Claude Codeがファイル構成を提案し、HTML・CSS・JavaScriptを生成します。ここで生成される初版はあくまで骨組みです。ここから各セクションを個別に指示して品質を上げていきます。
セクション単位で品質を上げる
一度に全体を完成させるのではなく、セクションごとに指示を出して品質を上げていくのがコツです。
ヒーローセクション
ヒーローセクションを改善して。 - キャッチコピーを大きく中央配置 - 背景にグラデーション - CTAボタンを配置（「お問い合わせ」へのスムーズスクロール）
実績セクション
実績セクションにカードレイアウトを追加して。 - 3列グリッド（モバイルは1列） - 各カードにサムネイル、タイトル、説明、リンク - ホバーでカードが浮き上がるアニメーション
お問い合わせフォーム
お問い合わせフォームを作って。 - 名前、メール、メッセージの3フィールド - バリデーション付き - 送信先はformspree.io
ローカルで確認しながら進める
作ったサイトはブラウザで確認しながら進めましょう。Claude Codeに以下のように頼めば、ローカルサーバーを起動できます。
このサイトをローカルサーバーで確認したい
Python 3が入っていれば python3 -m http.server 8000 を実行してくれます。ブラウザで http://localhost:8000 を開いて確認します。
Claude CodeはComputer Use機能でブラウザの画面を直接確認することもできます。「ブラウザで開いて見た目を確認して」と指示すれば、スクリーンショットを撮影して問題点を自動で検出してくれます。
デザインの調整テクニック
参考サイトのイメージを伝える
具体的なデザインイメージがあれば、言葉で伝えます。
デザインをもっとApple風にして。 - 余白を広めに - フォントはsans-serif系 - 色はモノトーン+アクセントカラー1色
レスポンシブの確認
モバイル表示で崩れている箇所がないか確認して、修正して
パフォーマンス改善
ページの読み込み速度を改善して。画像の遅延読み込み、CSSの最適化をやって
デプロイまで一気通貫
サイトが完成したら、デプロイまでClaude Codeで進められます。
GitHubリポジトリの作成
このプロジェクトをGitHubにpushして。リポジトリ名はmy-portfolio
Claude CodeがGit初期化、リモートリポジトリ作成、push までを対話で進めます。
Cloudflare Pagesへのデプロイ
Cloudflare Pagesにデプロイして
wranglerのセットアップからデプロイまで、手順を案内してくれます。
よくある失敗と対処法
- 一度に全部作ろうとする: 大きな指示は品質が下がります。セクションごとに分割しましょう
- デザインの指示が曖昧: 「かっこよくして」より「余白を広めに、色はモノトーン」の方が的確な結果になります
- 確認せずに次に進む: 各セクション完成時にブラウザで確認し、問題を早期に修正するのが効率的です
- コンテキストが溢れる: セクションが多い場合は、CSS調整だけ別セッションにするなど分割を検討してください
まとめ
Claude Codeを使えば、Webサイトの構築をプロジェクト初期化からデプロイまで対話だけで完結できます。重要なのは「一度に全部」ではなく「セクションごとに確認しながら進める」こと。Web開発の経験が浅くても、Claude Codeとの対話を通じてプロ品質のサイトを作ることが可能です。まずは簡単なランディングページやポートフォリオから始めて、徐々に複雑なサイトに挑戦していきましょう。