Webページの仕上げとCursorでの問題解決
Claude Codeに作ってもらったWebページをよくよく見ると、記事が静的に埋め込まれている問題を発見しました。この記事では、その問題の解決から最終的な仕上げまで、実際の体験を紹介します。
🎯 記事の概要
対象読者： AIツールを使ったWeb制作に興味がある方
所要時間： 約30分
前提知識： 基本的なWeb開発の知識
🔍 問題の発見
Claude Codeに作ってもらったWebページをよくよく見ると、記事が静的に埋め込まれていることに気づきました。これはよくないのでなんとか解決しようとしましたが、原因がわからず困っていました。
🤖 Cursorに相談
原因がわからない状況で、今度はCursorに聞いてみることにしました。
Cursorの分析結果は驚くべきものでした。なんと全ての処理をクライアントサイドで行う設定になっているとのこと。これはよくない設定でした。
🛠️ Cursorによる修正
Cursorに問題をぶん投げて修正してもらいました。Cursorは適切な静的サイト生成の設定に変更し、問題を解決してくれました。
🎨 シリーズ記事ページの作成
Claude Codeにはシリーズ記事のページも作成してもらいましたが、今一つヒアリングが足りないというのが感想でした。まぁいい感じになっているのでとりあえずは良しとしました。
🎨 レイアウトの改善
次はCursorにレイアウト（見出しごととかの）を作ってもらってみました。とてもよい仕上がりになりました。
(今あなたが見ているレイアウトです。よくないですか？)
🚀 公開準備の自動化
公開までに必要なことは？とCursorに丸投げして実装してもらいました。必要な機能がすべて自動で実装され、整った状態になりました。
💭 感想
この体験を通じて、AIツールの使い分けの重要性を学びました。Claude Codeは創造的な部分で、Cursorは問題解決や最適化でそれぞれの強みを発揮することがわかりました。
最終的に自分としては完璧という状態まで到達でき、AIツールを適切に使い分けることで効率的にWebサイトを制作できることを実感しました。
🎓 学んだ教訓
1. 問題の早期発見の重要性
💡 重要な気づき：
- 表面的な完成度だけで判断しない
- 技術的な詳細まで確認する
- 複数のツールで検証する
2. AIツールの特性理解
🤖 ツールの特性：
- 各ツールには得意分野がある
- 使い分けが重要
- 組み合わせることで相乗効果
3. 継続的な改善
🔄 改善のサイクル：
- 作成 → 確認 → 問題発見 → 修正 → 最適化
- このサイクルを繰り返すことで品質が向上
🔮 今後の展望
AIツールの進化への期待
🚀 期待される発展：
- より高度な問題解決能力
- ツール間の連携強化
- 自動化レベルの向上
開発者の役割の変化
👨💻 新しい役割：
- AIツールの使い分け
- 品質管理と検証
- 創造的な要件定義
📝 まとめ
Claude Codeで作成したWebページの問題を発見し、Cursorの力を借りて解決した体験は、AIツールを使った開発の可能性と注意点を教えてくれました。
🎯 重要なポイント：
- 問題の早期発見が品質向上の鍵
- AIツールの使い分けで効率最大化
- 継続的な改善で完成度を高める