ブログサイト制作 - AI×ホームページ制作

ブログサイトの構成

🏠

トップページ

最新記事一覧、人気記事、カテゴリー

📝

記事ページ

本文、目次、関連記事、シェアボタン

📁

カテゴリーページ

カテゴリー別の記事一覧

👤

プロフィール

運営者情報、SNSリンク

事前準備

まず、ブログサイト用のプロジェクトフォルダを作成し、Claude Codeを起動します。

mkdir blog-site && cd blog-site

フォルダに移動したら、Claude Codeを起動します。

claude

ポイント：Claude Codeはフォルダの中でファイルを作成・編集してくれるので、必ず専用フォルダの中で起動しましょう。

Step 1: トップページ（記事一覧）を作成

Claude Codeへの指示

テックブログのトップページを作成します。index.htmlとして以下を含むページを作成してください。Tailwind CSS CDN使用。ヘッダー（ブログ名「TechNote」、ナビ）、記事一覧（カード型6件、サムネ・タイトル・日付・抜粋）、サイドバー（プロフィール・カテゴリー・人気記事）、フッター

完成コード: index.html

Claude Codeが以下のようなコードを生成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNote - テック情報ブログ</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

    <!-- ヘッダー -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
            <a href="index.html" class="text-2xl font-bold text-blue-600">TechNote</a>
            <div class="hidden md:flex space-x-6 text-sm">
                <a href="index.html" class="text-blue-600 font-bold">ホーム</a>
                <a href="#" class="hover:text-blue-600">カテゴリー</a>
                <a href="#" class="hover:text-blue-600">プロフィール</a>
            </div>
        </nav>
    </header>

    <!-- メインコンテンツ -->
    <div class="container mx-auto px-6 py-10 flex flex-col lg:flex-row gap-10">

        <!-- 記事一覧 -->
        <main class="flex-1">
            <h1 class="text-3xl font-bold mb-8">最新の記事</h1>
            <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">

                <!-- 記事カード 1 -->
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/600x340/3b82f6/ffffff?text=Web+Design" alt="" class="w-full h-44 object-cover">
                    <div class="p-4">
                        <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">デザイン</span>
                        <h2 class="font-bold mt-2 line-clamp-2">Webデザイン入門：初心者が最初に覚えるべき5つのこと</h2>
                        <time class="text-xs text-gray-400 mt-1 block">2025-01-15</time>
                        <p class="text-sm text-gray-600 mt-2 line-clamp-3">Webデザインを始めたいけど何から手をつければいいか分からない...そんな初心者の方に向けて、最初に覚えるべきポイントを解説します。</p>
                    </div>
                </a>

                <!-- 記事カード 2 -->
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/600x340/10b981/ffffff?text=JavaScript" alt="" class="w-full h-44 object-cover">
                    <div class="p-4">
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">JavaScript</span>
                        <h2 class="font-bold mt-2 line-clamp-2">JavaScriptの非同期処理を完全理解する</h2>
                        <time class="text-xs text-gray-400 mt-1 block">2025-01-12</time>
                        <p class="text-sm text-gray-600 mt-2 line-clamp-3">Promise、async/awaitなど、非同期処理の仕組みを初心者にも分かりやすく解説します。</p>
                    </div>
                </a>

                <!-- 記事カード 3 -->
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/600x340/8b5cf6/ffffff?text=CSS+Grid" alt="" class="w-full h-44 object-cover">
                    <div class="p-4">
                        <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">CSS</span>
                        <h2 class="font-bold mt-2 line-clamp-2">CSS Gridで作る実践レイアウト集</h2>
                        <time class="text-xs text-gray-400 mt-1 block">2025-01-10</time>
                        <p class="text-sm text-gray-600 mt-2 line-clamp-3">CSS Gridを使った実用的なレイアウトパターンを、コード付きで紹介します。</p>
                    </div>
                </a>

                <!-- 記事カード 4 -->
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/600x340/f59e0b/ffffff?text=AI+Tools" alt="" class="w-full h-44 object-cover">
                    <div class="p-4">
                        <span class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded">AI</span>
                        <h2 class="font-bold mt-2 line-clamp-2">AI時代のWeb開発ツール最前線</h2>
                        <time class="text-xs text-gray-400 mt-1 block">2025-01-08</time>
                        <p class="text-sm text-gray-600 mt-2 line-clamp-3">コード生成からデザインまで、AIがWeb開発をどう変えているのかを紹介します。</p>
                    </div>
                </a>

                <!-- 記事カード 5 -->
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/600x340/ef4444/ffffff?text=Git+GitHub" alt="" class="w-full h-44 object-cover">
                    <div class="p-4">
                        <span class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded">開発ツール</span>
                        <h2 class="font-bold mt-2 line-clamp-2">Git入門：チーム開発の第一歩</h2>
                        <time class="text-xs text-gray-400 mt-1 block">2025-01-05</time>
                        <p class="text-sm text-gray-600 mt-2 line-clamp-3">Gitの基本コマンドからGitHubでの共同開発まで、初心者向けに解説します。</p>
                    </div>
                </a>

                <!-- 記事カード 6 -->
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/600x340/06b6d4/ffffff?text=React" alt="" class="w-full h-44 object-cover">
                    <div class="p-4">
                        <span class="text-xs bg-cyan-100 text-cyan-700 px-2 py-1 rounded">React</span>
                        <h2 class="font-bold mt-2 line-clamp-2">Reactで作るシンプルなTodoアプリ</h2>
                        <time class="text-xs text-gray-400 mt-1 block">2025-01-03</time>
                        <p class="text-sm text-gray-600 mt-2 line-clamp-3">React初心者の方に向けて、Todoアプリを一から作る手順を解説します。</p>
                    </div>
                </a>

            </div>
        </main>

        <!-- サイドバー -->
        <aside class="w-full lg:w-80 space-y-6">

            <!-- プロフィール -->
            <div class="bg-white rounded-lg shadow p-6 text-center">
                <img src="https://placehold.co/100x100/3b82f6/ffffff?text=Author" alt="プロフィール" class="w-20 h-20 rounded-full mx-auto mb-3">
                <h3 class="font-bold">田中テック</h3>
                <p class="text-sm text-gray-500 mt-1">フロントエンドエンジニア。Web技術やAIについて発信中。</p>
            </div>

            <!-- カテゴリー -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold mb-3">カテゴリー</h3>
                <ul class="space-y-2 text-sm">
                    <li><a href="#" class="flex justify-between hover:text-blue-600">デザイン<span class="text-gray-400">8</span></a></li>
                    <li><a href="#" class="flex justify-between hover:text-blue-600">JavaScript<span class="text-gray-400">12</span></a></li>
                    <li><a href="#" class="flex justify-between hover:text-blue-600">CSS<span class="text-gray-400">6</span></a></li>
                    <li><a href="#" class="flex justify-between hover:text-blue-600">AI<span class="text-gray-400">5</span></a></li>
                    <li><a href="#" class="flex justify-between hover:text-blue-600">開発ツール<span class="text-gray-400">4</span></a></li>
                </ul>
            </div>

            <!-- 人気記事 -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold mb-3">人気記事</h3>
                <ul class="space-y-3 text-sm">
                    <li><a href="post.html" class="flex items-start gap-3 hover:text-blue-600">
                        <span class="bg-blue-600 text-white text-xs w-6 h-6 rounded flex items-center justify-center flex-shrink-0">1</span>
                        Webデザイン入門：初心者が最初に覚えるべき5つのこと
                    </a></li>
                    <li><a href="post.html" class="flex items-start gap-3 hover:text-blue-600">
                        <span class="bg-blue-600 text-white text-xs w-6 h-6 rounded flex items-center justify-center flex-shrink-0">2</span>
                        JavaScriptの非同期処理を完全理解する
                    </a></li>
                    <li><a href="post.html" class="flex items-start gap-3 hover:text-blue-600">
                        <span class="bg-blue-600 text-white text-xs w-6 h-6 rounded flex items-center justify-center flex-shrink-0">3</span>
                        CSS Gridで作る実践レイアウト集
                    </a></li>
                </ul>
            </div>

        </aside>
    </div>

    <!-- フッター -->
    <footer class="bg-gray-800 text-gray-300 py-8 mt-16">
        <div class="container mx-auto px-6 text-center text-sm">
            <p>&copy; 2025 TechNote. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

ポイント：Claude Codeは指示に基づいてファイルを自動作成します。コードが長くても、すべて一度に生成されるので心配ありません。プレースホルダー画像には placehold.co を使用しています。

Step 2: 記事ページを作成

Claude Codeへの指示

ブログの記事詳細ページをpost.htmlとして作成してください。記事タイトル、投稿日・カテゴリー・読了時間、アイキャッチ画像、本文（見出し・段落・コードブロック・リスト含む）、著者プロフィール、関連記事3件

完成コード: post.html

Claude Codeが以下のようなコードを生成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webデザイン入門：初心者が最初に覚えるべき5つのこと - TechNote</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

    <!-- ヘッダー -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
            <a href="index.html" class="text-2xl font-bold text-blue-600">TechNote</a>
            <div class="hidden md:flex space-x-6 text-sm">
                <a href="index.html" class="hover:text-blue-600">ホーム</a>
                <a href="#" class="hover:text-blue-600">カテゴリー</a>
                <a href="#" class="hover:text-blue-600">プロフィール</a>
            </div>
        </nav>
    </header>

    <!-- 記事コンテンツ -->
    <main class="container mx-auto px-6 py-10 max-w-3xl">

        <!-- 記事メタ情報 -->
        <div class="mb-6">
            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">デザイン</span>
            <h1 class="text-3xl font-bold mt-3 mb-4">Webデザイン入門：初心者が最初に覚えるべき5つのこと</h1>
            <div class="flex items-center text-sm text-gray-500 space-x-4">
                <time>2025年1月15日</time>
                <span>・</span>
                <span>読了時間：約5分</span>
            </div>
        </div>

        <!-- アイキャッチ画像 -->
        <img src="https://placehold.co/800x400/3b82f6/ffffff?text=Web+Design+Basics" alt="アイキャッチ" class="w-full rounded-lg mb-8">

        <!-- 本文 -->
        <article class="space-y-6 text-gray-700 leading-relaxed">

            <p>Webデザインを始めたいけれど、何から手をつければいいか分からない。そんな初心者の方も多いのではないでしょうか。この記事では、Webデザインの基礎として最初に覚えるべき5つのポイントを紹介します。</p>

            <h2 class="text-2xl font-bold mt-8 mb-4 text-gray-800">1. レイアウトの基本を理解する</h2>
            <p>Webページは「ヘッダー」「メインコンテンツ」「サイドバー」「フッター」の4つの領域で構成されるのが一般的です。まずはこの基本構造を理解しましょう。</p>

            <h2 class="text-2xl font-bold mt-8 mb-4 text-gray-800">2. 配色のルールを覚える</h2>
            <p>使う色は3色以内に抑えるのがコツです。メインカラー・サブカラー・アクセントカラーの3つを決めましょう。</p>
            <ul class="list-disc pl-6 space-y-2">
                <li>メインカラー：サイト全体の印象を決める色（60%）</li>
                <li>サブカラー：メインを引き立てる色（30%）</li>
                <li>アクセントカラー：ボタンやリンクに使う色（10%）</li>
            </ul>

            <h2 class="text-2xl font-bold mt-8 mb-4 text-gray-800">3. フォント選びのポイント</h2>
            <p>読みやすさが最優先です。本文にはゴシック体を使い、フォントサイズは16px以上を基本にしましょう。</p>

            <h2 class="text-2xl font-bold mt-8 mb-4 text-gray-800">4. レスポンシブ対応を意識する</h2>
            <p>スマートフォンからのアクセスが主流です。Tailwind CSSなどのフレームワークを使えば簡単に対応できます。</p>
            <div class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm">
                <pre><!-- Tailwind CSSのレスポンシブ例 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <!-- スマホ1列 → タブレット2列 → PC3列 -->
</div></pre>
            </div>

            <h2 class="text-2xl font-bold mt-8 mb-4 text-gray-800">5. 余白（ホワイトスペース）を大切にする</h2>
            <p>要素と要素の間に十分な余白を取ることで、ぐっと見やすいデザインになります。詰め込みすぎは禁物です。</p>

            <h2 class="text-2xl font-bold mt-8 mb-4 text-gray-800">まとめ</h2>
            <p>Webデザインは奥が深いですが、まずはこの5つの基本を押さえるだけで、見違えるほど良いデザインが作れるようになります。ぜひ実践してみてください。</p>

        </article>

        <!-- 著者プロフィール -->
        <div class="bg-white rounded-lg shadow p-6 mt-12 flex items-center gap-4">
            <img src="https://placehold.co/80x80/3b82f6/ffffff?text=Author" alt="著者" class="w-16 h-16 rounded-full">
            <div>
                <p class="font-bold">田中テック</p>
                <p class="text-sm text-gray-500">フロントエンドエンジニア。Web技術やAIについて発信中。</p>
            </div>
        </div>

        <!-- 関連記事 -->
        <div class="mt-12">
            <h2 class="text-xl font-bold mb-6">関連記事</h2>
            <div class="grid md:grid-cols-3 gap-4">
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/400x225/8b5cf6/ffffff?text=CSS" alt="" class="w-full h-32 object-cover">
                    <div class="p-3">
                        <h3 class="font-bold text-sm line-clamp-2">CSS Gridで作る実践レイアウト集</h3>
                        <time class="text-xs text-gray-400">2025-01-10</time>
                    </div>
                </a>
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/400x225/10b981/ffffff?text=JavaScript" alt="" class="w-full h-32 object-cover">
                    <div class="p-3">
                        <h3 class="font-bold text-sm line-clamp-2">JavaScriptの非同期処理を完全理解する</h3>
                        <time class="text-xs text-gray-400">2025-01-12</time>
                    </div>
                </a>
                <a href="post.html" class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
                    <img src="https://placehold.co/400x225/f59e0b/ffffff?text=AI+Tools" alt="" class="w-full h-32 object-cover">
                    <div class="p-3">
                        <h3 class="font-bold text-sm line-clamp-2">AI時代のWeb開発ツール最前線</h3>
                        <time class="text-xs text-gray-400">2025-01-08</time>
                    </div>
                </a>
            </div>
        </div>

    </main>

    <!-- フッター -->
    <footer class="bg-gray-800 text-gray-300 py-8 mt-16">
        <div class="container mx-auto px-6 text-center text-sm">
            <p>&copy; 2025 TechNote. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

ポイント：記事ページでは読みやすさが最重要です。見出し・段落・リスト・コードブロックなど、複数の要素を組み合わせることで、読者にとって分かりやすい記事になります。

ブラウザで確認

確認チェックリスト

1. index.html を開く

blog-site フォルダ内の index.html をブラウザで開きます。

✓ヘッダーに「TechNote」のロゴとナビが表示されるか
✓記事カードが6件、グリッド状に並んでいるか
✓サイドバーにプロフィール・カテゴリー・人気記事が表示されるか
✓カードにホバーすると影が変化するか

2. post.html を開く

同じフォルダ内の post.html をブラウザで開きます。

✓記事タイトル・日付・読了時間が表示されるか
✓本文の見出し・段落・リスト・コードブロックが正しく表示されるか
✓著者プロフィールと関連記事が表示されるか

3. レスポンシブ確認

ブラウザの幅を狭くして、スマートフォン表示を確認します。

✓記事カードが1列に並び変わるか
✓サイドバーがメインコンテンツの下に移動するか
✓文字が小さすぎず読みやすいか

4. ページ間の移動

リンクが正しく動作するか確認します。

✓トップページの記事カードをクリックすると post.html に遷移するか
✓記事ページのヘッダー「TechNote」をクリックするとトップに戻れるか

カスタマイズ

基本のブログができたら、自分好みにカスタマイズしましょう。Claude Codeに追加の指示を出すだけで変更できます。

Claude Codeへの指示例

ブログのデザインを以下のようにカスタマイズしてください。

・ブログ名を「TechNote」から「My Tech Blog」に変更
・ヘッダーの背景色を紺色（#1e3a5f）に変更
・カテゴリーを「HTML/CSS」「JavaScript」「Python」「AI活用」「キャリア」に変更
・フッターにSNSリンク（Twitter、GitHub）を追加

ブログ名・ロゴ

サイト名を自分のブランドに合わせて変更

カラーテーマ

ヘッダーやリンクの色をブランドカラーに統一

カテゴリー

自分が発信したいジャンルに合わせて変更

プロフィール

自分の名前・紹介文・SNSリンクに差し替え

よくあるエラー

トラブルシューティング

画像が表示されない

プレースホルダー画像はインターネット接続が必要です。オフラインの場合は表示されません。自分の画像を使う場合は、ファイルパスが正しいか確認してください。

レイアウトが崩れる

Tailwind CSS CDNが読み込まれているか確認してください。<script src="https://cdn.tailwindcss.com"></script> が <head> 内にあるか確認しましょう。

リンクが動かない

index.html と post.html が同じフォルダにあるか確認してください。ファイル名の大文字・小文字も区別されます。

スマホ表示で横スクロールが出る

<meta name="viewport"> タグが <head> 内にあるか確認してください。また、画像や要素に固定幅（px指定）が設定されている場合は max-w-full を追加しましょう。

ブログ記事もAIで作成

記事の下書きを生成

以下のテーマでブログ記事を作成してください。

【テーマ】初心者向けWebデザインの始め方
【想定読者】Webデザインに興味がある未経験者
【文字数】2000文字程度
【構成】
- 導入（フックと記事の概要）
- 本文（見出し3〜5個）
- まとめ

SEOを意識して、見出しにはキーワードを含めてください。

注意：AIの出力はそのまま使わず、自分の経験や独自の視点を加えて編集しましょう。

まとめ

✓ トップ、記事ページ、カテゴリーが基本構成
✓ カード型の記事一覧が見やすい
✓ 記事の下書きもAIで効率化
✓ AI出力は必ず編集してオリジナリティを追加