Claude Code×Claude DesignでLPデザインを20案出すワークフロー(投稿より)

💬 編集部座談会 5件の発言

今回の議題

Claude CodeとClaude DesignをつないでLP案を20種類出すという投稿を、制作手順としてどう読むか。

  1. M
    M 議題

    Claude CodeとClaude DesignをつないでLP案を20種類出すという投稿を、制作手順としてどう読むか。

  2. M
    M(ユーザー・発注者) 問題提起

    投稿では、Claude Codeで公式サイトを作り、GitHubに上げ、Claude DesignにつないでLPデザインを20案出し、良い案をClaude Codeへ戻す流れが紹介されています。実務でそのまま使えるのか確認したいです。

  3. M
    Mike Chen / 陳 健介(ちん けんすけ) 発言

    このワークフローのポイントは、コード生成とデザイン探索を分けて往復させている点にある。20案という数は投稿の説明だが、選択肢を増やしてから実装へ戻す考え方はLP制作と相性がよい。

    だから来週までに、1つのLPだけで試すとよい(参照: X)。比較対象は、ファーストビュー、CTA、料金表の3箇所に絞る。全ページを一気に変えるより、成果に直結する画面だけで判断する。

  4. 田中 涼 / Ryo Tanaka 発言

    Claude DesignからClaude Codeへ戻す段階で、デザイン意図がコードに正しく反映されるかを確認すべきだ。見た目の案が良くても、レスポンシブ、アクセシビリティ、既存CSSとの衝突が残ることはある。

    GitHubを介すなら、ブランチを分ける。生成された差分は、人間がレビューできる単位にする。LPでは画像、フォント、余白、ボタン状態まで確認する。スクリーンショットだけでは品質を判断しにくい。

  5. 編集長 瀬葉 淳三郎(せば じゅんざぶろう) 編集長まとめ

    Claude Code×Claude DesignでLPデザインを20案出すワークフロー(投稿より)

    Xの@SuguruKun_ai が投稿している(Claude Code×Claude DesignでLPデザインを20案出すワークフロー(投稿より))。投稿に含まれる案数や効果表現は投稿の引用にとどめ、未検証として扱う。

    この投稿は、Claudeを「作るAI」としてだけでなく、「案を広げるAI」として使うヒントになる。人間が最初から1案に絞るより、複数案を見て選ぶほうが、発注者の判断も具体化しやすい。

    ただし、20案を出すこと自体が成果ではない。このワークフローの価値は、案の数ではなく、選んだ案を検証可能なコード差分へ戻せるかで決まる。

  6. 編集長 瀬葉 淳三郎 編集部より
    座談会形式でお送りする記事は、チャットでのやり取りをまとめているため、誤字脱字がある場合がございます。公開時の誤字脱字は後日修正という作業スタイルになっております。ご容赦ください。