Figmaから最短半日でコーディング｜コーディング代行サービスβ版
Web制作を進める中で、
「デザインは完成しているけれど、コーディングまで手が回らない」
「複数の案件が重なり、コーディングのリソースが足りない」
「コーディングにかかる時間を減らして、デザインや提案に時間を使いたい」
といったことはありませんか？
STUDIO NNCではFigmaデザインから1ページのコーディングを最短半日でご納品する、コーディング代行サービスを開発しています。
目次
Figmaから最短半日でコーディング
200時間以上の社内テストを重ねて独自に開発したAIコーディングシステムを活用することで、コーディング作業の多くを効率化することが可能になりました。
Figmaで作成されたWebデザインをもとに画像書き出しからコーディング実装を行い、デザインとの比較やレスポンシブ表示など複数の検証工程を行ったうえでご納品します。
ページのボリュームや仕様によって異なりますが、1ページであれば最短半日程度でのご納品が可能で、
PC・SP・レスポンシブ対応まで含め1ページあたり税込19,800円〜行わせていただきます。
※ページの長さ、デザインの複雑さ、アニメーションなどの仕様によって納期・費用は異なります。
実際のコーディングサンプル
本サービスで、Figmaデザインから実際にコーディングしたサンプルをご覧いただけます。
元となったFigmaデザインと実装結果に加えて、ページ数・ページの高さ・実装にかかった時間・費用の目安も掲載しています。
デザインの再現度だけでなく、「このページ数・ボリュームをどのくらいの時間・クオリティ・費用感で実装できるのか」という点もあわせてご確認ください。
サンプル01｜サービスサイト（1ページ）
ページ数： 1ページ
ページの高さ： 約7,130px
実装時間： 約56分
費用の目安： 19,800円(税込)〜
Figmaデザイン
Figmaプロトタイプを見る
実装データ
実装データを見る
約7,000pxの1ページを、Figmaデザインの読み込みからコーディング・検証まで約56分で実装したサンプルです。
デザイン：BRIX Templates / Figma Community
Original Design: Wealthflow – Bank Free Figma Template
Figma Communityで公開されているデザインを使用し、コーディング検証を行っています。
サンプル02｜音楽イベントサイト（1ページ）
ページ数： 1ページ
ページの高さ： PC 約9,842px
実装時間： 約1時間23分
費用の目安： 24,800円(税込)〜
Figmaデザイン
Figmaプロトタイプを見る
実装データ
実装データを見る
PC・SPそれぞれにデザインが用意された約10,000px規模のページを、約1時間23分で実装したサンプルです。
デザイン：Woopicx / Figma Community
Original Design: Event & Music Landing Pages — 6 Website Templates
Figma Communityで公開されているデザインを使用し、コーディング検証を行っています。
サンプル03｜歯科クリニックサイト（7ページ）
ページ数： 7ページ
総ページ高： 約32,703px
実装時間： 約2時間20分
費用の目安：49,800円(税込)〜
Figmaデザイン
Figmaプロトタイプを見る
実装データ
- ・TOP
- ・ABOUT
- ・TEAM
- ・TEAM(MEMBER)
- ・BLOG
- ・BLOG(POST)
- ・CONTACT
TOPページだけでなく、下層ページを含めた7ページをまとめて実装したサンプルです。
同一サイト内で共通するデザインルールやパーツを活用することで、複数ページのコーディングにも効率的に対応できます。
デザイン：BRIX Templates / Figma Community
Original Design: Dentalflow – Dental Clinic Free Figma Template
Figma Communityで公開されているデザインを使用し、コーディング検証を行っています。
サンプル04｜販売サイト（7ページ・3画面幅）
ページ数： 7ページ
対応画面： 3画面幅・計21画面
総ページ高： 約21,826px
実装時間： 約1時間46分
費用の目安：39,800円（税込）〜
Figmaデザイン
Figmaプロトタイプを見る
実装データ
7ページを3つの画面幅（PC・タブレット・SP）、合計21画面で実装した複数ページのサンプルです。
21画面すべてを含めて約1時間46分でコーディング・検証まで完了しています。
デザイン：Anima / Figma Community
Original Design: NFT Marketplace Template – Create an NFT website in minutes
Figma Communityで公開されているデザインを使用し、コーディング検証を行っています。
実装にかかる時間について
ページの長さだけでなく、レイアウトの複雑さ、アニメーション、パーツ数などによって実装時間は変わります。
そのため、すべてのページを同じ時間でコーディングできるわけではありませんが、上記のようなページであれば数時間程度でコーディングまで進めることが可能です。
※ページの高さはPCデザインを基準としています。
※実装時間は、Figmaデザインの読み込みからコーディング・各種チェックが完了するまでにかかった時間です。
※実装時間はページのボリュームやデザイン、アニメーションなどの仕様によって異なります。
※掲載している時間は、Figmaデータをもとにコーディングおよび社内チェックを行った際の実測値です。
サービスの特徴
Figmaデータを共有するだけでOK
基本的には、実装したいFigmaデザインをご共有いただくだけでご依頼いただけます。
デザインデータからテキスト・画像・レイアウトなどを取得し、コーディングを進めます。
meta情報や外部リンク情報なども別途テキストでご指示いただければ全て反映いたします。
アニメーションの実装も対応
アニメーションの要望などがある場合、テキストや参考サイトなどでご説明いただければ実装いたします。
スライドショーやハンバーガーメニューなどの機能的な動きに関しても、Figma内にデザインがあれば動きに合わせてデザイン通り実装いたします。
PC・スマートフォンのレスポンシブ対応
PC・スマートフォンそれぞれのFigmaデザインをもとに、レスポンシブコーディングを行います。
PCデザインのみの場合についても対応可能ですが、レスポンシブ時のレイアウトについて確認・ご相談させていただく場合があります。
画像の書き出し・最適化にも対応
Figma内で使用されている画像についても、必要に応じて書き出し・最適化を行います。
写真・ロゴ・アイコンなど、それぞれの用途に応じた形式で実装します。
コーディング後に複数工程でチェック
実装して終わりではありません。
Figmaとのレイアウト比較、スタイルの確認、レスポンシブ表示など、複数のチェック工程を通してからご納品します。
複数ページのコーディングにも対応
TOPページ＋下層ページなど、同一サイト内の複数ページにも対応しています。
複数ページの場合は、header・footer・共通パーツ・デザインルールなどを共有できるため、ページ数や各ページのボリュームを確認したうえでのお見積もりとなります。
単純に「1ページの料金 × ページ数」ではなく、共通部分を考慮して算出します。
CMS化も対応
静的コーディングだけでなく、WordPressを使用したCMS化にもオプションで対応しています。
本サービスでコーディングしたデータをそのままWordPress化することはもちろん、すでにお客様側で静的コーディングまで完了しているサイトについて、WordPress化のみをご依頼いただくことも可能です。
投稿機能やカスタム投稿タイプ、カスタムフィールドなど、更新内容やサイトの仕様に合わせて構築します。
WordPress化をご希望の場合は、CMS化する範囲や必要な更新機能を確認したうえで、別途お見積もりします。
最短半日でコーディング
ページのボリュームや仕様によって異なりますが、最短半日程度でのコーディングが可能です。
急な案件や、社内のコーディングリソースが不足している場合にもご活用いただけます。
※ページの長さ、デザインの複雑さ、アニメーションなどの仕様によって納期は異なります。
特殊なアニメーションやインタラクション、複雑な機能を伴うページについては事前にデザインを確認したうえで対応可否をご案内します。
β版料金
現在、正式リリース前のβ版として特別料金でご提供しています。
単一ページ
| PCデザインのアートボード高 | β版料金 |
|---|---|
| 〜8,000px | 19,800円(税込)〜 |
| 8,001〜12,000px | 24,800円(税込)〜 |
| 12,001〜16,000px | 29,800円(税込)〜 |
| 16,001px〜 | 個別見積もり |
PC・スマートフォンのレスポンシブコーディングを基本料金に含みます。
※料金は原則としてPC版Figmaデザインのアートボード高を基準としています。
複数ページ
| トップ + 下層ページコーディング | 29,800円(税込)〜 |
複数ページの場合は、共通パーツを活用して効率的に実装できるため、単純な「1ページ料金 × ページ数」ではなく、ページ数・ボリューム・共通パーツ・デザインなど、サイト全体の構成を確認したうえでお見積もりします。
オプション
| 細かなデザイン調整 | 別途見積もり |
ご要望内容に合わせて別途お見積もりいたします。
| WordPress CMS化 | 29,800円(税込)〜 |
静的コーディング済みのサイトをWordPress化する場合の料金です。ニュースなどの投稿機能、TOPページへの最新記事一覧の出力、投稿一覧・詳細ページの作成など、一般的なCMS化に対応します。
※CMS化する範囲や投稿タイプ数、カスタムフィールド、絞り込み機能などの仕様によって料金が変わります。
※ページの構成・アニメーション・特殊な仕様などにより料金が変わる場合があります。
※β版での検証結果をもとに、正式リリース時には料金体系を変更する可能性があります。
ご利用の流れ
1.Figmaデータを共有（細かな仕様などはテキストで別途共有）
2.ページボリューム・仕様を確認
3.お見積もり・納期をご案内
4.コーディング・検証
5.完成データをご納品
β版ではサービス改善のため、ご納品後に簡単なアンケートへのご協力をお願いしています。
β版をご利用いただける制作会社・デザイナー様を募集しています
正式リリースに向けて、さまざまなデザインを使用した検証を重ねています。
これまでLP、コーポレートサイト、ポートフォリオサイト、複数ページサイトなど、異なるタイプのデザインでコーディング・検証を行ってきました。
また現在、正式リリースに向けてβ版をご利用いただける制作会社様・デザイナー様を募集しています。
β期間中は通常予定価格よりもお安い料金でご利用いただけますので、コーディングリソースが必要な際にぜひご活用ください。
「案件が重なってコーディングまで手が回らない」
「一度実際の案件で試してみたい」
といったWeb制作会社様・Webデザイナー様は、お気軽にお問い合わせください。
コーディングにかける時間を減らし、デザインや提案など、より重要な制作業務に時間を使える環境づくりをお手伝いできればと思います。
ご相談がございましたら、お気軽にフォームよりお問い合わせください！
