NoCodeツールは、こうやって選ぶ！選び方とおすすめ学習コンテンツ　【2021年5月21日更新版】

こんにちは、NoCodeCampのツバサ(@tsubasatwi)です。

8/7 のWP ZoomUPで発表されたイベントの後半部分です。
前半のプレゼン資料　は　WP ZoomUP #46 プログラミング不要のNoCode（ノーコード）の事例紹介と学習の進め方 で公開してます。（canvaで作成しました）

　*参加申し込み  213名もの申請がありました。

今回は「NoCodeを始めたいけど、どうやって始めたら良いのか？」悩んでいる人向けの記事になります。これで、NoCodeについての「サービスを作ってみよう」となる方がいれば嬉しいです。

①まず、どんなものを作りたいのか？を考えよう

自分がどんなツールを作りたいか？をまず決めていきましょう。
自分のスキルや実際にできそうか？どうか？については、この段階では無視してかまいません。例えば「メルカリのようなアプリ」を作りたい等、ざっくりでもかまいません。NoCodeツールはプラットフォームごとにそれぞれ出来ることと出来ないことがある為、「どんなものをつくりたいのか」をイメージすることが大切です。

②スマホのアプリ化が必要か？

スマホのアプリ化が必須なのか？をまず考えていきしょう。

例えば、
・Webサイトだけの表示で良いか？
　考えることとしては、
　 *レスポンシブル対応
　　（スマホ、タブレット、PCそれぞれで最適表示される方法）　
　 *PWA
　　(Webサイトをスマートフォン向けアプリみたいにする方法）

・スマホのアプリ化が必要なのか？　
 　　＊ネイティブアプリ　（スマートフォンで使うアプリ）

全てに対応することも可能ですが、スマホのアプリ化はWebサイトより大変です。なのでここではスマホのアプリ化が絶対必要か？を考えて下さい。
ネイティブアプリ？というレベルであれば、まずは無難にWebサービスのみで始めることをお勧めします。

③機能を3つのパターンで分類する

次にどんな機能のサービスなのか？を考えましょう。
今回はパターンを大きく3つに分類しました。

 パターンA　一般的なホームページやブログなどのメディアサイト
 パターンB　決済機能やマッチングなど、サイト自身がサービスである
 パターンC　社内でつかえる業務系アプリ、自動連携ツール
となります。

具体的には、
パターンA　ホームページ、ランディングページ（プロモ用のサイト）
パターンB　ECサイト,マーケットプレイス、マッチングサイト　etc..
パターンC   顧客管理システム、勤怠管理、アンケートフォーム、自動化
となります。

ここでまとめると、具体的なツールイメージでとしては、以下の図のようになります。

*パターンBについては、便宜上、プログレッシブアプリ（Webサービス）と
ネイティブアプリ（Google Play などのプラットフォームにアップロードできるもの）に分けてます。

ここから前途で上げた具体的なツールをいくつか紹介していきましょう。

④-A NoCodeツールの選び方
パターンA（ホームページ）はSTUDIO>WordPress = Webflow

パターンAの場合は、下記の3ツールがおすすめです、全てコーディングせずにWEBデザインが可能でドラックアンドドロップで直感的にWEBサイトを構築することができます。特にSTUDIOは最も初心者向けのツールであり、国産ノーコードツールとなっている為、日本語の情報が豊富です。「まずは、NoCodeに触ってみよう」と考えている方には特におすすめです。
また、スマホのネイティブアプリ化を考えている場合には、やや難しい部分がありますのでBパターンを選択してください。


代表的なツール3選

STUDIO

初心者向け
国産ノーコードツール。
無料でもかなりのクオリティのサイトが構築できる。
日本人が勉強しやすくドキュメントも豊富。

STUDIOで作られたサイト事例

株式会社クラウドネイティブ

STUDIOについては、以下にnoteで紹介させて頂いてますので、ぜひご覧ください。

STUDIO公式ページ

STUDIO AI | The new age design tool with WebDesignAI inside.

WordPress 

中級者向け
 世界的にもっともシェアが高い。
ブログから高機能なサイトまで作ることができるオープンソースのソフトウェアサーバーを別途用意する必要がある。
 *WordPressはelementor （無料）のような ページビルダープラグインを入れることでNoCodeツールとして直感的なWeb構築が可能です。

WordPress で作られたサイト事例
オールアバウト

オールアバウトグループのコーポレートサイト – All About, Inc.

株式会社LIG

株式会社LIG(リグ)｜システム開発・Web制作・マーケティング支援

Webflow

中級者向け
 最近急速にシェアを拡大中の利用者は全世界で100万人以上。CSSを理解しておかないと編集はやや大変だが、アニメーション機能や綺麗なテンプレートが豊富。有料だが、HTMLとしてエクスポートできる点は素晴らしい。

Web flow Showcase

Popular Websites | Webflow

Webflow公式ページ

Design Professional Websites Visually

④-B NoCodeツールの選び方
　パターンB （サービス）は　 Glide  > Adalo > Bubble　

パターンBサイト自身がサービスであるケースですが、主要NoCodeツールとしては簡単な順番で、Glide　＞Adalo　＞Bubble　の3つのツールとなります。学習コストとしては、Glideが最も理解しやすく、Bubbleは多少学習するまでに時間がかかると思います。

代表的なツール3選

Glide

初心者向け
スプレットシートベースで作れ、慣れると1時間くらいでアプリを作ることが可能。ただし細かいデザイン調整などが苦手。ネイティブアプリは不可

Glide で作られたサイト事例
「いなぎお弁当マップ」

いなぎお弁当マップ

Glide公式ページ

Glide | No Code App Builder | No Code Application Development | Power Your Apps with AI

Adalo 

中級者向け
UIがドラッグ＆ドロップで自由に設計できる
API接続やnode.jsを使って拡張も可能。
ネイティブアプリ化が可能。

Adalo で作られたサイト事例
「Spotto」

SPOTTO | WEB説明会のためのプラットフォーム「スポット」

Adalo公式ページ

Adalo - No-Code Mobile and Web App Builder

Bubble

上級者向け、WorkFlowなどの独特の仕様を覚える必要あり
充実したPluginでAPI接続、Javascript なども利用可能。今回紹介した中で最も拡張性の高いNoCodeツール
海外のコミュニティが充実している為情報が多い。
ネイティブアプリ化も可能

Bubbleで作成したアプリをネイティブ化する方法 （Android / iOS） - ノーコード ラボ

Bubble で作られたサイト事例
「hackerhouse」

Coliving et Colocations à Paris pour Geeks 🤓 - HACKERHOUSE

Bubble公式ページ

Bubble | Build Powerful Full-Stack Apps Without Code

またECサイトを作りたい場合には、Shopfyがおすすめです

Shopify

中級者向け
ECに特化したNoCodeサービス、ECサイトを初めて立ち上げる方でも十分にクオリティの高いサイトを仕上げることが可能です。在庫マネジメントや配送対応、SNS連携、クーポン機能などオンラインストアに必要な機能が実装可能です。また、Multi Vendor Marketplace　を使うことで、楽天、Amazonのようなユーザー複数店舗を持てる複合ECサイトの構築もできます。

ビジネスを立ち上げ、成長させ、拡大する - Shopify

⑤-C NoCodeツールの選び方
パターンC（業務系アプリ）の代表はKintone,PowerApps,Airtable,Zapier,Anyflow

パターンCは、業務系のアプリで、デザインなどよりも、安定性や、
セキュリティが求められる仕様に向いています。
学習的な難易度は、一般的なIT知識を持っていれば、基本的な操作は問題ないものの、性質上クローズドで使われていることが多く、スキルに自信が無い場合には、日本国内のサービスを選ぶ方が無難です。

Kintone

日本のサイボウズ社が作成した業務改善プラットフォーム。
日報や顧客管理ツールなどができます。
サイボウズ社は、1997年創業の会社で、東証一部上場企業です。
大手企業や病院などにも導入事例も豊富です。

Kintoneの事例

兵庫県加古川市のオープンデータによる事業者支援にkintoneを活用 地図上でテイクアウト可能な飲食店情報を一覧できる公開サイトを2週間で構築 | サイボウズ株式会社

Microsoft Power Apps

Microsoft Power Appsは、マイクロソフトが提供するOffice 365 Enterprise E1等に含まれているツールです。単独でも契約可能です。
日本ではまだ事例が少ないですが、Power Apps と Microsoft Teamsの連携や、Azureとの連携などかなり期待のできるツールです

Microsoft Power Appsの事例

神戸市と日本マイクロソフトが包括連携協定を締結 - News Center Japan

Airtable

2012年のサンフランシスコ・ベイエリア発のクラウドデータベースのサービスです。GoogleスプレッドシートやExcelの操作感で簡単に使用できます。直感的にデータベースを理解できるのが特徴です。

Airtableの事例

Airtable: Cross-functional Collaboration

Zapier

Zapier（ざぴあー）は、自動連携ツールで最も有名な海外ツールです。アプリ同士を組み合わせることができます。例えば、Googleスプレットシートに登録があれば、メールを送る。Googleフォームへの登録があれば、Slackへ通知を送るなどの動作を行うことができます

Anyflow

Zapier の日本版の自動連携ツールです。Zapier には無い連携先として(2021年1月現在) 会計FreeeやSmart HRとのクラウドサイン　などの国産ツールとの連携ができるのが強みです。

Anyflowの連携事例

⑥使うツールの公式ドキュメントは必ずチェック

NoCodeツールは月額課金モデルがほとんどです。（ただし、ほとんどの場合、一定部分まで無料利用が可能なのでご安心を）その為、ユーザーにも長く使ってもらえるようにドキュメントやユーザーサポートが充実しています。NoCodeツールを選ぶ基準として、ドキュメントサイトが充実しているツールを選択するのがとても重要です。

例えば、国産のNoCodeツールのSTUDIOは、Slackページ が用意されており、STUDIO社員と交流ができる場があります。STUDIOで作られた作品が掲載されたり、技術的に分からないところの質問もSTUDIO社員から回答もらえたりしてます。こんなに手厚いサポートは利用しない手はありません。

STUDIOのSlackサイト

Join STUDIO Community in Japan㌫ on Slack!

STUDIO Japan

NoCodeの情報はほとんど英語で大変。。。と言われますが、
あまり知られてないのが、ドキュメントの動画が充実しているのは、あまり知られてません。英語が分からなくても、操作動画を見ていれば、何となく
操作も理解できるはずです。私は、むしろ、英語の勉強にもなってラッキーくらいに思ってます。（いまだに英語は話せませんが(笑)）

ちなみに、Glide、Adalo、Bubbleのドキュメント場所は以下になります。
動画で説明しているものが多いですよね？

Glide ドキュメント（Learn to Glide）

Glide 窶「 Learn to Glide

Adaloドキュメント　（Adalo Resources）

Getting Started - Adalo Resources

Bubbleドキュメント（Bubble Manual）

Introduction - Bubble Docs

また、Webflowはwebflow universityというサイトを作ってくれていて、
CSS、SEOなどについても詳しく説明されてます。これって有料のプログラミング学習サイト並みのボリュームです。こんなの無料開放して良いの？

webflow university

Learn web design with free video courses and tutorials | Webflow University

⑦オンライン学習サイトを活用しよう【海外】

当たり前ですが、他のツールとの比較などはない為、
この状況に応じてどのツールが最適か？までは回答してくれません。そこで、汎用的なものとして以下のようなNoCodeを勉強できるコミュニティやオンラインサイトがあります。

海外NoCodeオンライン学習サイト

Makerpad　

世界最大に大きいNoCodeの学習サイト 
2021年3月Zapier が買収しました。

Build & operate businesses without code | Makerpad

NoCodery　

オンラインの数は少ないものの、Freeのウェビナーがあったり
Adaloのオンラインコンテンツがあるサイトです。ちょっとマニアック。

NoCodery - Code is a thing of the past. Start creatings apps and websites easier, faster, and without special skills involved.

NCF

シリアルアントレプレナーのJTが運用するSlackコミュニティ

The No Code Community

海外サイトは英語ばっかりで大変ですか？では、ここから日本語のNoCodeコンテンツについて紹介していきます。

⑧国内NoCodeオンライン学習サイト

まずは、NoCodeToolにこだわらず説明をしている動画サイトを紹介していきます。

しんじ　（@__shinji__)

NoCode界におけるYoutubeやnote配信での影響力は語るまでもなく有名で、現在のNoCodeブームの火付け役といえる存在。Bubble ,Webflow など主要なNoCodeツールについては一通り網羅されてます。

NoCode School - ノーコードスクール 

NoCode School - ノーコードスクール -

⑨NoCodeブログ記事

次にNoCode全般の記事を書いている記事を紹介します。

NoCodeNinja　@nocodejp

NoCodeといえば、NoCodeNinja！日本初のNoCodeサロン「NoCodeCamp」を一緒に運営してます。特に以下の記事は、
400いいね以上押されており、はじめてNoCodeを触わる方には、一読いただきたい良い内容です。

あんどう｜NoCodeとDX　　@ando_engineer

IT企業でエンジニアを10年やっていた、あんどうさん。
現在、ITコンサルティングやITサービスの導入支援、Webマーケティングの運用サポートをしています。ビジネスサイドのNoCode情報が多いです。

トオル - Toru | ファッションとかIT　@toru_82

日本で初めて職業として「ノーコードエンジニア」を募集した会社の社長が考えてる事｜トオル - Toru | ファッションとかIT

*トオルさんの記事はNoCodeの情報がまだ少ないですが、NoCodeを実務面でどう変えるか？という今後のチャレンジに大きく期待ができそうな記事のため、紹介させて頂きました。

NoCoders JAPAN協会

「コードを書かずにアプリやサービスが作れる」というNo-Code（ノーコード） / Low-Code（ローコード）の先にある世界を描きます。
イベントも月に何度かあります。

NoCoders JAPAN協会

Facebook での情報配信グループ

ノーコード 最新情報勉強会  
@tsusatwi が運営しているFacebookのグループスレです。
https://www.facebook.com/groups/nocodecamp

アウトプットして振り返りをしよう

効率よく学習するには、アウトプットする”勇気”が必須です。Twitter でもFacebookでもなんでも良いので、”勇気”を持って自分で作ったアプリをアウトプットしてください。クオリティは100%を目指さなくてもかまいません。自分のできること、できなかったことを振り返ってみましょう。実は、別のツールを使えば簡単だったこともあるかもしれません。また作っているうちに別のサービスを作りたくなるかもしれません。
NoCodeは、すぐにサービスが作れることが良い点です。いろんなツールに触れて自分に合うNoCodeのツールを見つけて下さい。

ぜひ、勇気をもって、最初の1歩を踏み出していきましょう。

NoCodeのことを話せる仲間が欲しいなら

NoCodeは情報があまりにも散らかっているので、一人だと中々集中できず進まない人へ。NoCodeCampはサービスを作りたい人を全力で応援し、プログラミングを使わないノーコードを通じて、アイディアを実現する人達のコミュニティです。NoCode仲間が欲しい人は、ぜひお越しください。7日間無料期間体験可能です。

NoCodeCamp プログラミングを使わないIT開発

NoCode Ninja with 宮崎翼 - NoCodeCamp プログラミングを使わないIT開発 - DMMオンラインサロン