AIでコーディング支援

AIコーディングの流れ

1

デザインを言葉で説明

作りたいUIの特徴を具体的に伝える

2

AIがコードを生成

HTML/CSS（Tailwind）のコードを出力

3

ファイルに保存

生成されたコードを .html ファイルとして保存する

4

ブラウザで確認・調整

ファイルをブラウザで開いてプレビューし、必要に応じて修正を依頼

事前準備：コードを書く環境

必要なもの

1.

テキストエディタ

Visual Studio Code（VS Code）がおすすめです。無料でダウンロードできます。

メモ帳でも可能ですが、VS Codeはコードの色分け表示やエラー検出ができるため効率的です。

2.

Webブラウザ

Google Chrome、Microsoft Edge、Safariなど。HTMLファイルをダブルクリックするだけで表示できます。

3.

Claude Code（ターミナルで使うAI）

ターミナル（コマンドプロンプト）で claude と入力するだけでAIとの対話が始まります。

作業フォルダの作成

まず、コードを保存するフォルダを作りましょう。ターミナルで以下を実行します。

mkdir my-website
cd my-website

次に、Claude Codeを起動します。

claude

ポイント：HTMLファイルはサーバー不要で、ブラウザで直接開くだけで表示できます。特別なソフトのインストールは不要です。

実践：コンポーネントを作成

実践1：ヘッダーを作成

Claude Codeへの指示：

以下をClaude Codeにそのまま入力してください。ファイル名を指定しているので、AIが自動的にファイルを作成・保存してくれます。

以下の仕様でヘッダーコンポーネントを作成して、header-sample.htmlとして保存してください。
完全なHTMLファイル（DOCTYPE宣言、head、body含む）で作成し、Tailwind CSSはCDN経由で読み込んでください。

【仕様】
・固定ヘッダー（スクロールで追従）
・左にロゴ（テキストで「MyPortfolio」）
・右にナビゲーション（ホーム、実績、スキル、お問い合わせ）
・背景：白、影付き
・スマホ時はハンバーガーメニュー（JavaScriptで開閉）

レスポンシブ対応でお願いします。

Claude Codeが生成するコードは、以下のような完全なHTMLファイルになります。

生成されるコードの例を見る（クリックで展開）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyPortfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">

    <!-- 固定ヘッダー -->
    <header class="fixed top-0 left-0 w-full bg-white shadow-md z-50">
        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
            <!-- ロゴ -->
            <a href="#" class="text-2xl font-bold text-gray-800">MyPortfolio</a>

            <!-- PC用ナビゲーション -->
            <nav class="hidden md:flex space-x-8">
                <a href="#" class="text-gray-600 hover:text-blue-600 transition">ホーム</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 transition">実績</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 transition">スキル</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 transition">お問い合わせ</a>
            </nav>

            <!-- ハンバーガーメニューボタン -->
            <button id="menuBtn" class="md:hidden text-gray-600 focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <!-- モバイルメニュー -->
        <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
            <nav class="container mx-auto px-6 py-4 space-y-3">
                <a href="#" class="block text-gray-600 hover:text-blue-600">ホーム</a>
                <a href="#" class="block text-gray-600 hover:text-blue-600">実績</a>
                <a href="#" class="block text-gray-600 hover:text-blue-600">スキル</a>
                <a href="#" class="block text-gray-600 hover:text-blue-600">お問い合わせ</a>
            </nav>
        </div>
    </header>

    <!-- ヘッダーの高さ分の余白 -->
    <div class="pt-20">
        <div class="container mx-auto px-6 py-12">
            <h1 class="text-3xl font-bold text-gray-800">ようこそ、MyPortfolioへ</h1>
            <p class="mt-4 text-gray-600">スクロールしてヘッダーが固定されることを確認してみましょう。</p>
            <div class="mt-8 space-y-8">
                <div class="h-64 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400">コンテンツエリア</div>
                <div class="h-64 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400">コンテンツエリア</div>
                <div class="h-64 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400">コンテンツエリア</div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('menuBtn').addEventListener('click', function() {
            document.getElementById('mobileMenu').classList.toggle('hidden');
        });
    </script>

</body>
</html>

動作確認：

1. header-sample.html をブラウザで開く（ファイルをダブルクリック）
2. ヘッダーが画面上部に固定されていることを確認
3. 画面幅を狭くして（またはスマホ表示で）ハンバーガーメニューが表示されることを確認
4. ハンバーガーメニューをクリックしてメニューが開閉することを確認

実践2：カードコンポーネントを作成

Claude Codeへの指示：

以下をClaude Codeに入力してください。

実績紹介用のカードコンポーネントを作成して、card-sample.htmlとして保存してください。
完全なHTMLファイルで作成し、Tailwind CSSはCDN経由で読み込んでください。
カードは3枚横並びで表示してください。

【仕様】
・画像エリア（16:9比率、ダミーの背景色でOK）
・タイトル（太字、大きめ）
・説明文（2行まで、超過は...で省略）
・タグ（複数表示、青色のバッジ）
・ホバー時に少し浮き上がるアニメーション
・角丸、影付き

Tailwind CSSで実装してください。

生成されるコードの例を見る（クリックで展開）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>実績カード</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">

    <div class="container mx-auto px-6 py-12">
        <h1 class="text-3xl font-bold text-gray-800 mb-8">実績紹介</h1>

        <div class="grid md:grid-cols-3 gap-6">

            <!-- カード1 -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:-translate-y-2 hover:shadow-xl transition-all duration-300 cursor-pointer">
                <div class="aspect-video bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-lg font-bold">
                    Project 1
                </div>
                <div class="p-5">
                    <h3 class="text-lg font-bold text-gray-800 mb-2">企業コーポレートサイト</h3>
                    <p class="text-sm text-gray-600 line-clamp-2 mb-3">中小企業向けのコーポレートサイトをデザインから実装まで担当しました。モダンで信頼感のあるデザインを実現。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">HTML/CSS</span>
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">レスポンシブ</span>
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">WordPress</span>
                    </div>
                </div>
            </div>

            <!-- カード2 -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:-translate-y-2 hover:shadow-xl transition-all duration-300 cursor-pointer">
                <div class="aspect-video bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center text-white text-lg font-bold">
                    Project 2
                </div>
                <div class="p-5">
                    <h3 class="text-lg font-bold text-gray-800 mb-2">ECサイトリニューアル</h3>
                    <p class="text-sm text-gray-600 line-clamp-2 mb-3">既存のECサイトをモダンなデザインにリニューアル。ユーザビリティを向上させ、コンバージョン率が20%改善しました。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">UI/UX</span>
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">EC</span>
                    </div>
                </div>
            </div>

            <!-- カード3 -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:-translate-y-2 hover:shadow-xl transition-all duration-300 cursor-pointer">
                <div class="aspect-video bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white text-lg font-bold">
                    Project 3
                </div>
                <div class="p-5">
                    <h3 class="text-lg font-bold text-gray-800 mb-2">ランディングページ制作</h3>
                    <p class="text-sm text-gray-600 line-clamp-2 mb-3">新商品のプロモーション用ランディングページ。アニメーションを活用した訴求力の高いデザインで集客に貢献しました。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">LP制作</span>
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">アニメーション</span>
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">マーケティング</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
</html>

動作確認：

1. card-sample.html をブラウザで開く
2. 3枚のカードが横並びで表示されることを確認
3. カードにマウスを乗せて、浮き上がるアニメーションを確認
4. 画面幅を狭くして、カードが縦並びになることを確認

実践3：お問い合わせフォームを作成

Claude Codeへの指示：

以下をClaude Codeに入力してください。

お問い合わせフォームを作成して、contact-sample.htmlとして保存してください。
完全なHTMLファイルで作成し、Tailwind CSSはCDN経由で読み込んでください。

【項目】
・お名前（必須）
・メールアドレス（必須）
・会社名（任意）
・お問い合わせ種別（ドロップダウン：相談、見積もり依頼、その他）
・メッセージ（テキストエリア、必須）
・送信ボタン

【デザイン】
・シンプルでモダン
・必須項目には*マーク
・フォーカス時に枠線が青に変化
・送信ボタンは目立つ色

生成されるコードの例を見る（クリックで展開）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせ</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">

    <div class="container mx-auto px-6 py-12 max-w-2xl">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">お問い合わせ</h1>
        <p class="text-gray-600 mb-8">以下のフォームにご記入ください。<span class="text-red-500">*</span> は必須項目です。</p>

        <form class="bg-white p-8 rounded-xl shadow-md space-y-6">
            <!-- お名前 -->
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    お名前 <span class="text-red-500">*</span>
                </label>
                <input type="text" required placeholder="山田 太郎"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
            </div>

            <!-- メールアドレス -->
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    メールアドレス <span class="text-red-500">*</span>
                </label>
                <input type="email" required placeholder="example@email.com"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
            </div>

            <!-- 会社名 -->
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">会社名</label>
                <input type="text" placeholder="株式会社サンプル"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
            </div>

            <!-- お問い合わせ種別 -->
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">お問い合わせ種別</label>
                <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    <option value="">選択してください</option>
                    <option value="consultation">相談</option>
                    <option value="quote">見積もり依頼</option>
                    <option value="other">その他</option>
                </select>
            </div>

            <!-- メッセージ -->
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    メッセージ <span class="text-red-500">*</span>
                </label>
                <textarea required rows="5" placeholder="お問い合わせ内容をご記入ください"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition resize-vertical"></textarea>
            </div>

            <!-- 送信ボタン -->
            <button type="submit"
                class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-bold hover:bg-blue-700 transition-colors duration-200">
                送信する
            </button>
        </form>
    </div>

</body>
</html>

動作確認：

1. contact-sample.html をブラウザで開く
2. 各入力欄をクリックして、枠線が青に変わることを確認
3. 何も入力せず「送信する」を押して、必須項目のエラー表示を確認

ファイルの保存と確認方法

ファイルの保存

1.

拡張子は必ず `.html`

ファイル名は半角英数字で、拡張子を .html にします。例：index.html、contact.html

2.

Claude Codeなら自動保存

Claude Codeに「〇〇.htmlとして保存して」と指示すれば、ファイルの作成・保存を自動で行ってくれます。手動でコピー＆ペーストする必要はありません。

3.

手動で保存する場合

VS Codeでファイルを新規作成し、コードを貼り付けて保存（Ctrl+S / Cmd+S）します。保存時に拡張子が .html になっていることを確認してください。

ブラウザでの確認方法

1.

ダブルクリックで開く

保存した .html ファイルをダブルクリックすると、既定のブラウザで自動的に開きます。

2.

変更を反映するにはリロード

コードを修正したら、ブラウザで Ctrl+R（Macは Cmd+R）を押すと最新の状態に更新されます。

3.

スマホ表示の確認

ブラウザの開発者ツール（F12キー）を開き、スマホアイコンをクリックするとモバイル表示を確認できます。

シンプルなサイトのファイル構成

ポートフォリオサイトなら、以下のようなファイル構成が一般的です。

my-website/
  ├── index.html          ← トップページ
  ├── about.html           ← 自己紹介ページ
  ├── works.html           ← 実績ページ
  ├── contact.html         ← お問い合わせページ
  └── images/              ← 画像フォルダ
       ├── profile.jpg
       └── work1.png

よくあるエラーと対処法

コードを貼り付けたが何も表示されない

原因：ファイルが .txt で保存されている可能性があります。

対処法：ファイルの拡張子を .html に変更してください。Windowsの場合、エクスプローラーの「表示」メニューで「ファイル名拡張子」にチェックを入れると確認できます。

Tailwind CSSが効かない（デザインが崩れる）

原因：Tailwind CSSのCDNリンクが正しく読み込まれていません。

対処法：<head> タグ内に以下の1行があることを確認してください。

<script src="https://cdn.tailwindcss.com"></script>

また、インターネットに接続されていることも確認してください（CDNはオンラインでのみ動作します）。

ハンバーガーメニューが動かない

原因：JavaScriptの <script> タグの位置が正しくない可能性があります。

対処法：<script> タグが </body> の直前に配置されていることを確認してください。HTMLの要素がすべて読み込まれた後にJavaScriptが実行される必要があります。

日本語が文字化けする

原因：文字コードの指定がありません。

対処法：<head> タグ内に以下の行があることを確認してください。

<meta charset="UTF-8">

コード修正のコツ

具体的に指示する

「もっと大きく」→「font-sizeを24pxに」

参考画像を使う

スクリーンショットをアップロードして「これに近づけて」

段階的に修正

一度に多くの修正を頼まない

良い例を見せる

「このサイトのようなデザインで」とURL共有

まとめ

✓ デザインを言葉で説明してコードを生成
✓ 具体的な仕様を伝えるほど精度が上がる
✓ ファイル名を指定すればClaude Codeが自動保存してくれる
✓ .htmlファイルはダブルクリックでブラウザ確認できる
✓ 修正は段階的に、具体的に依頼
✓ 参考画像やURLがあると精度アップ

AIコーディングの流れ

デザインを言葉で説明

AIがコードを生成

ファイルに保存

ブラウザで確認・調整

事前準備：コードを書く環境

必要なもの

テキストエディタ

Webブラウザ

Claude Code（ターミナルで使うAI）

作業フォルダの作成

実践：コンポーネントを作成

実践1：ヘッダーを作成

実践2：カードコンポーネントを作成

実践3：お問い合わせフォームを作成

ファイルの保存と確認方法

ファイルの保存

拡張子は必ず .html

Claude Codeなら自動保存

手動で保存する場合

ブラウザでの確認方法

ダブルクリックで開く

変更を反映するにはリロード

スマホ表示の確認

シンプルなサイトのファイル構成

よくあるエラーと対処法

コードを貼り付けたが何も表示されない

Tailwind CSSが効かない（デザインが崩れる）

ハンバーガーメニューが動かない

日本語が文字化けする

コード修正のコツ

具体的に指示する

参考画像を使う

段階的に修正

良い例を見せる

まとめ

拡張子は必ず `.html`