ワイヤーフレームの反映
前回の動画で管理者画面を作ることができました。今回は、以前渡したワイヤーフレームがまだ反映されていないので、Claude Codeに反映してもらいます。
ワイヤーフレームの指示方法
ワイヤーフレーム画像をドラッグ＆ドロップでClaude Codeに渡し、「トップページなんですけど、このワイヤーフレーム通りに実装しましたか？」と確認します。
エージェントを明示的に指定することも重要です。
- Generator ー コードを生成するエージェント
- Designer ー デザインを担当するエージェント
- Evaluator ー 出力を評価するエージェント
明示的に指定しないと動いてくれない場合があるので、@Generator のようにエージェント名を指定してください。
現時点でのClaude Codeの画像認識精度
サイドバーなど一部の要素は反映してくれましたが、ヒーローセクション（メインのビジュアル部分）のワイヤーフレームは正確に反映されませんでした。
現時点でのClaude Codeの画像読み取り精度はあまり高くないため、以下の点に注意が必要です。
- 画像が小さすぎると認識精度が下がる
- レスポンシブ版のワイヤーフレームも同じ画像に含めると見づらくなる
- 「ちゃんとここを見てください」と明示的に伝えると認識してくれる場合がある
デザイン・レイアウトの微修正
デザインとレイアウトに関しては、気の済むまで地道に修正を重ねていく形になります。
- 背景色とサイドバーが同じ色で分かりづらい場合は修正を依頼する
- 枠線を濃くしてセクションの区切りをわかりやすくする
- ヒーローセクションの改善を画像を貼り付けて指示する
Claude Designの活用
デザインに関しては、ClaudeのデスクトップアプリやWebブラウザ版で使えるClaude Design機能も活用できます。Claude Designでデザインを出力し、それをダウンロードしてClaude Codeに貼り付けるという方法も有効です。
料金ページの確認
前回作成した料金ページも確認しておきましょう。管理者ユーザーだと料金ページが見れない場合があるので、ログアウトして別のテストユーザーでログインして確認します。
次のステップ
次の動画からは、購入ボタンを押したら実際に課金処理が行われるよう、Stripe決済の実装を進めていきます。