見出し画像

だれでも0円でWeb新規事業のPMFを目指す④-アプリ作成編-

この記事は、最小コスト(0円~)でPMFを目指すことを目的とした前提になります。
今回は「アプリ作成編」です!

先に結論

  • Glideで作ると最速2~3時間でローンチできる!!

    • テンプレートを駆使しましょう

    • 実際に10時から作り始めて、スクショとりながらで1.5時間でした

      • 実際の本番データを用意するのは別でかかるとは思います

作ってみるもの

  • 前回の「焼鳥ほどほど」の店舗アプリを作成してみましょう

    • 画面設計

      • メニュー全て一覧ページ

        • カテゴリ別で分かれている

          • 飲み物

          • 焼鳥

          • 一品物

        • 詳細ページ

          • 価格と画像

      • カテゴリー分けメニュー一覧

        • カテゴリにフィルタされたメニュー一覧

          • さらに詳細

      • 店舗情報

        • 今回は1店舗なので地図とか出しますか

      • 予約フォーム

        • 名前、日付時間、人数、電話番号

前提条件

  • ノーコードアプリとは

    • 基本的にアプリを作るにはホームページ作成よりもレベルが高く、さらに高度なITの知識が要求されます。

      1. しかし、最近よく聞く言葉かと思う「ノーコードツール」では、そのような専門知識のいることが全くなく、チュートリアルさえ理解できればだれでもホームページが作成できるようになります

  • ノーコード化のメリット

    • チュートリアルさえ終われば誰でも作れる

    • GoogleSheetとデータが連動しているため扱いやすい

    • デザイン性が格段にいい

    • 各画面サイズにも対応

    • アニメーションもいける

    • 投稿管理などもできちゃう!

  • フェーズにおける戦略(Web新規事業最小コストでのPMFを目指す①-戦略編-)で書いていますが、PMFを目指すフェーズとソリューションによってはノーコードは対象外になるという記述があります

    • 作り直しを前提とした、爆速爆安制作技術を採用するのがお勧めです

      • 「情報整理や可視化で解決するソリューション」か「ディープなテクノロジーやUIで解決するソリューション」かでも選択肢が変わってきます

      • 「情報整理や可視化で解決するソリューション」の場合

        • ノーコードプラットフォームや開発を少なくできるものを選びましょう

          • アプリ制作プラットフォーム「Glide」「Bubble」

          • サイト作成プラットフォーム「STUDIO」

          • Figmaのモック機能

          • 購買系なら「Shopify」

          • メディアなら「Wordpress」プラグインが多いです

          • お知らせ系なら「LINE bot」

          • Google Sheetsの公開機能

          • Notionの公開機能

          • またデザインに関して、独自UIを考えすぎるとこの爆速の方針に乗っかれませんし、ノーコードツールが対応できない場合が多いので、一般的なデザイン案をCanvaから探してきてトンマナを変更し、必要な機能まで削ぎ落とすだけにしましょう

      • 「ディープなテクノロジーで解決するソリューション」の場合

        • 最小限の機能とUIを開発しましょう

          • ここで気をつけたいことは、余計な機能は作らないことです

            • 爆売れした時を想定して「オレのさいつよスケーリング技術」を選んで開発してはいけません

          • また少数精鋭のチームを選んで機動力をあげた方がいいです

          • ネィティブアプリもOS独自の機能を使わない限りはWebに寄せた方がいいです

            • 審査待ち、iOS/Android対応など時間がかかるため

          • PWA(Progressive Web App)で最小工数での開発をお勧めします

          • サーバーの管理コストも下げたいので、なるべくサーバーレス構成がいいかと思っています

          • ここでのデザインは独自UIが勝負になっている可能性があるので、簡単にCSSやソースコードが吐き出せるようなツールがいいかと思います「Figma」

今回は「Glide」というノーコードツールを一緒に使ってみましょう

Glideでアプリを作るメリデメ

  • 最速で2~3時間でアプリの作成ができる

  • 業者に依頼しなくても自分で作れる

  • 共同作業ができる

  • 維持コストも安い

  • デザインのテンプレートが豊富

  • 商用利用可能な画像の種類が豊富

Glideでできること

Glideではネィティブアプリのコア機能を使わないのであれば、大体のことができてしまいます!!

Glideでできないこと

  • ネイティブアプリではないのでpush通知が打てません

    • 代替案としては、メールなどの情報を収集してクーポンメールなどを送ることなどがいいかと思います

実際に作る手順

10ステップで簡単にできます

1: Glideのサイトにアクセス
2: 「新しいプロジェクト」作成
3: データのタイプを選択
4: まずはデータを作っていく
5: 一覧ページの表示の調整をする
6: 詳細ページをいい感じにする
7: カテゴリーページを作る
8: 店舗情報画面を作る
9: 予約フォームを作る
10: アプリの公開設定をする

実際に作ってみましょう

今回は前回LPを作った仮の「焼鳥ほどほど」という居酒屋さんのHPを作ってみます!

1: Glideのサイトにアクセスする

2: 「新しいプロジェクト」を押しましょう

プロジェクト種類選択

作りながら気づいたのですが、Webページも作りながらアプリも作れるようです!!せっかくなのでこちらを選択してみます。

3: データのタイプを選択します

GoogleSheetのデータとも連携できますが、Glideのデータベースの方が柔軟性があるためGlideTablesを選択しましょう!
ちなみに一部だけGoogleSheetを選択することもできるので大丈夫です!

データのタイプを選択する

4: まずはデータを作っていく

参考データサンプルが少し見えてますが後で消すとして、とりあえず「メニュー」データを作っていきましょう

4.1: New empty tableを押します

New empty tableを押します
空の画面

4.2: メニューシートに、行と列を追加していきます

価格カラムを追加してみます
価格は数字なのでNumberがいいですね

価格カラムを追加

数字の単位や表示方法も指定することができます

数字の単位や表示方法も指定することができます

メニューに画像は必須ですね

画像カラムを追加する

4.3: 画像はStockImageから利用することも可能です

  • StockImageは商用利用可能(利用規約をよく読んでください)なので自由に使うことができます

  • 自前で用意する場合は必ず商用利用可能なものを使用するか、自分で撮影するのがよいでしょう

画像はStockImageから利用することも可能です

4.4: カテゴリーシートも作っていきましょう

商品をカテゴリに分類することができます

カテゴリーシート
カテゴリを作っていく

4.5: カテゴリーとメニューを紐づけることができます

ここで注意なのは、メニューにはカテゴリーを文字で登録しておきます

メニューにはカテゴリーを文字で登録しておきます

カテゴリーから「Relation」を貼ると自動的に分類されるようになります

自動的に分類されるようになります

4.6: 表示されるようにしてみましょう

左上のNAVIGATIONからNew Screenを押して「Source」をメニューにします

アプリのプレビュー

アプリのプレビュー

Web版のプレビュー

Web版のプレビュー

めっちゃいい感じに出た!!!!!!!

5: 一覧ページの表示の調整をしてみましょう

ITEMS DATA周辺をいじいじすることでデータの出し方を変えることができます
Metaに価格を設定したら、価格が上に赤く表示されています

Metaに価格を設定したら赤い

Descriptionに設定するのが良さそうなので今回はDescriptionに価格を設定します

今回はDescriptionに価格を設定します

赤いところにはコメントを入れたら良さそうだと思ったので、「メニューシート」にMetaを追加してコメントを表示できるようにしてみました

データにMetaを入れる

表示設定してみる

Metaを追加してコメントを表示できるようにしてみました

5.1: 検索できるか試してみます

「ね」で検索すると「ねぎま」と「月見つくね」がヒットしています

検索できた

いい感じ👍👍👍👍👍👍👍

6: 次は詳細ページをいい感じにしてみましょう

現在のプレビューで遷移すると何もない…

現在のプレビューで遷移すると何もない…

6.1: 左の「COMPONENTS」から色々要素を追加できます

画像はあった方が良さそう

詳細画面に画像出す

価格は右寄せがいいですかねー
コメントは左上においてみました

価格は右寄せがいいですかねー

6.2: 詳細ページはこんな感じになりました

詳細ページはこんな感じになりました

7: カテゴリーページを作ってみましょう

左上のNAVIGATIONから追加し、データを選択しましょう
するともういい感じに出てます

カテゴリー一覧

7.1: カテゴリーをタップしてみると自動で反映されてる

なんともう自動でカテゴリーでフィルタされたデータ一覧が表示されています

カテゴリーをタップしてみると自動で反映されてる

すごい!!!

8: 店舗情報画面を作ってみましょう

これも左上のNAVIGATIONから「CUSTOM SCREEN」を選択します

店舗情報画面を作ってみましょう

8.1: カスタムで自前の画面を作る

左の「COMPONENTS」から「HERO」「TITLE」「IMAGE」を選択して並べてみます

カスタムで自前の画面を作る

8.2: 地図表示してみましょうか

左の「COMPONENTS」から「MAP」を選択してAddressを入れると

地図表示してみましょうか

いい感じ👍👍👍👍👍👍👍

9: 予約フォームを作ってみる

9.1: 入れたいデータを先に作っておきます

入れたいデータを先に作っておきます

9.2: 日付はDate&Timeを設定しましょう

日付はDate&Timeを設定しましょう

9.2: 電話番号はPhone Number型を設定しましょう

電話番号はPhone Number型を設定しましょう

9.2: 予約画面を作成しましょう

左上のNAVIGATIONから「Form Screen」を選択します

予約画面を作成しましょう

9.3: データの連携先を選択します

データの連携先を選択します

9.4: データの連携内容を選択します

今回は全てでいいですねー

データの連携内容を選択します

9.5: 予約画面の完成です

予約画面の完成です

10: アプリの公開設定をしましょう

右上に公開設定があります
リンクを設定してpublishしましょう!!

アプリの公開設定をしましょう

10.1: ログインしなくてもアクセスできるように設定

プライバシーから「No sign-in」にするとだれでも表示されます

ログインしなくてもアクセスできるように設定

10.2: アプリのアイコンの設定をします

アイコンとタイトルを入れてみましょう

アイコンとタイトルを入れてみましょう

完成したページがこちら

スマホで見るとこんな感じ
ちなみに、Safariから「ホームに追加」を押すとよりアプリっぽくなりますので案内を出すのも手でしょう。

アプリホーム
起動画面
メニュー一覧
メニュー詳細
店舗詳細画面
予約画面

Glideの料金について

無料で公開までできますが、やれることも限られますので確認しましょう。
基本的にはPV数や追加したい機能でプランが分かれています。

まとめ

  • Glideで作ると最速2~3時間で0円でアプリをローンチできる!!

目次

no plan株式会社について

no plan株式会社は、ブロックチェーン技術、Webサイト開発、ネイティブアプリ開発、チーム育成、メタバースなどWebサービス全般の開発から運用や教育、支援などを行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫!ご一緒にプランを立てていきましょう!


この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?