HTMLコードを出力できるノーコードWeb開発ツールを紹介

くりたまさと
Masato Kurita
栗田将人
HTMLコードを出力できるノーコードWeb開発ツールを紹介

ノーコードでHTML出力できたら便利なのでは?コード出力してサイトを納品できる?実際にコード出力している方の意見を聞きたい。

今回はこんな疑問に答えていきます。

当ブログはノーコードWeb開発「Webflow」を使いブログ作成や運用を行っています。ブログでは主にWebflowの使い方やテクニックなどを解説しています。また僕はWebflowのコミュニティを運営しています。まだメンバーは少ないですが。その中のWebflow仲間から聞いた「コード出力を企業に納品した経験」も合わせて紹介します。

それではノーコードツールの紹介をしていこうと思います。

目 次

コード出力ができるノーコードWeb開発ツールを紹介します。

現状ノーコードではコード出力できるモノは多くありません。製作ツールが縛られると、Webサイトを失う可能性があるため、コード出力ができるWeb開発ツールを使用しましょう
>>デメリットを解説した記事はこちら

ここでは出力機能がついているツールのみ紹介します。それでは進んでいきましょう。

Webflow:WebデザイナーのためのWeb開発ツール

Webflow:WebデザイナーのためのWeb開発ツール

当ブログでも取り上げているWebflow制作に特化し、制作からサイト公開・運用まですべての事を実行できます。コード出力はZipファイルにHTML・CSS・JSのすべてをまとめて出力可能。

企業の規模や協賛を含めて考慮してみると、コード出力ができるノーコードではWebflowが1番有名で安定しています。2021年時点の話ですが資金調達に関する記事はアメリカで2100億円の価値と言われる「Webflow」とは?で記載しています。

コード出力のためにかかる料金

コード出力するためにはワークスペースプランに加入する必要があります。料金は最安で月16ドルです。
>>Webflowの料金について

メリット・デメリット

メリットはワンクリックでZipファイルにHTML、CSS、JSなど全てまとめて出力可能だということ。(CMSの内容は別途CSVファイルにて出力が必要です。)

デメリットは公式サイトは英語のみ、コード出力も英語でコメントが書いてあるということです。無いよりマシですね。

  • 当社ではWebflowの使い方のレクチャー、WordPressからのWebflowへの移行作業、新規Webflow導入などWebflowに関わること全般をサポートしています。

Nicepage: WordPress出力可能

Nicepage: WordPress出力可能

Nicepageもコード出力ができます。Wixのようにドラックするだけで作成でき、安く、豊富なレベルの高いテンプレートを使用可能。WordPressのプラグインとして使用できます。

追記:まだ使用するのは時期尚早と判断しました。「重い・動作がうまくいかない・コード出力すると治すのが大変。」Webflowの方が経営も機能もサポートも安定している印象です。今のうちに使ってみて使い方を日本で配信していくのは先行利益を狙えます。このブログでも解説する予定でしたが、今後はあまり触れていかないかもしれません。

コード出力のためにかかる料金

なんと無料。

メリット・デメリット

メリットは無料でコード出力ができること。Webflowよりも簡単にWebサイトを作れること、テンプレートがめっちゃ豊富なことです。特に作りやすさは「Wix」と同じぐらい簡単です。Wixはコード出力できないので英語が分かるのであればWixよりもNicepageをおすすめします。

デメリットはツール自体が重いこと。動作がいちいち重いです。また少しUIがごちゃついてて見ずらいですね。慣れれば余裕だと思います。CMSの機能がないのでブログ運用したい方はWordPressに出力して使いましょう。「またWordPressか」とうんざりする方はWebflowのほうがおすすめです。

readymag

readymag

こちらはコード出力するための機能開放がめっちゃ高いのがネックです。僕は使用したことがないので詳しい内容を書くことができませんが興味があれば使用してみてはいかがでしょうか。

その他のコード出力が可能なノーコードについては下記の記事でまとめられています。
>>7 FREE ONLINE WEBPAGE BUILDER WITH HTML CODE EXPORT(英文)

コード出力のためにかかる料金

コード出力するためにはBusinessプランに加入する必要があります。Businessプランは月65ドル。

メリット・デメリット

メリットは最新なのでこれからのアップデートでどんどん良くなる可能性があること。先行利益が狙えること。

デメリットは現状WebflowやNicepage、Studio、Wixなどと比べた時、特に目立った利点が無いことです。今回の流れで紹介するべきではなかったかも。知っていたので一応シェアしておきます。使用している方がいれば少しお話お聞きしたいです。

コード出力で選ぶならWebflowがおすすめ

コード出力のみにフォーカスして選ぶのであればWebflowはとてもおすすめです。実際にWebflowで出力したコードをシェアしているので確認したい方はダウンロードしてみてください。※次のセクションにあります。

Webflowは基本数値を指定して作成していきます。いままでコードを書いていた方は比較的すぐ使いこなせる作りです。

Nicepageは見た目で作成するイメージです。イラレやフォトショなどに近い感覚でしょう。もちろん数値でも管理できます。

【無料ダウンロードOK】実際にWebflowでコード出力してみた

Webflowのコード出力を公開しています

Webflowで出力したサンプルのコードをおいておくので確認してみてください。※上記画像のボランティアで作成したサイトです。あくまでコード出力の確認でご使用ください。
>>ねこのボランティアサイト(コード) 

このサイトは無料テンプレートを使用しています。その点でWebflow規約の面で一般公開がOKなのか判断できなかったため、限定ページでの公開をしています。

Twitterにてフォロー、DMにて「限定ページを拝見したい」といただければパスワードを送信致します。お手数ですが出力したコードをダウンロードしたい方はご連絡ください。


【経験談】コード出力後、企業に納品してみた。

【経験談】コード出力後、企業に納品してみた。

ここでは以下の2つの項目で経験談をお話していきます。

  • 僕が実際にベテランWebデザイナーに聞いたWebflowのコードの品質
  • Webflowコミュニティで聞いたコード納品の経験談

僕が実際にベテランWebデザイナーに聞いたWebflowのコードの品質

僕は現在Webflowの使い方サポートを5社ほど行っています。その中でベテランWebデザイナーさんとお話する機会がありました。話の中でコード出力を見たいということでしたのでサンプルコードをシェアしたところ、とても感動していました理由は以下の通りです。

  • コードの並びがとても綺麗
  • コメントが書いているので見やすい

総じてトップレベルとのことです。

僕はサイト作成できる程度コーティング力しかなく、サーバーに繋げる方法とかわからないのですが、Webflowのコーディングはサイト公開まで最短でできる作りになっているそうです。
>>コードはこちら

Webflowコミュニティで聞いたコード納品の経験談

これは僕が実際に納品したわけではなく、実際に企業に納品したことのある方とお話で聞いたお話です。彼はおそらくですが、正社員のWebデザイナーとして働いており、属している会社にWebflowのコード出力したコードファイルを納品したとのこと。そんな彼は以下のようなことを述べていました。

  • 企業に納品する際はWebflowの出力機能だと名言している
  • そしたらWebflowで出力したコードの方が好まれるようになった
  • Webflowのコードに慣れてしまえば枠は全て同じだから編集しやすいです。

ということらしいです。英語のコメント書きはわからない時のみ翻訳して使っているそうです。今ならAIなどで全部翻訳してくれたりもするかも知れませんね。

ノーコードでコード出力して稼ぐ方法3選

クラウドソーシングサイトで稼ぐ

ランサーズ、クラウドワークス、ココナラなどを利用して稼げます。ノーコードツールを使用した案件に挑戦することはもちろん、コード納品を希望している案件にも挑戦できるので収入を上げやすいです。

僕はWebflowを使える第一号としてクラウドソーシングで結構稼ぐことができました。今は手数料が高いという問題で自社受注に切り替えています。

知り合いのサイトを作る

ちょっとした人脈をチャンスに変える方法です。知り合いが企業する時や、お店を経営していてWebサイトが欲しい時などWebサイトを作ってあげましょう。最初は無料で作ってあげたとしても、その後紹介で案件がもらえれば稼ぐことができます。

僕は最初はこの方法で実績と人脈づくりを行いました。今でもまだまだ未熟ではありますが一応最初のステップはクリアしたと考えています。

紹介や知人のサイト制作ではクラウドソーシングサイトと比べ、手数料が引かれることが無いので1件の収入が多くなります。ヒアリングから制作・運用まで全て行うので自分の足りないスキルが浮き彫りになります。僕は最初この方法で稼いで必要なスキルを身につけていきました。

営業する

自分で飲食店や企業相手に営業します。Webサイトを持っていないという飲食店は多くあり、そういうお店はWebサイトがいらないとも考えています。そこに営業をかけて案件を取れるようなら、あなたはもう案件に困ることはないでしょう。

僕は「営業」が大変すぎて一時期、営業職への転職を考えていました。結局やめましたが。

「ノーコードを使ってます」の世間の反応

今回はコード出力ができるWeb開発ツールを紹介しました。ノーコードができるというだけで稼ぐことができ、コード出力ができることでその幅は広がります。しかし世の中はまだ批判的な意見が多いです。以下は僕が実際に日本一周しながらWebデザイナーに遭遇したときの反応です。

微妙な反応が多いからこそ、まだまだWebflowで稼げると実感しています。機能、安定感を見るとWebflowでのWeb制作が一番です。本気でそう思うからこそ僕はWebflowで事業を始め、毎日使っていろんなサイトを作成しています。気になったらまずは無料で使用感など確かめていてはいかがでしょうか。
>>無料でWebflowを始める→

無料メルマガで追加情報を告知します。

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。それでは限定メルマガでお会いしましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

併せて読むとおすすめの記事▼

【2024年最新版】Webflowの料金プランを解説

Webflowの料金プランについて知りたいですか?本記事ではWebflowの料金プランから最安でWebflowを使う方法、プラン購入後に何をするべきかまで、解説しています。Webflowの料金を知りたい方は是非ご覧ください。

Read more...

【デメリット】ノーコードで作ったWebサイトは消されるかも?!

結論:ノーコードで作成したWebサイトは突然消えてしまう可能性がある。なぜそのような事が起きるかは以下のとおりだ。自分が作成したWebサイトをツール管理者が変更できる場合。ツールを変更する場合サービス終了の場合順番に解説していこう。

Read more...

【2024年最新版】Webflowの使い方を項目別にまとめました

Webflowの使い方で迷っていませんか?本記事ではWebflowの使い方をCMSやリッチテキスト、独自ドメイン、フォントの追加方法など項目別にまとめました。Webflowの使い方で悩むことがある方は必見です。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup