株式会社Web春 代表取締役の栗田です。
今回はこんな疑問に答えていきます｡
- HTMLコード出力（書き出し）ができるツールはどれ？
- STUDIOやWixで作ったサイトはコード出力できる？
- 2026年のいま、AIやFigmaでHTMLを作るのはアリ？
- 実際にコード出力して納品した人の話を聞きたい。
先に結論です。ノーコードで作ってHTMLコード出力するなら、実務に使える第一候補はWebflowです。有料プランに加入すればHTML・CSS・JSをZipファイルに一括出力でき、出力したコードは独自サーバーでの公開やコード納品にそのまま使えます（CMSの内容はZipに含まれず、別途CSVでの出力が必要です）。そして2026年のいまは、ツールを介さずAIに最初からHTMLを書かせるという二つ目の道が現実的になりました。当社は前者で企業に納品したサイトを今も運用し、後者で自社サイト26ページを作り直しています。両方の実例を書きます。
当社はノーコードWeb開発｢Webflow｣を使い、Web制作やWebflowの外部ツールの導入サポートなどを行っています。その中でコード出力して企業に納品したこともあるのでその事例も合わせて紹介します。
この記事の要点
- コード出力とは
- コード出力とは、ノーコードツールで構築したWebサイトをHTML・CSS・JSのコードファイルとして書き出す機能です。WebflowならZipファイルに一括出力でき、独自サーバーでの運用やコード納品が可能。STUDIOやWixには機能自体がなく、2026年はAIに最初からコードを書かせる方法が加わりました。当社は静的化で運用費を約1/55（年8.3万円→年1,500円）にした実測があります。
目次
HTMLコード出力ができるツール、できないツール
まず全体像です。「作ったサイトをHTML・CSS・JSのコードとして手元に持てるか」で、主要ツールの対応はここまで分かれます。
| ツール | HTMLコード出力 | 形式・条件 | 費用の目安 |
|---|---|---|---|
| Webflow | ○ | HTML・CSS・JSをZipに一括出力（CMSの内容は別途CSV） | 有料プラン（Basic 月15ドル〜・2026年時点） |
| Nicepage | ○ | HTML出力・WordPress出力に対応 | 無料プランあり（執筆時点） |
| readymag | ○ | コード出力はBusinessプラン限定 | 月65ドル（執筆時点） |
| STUDIO | × | コード出力機能なし。プラットフォーム内で完結する設計 | — |
| Wix | × | コード出力機能なし | — |
| Figma | △ | サイト一式のHTML書き出しは公式機能になし（Dev Modeはコード参照・AI構築のFigma Makeは別物） | — |
| AI構築（Claude Code等） | ○ | 生成物が最初からHTML・CSS・JSそのもの＝出力の壁がない | 無料枠あり〜月額 |
書き出せないツールが悪いわけではありません。ツール内で完結するぶん簡単で速い。ただしサービス終了や値上げの影響を直接受け、引っ越すときはコードの移行ではなく作り直しになります。ノーコードのサービス終了は実際に起きています（ノーコードWebサイトのデメリットで実例を書いています）。
HTMLコード出力ができるノーコードWeb開発ツールを紹介します｡
現状ノーコードではコード出力できるモノは多くありません。多くて2〜5個ぐらいが安定したサポートを提供しています。
今回はコード出力機能がついているツールのみ紹介します。それでは進んでいきましょう。
- Tips：製作ツールが縛られると､Webサイトを失う可能性があります。必ずコード出力ができるWeb開発ツールを使用しましょう｡当社ではデメリットを解説した記事も公開しています。
Webflow：WebデザイナーのためのWeb開発ツール
当社が専門で使用しているWebflow。サイト制作に特化し､サイトの構築から公開･運用まですべての事を実行できます｡
コード出力はZipファイルにHTML･CSS･JSのすべてをまとめて出力可能｡
企業の規模や資金調達を含めて考慮してみると､コード出力ができるノーコードではWebflowが1番有名で安定しています。
実際に僕も使用歴が4年目になるほど、ずっと使用しています。特に問題なく快適なので本気でおすすめです。（2026年追記: 現在はWebflow歴6年を超え、株式会社Web春としてAIサイト制作も主戦場にしています）
- 2021年時点の話ですが資金調達に関する記事はアメリカで2100億円の価値と言われる「Webflow」とは？で紹介しました。僕自身がWebflow専門に特化して会社にするまでに至った経緯はプロフィールにて掲載しています。
コード出力のためにかかる料金（2026年5月改定後）
Webflowでコード出力するためには有料プランに加入する必要があります｡2026年5月の料金改定後はStarter無料／Basic 月15ドル／Premium 月25ドル（いずれも年払い時の月額・2026年時点）という構成で、無料のStarterプランではコード出力できません。
メリット・デメリット
メリット：ワンクリックでZipファイルにHTML､CSS､JSなど全てまとめて出力可能。CMSの内容は別途CSVファイルにて出力が必要です。
デメリット：サポート言語が英語。コード出力も英語でコメントが書いてあります。
- 当社ではWebflowの受託開発、自動返信メール機能の導入サポート、Cookieの導入サポート、Webflowフォームのカスタマイズなど追加ツールの導入サポートを行っております。料金ページよりご相談ください。
STUDIOはHTML書き出しできない（2026年時点）
STUDIOで作ったサイトは、HTML書き出し（コード出力）ができません（2026年時点）。プラットフォーム内で完結する設計で、サイトをHTML・CSS・JSのファイルとして持ち出す機能が用意されていません。日本語UIで速く公開できる良いツールですが、コードを資産として手元に残したい場合は、Webflowか、後半の「AIでHTMLコードを出力する」の章で書くAI構築を選んでください。すでにSTUDIOで運用中のサイトを引っ越したい場合は、コードの移行ではなく作り直しになります。両者の選び方はWebflowとSTUDIOの比較記事に判断材料をまとめています。
Nicepage： WordPress出力可能
Nicepageもコード出力ができます。Wixのようにドラッグするだけで作成でき、安く、豊富なレベルの高いテンプレートを使用可能。WordPressのプラグインとして使用できます｡
追記：まだ使用するのは時期尚早と判断しました。「重い・動作がうまくいかない・コード出力すると直すのが大変｡」Webflowの方が経営も機能もサポートも安定している印象です。今のうちに使ってみて使い方を日本で配信していくのは先行利益を狙えます。このブログでも解説する予定でしたが､今後はあまり触れていきません。
コード出力のためにかかる料金
なんと無料｡（執筆当時の料金です）
メリット･デメリット
メリットは無料でコード出力ができること｡Webflowよりも簡単にWebサイトを作れること､テンプレートがめっちゃ豊富なことです｡特に作りやすさは｢Wix｣と同じぐらい簡単です｡Wixはコード出力できないので英語が分かるのであればWixよりもNicepageをおすすめします｡
デメリットはツール自体が重いこと｡動作がいちいち重いです｡また少しUIがごちゃついてて見づらいですね｡慣れれば余裕だと思います｡CMSの機能がないのでブログ運用したい方はWordPressに出力して使いましょう｡「またWordPressか」とうんざりする方はWebflowのほうがおすすめです｡
readymag
こちらはコード出力機能を解放するためのプラン料金がめっちゃ高いのがネックです｡僕は使用したことがないので詳しい内容を書くことができません。もし興味があれば使用してみてはいかがでしょうか。
その他のコード出力が可能なノーコードについては下記の記事でまとめられています｡7 FREE ONLINE WEBPAGE BUILDER WITH HTML CODE EXPORT(英文)
コード出力のためにかかる料金
コード出力するためにはBusinessプランに加入する必要があります｡Businessプランは月65ドル｡（執筆当時の料金です）
メリット・デメリット
メリットは最新なのでこれからのアップデートでどんどん良くなる可能性があること｡先行利益が狙えること。
デメリットは現状WebflowやNicepage､Studio､Wixなどと比べた時､特に目立った利点が無いことです｡今回の流れで紹介するべきではなかったかも｡知っていたので一応シェアしておきます。使用している方がいれば少しお話お聞きしたいです。
コード出力で選ぶならWebflowがおすすめ
コード出力を考慮するとWebflowがおすすめです。実際にWebflowで出力したコードをシェアしているので確認したい方はダウンロードしてみてください。
Webflowは基本数値を指定して作成していきます。いままでコードを書いていた方は比較的すぐ使いこなせる作りです｡
Nicepageは見た目で作成するイメージです｡イラレやフォトショなどに近い感覚でしょう。もちろん数値でも管理できます。
実例：実際にWebflowでコード出力してみた
ねこのきもち｜ねこ支援カフェ
上記画像は、僕がボランティアで制作しWebflowからコード出力したサイトです。出力されたコードは整形が綺麗で、クラス名も設計どおりに書き出されていました。
（2026年追記: 以前行っていたサンプルコードのパスワード配布は終了しました。現在は、コード出力のその先——AIでサイトを丸ごと構築する方法をまとめた特典『AIサイト構築の教科書（ミニ版）』を、メルマガ登録者に無料配布しています。当サイト自体がその方法で作られています。）
【経験談】コード出力後､企業に納品してみた。
ここでは以下の3つの項目で経験談をお話していきます。
- 実際にサイトをコード出力して運用中
- 僕が実際にベテランWebデザイナーに聞いたWebflowのコードの品質
- Webflowコミュニティで聞いたコード納品の経験談
実際にサイトをコード出力して運用中
Newペイント｜地元密着の若き塗装屋
こちらのホームページは僕がまだ駆け出しの際にご依頼いただき、デザインからWebflowの実装、運用まで行わせていただきました。
円ドル相場の影響もあり、現状コチラのサイトはWebflowからコード出力し、日本のサーバーにて運用しております。その方法については別記事にて解説しています。
当社ではワードプレスからWebflowの移行やWebflowからコードの移行などもサポートしています。
僕が実際にベテランWebデザイナーに聞いたWebflowのコードの品質
僕は2025年1月現在、Webflowの使い方サポートを5社ほど行っています。その中でベテランWebデザイナーさんとお話する機会がありましたのでその話を一部共有します。
- Aさん「実際にWebflowで出力されたコードを見たい」
- 僕「コチラです〜！」
- Aさん「すご！もう人間がコード書くより綺麗ですね！」
というように、とても感動していました。理由は以下の通りです。
- コードの並びがとても綺麗！
- 必要箇所にコメントが書いているので見やすい。
- 書き方が固定なので編集が楽！
- 独自サーバーでのサイト公開をめちゃくちゃ簡単にできる
総じてトップレベルとのことです。
実際に僕もコード出力してサイトを管理している経験から、独自サーバーで簡単にホストできるという点を体験することができました。しかし簡単と言ってもデベロッパー視点での簡単なので初心者の方は気をつけて作業を行いましょう。
Webflowコミュニティで聞いたコード納品の経験談
コミュニティーで実際に企業に納品したことのある方から聞いたお話です。
彼は正社員のWebデザイナーとして働いており、属している会社にWebflowのコード出力したコードファイルを納品したとのこと。そんな彼は以下のようなことを述べていました。
- 企業に納品する際はWebflowの出力機能だと明言している
- そしたらWebflowで出力したコードの方が好まれるようになった
- Webflowのコードに慣れてしまえば枠は全て同じだから編集しやすいです。
ということらしいです。英語のコメント書きはわからない時のみ翻訳して使っているそうです。今ならAIなどで全部翻訳してくれたりもするかも知れませんね。
AIでHTMLコードを出力する【2026年の本命】
2026年のいま、僕がいちばん現実的だと考えている方法です。ツールで作ってから書き出すのではなく、AIに最初からHTML・CSS・JSを書かせる。生成物がコードそのものなので、「コード出力できるか」という問いが消えます。どのサーバーにも置けて、どのツールにも縛られません。
Claude Code｜自社サイト26ページをHTMLで作り直した実例
当社は2026年7月、自社サイト（webharu.com）をClaude Codeで7日間（構築は3日）かけてフルリニューアルしました。26ページ・記事62本をWebflowから静的サイトへ移行し、作業した人間は僕ひとりです。生成されるのは普通のHTML・CSS・JSなので、そのままサーバーに置くだけで公開できます。工程はClaude Codeによるサイト制作の全手順で公開しています。
正直に書くと、まともなデザインが安定して出るまでに約1ヶ月かかりました。コンセプトやデザインの審美判断は、いまも人間の仕事です。それでも「コードを書き出す」という工程そのものが消えるのは、この記事のテーマにとって革命でした。始め方はバイブコーディングの解説記事にまとめています。
FigmaからHTMLは書き出せる？（実案件で使った本音）
結論から書くと、Figma本体に、デザインをサイト一式のHTMLとして書き出す公式機能はありません。Dev Modeで要素ごとのコードを参照できますが、ページ一式を実務品質で書き出す道は、僕の試した範囲では見つかっていません。実際、公式のFigma→Webflowコピペプラグインですら、3年使った僕の結論は「実案件ではほぼ使わなくなった」でした（理由はFigmaからWebflowへコピペする方法の記事に追記しています）。
いまのFigmaで面白いのは、むしろFigma Makeです。FigmaにAIのバイブコーディングと公開機能がついたもので、僕は飲食店の経営者に頼まれた勤怠管理アプリを、チャットで指示するだけで形にしました。セットアップ不要が最大の強みで、試作にはかなり向きます。他のAIツールとの使い分けはAIホームページ作成ツール比較で書きました。
v0・Bolt・Lovable（僕は未使用・調査ベース）
ブラウザだけで完結するAI構築ツールです。v0はReactのUI生成、Bolt.newはフルスタックの試作、LovableはDB・認証込みのアプリまで作れます。いずれも無料枠があるので、まず感触を掴む入り口には良い選択肢です。僕は実案件で使っていないので、位置づけは調査ベースの評価です。
無料でHTMLを作成・出力する方法
お金をかけずにHTMLを作る道は、2026年時点で3つあります。
- Nicepage（無料プランでコード出力可）：上で紹介したとおり無料でHTML出力までできます。動作の重さだけ覚悟してください。
- AIチャットの無料枠に書かせる：ChatGPTやClaudeの無料枠でも、1ページのLP程度のHTML・CSS・JSなら書けます。僕が試した範囲では、細かい修正指示を何往復できるかが品質の分かれ目です。
- v0・Bolt・Lovableの無料枠：ブラウザ完結でAI構築を試せます。本格運用の前の感触確認に向きます。
公開まで含めても、静的なHTMLならサーバー費をほぼゼロにできます。当社サイトの実測では、サーバー費0円・ドメイン代の年1,500円だけで運用が回っています。
【2026年追記】当社サイト自体もWebflowから静的サイトへ移行しました
コード出力の先には、Webflowを卒業して静的サイトとして運用費を最小化するという選択肢があります。当社は2026年7月、自社サイト（webharu.com）をClaude Codeを使って7日間（構築は3日）でフルリニューアルし、26ページ・記事62本をWebflowから静的サイトへ移行しました。作業したのは人間1人です。
効果が大きかったのは運用費です。Webflowのサブスクは実費で年576ドル（約8.3万円）かかっていましたが、静的化後はドメイン代のみの年1,500円になりました。約1/55です（2026年時点の実測）。移行の考え方はWebflowから他ツールへ移行する方法の記事で解説しています。
もちろん全サイトに静的化をおすすめするわけではありません。更新頻度が高くWebflowのCMSやエディタが活きているサイトは、Webflowのまま運用するのが正解です。「更新はほぼ無いのにサブスクだけ払い続けている」状態なら、コード出力→静的運用は検討する価値があります。
ノーコードでコード出力して稼ぐ方法3選
クラウドソーシングサイトで稼ぐ
ランサーズ､クラウドワークス､ココナラなどを利用して稼げます｡ノーコードツールを使用した案件に挑戦することはもちろん､コード納品を希望している案件にも挑戦できるので収入を上げやすいです｡
正直2025年からでもコミットするのは遅くないです。僕はWebflowを使える第一号としてクラウドソーシングで案件をいただいている時期もありました。
ノーコードツールを使用する企業に就職する
ノーコードツールを専門に事業している会社は近年増えてきています。少し前までは「ノーコード」というと笑われていましたが、2025年は圧倒的にノーコードが勝利しています。
大手企業でさえ、セキュリティー面を考慮し、ノーコードを使用し始めています。当社もWebデザイナーをはじめWebflowコーダーを常に募集しております。業務委託の単発依頼からお願いしているのでご希望の方はお問い合わせください。
ノーコードで営業する
ノーコードをフル活用して営業かけていくのも一つの稼ぐ道です。僕も最初のころは飛び込み営業をやってみたり、チラシ配ってみたりさまざまな経験をしました。
現在は営業代行をしたい方を集める方になりました。リベニューシェアのような業務契約をしたりなどで今後もっと事業拡大を考えています。
「ノーコードを使ってます」の世間の反応
今回はコード出力ができるWeb開発ツールを紹介しました｡ノーコードができるというだけで稼ぐことができ､コード出力ができることでその幅は広がります｡しかし世の中はまだ批判的な意見が多いです。以下は僕が実際に日本一周しながらWebデザイナーに遭遇したときの反応です。
「ノーコードを使ってます！」と言った際の2023年1月のWebデザイナーたちの反応※体験談
— ノーコードで1000万チャレンジ中 ＠Webflowデザイナー (@METANA_flow) January 10, 2023
1、あっそうなんですね～（トーンダウン＆話題変え）
2、フフッ、ノーコードなんですねｗ
3、ああ〜まぁね、うん、ノーコード流行ってますよね。
4、簡単なやつならノーコードでもね、ｗ
リアルはこんな感じ
微妙な反応が多いからこそ、まだまだWebflowで稼げると実感しています。機能、安定感を見るとWebflowでのWeb制作が一番です。本気でそう思うからこそ僕はWebflowで事業を始め、毎日使っていろんなサイトを作成しています。気になったらまずは無料で使用感など確かめてみてはいかがでしょうか
当社ではWebflowでの制作、コード出力での納品、静的サイトへの移行までサポートしています。料金ページを確認のうえ、お問い合わせからご相談ください。
制作実績
よくある質問
Webflowでコード出力するには料金がかかりますか？
有料プランへの加入が必要です。2026年5月改定後の料金はStarter無料／Basic 月15ドル／Premium 月25ドル（年払い時の月額・2026年時点）で、無料のStarterプランではコード出力できません。
Webflowのコード出力ではどんなファイルが出力されますか？
ワンクリックでHTML・CSS・JSなどすべてをZipファイルにまとめて出力できます。CMSの内容は別途CSVファイルにて出力が必要です。
無料でコード出力できるノーコードツールはありますか？
Nicepageは無料でコード出力ができ、WordPressのプラグインとしても使用できます。ただしツール自体の動作が重く、CMS機能がない点には注意が必要です。
Webflowで出力したコードの品質は実務で使えるレベルですか？
ベテランWebデザイナーからは「人間がコードを書くより綺麗」と評価されました。コードの並びが綺麗で、必要箇所にコメントが書いてあり、書き方が固定なので編集が楽なことが理由です。
コード出力して静的サイトとして運用すると費用はどれくらい下がりますか？
当社の実測では、Webflowのサブスク年576ドル（約8.3万円）がドメイン代のみの年1,500円になり約1/55です（2026年時点）。下がり幅はサイト構成や更新頻度によって変わります。
STUDIOで作ったサイトはHTML書き出しできますか？
できません（2026年時点）。STUDIOはプラットフォーム内で完結する設計で、コード出力機能がありません。コードを手元に残したい場合はWebflow（有料プランでZip出力）か、最初からAIにHTMLを書かせる方法を選んでください。既存STUDIOサイトの引っ越しは作り直しになります。
AIで無料でHTMLコードを作れますか？
作れます。ChatGPTやClaudeの無料枠でも1ページのLP程度のHTML・CSS・JS一式は生成できます。本格的なサイトはClaude Codeなどの開発型が向きますが、月額課金が必要です。公開は静的HTMLならサーバー費をほぼゼロにでき、当社実測ではドメイン代の年1,500円だけで運用しています。
