先日からタイトルの通り「ノーコード」についてBLOGを書いています。
もっと理解し活用したくて以下のtweetをしました。
「ノーコード」について、プログラミング初学者のコージーニ先生が学習した内容を理解しやすいように解説しました。
数か月前から「ノーコード」の学習をスタートしていた僕が、ようやく出会ったNo.1解説がmanablogのマナブさんが「ノーコード」について解説しているYouTubeなんです。この動画を早速「デジタル教科書」にして学び直しました。
その内容を僕なりに掘り下げながら、初学者の方でも理解しやすいようにアレンジしてお伝えしています。
目次
１）はじめに
２）ノーコードとは？
３）ノーコードの定番ツール５選
４）ノーコードとローコードの違い
これまで、１）及び２）についてはBLOGに解説記事を書いています。
「ノーコードとは？①」と「ノーコードとは？②」を読んでいただければ有り難いです。よろしくお願いします。
今回は「基本事項」から少しアプライして「３）ノーコードの定番ツール５選」について、manablogのマナブさんのYouTubeを参考に話しを進めていきます。
今後のKojini’s Cafeを読んでもらえると、以下のことが理解できるようになります。
✅ノーコードの基礎がわかる
✅プログラミングの未来がわかる
✅ノーコードでの稼ぎ方がわかる
それでは、スタートしていきましょう！
３）ノーコードの定番ツール５選
いろんなサイトをリサーチすると、「ノーコード」が世界的に拡大していっているのが理解できます。そのなかでも、だいたいこの５つが定番、一番規模が大きい感じなので、紹介します。
まず一つ目「bubble」です。上図ではちょうど中央あたりの「Full Stack Web Builders」の中のひとつにカテゴライズされています。
まず一つ目「bubble」です。上図ではちょうど中央あたりの「Full Stack Web Builders」の中のひとつにカテゴライズされています。
◇
最初bubble見ていくんですけど、これが今バブルのサイトですね。
The most powerful no-code platform（最も強力なノーコード・プラットフォーム）とタイトルされ、説明書きは以下のように表記されています。
バブルは、コードを記述することなく、誰でも強力な Web アプリを設計、開発、起動することができます。
その後、以下のように項目立てがなされています。
このサイトは英語表記のみです。多分見ていただければ結構分かると思います。こんな感じで、サイト上でとても見やすくなっています。スクロールしながら下に行くと、どのような工程（プロセス）で作成していけるのかが、視覚的に大体わかるようにHP内は構築されています。
例えば、何かを考えると、「こういうサイトが作れるのかな」みたいな直感的に展開していけるように工夫されています。（マナブさんによれば）ページの裏側の仕組みもしっかり作られてるということも読み取れるそうです。
上図の最下部に「成功した企業はbubbleを使用しています」とある通り、いろんな企業が取り入れてる様子です。
要するに、このbubbleがどんな感じのものかと言うと、webサイトとか、webサービスのようなものが、簡単に作成できる仕組みです。じゃあ、どれぐらい作れるのかというのをちょっと後ほど触れようと思います。
◇
次 Web 制作ツール「Webflow」で、webサイトを作成するためのツールの定番です。
Break the code barrier（コードバリアを解除する）とタイトルされ、説明書きは以下のように表記されています。
より良いビジネスウェブサイトをノーコードでより迅速に構築します。
それがこちらですね。Break the code barrierって書かれています。誰でもコードなしでサイト作れますという感じです。日本だったら「Wix」とかが有名だと思いますが、Wixの進化版みたいな感じのようです。いろんなサイトが１時間に300万サイト以上が起動（Launch）されています。
こういったツールを使うと、HTMLとか、CSSとかはなくてもサイトを作成できます。
◇
つづいて「Studio」です。これは日本語サイトがあるので閲覧しやすいサイトです。
NoCode Web Design Platform for All Creatives. Where your tools and team Click（すべてのクリエーティブのためのノーコードWebデザインプラットフォーム、ツールとチームをクリックする場所）とタイトルされ、デザイン、公開、CMSまで、すべてがここに！と表記されています。
これは次世代のWebデザインプラットフォームのようです。ここでもWebサイトを簡単に作れます。（マナブさんによると）あとはWeb メディアみたいなも結構簡単に作れる感じだそうです。日本語表記があるので、結構取り組みやすいと思います。気になる方は、ひとつずつサイトを見て行くといいですよ。
◇
つづいてがWeb開発ツールの「Adalo」です。これが公式サイト です。
Meet Adalo.（Adaloに会いましょう－コーディングせずに〇〇を現実に変えよう！）がコンセプトです。この〇〇には、「サイドハッスル」「スタートアップアイデア」「クライアントの夢」などが入るようです。このAdaloに関しては、先ほどのWebサイト制作ツールとは違って、Webアプリケーションが作れます。サイト内を少し見れば分かると思います。
（図最上段が示すサイト内）今ここで画面動いてるのは、トリップアドバイザーみたいな旅行サイトを作ってます。これもすごいですね。こういうのが作れてしまう。他にも事例がたくさん掲載されているので、もっとっ詳しく見たい方は、是非公式サイトを見てください。
◇
一番最後が「Glide」です。これが公式サイトです。
Create an app from a Google Sheet in five minutes, for free.（Googleスプレッドシートから５分で、しかも無料でアプリを作成します－グライドはスプレッドシートを美しく使いやすいアプリに変えます！）がコンセプトです。
これもWebアプリとか、Webサービス作れてしまいます。例えば、（サイトを閲覧しながら）こんな感じです。これもわかりやすいですね。これは何作ってるのかな？インスタ？マップと連携したアプリのようですね。このようなたくさんのものも作れるみたいです。
これも詳しく知りたい方は、公式サイトを見るといいと思います。
◇
ここまでマナブさん推薦の５つの「ノーコード」ツールを眺めてきました。僕は５つのサイトを実際にネットサーフィンしたわけですが、「なんとなく」できるような気がしてきました！
◇
マナブさんは５選の解説の締めくくりに、以下のように話されました。
今５つの定番ツールをざっくり説明しました。１番いい方法としては、やはり自分で使ってみるのがいいと思います。ただ使ってみると簡単に言っても、ちょっと取っ掛かりが欲しいですね。どっから始めていいのかわからないですよね。
もし僕がノーコードを始めるとすれば、最初この「bubbleのチュートリアル」からやるかなと思います。bubbleというのは、一番最初に説明したこのサイトです。これがノーコードの鉄板ツールみたいな感じだし、要するにノーコード業界の最先端を行ってるわけです。
最先端から勉強した方が良さそうじゃないですか。
ユーザーも多いでしょうし、それでbubbleっていうサイトの上の方見ると、ここに「Academy アカデミー」という項目があります。そのアカデミー（赤囲み）をクリック（click!）すると「Learning resouces ラーニング・リソース」が出てきます。以下のように説明してあります。
The Academy is your guide to building on Bubble. We cover everything you need to get started — from navigating the interface to expert features.
アカデミーは、バブルを構築するためのガイドです。 インターフェースの操作からエキスパート機能まで、始めるために必要なすべてをカバーします。
これらのサイトは概ね「英語」ですが、これからプログラミング勉強する方だったら、こう言った英語もある程度慣れた方がいいと思います。どうしても厳しいという方は、Google翻訳で日本語にしたら「学習リソース」とか、後「ここから始める」とか、だいたいわかるると思います。サイトは若干見づらいですが、こんな感じです。
Learning resoucesの下の方に、「See all」とあるので、これを見てみましょう。
「See all」をクリックすると「Interactive Learning（相互学習） 」が出て、LESSONSと表記されています。右のエディタ（Start Lesson）から、bubbleの基本が学べます。これらのガイド付きチュートリアルは、コードなしでアプリを作成できる主要な概念を理解するのに役立ちます。「12のエディタ」があるので、これらを終了すればアプリ作成に必要な概念を理解することができるようです。
サイトをもう少し見ていくと、上図のようにこんな感じでいろいろ作れることがわかります。インスタのようなサービス、Linkedinのようなサイト、Airbnbも作れるし、AppleNewsなどのニュースサイト、Wikipedia、Netflixも作れるということで、これはすごいですね。そのような感じで、自分が興味ある、あるいは好きなサービスを１個作ってみるのがいいと思います。
例えば、僕（マナブさん）は「Trello」というタスク管理ツールを作ってみたいですね。
Trelloは以前から使っていたので、自分で作ったらどうなんだろうみたいな感じがあります。このbubbleの公式のブログもやってみたいですね。とても細かく解説されているので、こういうのをやってみるのも取り組み始めとしては一つの手です。
もし始めるんだったら、「bubbleのチュートリアル」から始めるのもいいんじゃないかなと思ってます。
◇
と言うことで、今回はここまでにしておきます。
今回は「「ノーコード」の定番ツール５選」ということで、マナブさんの推薦するノーコードツールのサイトを紐解きながら紹介解説をさせていただきました。
途中でも書かせてもらいましたが、サイトのページをめくるたびに、ワクワク感が強まって、コージーニ先生でもやれるという感覚を持つことができました。
その感じた感覚をみなさんにお届けできていれば幸いです。
今日も最後まで読んでいただき、どうも有り難うございました。
あなたにとって有益な情報となっていれば、ますます嬉しいです。
今週から来週にかけては、この「ノーコード」の理解を深め、最終的には「ノーコード」で何か作成するところまでたどり着ければと考えています。
頑張ってトライアルするので、あなたの応援をよろしくお願いします。
それでは、また！Ciao☆彡
【参考・引用したサイト】
・bubble ：https://bubble.io/
・Webflow：https://webflow.com/
・Studio ：https://studio.design/
・Adalo ：https://www.adalo.com/
・Glide ：https://www.glideapps.com/