ジェー・ピー・シーがFigmaとClaude Code連携のWebサイト制作代行を提供開始、制作工数を50%以上削減

株式会社ジェー・ピー・シーは、FigmaデザインとClaude Codeを連携したWebサイト制作代行サービスの提供を開始しました。デザイン制作からコーディングまでをワンストップで請け負い、制作工数を50%以上削減しながら大規模サイトの制作・内製化を支援するサービスです。人材不足や外注コスト増加に悩む企業に向けた新たな選択肢として、提供されています。

近年、Webサイト制作の現場ではデザイナーやコーダーの人材不足、大規模サイトや大量ページの更新が滞るといった課題が深刻化しています。外注コストの増加を受けて、社内Web制作の内製化を進めたいと考える企業も増えてきました。

一方で、内製化を進めるためのノウハウやリソースが不足し、結果として、外注を継続せざるを得ない状況も多く見られます。こうした業界課題に対し、FigmaとClaude Codeを組み合わせたWebサイト制作は、デザイン制作とコーディングを大幅に効率化する新しい選択肢として注目を集めています。

本サービスは、FigmaでのUI設計とAIコーディングツールのClaude Codeを連携させて進めるWebサイト制作の手法です。FigmaのデザインデータをFigma MCPサーバー経由でClaude CodeやCursorへ渡すことで、HTMLやCSS、JavaScriptのコードが自動生成されました。人手でゼロから組み上げるよりも大幅な時短を実現できます。

さらにFigmaライブラリを起点に運用すれば、大量ページでも品質を均一に保ちながら、デザインからコーディングまで一気通貫で進められる点が強みです。Figmaのレイヤー構造・コンポーネント情報がAIに正確に伝わるため、従来の手作業と比べて制作工数を50%以上削減できます。

本サービスの主な特徴は、以下の3点です。

• FigmaとClaude Codeの連携でコーディング作業を50%以上効率化
• AI生成後に熟練コーダーが品質チェックを実施する二重体制
• Figmaライブラリ活用で数百ページ規模の大規模サイトにも対応

本サービスでは、AIによる自動生成後に必ず熟練コーダーが品質チェックを実施し、ブラウザ表示崩れ・アクセシビリティ対応・SEO要件まで丁寧に修正対応します。納品前には複数ブラウザでの動作確認も行われます。AIと人間の役割を明確に分担することによって、自動化のメリットを活かしながら納品物のクオリティを高い水準で維持できる体制です。

大規模サイトへの対応では、Figmaライブラリを活用してデザイン要素をテンプレート化することによって、一貫した品質を保ちながらデザイン・コーディングを自動化できます。共通パーツをコンポーネント化しておくことで、2ページ目以降の制作工数が大幅に圧縮され、ページ数が増えるほど削減効果が大きくなる仕組みです。Figmaライブラリを整備することによって、顧客側での内製運用にもスムーズに移行できます。

制作工数を50%以上削減できるという数値は、Web制作に関わる現場なら規模を問わず大きなインパクトを持つ水準です。マーケティングの現場でもランディングページや特設サイトの制作依頼は頻繁に発生しており、コーダーへの依頼から納品までのリードタイムが課題となるケースは業界全体で多く見られます。Figmaのデザインデータをそのままコードに変換できる仕組みは、業種を問わず、幅広い活用可能性を持つアプローチです。

AI生成後に熟練コーダーが品質チェックを行う二重体制は、生成AIの精度への不安を解消するうえで現実的な設計だと言えます。自動化一辺倒ではなく「AIと人間の役割分担」を明示している点は、実運用を想定した企業にとって具体的な検討材料となります。内製化を目指しながらもリソース不足で外注を継続せざるを得ない企業が多い中、段階的な移行を実現する新たなアプローチとして、業界内でも関心を集めそうです。

References

1. ^ PR TIMES. 「コーディング代行の【CODING ARMY】がFigmaデザイン×Claude CodeによるWebサイト制作代行サービスの提供を開始 | 株式会社ジェー・ピー・シーのプレスリリース」. https://prtimes.jp/main/html/rd/p/000000024.000142512.html, (参照 26-06-17).