見出し画像

NoCodeって何?メリット・デメリット・活用方法・種類・事例・情報収集方法

どうも。現在セブ島のIT教育ベンチャーでインターンをしてます田島(hotaka_tajima)です。

今回は、NoCodeについてまとめていきます。実は、私事ですが、20人くらいの前で(オンラインだけど、、、)講演する機会がありまして、そのトピックとして「NoCode」を取り上げたところ思ったよりも反響がありましたので、記事としてもまとめたいと思います。

本記事で知れることは以下のようになっています。
・NoCodeのメリット・デメリット
・NoCodeの活用方法
・NoCodeツールの種類
・NoCode事例
・NoCodeの情報収集方法

では、さっそくみていきましょう。

NoCodeって何?

画像1

多分多くの人が「プログラミング」と聞くと、このような風景を思い浮かべるのではないでしょうか。

しかし、NoCodeならコードを書かずに、黒い画面で文字を打たなくても開発をすることができます。

画像2

NoCodeとは、上のスライドでもご説明しているように、コードを書かなくても開発ができることを指します。そのツールをNoCodeツールといいます。

そんなNoCodeですが、実は2019年くらいから海外でとてもホットな話題となっています。

海外でホットな話題となっている証明が以下の4つ。

NoCodeが注目されている その1

画像3

ここで書いているように、海外で多くのNoCodeスタートアップが大型の資金調達をしています。資金調達をするということは投資家からみて、今後成長する可能性が高いということです。

ここからみてもNoCodeが開発において、これから有用な選択肢になるということがわかるかと思います。

NoCodeが注目されている その2

画像4

SlackやUber、Googleなどのプロダクトデザインを手掛けた Metalab のCEOで、世界最大のデザインコミュニティ Dribbble を保有しているアンドリュー氏もこんなツイートをしています。

いくつかの小さいプロジェクトをNoCoder達と取り組んでみたが、信じられないパフォーマンスを発揮してくれた。彼らは開発に数週間/数ヶ月はかかりそうなソフトを数日で作り上げる。未来はきてる。

NoCodeが注目されている その3

画像5

2019年頭に世界最大のプロダクトランキングサイト、ProductHuntの創業者であるRyan Hoover氏も、ご自身のnoteで「The Rise of “No Code”」 - NoCodeの繁栄 - という記事を書きました。

- 管理画面付きの美しいウェブサイトはWebflowで。
- ECサイトはShopifyで。
- ショップ用のFacebookメッセンジャーBOTはOctane AIで。
- ウェブアプリケーションはBubbleで。
- モバイルアプリはThunkableで。
- ボイスアプリはVoiceflowで。
- 複雑なwebシステムはZapierとAirtableの組み合わせで。
- シンプルなwebページはCarrdで。
- 有料のニュースレターはSubstackで。
- ブラウザ上にAR/VR/3D体験を組み込みたいならScapicで。
- オンラインマガジンはReadymagで。
- Googleスプレッドシートからウェブサイトを作るならSheet2Siteで。
- 社内ダッシュボードはRetoolで。

NoCodeが注目されている その4

画像6

マイクロソフトのデベロッパーカンファレンスでもNoCodeの話題が取り上げられました。

以下はマイクロソフトの会議の要約です。

・Nocodeで開発されたアプリ、サイトは2019年時点で7200万個ある
・2023年には5億個に到達する見込み
・Nocodeで開発するエンジニアは「市民開発者」と呼ばれる
・市民開発者は現在で250万人がいる。4,5年後には1700万人になる見込み

ここからみてもNoCode、あなどれませんよね。。

NoCodeのメリット

画像7

NoCodeのメリットをまとめていきます。

まずNoCodeのメリットとして圧倒的な作業スピードがあげられます。通常何ヶ月かかっていた開発が何日の単位で終わることも少なくありません。

次に、コストの削減です。具体的には3つ。人的コスト、学習コスト、時間的コストです。もうエンジニアを雇わなくても開発ができるようになりますので、エンジニアの人的コストを削減することができます。そして、学習コストもプログラミングを0から学ぶよりかなり低いです。また、時間的コストも先ほど説明したように、削減することが可能です。

3つ目として、よりビジネスに特化した施策が行えるようになることが挙げられます。今まで設計5、コーディング5でやっていたところを、コーディングが2になることで設計に費やせる時間が8になります。上流の作業にもっと時間と労力を使うことができるようになります。

4つ目は、技術の民主化が起こるということです。NoCodeであればほとんどの人が開発ができようになるので、大げさに言ってしまえば「全員が起業家」になることができるようになります。「技術力があるエンジニアより、野心があるバカ」こんな言葉もあながち間違いではなくなるかもしてません。

5つ目は、負荷対策をサービス側に一任できるということです。開発をする上でサーバー負荷などはしっかり考えないといけないことの一つですが、これNoCodeツールに一任することができます。

6つ目は、ソフトウェアの発展です。みんなが開発できるようになると、プロダクトの数ももちろん増えるでしょう。そうなると、必然的に議論や競争が多くなっていきます。これらによって、より良いサービスが世の中に生まれる可能性が高まります。

最後に7つ目、文字ではなく絵で覚えられるということです。NoCodeはいまだ参考書などはあまりなく、YouTubeなどをメインに勉強していく形となります。そのため、活字が苦手な方には向いているかもしてません。

NoCodeのデメリット

画像8

NoCodeのデメリット1つ目は、とはいえ学習コストはかかるよということです。プログラミング言語を一から習得するよりはハードルは低いものの、各ツールごとで覚えることはやはり存在するので、ある程度の勉強は避けて通れません。

2つ目として、かゆいところに手が届かないという点が挙げられます。ツールであるがゆえにテンプレートが存在することがほとんどです。ツールによっては編集できない部分があったりします。つまり、細かい修正ができないことがあるのが2つ目のデメリットです。

3つ目は、日本語表記がたまにおかしいことがあるという点です。NoCodeツールは基本的に海外のプロダクトになるので、日本語の表記が変になっていることがよくあります。もちろん編集できますが、編集の手間がかかってしまうのがデメリットの一つです。

4つ目はデメリットではないですが、もちろんNoCodeを使ってもデザイン、データベースについて考える必要はあるよということです。むしろコーディングの時間を節約できることで、より設計の重要度が増してきます。

エンジニアっていなくなるの?

画像9

ここまで読んだ方は「ではエンジニアはいなくなっちゃうの?」と思う方のいらっしゃるでしょう。

ここからはそのトピックについて触れていきます。

上のスライドをみてもらうとわかるように、従来の開発では数百万円、数ヶ月が普通でした。

しかし、これがNoCodeに置き換わるとどうなるでしょう。

画像10

NoCodeに置き換わると、こんな感じになります。かかる費用は月に数千円、かかる期間も位が月から日に変わります。ますますエンジニア必要ないかもと思ってきますよね。

画像11

とはいえ、エンジニアはいなくならないと考えます。理由の一つとしては、NoCodeと言っても裏側はコードがしっかり支えています。コードの知識がある人の方がNoCodeも理解し、使いこなせる幅も広いでしょう。

もう一つは、各ツールに制限があるという点で、エンジニアが行う大規模な開発は現在ではNoCodeで全てを完結させるのは難しいかなと思います。

では、僕たちは今後どうNoCodeと向き合っていけばいいのでしょう。どのようにNoCodeを使っていけばいいのでしょう。

NoCodeの有効な活用方法

画像12

これからのNoCodeの有効な活用方法としては、「スモールスタート」を実現される道具として活用する方法です。今までアイディアを思いついたらエンジニアにお願いして、、としていたと思います。しかし、 NoCodeツールを使えば、サクッと開発してすぐに市場で試すことができます。もしもユーザーにウケたら本格的に開発、ダメならやり直しみたいなことができるようになるのです。

例えば、居酒屋で友達と飲みながら「こんなアプリあったらいいよね」となって次の日から作って数日後に公開、みたいなことができるようになります。

いわゆる「プロトタイプ」と作る道具として使うのが一つの有効な活用方法です。

また、社内ツールを作る時などにも有効です。エンジニアの工数が足りてない、そんな時にエンジニアではない人がサクッとタスク管理ツールを作って社内で使う、みたいなことができるようになるわけです。

あとは、ウェブサイトにおいてもNoCodeは活躍すると思います。ウェブサイトを作成するなら、WordPressなどもありますが、PHPを理解していないとデザインの変更が難しかったりします。NoCodeであれば誰でもドラックアンドドロップでデザインの変更が可能です。担当者変わったとしてもすぐに対応できてしまうのが利点です。

画像13

とはいえ、これは現段階でのお話。まだNoCodeは黎明期なので、これから進化していく可能性は高いです。そうなった時にいつかNoCodeで全て完結するような世界観が広がってくるかもしてません。

NoCodeが広がっていく中での個人のキャリアの考え方

画像14

お次は個人のキャリアについて考えていきたいと思います。

NoCodeが普及すると、簡単な開発は全てNoCodeに置き換わるでしょう。もちろん複雑な開発や大規模な開発は今まで通り、エンジニアの人たちがコードを書く必要はあるでしょう。こうなると二極化が起こるかと思います。「簡単な開発はNoCode、複雑な開発はコーディング」になるかなと思います。

そういったことを考えると、個人のキャリアとしては以下の2つが考えられるかなと思います。

・プログラマとしてハイエンドを目指す
・プログラミングを理解したビジネス側、企画側のキャリアを目指す

ここで言いたいのは決してプログラミングの勉強などが無駄になることはないということです。プログラミングの知識があるビジネスサイドのポジションはなかなか競合がいなく美味しいとこかなと思っていたりもします。

NoCodeの社会的意義 

また、NoCodeは社会的にみても素晴らしいものだと思います。今ではビジネスを知ってる人が企画・設計して、それをエンジニアが作成する構造だったと思います。(もちろんビジネスを理解しているエンジニアはたくさんいる)

それが、NoCodeによってビジネス側の人がアプリケーションを作成することが可能になります。ビジネスにおけるアプリケーションは、ビジネスを熟知している人が作成した方が精度は高いです。

より顧客の悩みにフォーカスした、ソリューションを世の中に生み出すことができるようになるといった点でNoCodeは社会的にも価値あるものだと言えるでしょう。

他には、例えば災害に対するソリューションとしてNoCodeが活用されるみたいなこともあるかと思います。災害のことは実際に災害にあった人が一番知っています。その状況下になると、どういったことで困るのか、どういったものが求められているのかを体験ベースで知っています。

そんな人たちがNoCodeツールを使って開発すれば、より悩みにフォーカスしたソリューションを提供することができるでしょう。

つまるところ、設計する人と、開発する人の解離をできる限りなくすということができる面でNoCodeは有用なのです。

より良い市民開発者になるためには

画像15

ここまで読んだ方の中には、「じゃNoCoderになろう」と思った方もいるかもしれません。そんな方には上のスライドの5つのことを勉強する必要があるかと思います。

1つ目は、コンピューターリテラシーです。これは、PCだけでなくタブレットやスマフォなどの端末に関して、その種類や性能に関して親しみを持つといったことが求められます。

2つ目は、オンラインサービスの原理を理解するということです。データがどこにあるか、データセンターがどのようなもので、どのような場所にあるか、オンプレとクラウドの違いなどを理解する必要があります。

3つ目は、数学です。これに関しては、中学と高校でならう数学で十分。それよりレベルの高い数学はビジネスの現場で学ベぶべきと言われています。

4つ目は。コンピュータサイエンス。実はNoCodeでも数式を使うことは多いです。そのため、「式」を上手に使う上でロジックは理解しておきましょう。具体的には、ExcelやGoogle Spredsheetでセルに関数を使った式を使えれば十分です。

5つ目。コーディング。「NoCodeなのにコーディング必要なの?」と思う方のいると思いますが、知識があると便利です。プラットフォームには出来ないことが必ずあります。そんな状況に出会した時に、カスタムメイドのコンポーネントやプラグインを作る必要性が生まれたりするからです。例えば、ちょっとだけJavaScriptとCSSを知っているだけで、「在庫=0」のセルを「赤で表示する」というカスタマイズが出来るのです。

NoCodeツールの種類

画像16

NoCodeで提供されるサービスはさまざまです。Webサイトを簡単に製作するためのサービスもあれば、既存のWebサービスを連携させて効率化するためのサービスもあります。目的に応じて、サービスを使い分けていく必要があります。

では、どんなサービスがあるか簡単に確認していきましょう。

NoCodeツールの種類① ウェブサイトビルダー系

画像17

ここに記載したSTUDIO、Webflow、Carrd、Sheet2Siteなどはウェブサイトビルダーと呼ばれるウェブサイトを作成するのに適しているNoCodeツールになります。

Sheet2SiteはなんとGoogleのスプレットシートをデータベース代わりに使うことができます。こちらの動画をご覧ください。

NoCodeツールの種類② ドキュメント&データベースツール

画像18

Notion、Coda、Airtableなどは、フォームとデータベースを組み合わせた複雑なWebアプリケーションを作るのに適しています。ECの在庫リストや、営業アタックリストのような、どちらかといえば社内ツールを作るのに役立つでしょう。

NoCodeツールの種類③ アプリケーション作成ツール

画像19

Adalo、Glide、bubbleなどはウェブアプリケーションを作成するのに向いています。かなり広い範囲の目的をカバーしていて、カスタマイズ性は高い反面、学習コストは少し高めかもしれません。bubbleとかはかなり有名どころかと思います。

NoCodeツールの種類④ iPaaS(サービス間接続)

画像20

iPaaSとは「Integration Platform as a Service」の略。異なるアプリケーション同士をつなげ、データを統合したりシステムを連携させたりすることができるクラウドサービスのことです。

IFTTT、Zapierなどのツールを使用することで、「〇〇を含むメールを受信した場合、Slackに通知する」「Trelloのタスクが追加された時に、メールに通知する」など、業務の効率化が図れます。

NoCodeツールの種類⑤ マーケットプレイス系(CtoCマーケットプレイス制作特化型)

画像21

マーケットプレイスとは、モノを買いたい企業(バイヤー)と売りたい企業(サプライヤー)が自由に参加できるインターネット上の取引市場のことを指します。例えば、メルカリ、Airbnbなどがそれに当たるかと思います。

sharetribe、Arcadier、KREEZALIDなどはそんなサービスを作成するのに向いています。本講義でもArcadierを使ってメルカリのクローンアプリケーションを作成しましたが、20人全員が1時間以内に作り上げることができました。CtoCのマーケットプレイス制作特化型アプリケーションを作成したい場合は、これらを使うと簡単に作ることができます。

NoCodeツールの種類⑥ EC系

画像22

6つ目はEC系です。これは想像しやすいかと思いますが、Amazonとか楽天とかをイメージしてもらうとさらにイメージしやすいでしょう。

こういったサービスを作りたい方はgumroad、Shopifyなどのツールを使用することをおすすめします。

NoCodeツールの種類⑦ 音声・チャットボット系

画像23

NoCodeでチャットボットも作れたりします。ドラッグ&ドロップの操作でチャットボットのプロトタイピングを作れるので、とても簡単です。

チャットボットを制作する上で重要なのがシナリオ設計(選択肢ごとに会話を変更させる)ですが、全体図を見ながら作成していけるので初心者の方でも簡単に取り組めます。

チャットボット系のNoCodeに興味がある方は、ぜひvoiceflowをチェックしてみてください。

NoCodeツールの種類⑧ VR系

画像24

最後はVR系。なんとNoCodeでVRなんかも作れちゃいます。VR、ARや3Dコンテンツのような立体的なコンテンツを手で描くように制作可能。最初から背景や瑞系などの素材が豊富に用意されていて、初めてコンテンツを作り始める人にも便利です。

VR系のNoCodeツールの代表としては、scapicがあります。scapicに関してはこちらの動画をわかりやすいのでぜひご覧ください。

NoCodeの実例

では、次にNoCodeを使用している企業の実例をみていきましょう。

NoCodeの実例① Swiggy

画像25

まずは、インドのフードデリバリー最大手のユニコーン企業である「Swiggy」です。50都市以上で5万を超える飲食店と提携を結んでいて、15億ドルの資金調達も過去にしています。

そんなSwiggyですが、Native版、ウェブ版共に、YeloというNoCodeツールで構築しています。

NoCodeの実例② Lambda School

画像26

オンラインプログラミングスクールの「Lambda School」です。受講生は3000人もいるそう。

TypeForm, Salesforce, Zapier, WordPress, Webflowなどを使い、入学プロセスから学生のオンボード、また教育支援、就職支援までをNoCodeで実現しています。

また、NoCode以外にも多くのサービスを使用していています。メインの学習用サイトはWordPress、入学プロセスはTypeForm、生徒の管理はZapierやSalesfoece生徒の管理はZapierやSalesfoece、マーケティングに使うサービス紹介サイトはWebflowを使用しているそうです。

このようにツールを組み合わせるというアイディアも面白いかもしれませんね。

NoCodeの実例③ Makerpad

画像27

NoCodeコミュニティサイトである「Makerpad」も、もちろんNoCodeで作られています。具体的には、WebflowとMemberstackで作られているそうです。

こちらのサイト、個人開発で月に200万の収益が上がっているとのことです。もしかしたらNoCodeで作ったアプリケーションが月に200万を稼いでくれるかもしれません。

NoCodeの実例④ Ben Tossell

画像28

レストランの経営者であるBen Tossell。彼は、Glideのテンプレートを使用し、テイクアウトやデリバリーのメニューを作り、ギフトカードまで販売しているそうです。

アプリはNoCodeで作られていて、Ben自身でカスタマイズすることが可能出そう。

このように飲食店などでも活用されたりもしています。エンジニアじゃない方でもカスタマイズできるので、その時の顧客の様子やデータを元に店長自身が改善していくみたいなことができるようになっているのです。

NoCodeの実例⑤  Awesome Ars Academia

画像29

セブ島にある「英語」と「ITスキル」習得のためのグローバルテックスクール・グローバルIT専門学校の「Awesome Ars Academia」。

唯一の開発会社 兼 IT教育会社で、STEM・STEAMなどから生まれた学習効率を高めた最先端の教授法を取り入れているIT教育会社です。

新しいHPをStudioで作成しているところだそう。

NoCodeの実例⑥ 他にもこんなこともできます

画像30

他にも、こんなこともNoCodeでできます。

・LPをSTUDIOで作成する
・Googleアナリティクスの週次レポートをSlackにBotで送信する
・Asana、Trelloでタスク管理する
・Googleフォームで集めた回答Salesforceにいれる
・AR表現
・SendGridでメールマーケを自動化する(マーケティングオートメーション)

いろんなところで活用できるNoCode。だからこそ目的に応じてどのツールを選ぶのかは大事になってきそうです。

NoCodeの情報をキャッチするには

画像31

NoCodeを学んでいくには、新しい情報を常にキャッチしていく必要があります。上のスライドで書いたものは、NoCodeについて情報発信している媒体、個人アカウントです。

上の3つは、英語なので本格的に勉強する方向けになっています。おすすめなのは個人のツイッターをフォローすることです。

下の6つなどはフォローしておくと定期的に情報を得ることができるのでおすすめです。また、僕のツイッターアカウントでもたまにNoCodeについて発信するかもなので、よかったらぜひフォローしてもらえると嬉しいです。


まとめ

かなり長くなってしまいましたが、以上で終わりになります。

NoCodeを使わない人も知識として頭に入れておくことはとても大切だと思うので、ぜひこれからも情報を追ってみてください。

また、NoCodeはこれからの進化が期待できる業界なので、ワクワクしながら次なる進化を観察するのもいいかもしれませんね。

本記事がみなさんのNoCodeを勉強を始めるきっかけになれましたら嬉しいです。

では。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!これからもよろしくお願いします!
15
休学中の大学3年生。デジタルマーケベンチャーを経て、セブのIT教育ベンチャーでインターン中。Webサイト編集長として、マネジメント、採用、Webディレクション、SNS運用、LP構築とかやってる。自分が学んだことをアウトプットしていきます。少しでも参考になれば幸いです。

こちらでもピックアップされています

Code for World:プログラミングで世界を変える
Code for World:プログラミングで世界を変える
  • 75本

未来を予測するもっとも確実な方法は、 未来を発明することだ。  ――アラン・ケイ

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。