Figma・PSD・AiのPCデザインから最短半日でコーディング

STUDIO NNC合同会社（本社：東京都稲城市、代表：中里 寛）は、2026年11月5日より、Web制作会社・広告代理店・Webデザイナー向けに、Figma・Photoshop・Illustratorのデザインデータからコーディングを行う「STUDIO NNC CODING OUTSOURCING SERVICE（AIコーディング代行）」のβ版の提供を開始しました。 独自開発のAIエージェントで、1ページ税込19,800円〜、最短半日での納品に対応。スマートフォン（SP）用のデザインがなくても、PCデザインをもとにSPレイアウトを設計し、レスポンシブ実装まで行います。料金はPCデザインの縦幅で決まるため発注前に概算が分かり、サービスサイトでは実装サンプルごとの実装時間と参考価格も公開しています。

サービスサイト：https://nnc-studio.jp/coding-outsourcing-service/

■サービス開始の背景

デザインが完成した後も、Webサイト制作には画像の書き出し、コーディング、スマートフォン対応、表示確認など多くの工程が残ります。「コーディングの外注先が見つからない」「SPデザインまで作る時間がない」「急ぎの案件を受けられない」といった課題を抱える制作現場は少なくありません。

本サービスで使用しているAIエージェントは、もともと当社の制作業務のために独自に開発したものです。社内でテストと改良を重ねるうちに精度とスピードが向上し、コーディング工程の大部分を自動化できるまでになりました。「このクオリティのエージェントを社内だけで使うのではなく、より多くの制作者の方に使っていただきたい」という思いから、サービスとしての提供を決めました。

■本サービスの特徴

1. 最短半日で納品

デザインデータの共有から、AIエージェントによる実装、PC・SP対応での納品までの流れ（画像内の実装例：Dentalflow – Dental Clinic Free Figma Template / BRIX Templates［Figma Community／CC BY 4.0］をもとに当社がコーディング）

200時間以上の社内テストを重ねた独自のAIエージェントによる実装は、1ページあたり実測56〜83分（公開中のサンプルのうち1ページ構成の2件）。担当者による最終確認と納品準備までを含めて、最短半日でお届けします。急ぎの案件や、社内のコーディングが手一杯のときにもご相談いただけます。

※ページの長さ・複雑さ・受注状況により納期は変わります。

1. PCデザインだけでSP対応

Figmaの元PCデザインと、本サービスで実装したサイトのSP表示（デザイン：Wealthflow – Bank Free Figma Template / BRIX Templates［Figma Community／CC BY 4.0］をもとに当社がコーディング）

PCデザインをもとにSPレイアウトを設計し、レスポンシブ実装まで行います。SPデザインの用意は必須ではありません。 デザインの雰囲気を維持しながら、スマートフォンに適した配置や余白に調整して実装します。PC・スマートフォンのレスポンシブコーディングは基本料金に含まれます。

1. デザインを忠実に再現

Figmaの元デザインと、本サービスで実装したサイト（PC）の比較（デザイン：Wealthflow – Bank Free Figma Template / BRIX Templates［Figma Community／CC BY 4.0］をもとに当社がコーディング）

元のデザインに近い状態まで仕上げ、スライダーやハンバーガーメニュー、フェードインなどの基本的な動きにも対応します。実装のルールと品質チェックの仕組みは次のとおりです。

※1〜2px単位の最終調整までは標準サービスに含みません。制作会社様が引き継いで仕上げられる一次コーディングを基本としています。

■引き継いで修正しやすいコードと、自動検証＋人の目による品質チェック

本サービスでは「推測で実装しない」ことを最上位のルールにしています。色・サイズ・フォント・テキストはデザインデータから取得した値だけを使用。Figmaのオートレイアウト（並びの方向・間隔・余白など）は対応表に沿ってCSSへ置き換え、スクリーンショットを見て「それらしく」組み直すことはしません。

納品するコードは、制作会社様が引き継いで修正しやすいよう、次のルールで統一しています。

クラス名はBEM（Block / Element / Modifier）で統一

色・文字サイズ・余白はCSS変数で一元管理（Figmaの場合は変数名をそのまま反映）

すべての画像にalt属性とwidth・height属性を付与

ラジオボタンやスライダーの操作ボタンは、実際に操作できるHTML要素で実装

複数ページの共通パーツは1つにまとめ、全ページで同じものを読み込む

仕上がりは15項目の自動検証で確認しています。セクションの位置と高さ、色、余白、横方向のはみ出し、画像の中身、見出しの折り返し、文字サイズの下限、フォームや操作部品の動作などを機械的にチェック。スマートフォンは画面幅320pxまで検証します。自動検証を通過したうえで、納品前には担当者が表示と動作を確認します。

■SPデザインの生成・納品にも対応（追加オプション）

SPデザインの生成・納品オプション（説明用イメージ。画像内のデザイン：Event & Music Landing Pages — 6 Website Templates / Woopicx［Figma Community／CC BY 4.0］をもとに当社が加工）

PCデザインをもとに、スマートフォンに最適化したSPデザインを新たに生成します。生成したSPデザインは、ご依頼時と同じ形式（Figma・Photoshop・Illustratorのいずれか）で、テキストや画像、各パーツを編集できるデータとして納品。納品後もデザインの修正や調整が可能で、SPデザイン制作の工数削減や納期短縮につながります。

※本オプションの料金は内容を確認したうえでお見積もりします。

■実装サンプル・実装時間・参考価格を公開

公開中の実装サンプル（デザイン：Wealthflow、Dentalflow / BRIX Templates、Event & Music Landing Pages / Woopicx、NFT Marketplace Template / Anima［いずれもFigma Community／CC BY 4.0］をもとに当社がコーディング）。黄色の数字は実装時間（実測値）、右は参考価格（税込）

サービスサイトでは、Figma Communityで公開されているデザインを実際に本サービスでコーディングした実装サンプルを公開しています。元のFigmaデザインと実装サイトを並べて、再現度・時間・費用感をご確認いただけます。

※実装時間は、Figmaデザインの読み込みからコーディング・社内チェック完了までの実測値です。納品をお約束する時間ではありません。参考価格は仕様により変動します。

■β版料金

正式リリース前のβ版として、特別料金でご提供しています。料金はPCデザインのアートボードの縦幅で決まるため、発注前に概算を把握できます。

1ページのコーディング（PCデザインの縦幅）

料金（税込）

〜8,000px

19,800円

8,001〜12,000px

24,800円

12,001〜16,000px

29,800円

16,001px〜

個別見積もり

複数ページ（トップ＋下層ページ）のコーディングは29,800円〜（税込）です。

WordPress化（CMS化）は29,800円〜（税込）の追加オプションとしてご用意しています。

そのほかのオプションは、お見積もりのうえ対応します。

※PC・スマートフォンのレスポンシブコーディングを基本料金に含みます。表示価格はβ版の料金です。

■今後の展望

β版の提供を通じて品質や制作フローの改善を進め、制作会社の継続的な外注先として、Web制作の工数の削減と納期の短縮を支援してまいります。デザインが完成する前のご相談や、実際の案件でのβ版のお試しも歓迎しています。

サービス詳細・お問い合わせ：https://nnc-studio.jp/coding-outsourcing-service/

■サービス概要

サービス名

STUDIO NNC CODING OUTSOURCING SERVICE（AIコーディング代行）β版

対象

Web制作会社・広告代理店・Webデザイナー

対応データ

Figma・Photoshop（PSD）・Illustrator（Ai）

料金

1ページ税込19,800円〜（β版料金）

納期

最短半日（ページの長さ・複雑さ・受注状況により異なります）

オプション

WordPress化（CMS化）、SPデザインの生成・納品、お問い合わせフォーム（CGI）、細かなデザイン調整、特殊な機能・複雑なアニメーション

■STUDIO NNC合同会社について

STUDIO NNC合同会社は、Webサイトの企画・デザイン・コーディングなどを手がけるWeb制作スタジオです。Web制作の実務で培った知識とAI技術を組み合わせ、制作工程の効率化と品質向上に取り組んでいます。

【会社概要】 会社名：STUDIO NNC合同会社 代表者：中里 寛 設立：2021年8月 事業内容：Webサイトの企画・デザイン・コーディング URL：https://nnc-studio.jp/

【本件に関するお問い合わせ】 報道関係者の方：STUDIO NNC合同会社 広報担当　E-mail：info@nnc-studio.jp サービスについて：サービスサイト内のお問い合わせフォームよりご連絡ください。 https://nnc-studio.jp/coding-outsourcing-service/

【画像クレジット】 本リリースの画像に掲載している実装サンプルは、Figma Communityで公開されている以下のデザインをもとに、当社がコーディング・加工したものです。 ・Wealthflow – Bank Free Figma Template（BRIX Templates）

https://www.figma.com/community/file/1684332334595533500/wealthflow-bank-free-figma-template ・Event & Music Landing Pages — 6 Website Templates（Woopicx）

https://www.figma.com/community/file/1684671730969959037/event-music-landing-pages-6-website-templates ・Dentalflow – Dental Clinic Free Figma Template（BRIX Templates）

https://www.figma.com/community/file/1684025284112556809/dentalflow-dental-clinic-free-figma-template ・NFT Marketplace Template（Anima）

https://www.figma.com/community/file/1173962104946517060/nft-marketplace-template-create-an-nft-website-in-minutes ライセンス：クリエイティブ・コモンズ 表示 4.0 国際（CC BY 4.0）

https://creativecommons.org/licenses/by/4.0/deed.ja