ノーコードWebサイト

ノーコード「Webflow」と「STUDIO」でWebサイトを作って比較してみた

のんたん

nontan

京大工学部▶︎京大大学院情報学研究科▶︎日系企業のITエンジニア。研究室ではAI×通信の研究も行いAIにも知見あり。友人とプログラミング初学者向けブログ「はやぶさエンジニア」を運営。近日、Webサービスのリリース予定。26歳大阪在住

ノーコードとは読んで字の如く「プログラミングを一切しないで」アプリやWebサイトを開発できるサービスです。

5年後には、会社内で利用される業務効率化アプリの65%がノーコードで作成されると予測されています。

差別化の必要のない、あったら便利というアプリの開発にはこれからノーコードが最適であることを示唆していて、
今でもノーコードの受託開発フリーランスもいるほどです。

ノーコードでWebアプリを作成した記事もあるので是非読んでみてください。

今回はWebアプリではなく、Webサイトを作成できるノーコードサービスである「Webflow」「STUDIO」を利用して、

実際に現役エンジニアの筆者がWebサイトを作成し、2つのサービスを比較してみました

比較結果

まず、実際に10分で作ったそれぞれのURLを載せておきます。

作成できるWebサイトの雰囲気を掴むために是非みてみてください。

両サービスの概要

STUDIO

STUDIOでは、URLの共有を行うと複数ユーザで同時開発をすることできます。
リモートワークが増えてきている今、Web制作現場にとって重宝されるノーコードツールと言えますね。

そして、STUDIOは日本製サービスなので英語のドキュメントだらけの他サービスで苦労している人にはありがたいと思います。

日本語ドキュメントから開発者のコミュニティも揃っているので、ノーコード初心者にとってまず使ってみてほしいサービスです。

<特徴
・純日本製のノーコード
・リアルタイムで並行して開発可能な機能
・日本のドキュメント・コミュニティーあり
・CMSの対応あり

Webflow

世界中のWebクリエイター作ったWebサイトをお金を払うことで再利用することができます。

クリエイターのWebサイトを利用して、これまでなら制作費数十万かかっていたオリジナルサイト制作が、自分自身で1日で爆速で作成できるようになります。

チュートリアルが動画で充実しているのもメリットですね。

<特徴
・Webサイトのカスタマイズ性が高い
・世界中のクリエイター作品を利用可能
・チュートリアルがかなり充実
・決済システムの導入可能

最初の使いやすさはSTUDIO

STUDIOは日本発のノーコードサービスです。そのためか、直感的に使いやすかったです。

また、STUDIOの方がUI・機能は簡素化されており、シンプルなデザインを即座に作成するのに便利サービスだと思います。

STUDIOもWebflow共に、別々のdivクラスの要素を付け加えてWebサイトを作っていく形式です。
追加するdivに対してマウスでぽちぽちしていきます。

カスタマイズ力はWebflow

テンプレートも含めて作れるサイトの豊富さ・カスタマイズ力はWebflowのが良いと思いました。

機能が多いので使いこなすのに少し時間がかかるかもしれません笑

ただプログラミングは一切必要ないので、イラストレータを使いこなすのと同じような感覚です。

まとめると以下です。
STUDIO:シンプルなページを爆速で作るのに向いている
Webflow:カスタマイズ機能が豊富なので使いこなすのに時間がかかる

STUDIOの使い方

STUDIOでは、コードやテンプレートに縛られることなく、誰でも自由自在にデザインができます。

まだ命名されていない名前であれば好きなURL名をつけることができ、1クリックで公開可能です。

まずは登録

私はGmailで済ませてしまいました。本当に簡単ですね。

チュートリアルから始まる

すぐに、チュートリアルが始まり、画像を設定、テキストを設定、マージンを設定すると言った基本的な設定方法を教えてくれます。

そのチュートリアルもおしゃれなUIでした。さすがとしか言えないです。

早速作ってみる

下の画像のようにtwitterへのリンクを作成するのもすごく簡単です。(よかったら@it_nontanをフォローしてね笑)

要素をペタペタと貼っていきます。

別ページへのカードを設置しました。マージン・パディングなどが目で調整できるのがいいですね!

Webflowの使い方

STUDIOと比べて少し複雑なUIをしている印象です。

登録はSTUDIOと同じでGmailで行いました。

登録が完了後すぐ、何のためにサービスを利用したかなど質問があり、サービス利用目的にポートフォリオ制作と答えると下の画像のテンプレートが出てきました。

サービス利用用途に応じて初めに表示されるテンプレートが異なるようです。

Webサイトを作ってみる

全ての要素はボックスのように扱われ、右のツールバーで必要な設定をしていきます。

そしてアメリカのスタートアップのアプリなどにありそうなグラフィックのテンプレートも豊富です。

ダッシュボード(ホーム画面)に行くと、様々なサイトのテンプレートがありました。

まとめ

どちらも素晴らしいサービスでした。

何よりサービスのUI自体がカッコよくて使いたくなる。

筆者は企業でWebサイトを構築する業務もあるのですが、会社内で必要な軽いWebサイトなんかはノーコードで十分ですね。

STUDIOは日本製で日本語のリファレンスが豊富で初心者向け、Webflowは機能が豊富でよりカスタマイズ性を求める人向けといった感じです。

参考になったという人は是非SNSなどで共有していただけるとモチベになります。

最後までありがとうございました!!

  • この記事を書いた人
のんたん

nontan

京大工学部▶︎京大大学院情報学研究科▶︎日系企業のITエンジニア。研究室ではAI×通信の研究も行いAIにも知見あり。友人とプログラミング初学者向けブログ「はやぶさエンジニア」を運営。近日、Webサービスのリリース予定。26歳大阪在住

-ノーコードWebサイト
-, ,

© 2021 はやぶさエンジニア Powered by AFFINGER5