中高生向けの体系的次世代リーダー養成プログラム TOPPA!! リーダー・スタートアップコース　講師登壇資料。 ノーコード開発基礎+実装の講義を担当。 ノーコードツールを使い、アイディアを形にするキッカケを作ってもらうこと、開発を楽しんでもらうことを目的とした内容です。 Wix, Glide, Adaloを主に紹介しています。

1. ノーコード講座
あぽと （金 俊太朗）

2. あぽと（金 俊太朗）
フリーランスとして新規事業立ち上げ等の様々なプロジェク
トに参画。ノーコードツールを主軸に、色んなサービスを生
み出したり、みんながアプリを持てる世界を目指し2021年
にAppAuto株式会社を起業し、CEOに就任。
ノーコードエンジニア
kane syuntaro
富山高専卒。製薬企業へ就職
工場のIT化・DXを推進するエンジニア
ノーコード専門エンジニア

3. 講義の内容
https://apotomemo.notion.site/TOPPA-7fc31bf8acfe41dc9b048
a2a15aa4b60
● アイディアを形にするキッカケにしてもらう
● ノーコードに実際に触れ、創ることを楽しむ
講義の目標

4. 「ノーコード」って何？
どんなツールがあるの？
メリット・デメリットは？
ノーコード基礎講座

5. = NoCode
コードを書かずに
ホームページ・アプリなどを作る
という概念
ノーコードとは…

6. 出典：NoCodersJapan (https://no-coders-japan.org/nocode-chaosmap-2)
ノーコードツールは、こんなにたくさん！

7. メリット
低コストで開発
直感的なマウス操作。テンプレートも活用すること
で、コーディング開発と比べ工数削減できます。
ノーコードツールを使う
専門知識が無くても開発可能
ソースコードの記述が不要なため、プログラミング
の専門知識は不要です。（あるとBetter!）
ビジネスにスピード感を出す
プロトタイプレベルでリリースすることで、市場の
反応を確認し改善したり、メンバー集めや資金調達
に活用できます。

8. デメリット
ツール利用料がかかる
月額サブスクのツールが多いです。無料で使えて
も、広告が入ったり機能制限があります。
ノーコードツールを使う
開発に制約がある
実装できる機能に限界があります。やりたいことが
対象ツールで実装可能か確認することが重要です。
海外のツール・情報が多い
ツール内や公式サポートは英語が多いです。Google
翻訳やDeepLを活用しましょう。

9. Webサイト とは？
Wixで作る
情報を一方的に表示する
（静的なサイト）
例：企業ホームページ、Apple製品ページ
※ぶっちゃけ、明確な定義はありません。
作れるものをイメージできればOKです。

10. Webアプリ とは？
Glide,Adaloで作る
情報が双方向でやり取りされる
（動的なサイト）
例：Twitter、食べログ
※ぶっちゃけ、明確な定義はありません。
作れるものをイメージできればOKです。

11. Wix講座
Wixとは？
自己紹介サイトを作ってみよう
サービス紹介サイトを作ってみよう

12. Wix
専門知識なしでサイト作成
一般的に必要とされるHTML/CSSを使わず、直感的
な操作でWebサイトを作成できます。
ウィックス
https://ja.wix.com/
豊富なテンプレート + AI作成
800以上のテンプレートを用意。質問に答えるだけ
でサイトを作ってくれるWix ADIもあります。
さまざまな機能を組み合わせて実装
サイト管理、問合せフォーム、ネットショップ、
予約など、目的に合わせた機能を実装できます。

13. Wix
様々な業種のWebサイト
適切なテンプレートを選ぶことで、最小限の時間でWebサ
イトを構築できます。こだわって作り込むことも可能で
す。フォームや予約など各種機能を付けたい場合、何がで
きるか事前に把握することが大切です。
で作れるもの

14. TOPPA!!
概要
次世代リーダー養成プログラム「TOPPA!!」ホームページ
できること
TOPPA!!のサービス紹介、申し込み・問い合わせ
英語切替も対応しています。
https://www.toppa-learning.com/
Wix

15. 飯塚農場
概要
にんじんジュースを製造・販売する「飯塚農場」ホームページ
できること
商品・生産者の紹介。会員登録し商品購入が可能です。
ブログ機能で最新情報を掲載しています。
https://www.iizuka.farm/
Wix

16. Wixをさわってみよう！
https://www.notion.so/apotomemo/TOPPA-7fc31bf8acfe41dc9
b048a2a15aa4b60#3ab0022fbd464a2bad6c09bcf86f2ea7
自己紹介サイト作成
テンプレートの文言を変えて、自己紹介サイトを作成・リリースしてみましょう
架空サイト作成
テンプレートを使って、架空の商品販売サイトを作成・リリースしてみましょう

17. Glide講座
Glideとは？
スプレッドシートからアプリを作ってみよう
データベースについて

18. Glide
スプレッドシートからアプリ開発
スプシをデータベースとし、情報を可視化します。
グライド
https://www.glideapps.com/
豊富な種類のテンプレート
有料・無料で合計300以上のテンプレートが存在。
カテゴリ分類もされています。
完成アプリはPWA
Web上だけれどネイティブアプリのように扱える
Progressive Web Appsの形で完成します。

19. Glide
情報整理・表示アプリ
ニュース、顧客管理、店舗情報 etc..
スプレッドシートの情報を見やすく表示する
ためのアプリ
で作れるもの

20. TAKEOUT yamanashi
概要
山梨県のテイクアウト情報サイト
できること
キーワード検索、地図検索、店舗アカウント作成、電話注
文、応援コメント投稿
https://takeout-yamanashi.glideapp.io/
Glide

21. Glideアプリ追加方法
スマホからアクセスし、
ホーム画面へ追加します。
SafariやChromeといった
ブラウザで表示されていたも
のが、スマホアプリのように
動きます。
これをPWAといいます
iPhoneの場合

22. 災害情報 九州
概要
2020/7の大雨時に作成された、九州地方の災害情報をまと
めたアプリ。開発時間は10分とのこと。
できること
各災害情報へのアクセス
https://whether-info-kyusyu.glideapp.io/
Glide

23. データベースとは
● 整理されたデータの集まりのこと
● 単にデータを集めただけでなく、データを取り出したり更新しやす
いよう整理されている
(CRUD：Create/Read/Update/Delete)

24. Bad Database
名称と住所が一緒に格納されている
→いずれかのみを取り出すことが難しい

25. 名称と住所が個別に格納されている
→データを取り出しやすい！
Good Database

26. Glideをさわってみよう！
https://www.notion.so/apotomemo/TOPPA-7fc31bf8acfe41dc9
b048a2a15aa4b60#b9d97a52dd234175b682e82322fbcb30
テンプレートでリリースしてみる
テンプレートを使って、まずは5分で経費レポートアプリをリリースしてみましょう
スプレッドシートから作ってみる
スプレッドシートにまとめたデータから、渋谷区文化財アプリを作ってみましょう
イチから作ってみる
アプリをイチから作成・リリースしてみましょう

27. Adalo講座
Adaloとは？
SNSアプリを作ってみよう

28. Adalo
スマホアプリの開発が可能
ノーコードでは数少ない、iOS/Android向けアプリ
（ネイティブアプリ）を開発できます。
アダロ
https://www.adalo.com/
作り込まれたテンプレート
すぐ動かせるテンプレートが揃っています。最初は
これをカスタマイズして勉強すると良いです。
WebアプリまたはPWAとしても開発
Web上だけれどネイティブアプリのように扱える
Progressive Web Appsの形で完成します。

29. Adalo
スマホ向けネイティブアプリ
基本はテンプレートに沿って、To-Do、飲食オーダー、
リスト表示、コーチング、チャット、レッスン予約など。
慣れるとイチから自由に構築可能です。
で作れるもの

30. SmartDish
概要
お店に着くとすぐに料理が出てくる、事前注文アプリ
できること
マップ検索、お気に入り、注文、決済
Adalo

31. ProU Sports
概要
大学アメフトとプロチームの情報掲載アプリ。
できること
チーム・選手の情報閲覧、SNS最新情報の閲覧
Adalo
https://apps.apple.com/us/app/prou-sports/id1555921824

32. Adaloをさわってみよう！
https://www.notion.so/apotomemo/TOPPA-7fc31bf8acfe41dc9
b048a2a15aa4b60#a441cb8d6e6940edb78b18e8c4996732
To-Doリストアプリ作成
テンプレートを使って、To-Doリストを作成・編集してみましょう

33. ノーコードツール紹介
その他、注目すべきツールをピックアップしました。
Bubble, STUDIO, Notionを紹介します。

34. Bubble
Webサイト・Webアプリの開発が可能
サードパーティサービスを使うことで、ネイティブ
アプリも開発可能です。
バブル
https://bubble.io/
ノーコードで最強のカスタマイズ性
自由度が非常に高い反面、やや長めの学習やデザイ
ンスキル等が必要です。HTML,CSS,JavaScript等を
組み込むことも可能です。
豊富なテンプレート
ユーザー投稿型のため、日々テンプレートが増え続
けています。開発および学習にも活用できます。

35. Bubble
こだわりの独自機能を持つWebアプリ
Webサービスの使い心地や機能・デザインを追求するなら
Bubbleが向いています。
カンバン管理や音楽再生などの機能も、プラグインで簡単
実装です。
で作れるもの

36. CLITCH
概要
ゲーム仲間を探せるマッチングプラットフォーム
できること
ゲーム募集投稿し、一緒に遊びたい人とマッチング。
Discordへ自動遷移し、そのままゲームを始めます。
Bubble
https://app.clitch.life/

37. SANU 2nd Home
概要
「自然の中にもう一つの家」がテーマのサブスク別荘サービス
できること
まずはウェイティングリストに登録。
案内後、会員登録や別荘の予約を行います。
Bubble
https://2ndhome.sa-nu.com/

38. ノーコードツールは
複数ツール・サービスを組み合わせると、
より自由度が高くなります。
事例紹介 →

39. LIBRIS
概要
書店・ブックカフェ、ライブラリー検索サービス
できること
会員登録、EC商品検索、書籍購入、書籍貸出し・返却
Bubble
https://libris.ne.jp/

40. 引用：2020/12/05 NoCode Summit 登壇資料
Bubble Japan Community 代表 大道峻

41. STUDIO
より洗練されたWebサイトを作成
アニメーションや各パーツの設定項目が細かく
(Flexbox)、イケているサイトを作成できます。
スタジオ
https://studio.design/ja
日本語で学習・サポートを受けられる
国産ツールであるため、サポートやドキュメントが
日本語です。また日本語教材がYouTubeに上がって
いたり、日本語コミュニティがあります。
オシャレなテンプレート
そのまま使ってもオシャレなテンプレートが豊富で
す。

42. STUDIO
写真素材を活かしたオシャレなサイト
配置やアニメーションが細かく設定でき、
より洗練されたサイトを作成できます。
で作れるもの

43. OYOGE
概要
六本木にある「鯛のないたい焼き屋 OYOGE」公式サイト
できること
たい焼き屋の店舗案内や商品紹介の掲載。
最新ニュースや季節限定商品もCMS機能で管理しています。
STUDIO
https://oyogetaiyaki.com/

44. Notion
階層構造のドキュメント管理ツール
アニメーションや各パーツの設定項目が細かく、よ
りイケているサイトを作成できます。
ノーション
https://www.notion.so/ja-jp
あらゆる表示を用意
貯めたデータをリスト・ギャラリー・カレンダー等
あらゆる見た目で表示可能。また画像・動画
・Googleマップ等もそのまま表示可能。
別ユーザーのページを複製可能
複製機能で自分のワークスペースへ移し、そのまま
編集できます。

45. Notion
社内・社外用ドキュメントの作成
社内情報や開発素材のデータベースとして。
ホームページや利用規約ページとして。
あらゆるページを手軽に作成できます。
で作れるもの

46. Notionで作られた
企業サイト事例集
概要
日本国内企業・団体のNotion製サイト事例を紹介
できること
Notion製サイトの検索、閲覧、リンク
Notion
https://www.notion.so/Notion-5279483f
808c4b1183406a72afdf31a7

47. 企業ダッシュボード
テンプレート
概要
汎用的な社内用ダッシュボード・データベースのテンプレート
できること
社内情報の整理、閲覧、リンク
Notion
https://apotomemo.notion.site/723f022
ae18c4e8f9767950edc545d7c

48. ありがとうございました！
@apopotoapoto
分からないことがあれば、いつでも聞いてください！

49. 引用：2020/12/05 NoCode Summit 登壇資料
K.S.ロジャース株式会社 代表取締役CTO 民輪 一博

50. 引用：2020/12/05 NoCode Summit 登壇資料
K.S.ロジャース株式会社 代表取締役CTO 民輪 一博

51. 引用：2020/12/05 NoCode Summit 登壇資料
K.S.ロジャース株式会社 代表取締役CTO 民輪 一博