STUDIO NNCβ 見積もり相談

Web制作会社・広告代理店・Webデザイナー向け
AIコーディング代行

SPデザインの生成にも対応可能。Web制作の工数と納期を大幅に
削減できます。

実装サンプルを見る 無料で見積もり相談
  • 1ページ税込19,800円〜のβ価格
  • Figma・Photoshop・Illustratorなど、
    幅広いデザインデータに対応
  • WordPress化にも対応
02 / SAMPLES

このクオリティを、このスピードで。

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

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

03 / ISSUES

こんなお悩みはありませんか？

その制作工程、NNCがまとめて
サポートします。デザインが完成していれば、コーディングから品質チェックまでを短納期で対応します。
SPのレイアウト設計やWordPress化もまとめてお任せいただけるので、外注先探しの手間も、
社内のリソース不足も解消できます。

  • コーディングの外注先が
    なかなか見つからない

    Figma・Photoshop・Illustratorのデータを共有するだけで、すぐにご依頼いただけます

  • デザインは完成したのに、
    実装のリソースが足りない

    完成したデザインを、再現度の高いコーディングで形にします

  • SPデザインまで作る時間がない

    PCデザインだけでOK。SPのレイアウト設計まで対応します

  • 急ぎの案件を
    受けられない

    最短半日で納品。急ぎの案件も受けやすくなります

  • コーディングを外注すると
    利益が残りにくい

    1ページ19,800円〜の低価格で、外注コストを抑えられます

  • 案件ごとに外注先を探している

    依頼方法も料金体系も一定。
    毎回同じ流れでご依頼いただけます

04 / FEATURES

サービスの3つの特徴

200時間以上の社内テストを重ねて開発した独自のAIコーディングシステムで、
デザインの読み込みから実装・検証までを効率化しています。

  1. 最短半日で納品

    独自のAIエージェントで制作時間を大幅に短縮。急ぎの案件や、社内のコーディングが手一杯のときにもご相談いただけます。

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

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

    PCデザインをもとにSPレイアウトを設計し、レスポンシブ実装まで行います。SPデザインの用意は必須ではありません。

    オプションで、SPデザインの生成・納品（Figma・Photoshop・Illustrator）にも対応しています。詳しくはこちら

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

    AIによる実装と、デザインデータとのレイアウト比較・レスポンシブ表示などの品質チェックを組み合わせ、元デザインに近い状態まで仕上げます。

細かな作業も、まとめて
お任せください

デザインデータを共有するだけFigmaはURL、Photoshop・Illustratorはデータをお送りください。テキスト・画像・レイアウトはデザインから取得します。meta情報やリンク先はテキストでご指示ください。
画像の書き出し・最適化写真・ロゴ・アイコンを用途に合った形式で書き出します。
アニメーションにも対応スライダーやハンバーガーメニューなど、デザインやご説明に沿って実装します。
複数ページもまとめてheader・footerや共通パーツを共有し、ページ数に応じて効率よく実装します。
05 / SCOPE

サービス内容・対応範囲

標準サービスに含まれる作業と、追加オプションは以下のとおりです。
各項目をクリックすると、詳しい内容をご確認いただけます。

STANDARD標準サービス

Figma・Photoshop・Illustratorデザインの読み取り・解析

ご支給いただいたFigma・Photoshop・Illustratorのデザインデータを解析し、レイアウトや配色、フォント、各要素の配置などを確認します。デザインの意図を読み取り、実装に必要な情報を整理します。

画像・アセットの書き出し

デザインデータから写真・ロゴ・アイコンなどの素材を抽出し、用途に適した形式で書き出します。画像の最適化も行い、Webサイトで使用できる状態に整えます。

HTML / CSS / JavaScript 実装

デザインをもとに、HTML・CSS・JavaScriptを使用してWebページを構築します。見た目の再現だけでなく、ブラウザ上で適切に表示・動作するコーディングデータを作成します。

PC・スマートフォンの
レスポンシブ対応

PC・スマートフォンなど、画面サイズに応じてレイアウトが切り替わるレスポンシブ対応を行います。各デバイスで見やすく、操作しやすいWebページに仕上げます。

PCデザインのみの場合のSPレイアウト設計

スマートフォン用のデザインがない場合も、PCデザインをもとにSPレイアウトを設計します。デザインの雰囲気を維持しながら、スマートフォンに適した配置や余白に調整して実装します。

基本的なアニメーション・動き

ホバー時の色の変化やフェードイン、スムーズなスクロールなど、一般的なWebサイトで使用される基本的な動きを実装します。複雑な演出や特殊なアニメーションは別途お見積もりとなります。

品質チェック・
コーディングデータ納品

デザインとの再現性やレスポンシブ表示、基本的な動作を確認したうえで納品します。完成したHTML・CSS・JavaScriptなどのファイル一式をお渡しします。

OPTION追加オプション

SPデザインの生成・納品（Figma・Photoshop・Illustrator）

PCデザインをもとに、スマートフォンに最適化したSPデザインを新たに生成します。PC版のデザインテイストを維持しながら、画面幅に合わせてレイアウトや文字サイズ、余白、各要素の配置を調整します。

生成したSPデザインは、テキストや画像、各パーツを編集できるFigma・Photoshop・Illustrator形式で納品します。単なる画像データではないため、納品後もデザインの修正や調整が可能です。

SPデザインを一から制作する手間を削減できるため、デザイン制作の工数削減や納期短縮にもつながります。

※本オプションはSPデザインデータの生成・納品を行うサービスです。レスポンシブコーディング自体は標準サービスに含まれます。

WordPress化（CMS化）

コーディングしたWebサイトをWordPressに組み込み、管理画面からコンテンツを更新できるようにします。お知らせの投稿・一覧表示など、ご希望の更新機能に応じて対応します。

お問い合わせフォーム（CGI）

お名前・メールアドレス・お問い合わせ内容などを入力できるフォームを設置します。入力内容の確認やメール送信など、必要な機能に応じて実装します。

細かなデザイン調整

標準サービスの範囲を超える、余白・文字サイズ・配置などの細かな調整に対応します。1〜2px単位の微調整など、より厳密なデザイン再現をご希望の場合にご利用いただけます。

特殊な機能・複雑なアニメーション

高度なスクロール演出や複雑なスライダー、特殊なインタラクションなど、通常のコーディングでは対応しない機能を実装します。内容や仕様を確認したうえで個別にお見積もりします。

06 / PRICE

β版料金

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

1ページのコーディングPCデザインのアートボード高
〜 8,000px
19,800円
8,001 〜 12,000px
24,800円
12,001 〜 16,000px
29,800円
16,001px 〜
個別見積もり

PC・スマートフォンのレスポンシブコーディングを基本料金に含みます（税込）。

  • 表示価格はβ版の料金です。
複数ページ（トップ＋下層ページ） 29,800円〜（税込）

単純な「1ページ料金 × ページ数」ではなく、共通パーツの再利用を考慮してお見積もりします。

追加オプション

WordPress化（CMS化）

29,800円〜（税込）

投稿機能・最新記事一覧・一覧/詳細ページなど、一般的なCMS化に対応。WordPress化のみのご依頼も可能です。

以下はお見積もりの上ご対応いたします

  • SPデザインの生成・納品（Figma・Photoshop・Illustrator）
  • お問い合わせフォーム（CGI）
  • 細かなデザイン調整
  • 特殊な機能・複雑なアニメーション
デザインデータを共有して見積もり相談
07 / FLOW

ご依頼から納品まで

  1. STEP 01

    お問い合わせ

    FigmaのURL、またはPhotoshop・Illustratorのデータと、案件の概要を共有してください。細かな仕様はテキストで別途ご支給ください。

  2. STEP 02

    お見積もり・ご発注

    デザインの縦幅・ページ数・実装内容を確認し、費用と納期をご案内します。
    内容にご納得いただけたら、ご発注ください。

  3. STEP 03

    コーディング

    AIエージェントで実装し、デザインデータとの比較やレスポンシブ表示など複数の工程でチェックします。

  4. STEP 04

    納品

    HTML / CSS / JavaScriptなどの制作データを納品します。追加の調整もご相談ください。

β版ではサービス改善のため、納品後に簡単なアンケートへのご協力をお願いしています。

08 / FAQ

よくある質問

Q.PCデザインしかありませんが、依頼できますか？

はい。PCデザインからSP向けのレイアウトを設計し、レスポンシブ対応まで実装します。レイアウトについて確認・ご相談させていただく場合があります。

Q.Photoshop・Illustratorのデータからでも依頼できますか？

はい。Figmaと同じく、Photoshop・Illustratorのデータからのコーディングに対応しています。料金・納期も同じ基準でご案内します。

Q.SPデザインも作成してもらえますか？

はい。追加オプションでSPデザインを生成し、ご依頼時と同じ形式（Figma・Photoshop・Illustratorのいずれか）の編集できるデータで納品します。料金は内容を確認したうえでお見積もりします。

Q.最短半日で必ず納品できますか？

案件の規模・複雑さ・受注状況によって異なります。お見積もりの際に納期をご案内します。また、作業中に仕様などの確認事項が出た場合は、ご返答をいただいてから作業を再開するため、その分納期が前後することがあります。

Q.デザインと完全に一致しますか？

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

Q.WordPressにも対応できますか？

はい。WordPress化に対応しています。静的コーディング済みのサイトのWordPress化のみのご相談も可能です。

Q.複数ページも依頼できますか？

はい。ページ数や共通パーツの再利用などを考慮してお見積もりします。

Q.秘密保持契約（NDA）は結べますか？

ご希望があれば秘密保持契約（NDA）は結ばせていただきます。契約書につきましてはご用意いただく形となります。

09 / CONTACT

まずはデザインデータを共有して、

お気軽にご相談ください。

ページ数やデザインの縦幅、実装内容を確認し、お見積もりと納期をご案内します。
デザインが完成する前のご相談も歓迎です。

  • 料金・納期のお見積もり
  • このデザインで実装できるかの確認
  • 実際の案件でβ版を試したい
  • WordPress化・SPデザイン生成
    などのオプション
Photoshop・IllustratorはGoogle Driveなどの共有リンクを貼ってください。デザインが未完成の場合は空欄で構いません。

送信前にプライバシーポリシーを
ご確認ください。

TOP