Claude Codeと一緒にWebページを作ってみた体験記

AIコーディングアシスタント「Claude Code」を使って、個人ブログサイトをゼロから構築した体験を詳しく紹介します。ヒアリングから完成まで、AIとのやりとりを通じてどのようにプロジェクトが進んでいったかを実体験ベースでお伝えします。

🎯 プロジェクト概要

目標： 個人ブログサイトの構築
期間： 約2時間
使用技術： Claude Code（AIアシスタント）
成果物： Next.js + TypeScript + Tailwind CSS の静的サイト

🤖 AIによるヒアリング

最初の質問

「Webページを作りたいのでヒアリングして一緒に考えて欲しい」と伝えたところ、Claude Codeが以下のような質問を投げかけてくれました：

📝 基本情報の確認

サイトの目的・種類
主なターゲットユーザー
掲載予定のコンテンツ

🎨 デザイン・技術面

デザインの希望
技術的な要望
運用・保守の考え

ヒアリングの効果

AIが丁寧にヒアリングしてくれることで、以下のメリットがありました：

✅ 要望の整理： 曖昧だったアイデアが明確になった
✅ 視点の拡張： 考えていなかった観点を提示された
✅ 効率的な進行： 要件が整理された状態で開発開始

📋 要件定義と技術選定

伝えた要望

個人ブログサイトを作りたい
├── ターゲット：エンジニア・ゲーム好き
├── コンテンツ：技術記事・ゲームレビュー
├── 技術：Markdownで記事管理
├── デザイン：シンプルで見やすい
└── 運用：静的サイト（XServer対応）

AIが提案した技術スタック

🛠️ フロントエンド

Next.js 15 - Reactフレームワーク
TypeScript - 型安全性
Tailwind CSS - スタイリング

📝 コンテンツ管理

Markdown - 記事作成
MDX - Markdown + JSX

🚀 デプロイ・運用

XServer - ホスティング
Formspree - お問い合わせフォーム

🏗️ サイト構成の設計

AIが提案した構成

サイト構成
├── 🏠 ホームページ
├── 📝 技術ブログ
│   └── アプリ開発の流れ紹介
├── 🎮 ゲーム紹介
│   └── お気に入りゲームレビュー
├── 📧 お問い合わせ
│   └── 開発依頼フォーム
└── 👤 About
    └── 詳しい自己紹介

設計のポイント

ユーザビリティ重視： 直感的なナビゲーション
SEO対応： 適切なページ構造
拡張性： 将来的な機能追加を考慮

⚙️ 開発プロセス

1. AIによるプロジェクト初期化

Claude Codeが自動的にプロジェクトの初期化を行ってくれました：

# AIが実行したコマンド例
npx create-next-app@latest my-blog --typescript --tailwind --eslint
npm install @next/mdx @mdx-js/loader @mdx-js/react

AIの自動化のメリット：

✅ 必要なパッケージの自動選択
✅ 最新バージョンの使用
✅ 設定の最適化

2. AIによる設定ファイルの調整

Claude Codeがnext.config.jsなどの設定ファイルを自動生成・調整してくれました：

// next.congfig.js
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})

module.exports = withMDX({
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  output: 'export',
  trailingSlash: true,
})

AIが自動で行った設定：

MDX対応の設定
静的サイト生成の設定
ファイル拡張子の設定

3. 開発中のトラブルシューティング

🔧 遭遇した問題と解決

問題	原因	解決方法
タイムアウト	長時間の処理	セッション再開
Next.js未インストール	環境の問題	AIが`npm install`を指示
設定エラー	設定ファイルの誤り	AIが修正案を提示

4. AIのサポート力

即座の対応： エラーが発生するとすぐに解決策を提示
段階的な指導： 初心者でも理解できる説明
継続的なサポート： プロジェクト完了まで一貫してサポート

🎉 完成したサイト

実装された機能

✅ 基本機能

レスポンシブデザイン
Markdownブログ機能
カテゴリ分け（技術・ゲーム）
お問い合わせフォーム

✅ 技術仕様

Next.js 15 + TypeScript
Tailwind CSS スタイリング
XServer対応の静的生成設定
Formspree連携

✅ SEO・パフォーマンス

メタタグ最適化
画像最適化
高速読み込み

開発環境での確認

# 開発サーバーで動作確認
npm run dev

ローカル環境でサイトの動作を確認でき、すべての機能が正常に動作することを確認しました。

💭 学んだことと感想

🤖 AIとの協働のメリット

🚀 効率性

要件定義から実装まで一気通貫
エラー解決が格段に早い
学習コストの大幅削減

💡 創造性

新しい視点の提供
技術選定の幅が広がる
ベストプラクティスの共有

🎯 品質

一貫したコードスタイル
セキュリティ考慮事項の提示
保守性を考慮した設計

🎯 初心者へのおすすめポイント

段階的な学習： AIの説明を理解しながら進める
積極的な質問： わからないことは遠慮なく聞く
実践的な経験： 実際に手を動かして学ぶ
継続的な改善： 完成後も機能追加を検討

🔮 今後の展望

AIとの協働は、Web開発の新しいスタンダードになりつつあります。特に以下の分野で活用が期待されます：

プロトタイプ作成： アイデアの素早い具現化
学習支援： プログラミング初心者のサポート
効率化： 定型作業の自動化
品質向上： ベストプラクティスの適用

🎉 結論

AIと一緒にWebサイトを作る体験は、想像以上にスムーズで楽しいものでした。ヒアリングから技術選定、実装まで一貫してサポートしてくれるので、初心者にもおすすめです！

クライトのブログ