WebアプリをClaudeCodeで作成しました！②
hatake_sr全5回 ― 第2回
作成したWebアプリ→まーじゃんらんどピノ一度に詰め込みすぎない
AIへの指示で一番やりがちな失敗がこれです。
❌ やりがちな失敗：
グリッチエフェクトを追加して、ダークテーマにして、
画像アップロードも実装して、セキュリティも強化して✅ うまくいく伝え方：
まずグリッチエフェクトだけ試してみて
→ 確認・OKなら次の作業へ一度に複数の変更をお願いすると、どこで問題が起きたか特定しにくくなります。1つ実装→確認→次へ のサイクルが基本です。
「できますか？」で先に確認する
複雑な機能の場合はいきなり「実装して」ではなく、まず「〇〇できますか？」と聞くのがおすすめです。
実現方法や選択肢を先に提示してくれるので、方向性を決めてから進められます。今回も「Firebase Storage が使えない」と判明したとき、代替案を3つ提示してもらい、Cloudinaryを選ぶという流れになりました。
確認してからプッシュする
実装してもらったら必ずローカルで動作確認してからGitにプッシュ。本番環境に反映するのは確認後です。「プッシュして」の一言で実行してくれます。
エラーはそのまま貼り付ける
エラーが出てもエラーメッセージをそのままコピペするだけで、原因を調べて修正してくれます。
今回も 保存に失敗しました: Upload preset not found というエラーをそのまま伝えたことで、すぐ原因が特定できました。自分で調べる必要はありません。
デザイン指示の伝え方
デザインの意図を伝えるのが一番難しいです。効果的な方法を順番に紹介します。
1位：スクリーンショット＋言葉
「このサイトのこの部分（画像添付）みたいな
文字のブレる感じを見出しに入れたい」AIは画像を直接見られるので、URLより確実。「この部分だけ」と絞れるのも強みです。
2位：URL＋具体的な箇所の指定
「〇〇.com のヘッダーのグリッチ効果を真似したい」URLだけ渡しても「全体的にかっこよくして」は伝わりにくいです。どの要素かを必ず指定しましょう。
3位：デザインキーワード
「ダーク背景・ネオンカラー・サイバーパンク風」
「高級感のある和モダン、金と黒をベースに」具体的なキーワードがあれば意外と伝わります。
4位：有名ブランド・作品を例える
「VALORANTのUIみたいな感じ」
「Appleのサイトみたいなミニマルさ」有名なブランドやゲームのデザイン言語は共通認識として使えます。
結論：スクリーンショット＋「この○○の部分」が最強です。
