ノーコードツールを使ってWebサイト制作を仕事にするためのスキルとは

こんにちは、はしあや（しぐさん）です。

さて、「ノーコード」という言葉を聞くようになって久しいのですが、まずは「それって何？」というお話から。

※今回は私自身が業務として経験しているのがWebデザイン分野のみなので「Webアプリ」に関してのノーコードツールの話は除外しています。

ノーコードって何？

ノーコード（No Code）はその名前を見ればわかるように、通常では「コードの記述＝コーディング作業」によってWebサイトをWebブラウザ上でデザインや効果等の再現をすることができるのですが、その「コーディング作業や追加効果・機能のプログラミング」部分をサービスやプラグインが自動で補填することによって誰もが簡単にWebサイトの見た目部分を作成できる、というものです。

形態としては、現状では大きくは３パターンに分かれているようです。

①オンライン上のノーコードサービスを利用（難易度：低）
代表的なものとしては、「Wix」や「STUDIO」「ペライチ」などのWebサイトを中心としたものや、「Stores」「BASE」「Shopify」などのECサイト作成など、他にはWebアプリ作成にいたるまで、様々なオンラインサービスがあります。

これらの作成方法としては、基本的にサーバー兼用でサービスが提供されていて、ベースの管理はサービス提供側がやってくれています。インターネットに繋がる環境（オンライン）であればどこからでも、どのOSからでも（※対応OSのみ）接続してアカウントを作成すれば、各サービスのルールに従って作っていけば比較的簡単に誰でもWebサイトが作れます。

元から使えるテンプレートがいくつも用意されていたり、決済との連結が簡単にできるような追加機能がどんどん投入されているので、特にこだわりがない場合は素人でもそれなりのWebサイトが作れてしまいます。わざわざお金を払って作成業者に頼む必要がないとも言えます。

その代わり、無料で使用する際には何かしらの「広告表示」が入ったり「URLが明らかにそのサービスを利用しているとわかるものしか使えない」等の規制があります。これらを自由にして一般サイトのようにみせるには「月額料金」等が必要になります。
※サーバーを所持していない場合はそれに相当しているので比較的導入難易度は下がります

基本的にはドラッグ＆ドロップだったりパーツの追加等だけで完結しますが、実際にはそう上手くいかないことも。思った位置に配置しようと思うとずれてしか配置できなかったり、ブラウザを再読み込みするたびにパーツがずれていく等（ある法則は存在しているようです、例えば範囲内に配置できてないとか認識できる範囲が決まっているとか）。

有料コースなどではコードの記入で細かいコントロールをできる場合もあります。ただし、サービス内でできる言語等の規制や細かいルールはあるのでそれほど自由自在にレイアウトができるわけではありませんし、サービスごとに違うルールを細かく把握し続ける必要があるので、一般的なコーディングの勉強と比べると費用対効果は低そうです。

そういったことから、テンプレートのみでは不足する部分がある、思ったレイアウトが自力では作れない、差し替え以外の部分は完全オリジナルで作成したいというクライアント様から「テンプレート」と「大幅リニューアル」「トラブル時のメンテナンス」のご依頼はいただくことは稀にありますが、作成にかかる時間に対して、大きな予算を付けられない仕事でもある場合も多いでしょう。

②WordPressのプラグインを使用（導入難易度：中）
たくさんのものがありますが基本的には海外のツールが大半です。「Webflow」「Elementor」「Divi」等のWebサイト作成、「WooCommerce」等のECサイト用のツールなど。

私が一番得意としているのがこのWordPressのプラグインである「Elementor」を利用して作成するパターンです。

ここになると、オンラインツールと違い、WordPressそのものの基本的な作成知識が必要となってきます。あくまでもWordPressの追加プラグインでしかないため、WordPressのファイル・ページ構成がベースとなってくるために、一ブログではなく一般サイトの作成過程を知らない場合には作成自体ができないでしょう。

ベースとしてWordPressの導入や運用、バージョンアップ時やトラブル時の対応、セキュリティに関しての知識等は必須となります。

また、海外のツールでもあるため、チュートリアルやトラブル時の連絡、有料版を導入した際の連絡メールは英語を読むしかない場合もほとんどです。有料版（PRO版）にグレードアップしないと使えない機能もほとんどですのでそのうち有料版の検討も行うことになりますが、支払いは現地通貨払いになります。

ただ、オンラインツールと違ってベースがWordPressということで、追加したい機能があれば別のプラグインの機能と組み合わせて使うことも可能です（もちろん相性によっては表示が大きく崩れたり最悪の場合は全部壊れたりもします）。それに加えて、プラグインによっては一部コードでの対応をすることも可能ですし、知識があればいくらでも工夫していくことができる分、一般のお客様が触れるオンラインノーコードツールよりは仕事として成立しやすい部分はあるかもしれません。

③独自のシステム（CMS使用等）を開発して導入する
これは導入難易度は「高」ですが、運用面では「低」に相当するものと思われます。CMSと連携をとって必要な部分のみをノーコードになるようにそのシステム自体を「開発」する必要があるため、開発の際のデザイン設計（UI等）の部分で参加したり、運用時の基本的なデザイン作成部分での参加となることが多いでしょう。個人で請けることはあまりなさそうです。

仕事として成立するか

最近よくクラウドソーシング系で「ノーコードでWebサイト制作」というサービスを出している方が増えてきたようです。もちろんそのサービスを出していた方は以前からいましたが、数が増えてきている印象。

また、それと同時に「ノーコードなら簡単にサイトを作れるから、簡単に仕事になる」といった噂が先行したようで、①の比較的誰でも見た目を作れるタイプのオンラインツールを使って、Webサイトの見た目だけ簡単に安く作って納品して後は放置、というものも風のうわさで聞いていますが、後々トラブルになっても対応してもらえない、お客様でも作成できるレベルのものが納品された、テンプレートの写真を変えただけだった、等色々な話も聞いています。

お客様がプロにお金を出して仕事を頼む、という場合は下記を期待しています。

①自分で作れないから依頼する
②テンプレートにはないオリジナルのものが欲しい
③宣伝効果のあるものを作って欲しい
④費用を抑えたい

数時間、数日で得たレベルのものだけで「見た目だけを作る」のであれば、お客様がご自身で作成しても何ら問題ありません。

プロとして制作料金をいただくなら、お客様ができない部分の補填ができるかどうかという部分が必要になってきます。

往々にしてそのツールを簡単に使っただけのWebサイトは、どこか「ありきたり」でもあり「もっさりしているもの」が出来上がってしまいます。なので、クオリティを求める場合は「用意されたテンプレート」を使うしかないのですが、どれも同じようなものになってしまい、明らかに「そのツールで作った」ことがバレバレになってしまいます。

そこでたとえば、テンプレートにないデザイン、パーツを組み合わせて希望するもの１から作成する。バランス等もきちんと整形していけば、そのツールで作ったとはわからないような「テンプレートレベルのオリジナルサイト」ができあがります。

また、機能自体はそのツールにあるもの内で作成するということには代わりはありませんが、ある機能の効果はAというもの、と公式に出されている。Aとして使うだけなら、お客様でもできるわけですが、要望をみたしていない。
しかし、Aという機能だがお客様の要望しているBという使い方に転用できないかどうか、調べてみると工夫次第ではできそうだ。となると、どう運用していけばBとして使えるのか、運用方法がお客様のスキルに合っているかどうかの確認をしたらどうやらその方法が使えるようだった…という「工夫をこらしてのご提案」もプロとしては必要でしょうし、その転用に気づかないとどのみち同じようなサイトしか作れない、ということにもなります。

そして、オンラインノーコードツールであっても、マージン・パディングを揃えることや、画像形式やフォント、セクション等の知識等については最低限必要ですし、通常コーディングすれば簡単にできるような効果も、用意されていない場合は再現不可だったり。余白が無駄に自動的についてくるので配置すると間延びして見えたり。細かい調整方法はあるツールとないツールがあったり、ツールごとに操作方法や設定できる範囲やできることも違うので、別ツールを指定されるとまた１から機能の調査が必要だったり…といった苦労する場面は多々出てきてストレスが溜まることもちらほら。

できれば一般的な「デザイン」の知識はあったほうがより良いと言えます。

それらを加味した場合、仕事として成立させ、作業料金をいただこうとするなら、下記のものは持っていたほうが良いでしょう。

①ノーコードツールの操作方法の知識
②ノーコードツールで使える機能の知識
③各ノーコードツール間での使える機能の差分についての知識（提案用）
④一般的なサイトの作成方法の知識
⑤運用面での知識やサポート体制についての知識
⑥有料プランでドメインを運用する場合のドメイン取得にかんする知識
⑦WP使用の場合はWP周りの一般的な知識やサーバーの知識
⑧Webデザインに関する知識
⑨ツール内のSEO設定のための最低限の基礎知識
⑩通常のサイト作成とノーコードツール使用の場合にどちらが要望に適しているかの差分の知識
⑪運用マニュアルの作成するスキルと知識

PCが得意な家族にお願いするレベルでしか作成できない、運用のサポートやその後の展開を見据えての提案ができない場合は、「作業代として薄謝」くらいを想定されるお客様がいてもおかしくはありません。

つまり、作業時間に見合った報酬をいただこうと思うのであれば、「一般的なサイト作成の知識」「サーバーやドメインの知識」に加えて「ノーコードツールの深い知識」と「提案力」がないと、なかなか厳しいとも言えます。
それは、普通のサイト作成にプラスして習得の時間を要している、とも言えるので、メインで請け負う場合を除いては非効率とも言えるのではないでしょうか。

少なくとも、「手軽に収入にするための第一候補」としては適していないと思われます。

ではどうするか

普通にWebサイト作成（デザイン）の勉強をして、普通に仕事を引き受けていくと、ノーコードでの作成の打診が来ることもあるでしょう。大体が「安く早く仕上げて欲しい、運用は自分でするから」といったご依頼になってくると思われますが（ごく低価格でサイトが欲しい場合が多々）。

習得するのには費用対効果は見込めないと言いましたが、中には「高額でテンプレを納品している」人もいますし、「高品位のオリジナルカスタマイズを通常サイトを作成するレベルの価格で提供している」人もいますのでいい切れるものではありません。
ただ私は前者のやり方だけはしたくないなぁと思っています。

「格安で最速で美しいプロレベルのサイトを提供する」も良し、逆に「お客様がノーコードツールを使ってサイトを作るためのレクチャーをサービスとして提供する」も良し、ではないかと思っています。

サービスが良ければ、もしかしたらその後通常サイトを依頼頂けるかもしれませんし、その他につながることもあるでしょう。

流れ
①打ち合わせをする
②ご要望に適したノーコードサービスをご提案する
③費用面・支払い方法の確認を取る
④希望する内容の記事や素材についてどうするかの交渉
⑤ワイヤーフレーム、もしくは簡易デザインで確認
⑥ノーコードツールで作成
⑦周囲の設定を行う（SEOまわりやロゴやアイコン、OGP、等の設定）
⑧納品用のマニュアル作成
⑨納品後のサポート体制について

ノーコードツールだと「デザインを全くせずに仕事をして即納品」という方も見受けますが、業務歴が長いなら可能と思いますが、それがない場合はできるだけ避けたほうが良いとおもわれます。

「きっちり作り込んだデザイン」まではなくても大丈夫ですが、「ざっくりと画面の雰囲気が分かる程度」は作成前にご提案したほうがその後もスムーズです。

何しろ、お客様は上がってくるまでわからないで待機しているわけですから、想定外のものが来れば当然やりなおしですし、待機時間に他のWebサイトを見て「こういう機能をつけてほしい」「こんなデザインを取り入れて欲しい」と後付での要求が来るのは常です。しかし、ノーコードツールで作成している以上、「再現するには通常のサイト作成以上の高度なスキルが必要となる」ことも多く発生することが予測されますので、事前にある程度まで詰めておくことは必要なのです。

さいごに

一つにしぼらず周囲の知識もあったほうがができるから面白いですよ。
ぜひとも、ノーコードだけ、も良いですがコーディングの知識やデザインそのものの知識も身につけて「何が一番良いか」を「提案含み」でプロとしての仕事に昇華していきましょう。

おまけ
ノーコードツールを使ってのご相談もたまに頂いていますし、実際にお仕事自体もご依頼頂いています。８月９月に限り、TwitterでのDMでご相談受付可能です。