Webflow Webflowから本番環境向けReact事例ページ制作ワークフロー
Webflowサイトを洗練されたデプロイ可能なReactケーススタディページへ変換します。. Tools: Figma, Figma Make, Claude Code, Webflow, Vercel, Gem. Stage: Prototyping, Handoff
Tools: Figma, Figma Make, Claude Code, Webflow, Vercel, Gem. Stage: Prototyping, Handoff
このワークフローでは、Webflowサイトを洗練された事例紹介ページに変換し、Reactのシングルページアプリケーションとしてデプロイ可能な状態にします。
既存サイトと新規事例紹介ページのHTMLをWebflowからローカルファイルにエクスポートします。これによりコンテンツと構造の基盤が得られます。ストーリーテリングの方向性についてCursor Codeと協議し、ナラティブを統一します。
エクスポートした素材を用いて、新規事例紹介ページ用のHTML（Claude）をCursor Codeに生成してもらいます。コピーと図表を生成させ、レイアウトとメッセージングが適切と感じられるまで反復調整します。
3. Figma の「HTML to Design」プラグインで prototype をインポートし、視覚的な調整を行います。必要に応じてタイポグラフィ、余白、コンポーネントを更新してください。 4. Figma で、Figma Make（Gemini 3 提供）を使用し、デザインの最適化版を自動生成します。これにより階層構造の改善と仕上げが向上します。 5. Figma Make から最終デザインを React プロジェクトとしてダウンロードします。生成されたシングルページを Vercel に無料でデプロイしてください。