1st Daysはこちら→【1日30分/21日】放課後の30分でWebデザイナーになろう!

ノーコードで作成してHTMLで出力できたら便利なのでは?もしできるならコード出力してサイトを納品すれば超時短じゃん!もはやノーコードでWebサイトを作れるだけで稼げるのでは?
今回はこんな疑問に答えていきます。
私はノーコードでWebサイトの制作代行を行い、収益を上げています。また当ブログはノーコードWeb開発「Webflow」を使い作成・管理しており、ノーコードで稼ぐ方法や、Webflowの使い方を解説しています。
このような経験を活かし、2022年時点でのノーコードにおけるコード出力について解説していきます。
コード出力ができるノーコードWeb開発ツールを紹介します。
現状ノーコードではコード出力できるモノは多くありません。製作ツールが縛られると、Webサイトを失う可能性があるため、コード出力ができるWeb開発ツールを使用しましょう。
- ツールが縛られるとWebサイトを失う可能性について解説した記事はこちら
それでは早速、みていきましょう。
Webflow:WebデザイナーのためのWeb開発ツール

当ブログでも取り上げているWebflow。
Web制作に特化し、制作からサイト公開・運用まですべての事を実行できます。コード出力はZipファイルにHTML・CSS・JSのすべてをまとめて出力可能。
企業の規模や協賛を含めて考慮してみると、コード出力ができるノーコードではWebflowが1番有名で安定しています。
>>Webflow
コード出力のためにかかる料金
コード出力するためにはアカウントプランに加入する必要があります。料金は月16ドルです。
Webflowの料金については「こちら」をご覧ください。
メリット・デメリット
メリットはワンクリックでZipファイルにHTML、CSS、JSなど全てまとめて出力可能。(CMSの内容は別途出力が必要)
デメリットは出力したコードを編集しなければWebflowとわかること。
Nicepage: WordPress出力可能

Nicepageもコード出力ができます。Wixのようにドラックするだけで作成でき、安く、豊富なレベルの高いテンプレートを使用可能。WordPressのプラグインとして使用できます。
追記:まだ使用するのは時期尚早と判断しました。「重い・動作がうまくいかない・コード出力すると治すのが大変。」Webflowの方が経営も機能もサポートも安定している印象です。今のうちに使ってみて使い方を日本で配信していくのは先行利益を狙えます。このブログでも解説する予定でしたが、もう少しアプデを待ってからにします。
コード出力のためにかかる料金
なんと無料。
メリット・デメリット
メリットは無料でコード出力ができること。Webflowよりも簡単にWebサイトを作れること、テンプレートがめっちゃ豊富なことです。特に作りやすさは「Wix」と同じぐらい簡単です。Wixはコード出力できないので英語が分かるのであればWixよりもNicepageをおすすめします。
デメリットはツール自体が重いこと。動作がいちいち重いです。また少しUIがごちゃついてて見ずらいですね。慣れれば余裕だと思います。CMSの機能がないのでブログ運用したい方はWordPressに出力して使いましょう。「またWordPressか」とうんざりする方はWebflowのほうがおすすめです。
readymag

こちらはコード出力するための機能開放がめっちゃ高いのがネックです。
コード出力のためにかかる料金
コード出力するためにはBusinessプランに加入する必要があります。Businessプランは65ドル。
メリット・デメリット
メリットは最新なのでこれからのアップデートでどんどん良くなる可能性がある。
デメリットは現状WebflowやNicepage、Studio、Wixなどと比べた時、特に目立った利点が無いことです。今回の流れで紹介するべきではなかったかも。
その他のコード出力が可能なノーコードについては下記の記事でまとめられています。
7 FREE ONLINE WEBPAGE BUILDER WITH HTML CODE EXPORT(英文)
コード出力ができるノーコードツールの中でおすすめは?
上記のコード出力が可能なノーコードの中から自分にあったものを使用しましょう。おすすめは以下の通りです。
Webflowは数値をしっかり指定して作成可能。いままでコードを書いていた人は使いやすいと思います。2013年から事業を行っており、既に多くのユーザーがいます。安定したツールを使いたい方はWebflowがおすすめです。
Nicepageは見た目で作成するイメージです。見た目重視で「なんとなく作成できればいい」という方はこちらを使用しましょう。Nicepageは今後少しず使い解説していきます。
コード出力後、ノーコードで作ったとバレない方法を解説します。
.jpg)
ノーコードで作ったとバレない方法は以下の2パターンあります。
- 出力したコードを自分でいじる
- 有料プランに入ってブランド名を消す
一つずつ解説していきます。
出力したコードを自分でいじる
コード出力後、HTMLやCSSを確認し、コード内に書かれたブランド名を違う名前に置き換える方法です。Webflowの場合は主に各ファイル名とクラス名にWebflowと記載されています。ココを変更しましょう。
Nicepageは無料でもコード出力、ブランド名を消せるようです。しかし出力したコードはしっかり確認しましょう。
メリット・デメリット
メリットはプログラマーが作成したコードと同じような見た目のコードを作成できること。
デメリットは時間と知識が必要ということです。
また素人が触ると修復できなくなることもあります。
有料プランに入ってブランド名を消す
Webflow、Nicepage共に有料プランでグレードアップすればコード出力時にブランド名を隠す事ができます。1ヶ月だけ課金してコード出力するのは有りだと思います。
メリット・デメリット
メリットはかなりの時間を短縮できること。
デメリットは有料プランに入ってブランド名を消しても出力したコードは確認はしたほうがいいと言うこと。バレたくない方は一度全部確認するのが無難です。
ノーコードでコード出力して稼ぐ方法3選
.jpg)
クラウドソーシングサイトで稼ぐ
ランサーズ、クラウドワークス、ココナラなどを利用して稼げます。ノーコードツールを使用した案件に挑戦することはもちろん、コード納品を希望している案件にも挑戦できるので収入を上げやすいです。
知り合いのサイトを作る
ちょっとした人脈をチャンスに変える方法です。知り合いが企業する時や、お店を経営していてWebサイトが欲しい時などWebサイトを作ってあげましょう。最初は無料で作ってあげたとしても、その後紹介で案件がもらえれば稼ぐことができます。
紹介や知人のサイト制作ではクラウドソーシングサイトと比べ、手数料が引かれることが無いので1件の収入が多くなります。ヒアリングから制作・運用まで全て行うので自分の足りないスキルが浮き彫りになります。僕は最初この方法で稼いで必要なスキルを身につけていきました。
営業する
自分で飲食店や企業相手に営業します。
Webサイトを持っていないという飲食店は多くあり、そういうお店はWebサイトがいらないとも考えています。そこに営業をかけて案件を取れるようなら、あなたはもう案件に困ることはないでしょう。
僕は「営業」が大変すぎて一時期、営業職への転職を考えていました。
まとめ:ノーコードで作ってコード出力するのが最強
コード出力ができるWeb開発ツールを紹介しました。ノーコードができるというだけで稼ぐことができ、コード出力ができることでその幅は広がります。
機能、安定度を見るとWebflowでのWeb制作が一番おすすめです。まずは無料で初めて使用感など確かめていてはいかがでしょうか。