ジェー・ピー・シーが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).

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  【Git】remote設定を変更する方法
• 
  【VBA】コメントアウトを設定する方法
• 
  マークダウンで改行する方法
• 
  【CSS】notで複数の件を除外する方法
• 
  x86とx64の違いを分かりやすく解説
• 
  GitLabとGitHubの違いを解説
• 
  パソコンのメモリの目安を用途別に選ぶ方法
• 
  Linuxで環境変数を確認する方法
• 
  CapsLockキーを解除する方法
• 
  UbuntuのIPアドレスを確認する方法

ITやプログラミングに関するニュース

• 
  AITORAがAI検索での競合比較を可視化、対策レポートをモニター価格月額10万円〜で提供
• 
  株式会社MIXIが「Romi（Lacatanモデル）」の選べる声を全4種類に拡大、キャラ変との組み合わせが広がる
• 
  藤枝市役所が国産LLM「Sarashina」活用の窓口AI実証事業で総務省採択、ソフトバンクと協定締結
• 
  Hanji株式会社がAIチューター「Knock」に赤入れ添削機能を追加、数十秒〜1分程度で大学入試レベルまで対応
• 
  KozotaiがAIネイティブ会計ソフト「KOZOTAI」を正式リリース、自然言語入力だけで仕訳から決算書まで一貫処理
• 
  NTT西日本株式会社が大阪・福岡に次世代AI対応型データセンターを新設、西日本のAIインフラ強化へ
• 
  パテント・インテグレーション株式会社が「サマリア」の弁理士法対応を強化、利用規約改訂と注意喚起機能を追加
• 
  アステリアキャンバスがAI業務プラットフォーム「Bakusoku.AI」を提供開始、最短3分で業務ソフトウェアを自動生成
• 
  合同会社DMM.comが「DMMキャラトーク」を提供開始、1,000以上のパターンのキャラクターと1対1でトーク
• 
  株式会社アスレバがゴリラセールスAI商談を正式リリース、顧客の検討熱度が高い瞬間にAIが商談化を自動化