最近、巷で流行っているノーコードWEB制作ツールですが、HP制作用のツールだけでもWix・Editor X・STUDIO・Webflow・ペライチなど様々なツールが存在しておりどれを使えば良いのか、また、どのツールが自分が作成したいものに一番適しているのかなど分からなくなっている方も多いと思います。
そこで今回は、その数あるノーコードWEB制作ツールの中からWix・Editor X・STUDIO・Webflowの4つに絞って各種ツールの特徴・機能・選び方について紹介していきます。この4つに絞った理由としましては、現行あるノーコードWEB制作ツールの中で最も簡易的なものからある程度の高度な制作やクオリティの高いものを作ることができるためです。
目次
01 | ノーコードとは
01-1 | ノーコードWEB制作のメリット
01-2 | ノーコードWEB制作のデメリット
02 | Wixとは
02-1 | Wixの特徴
02-2 | Wixの機能
03 | Editor Xとは
03-1 | Editor Xの特徴
03-2 | Editor Xの機能
04 | STUDIOとは
04-1 | STUDIOの特徴
04-2 | STUDIOの機能
05 | Webflowとは
05-1 | Webflowの特徴
05-2 | Webflowの機能
06 | ノーコードWEB制作ツールの選び方
07 | まとめ
01 | ノーコードとは
最近流行りのノーコードですが、ノーコードとは簡単にざっくり説明しますとPowerPointの様なものです。コーディング (HTML・CSS・JavaScript) を一切記述する事なくPowerPointで資料を作成する様に制作できるのがノーコードWEB制作の良いところです。なのでプログラミングの知識が一切なくても制作が可能なのがノーコードになります。
Wikipediaには上記の様に難しく記載されていますが、あまり難しく考えなくて良いです。ホームページやECサイト・会員サイト・予約サイトなどあらゆるサイトがプログラムング言語を習得せずに作成することが出来るということです。
雑学程度ですが、このノーコードという言葉を使い始めたのがビジネス+ITの記事によると「Product Hunt」（プロダクトハント）の創業者Ryan Hoover（ライアン・フーバー）氏だそうです。
01-1 | ノーコードWEB制作のメリット
では、ノーコードでWEB制作を行う際のメリットは何か？と言いますと、一番は誰でも簡単に制作する事は可能だという事です。あくまで「制作」が可能という点です。
他には、コーディングするよりも制作時間が短い点くらいです。
01-2 | ノーコードWEB制作のデメリット
逆に、ノーコードWEB制作のデメリットはというと、誰でも作れる反面デザインやSEO、制作に関する知識がなければ良いものは作れないという事です。誰でも作れるという言葉は間違っていませんが、そこには落とし穴があります。デザインは知識9割：センス1割と言われている業界ですし、SEOに関しては情報量も多いですし理解するのに普通の人は物凄く時間を要してしまいます。
また、制作する際にはライティングも関わってきますし、デザイン・ライティング両方に心理学が関わってきます。これらを一から勉強し制作するのであれば外注し自分の本業に専念する方が事業の売上も上がりますし、不得意な事は外注する方が効率も良いです。
ノーコードWEB制作をご希望の方や相談をしたい方はこちら
02 | Wixとは
Wixは、2006年にイスラエルで設立されたクラウドベースのホームページ制作ツールのスタートアップです。ホームページの制作ツールですと、Wordpressが断トツで正解のシェアで全サイトの43%、CMS市場の65%を占めているのに対してWixは全サイトの1.3%、CMS市場の2.3%を占めています。
出典：KINSTA
Wixは、2021年2月26日 9：00の時点でユーザー数が2億人を突破しており時価総額も約8140億円にものぼる企業で今最も伸びているノーコードWEB制作ツールになります。さらに、WixはPlug and Play Venturesが選ぶSaaS Public 100に選ばれています。
02-1 | Wixの特徴
ノーコードでPowerPointのようにドラッグ&ドロップでの制作が可能なのがWixの一番の利点になります。また、アプリを追加すれば様々な機能を追加する事が可能でウェブサイトだけをノーコードで作れるだけでなく、そこに付随するマーケティングの機能などもWix内に存在しており、SEOや広告・Googleビジネスプロフィールの管理など様々な機能をダッシュボード上で管理する事ができます。
また、レスポンシブのサイトを作成することは可能ですが、前述した通りPCとスマホの2つでしかレイアウトの調整を行う事ができないため、Wixは完全レスポンシブではなく半レスポンシブと僕は呼んでいます。
02-2 | Wixの機能
Wixは様々な機能が搭載されており、今回紹介する3つの企業の中でも最もアップデートが頻繁に行われており、日々様々な機能が加わったりだとかUIが変更になったりだとか変更が激しいツールになります。その分、バグが多く発生するといったデメリットもあります。
しかし、それを気にさせないくらいのサポート対応の素早さを備えている企業なので制作ツールとして選択するのはおすすめです！
今回は以下に簡単にWixの主な機能を紹介していきます。
Wix ストア
Wix レストラン
Wix FAQ
Wix ホテル
Wix ブッキング
Wix イベント
Wix フォーラム
Wix ブログ
Wix グループ
Wix チャット
Wix オンラインプログラム
会員エリア
販売プラン
マイアプリ by Wix (制作したサイトをアプリとしてリリース可能)
コンテンツマネージャー (動的ページが作れるデータベース)
マーケティング・SEO (広告・Googleビジネスプロフィールの管理など)
アクセス解析・レポート (SEOツール)
Velo by Wix (Wix内でJavascriptを用いてコーディングができるモード)
Wix Marketplace (Wix公認のパートナーに仕事を依頼する事ができます)
挙げだしたらキリがないほど機能がありますが、今回は主要な機能だけを紹介しました。中でもあまり使っている人が少ないものなどはまた別でブログを更新します。
WixでのノーコードWEB制作をご希望の方や相談をしたい方はこちら
03 | Editor Xとは
Editor Xは、2020年にWix社が制作したツールでWixの上位互換にあたる制作ツールです。Wixとの違いを簡単に説明しますと、Wixは半レスポンシブなのに対してEditor Xは完全レスポンシブです。
というのも、WixはPCとスマホのレイアウトの調整を行う事はできますがそれ以外のタブレットなどのサイズ調整を行うことができませんし、スマホによってのサイズ違いのレイアウトも調整することができません。それに対して、Editor Xはブレイクポイントというものがあり、各端末で見やすい様に調整を行うことが出来るのが特徴で、PC・タブレット・スマホの全サイズに合わせたレイアウトの調整を行うことができます。
03-1 | Editor Xの特徴
Editor Xは、後で紹介するノーコードWEB制作ツールのSTUDIOやWebflowとは異なりドラッグ&ドロップで自由にレイアウトを作成する事ができながら、完全レスポンシブのサイトを制作する事ができます。
また、イスラエル発の企業ですが2021年の12月に日本語にも対応されたので、他の海外発のノーコードWEB制作ツールとは異なり恐らく唯一海外の完全レスポンシブデザインが作成可能なツールになります。後で紹介するWebflowは英語のみの対応です。
03-2 | Editor Xの機能
特に機能としてはほとんどWixと変わらないのですが、Wixよりもより動きを各パーツに付けたり複雑にサイトの構築を行う事ができるので、よりコーディングしたサイトに近いものが作れるツールになります。
Wixとの機能で大きな違いは、Editor Xは同時に複数人でリアルタイムで編集ができる事です。なので制作スピードを大幅に上げる事が可能になります。ただし、Velo by Wixの開発モードを使いコーディングを行う際はコードを編集できるのは1人になってしまいます。
ただし、上述している通り完全レスポンシブのサイトを作成する事ができるのがEditor Xでの制作における一番の売りとなるので、PC・タブレット・スマホの3種類でのブレイクポイントが最初からあり、より細かいブランドの違いの端末のレイアウトの調整を行いたい場合は自分でブレイクポイントを作成する事ができるので、完全レスポンシブデザインの作成を行う事ができます。
Editor XでのノーコードWEB制作をご希望の方や制作の相談をしたい方はこちら
04 | STUDIOとは
STUDIOは、2016年に東京で設立されたクラウドベースのホームページ制作ツールです。ユーザー数も20万人を超えており、国産のノーコードツールでは今最も勢いと制作のクオリティの高いツールかと思います。
STUDIOは簡単に説明すると、完全レスポンシブのサイトを制作できるツールでEditor Xとはまた少し異なり、ベースの制作の考えがコーディングをベースに作られているので、marginやpadding、id属性などHTML・CSSなどの知識がある方の方が使いやすいツールになっています。
04-1 | STUDIOの特徴
STUDIOは、親要素を基に4隅・4辺・中央のどこかに配置をしてからmarginやpaddingなどで調整を行なっていく形になるのでWix・Editor Xよりも自由度は減ってきますが、慣れればこちらの方が制作はしやすいかと思います。
フロントエンドのコーディングができる方であれば、制作は容易にできると思います。ただし、HTML・CSS・JavaScriptを書き込んだり制作したものをコードとして抽出する事ができなかったりするのでその点では少し今後に期待です。ただし、iFrameの形であれば記述は可能です。
また、ECサイトや会員機能・サイトへのロック・フォントのアップロードなどができないのでそういった面ではSTUDIOはWixには圧倒的に劣ってしまいます。しかし、Google font・モリサワフォントが使えるのでフォントに関しては他のノーコードWEB制作ツールに圧倒的に優っています。
04-2 | STUDIOの機能
他の完全レスポンシブのノーコードWEB制作ツールにも共通する事は多いのですが、STUDIOは上位にも説明した通り、コーディングがベースにある制作の仕方なのでWixやEditor Xの様にドラッグ&ドロップで簡単にどこでも配置したりなどはできません。
しかし、その分コーディングで作成したサイトの様な高クオリティなサイトが制作する事が可能です。以下にSTUDIOの主な機能を載せておきます。
リアルタイム共同編集
マークダウン対応
&appear機能
シンボル機能
first-childコンディション
ジャンプ機能 (同時編集している人の編集場所に飛ぶ事ができる)
STUDIOは、アニメーションがコーディングの様にX軸、Y軸で移動・傾き・スケール・回転などができ、イージング (動きの変化) なども設定する事ができるのでWix・Editor Xよりもよりアニメーションの部分は設定できるものが多いですが、Wix・Editor XはVelo by Wixの開発モードを使用する事でアニメーションをさらに追加したりする事ができるので極論を言えば最強ですが、特に何もコードをいじらない範囲であればWix・Editor Xは基礎的なアニメーションのみとなります。
STUDIOでのノーコードWEB制作をご希望の方や制作の相談をしたい方はこちら
05 | Webflowとは
Webflowは、2013年にサンフランシスコで設立されたクラウドベースのホームページ制作ツールになります。現在では、世界190カ国以上で約42万ほどのサイトがWebflowによって制作されており、時価総額は2200億円以上にもなる企業です。
05-1 | Webflowの特徴
Webflowは、英語でしか対応がないですがノーコードWEB制作ツールの中でも最もアニメーションに強いツールになっております。そして唯一コードを抽出する事が可能なノーコードWEB制作ツールで、今後日本語に対応してサポートも日本が対応されたら恐らく一番伸びる企業なのかなと思っています。
05-2 | Webflowの機能
Webflowは、今回紹介する3つのノーコードWEB制作ツールの中ではWixと並ぶほど様々なサイト制作に対応しており、様々なサイトを制作する事が可能です。
ECサイト
会員サイト
Client Billing
コーディング抽出
複数人での同時編集
class属性の指定
Webflowは、DELLや楽天、ホンダなどの大手企業にも使われておりノーコードWEB制作ツールの中では最もコーディングで作ったかの様なサイトの制作のクオリティを制作する事が可能です。
06 | ノーコードWEB制作ツールの選び方
今回はノーコードWEB制作ツールを3社に絞っていますが、現行出てる主力なノーコードツールを色々使った上でこの3社が一番良いと判断したのでこの3社で紹介してあります。この3社はできることはほとんど変わりはありませんが、各ツールによって機能や得意な事が異なるので自分が制作をしたいものによって使うツールであったり、依頼する会社を選択してみてください！
①素早く制作をしたい場合
素早く短納期をご希望の方は、Wixでの制作をお勧めします。
勿論、Editor X・STUDIO・Webflowも通常のコーディングに比較すれば早く作る事は可能ですが、Editor X・STUDIO・Webflowは完全レスポンシブのサイトになるのでブレイクポイントごとのレイアウトの調整が加わり、かつできるデザインの幅もWixと比較して多いので制作時間はかかってしまいます。
②日本語のフォントに拘りたい場合
日本語のフォントに拘りたい場合は、2パターンがあります。
結論、お勧めはSTUDIOです。理由は、STUDIOはモリサワフォントが使えるのでその分強いです。
もう一つのパターンはWixです。Wixでもフォントを購入したり使いたいフォントのフリーがあればアップロードして使う事は可能ですが、アップロードしたフォントを使用するとサイトを開いた際の読み込みに時間がかかる印象です。なのでSTUDIOの方をお勧めします！
③完全レスポンシブサイトを作成したい場合
完全レスポンシブサイトをノーコードで作成したい場合は、Editor X・STUDIO・Webflowのどれでも構いません。他に拘りたい要素によってどれを使うかは変わってきますが、基本的に拘りが無く英語が理解できない方であればEditor Xが無難です。
④アニメーションを多用して作成したい場合
アニメーションを多用して作成したい場合は、2パターンあります。
おすすめの作り方はWebflowです。英語にしか対応していませんが、日本で使っている方も増えてきていますし、情報は多くなっています。中でも一番の理由はclass属性での指定ができるので、手間が省けるのでアニメーションを多用したい方であれば圧倒的に制作は楽になるのでWebflowです。
もう一つのパターンは、Editor Xです。理由は、より複雑なものを構築したい場合はJavaScriptが使えるEditor Xは最強だからです。なのでJavaScriptが書ける方はEditor Xを用いVelo by Wixの開発モードを用いてコーディングしてカスタムしてアニメーションをカスタムするのをお勧めします！
⑤EC・会員サイトを構築したい場合
EC・会員サイトを構築したい場合は3パターンあります。
長期的な目線を持てばEditor X or Webflowになります。理由は、Googleがモバイルファーストインデックス (MFI) を2021年3月から行っているためモバイルの検索結果がPCに反映される様になっているため、完全レスポンシブで様々な端末に対応可能なEditor XかWebflowになります。
今度この2つでどちらを使うかの問題ですが、英語が理解できる方もしくはコーディングができないけどアニメーションを多用したい方はWebflowを、英語が理解できない方もしくはコーディングができアニメーションを多用したい方はEditor Xを使う事をお勧めします！
最後のパターンは、Wixになります。これは、制作期間をとにかく早く作りたい方向けになります。取り敢えずリリースを急いでいるなどの方は、一度Wixで作成し時間ができた際にそのサイトをEditor Xで作り替える、このパターンが一番良いです。
07 | まとめ
今回は、ノーコードWEB制作のツールを4種類厳選して解説しましたが結論どれも優れています。ただ、個人的に感じているのはWixはWixで作っている感がすぐに出るのであまり素人の方はお勧めできないです。
どのノーコードWEB制作ツールを使う場合にも共通して言える事ですが、SEOとデザインの知識がなければ制作は難しいですし、そこにライティングひいては心理学の知識が必要になってくるのでいくらノーコードで作れるからといって自分で適当に作ったりテンプレをそのまま使ったりはあまりお勧めはしません。
日本では、まだノーコードそのものが「悪」といった風潮がありますが、海外ではノーコードWEB制作は主流ですし、ノーコードの市場は今後加速していきます。勿論コスト削減のために自作するのは悪くないですが、自分の得意分野でないことは外注している方が事業は拡大します。
ノーコードWEB制作をご希望の方や相談をしたい方はこちら
それぞれのノーコードツールの特徴などが詳しく記載されており、とても分かりやすかったです。