ノーコード

bubble(バブル)の使い方を解説!ノーコードで開発は可能?

bubble(バブル)の使い方を解説!ノーコードでアプリ開発が可能!の画像

「ノーコードツールのbubbleを登録してみたけど使い方がわからない・・・」
「英語表記なので調べながら操作するのが面倒・・・」

このようなお悩みをお持ちではありませんか?

プログラミングコードを使わずにアプリ開発ができるノーコードツール。その中でもbubbleは自由度が高いため初心者には難易度が高いと言われています。

しかし何事もはじめは苦労するもの。例えば、自転車に乗るときも一度コツを掴んでしまえば、かんたんに乗れるようになりますよね。

そこで本記事では、ノーコード・ローコード開発を手掛けるBOLTが、ノーコードツールbubbleの使い方について解説します。

この記事を読んで頂くことで、bubbleの基本的な使い方がわかりますので、bubbleを使ってアプリ開発をしたい方や、これからbubbleに登録しようと考えていた方は、ぜひ最後までご覧ください。

bubbleの基礎知識については「ノーコードツールbubbleとは?特徴・料金・注意点まで解説!」でも解説していますので、あわせてご覧ください。

システム開発の相談はこちらから

\今すぐ無料で相談する/

BOLTの
詳細を見る

ノーコードツールbubbleとは?

ノーコード(NoCode)ツールとは、その名の通りプログラミングコードを使わずにWebアプリケーション開発ができるツールのことです。

数あるノーコードツールの中でも、bubbleは人気ツールのひとつ。カスタマイズ性や機能性が高いことが人気の理由となっています。

特に、サービス開発にあまり予算を掛けられないことも多いスタートアップ・ベンチャー企業の間では注目を集めています。

その理由としては、bubbleをはじめとしたノーコードツールを使うことで、短期間でプロトタイプ(試作品)を開発できるため、人件費などの開発コスト削減に繋がるからです。

短期間でサービスリリースができれば、その分回収も早くなります。

つまり「小さくサービスを開発し、素早く検証し、改善を繰り返す」といった、MVP開発が主流となっています。

そして、MVP開発を実現する手段として「bubble」が注目されています。

MVP開発の詳細を知りたい方は「MVP開発とは?費用相場からメリットまでを徹底解説!」の記事もご覧ください。

bubbleのはじめ方

本項では、bubbleをはじめて利用する方に向けて、アプリ作成の手順を解説します。

はじめてbubbleにログインする方は、アカウント発行が必要です。

アカウント発行の手順は「ノーコードツールbubbleとは?特徴・料金・注意点まで解説!」では図解付きで詳しく解説していますので、アカウント発行を行ってください。

また、bubbleサイト内は英語表記となっており、日本語に対応していません。(2021年7月現在)

日本語に翻訳したい方は、

の利用がおすすめです。

また、インターネットブラウザでGoogle Chromeを利用している方は、アドレスバーから日本語に設定することも可能です。

bubbleチュートリアルの設定画面スクリーンショット

アプリを新規作成する

アカウント作成が完了したら、Home画面に表示します。

Home画面内にある「New app」をクリックすると、アプリ作成が開始します。

bubble-home-page_new-app

続いて、「Create a new app」の画面が表示されたら、作成するアプリ情報を入力します。

  • Name of this new app:アプリの名前
  • What kind of app are you building?:どのようなアプリを作るか
  • Is it customer-facing or internal?:社外向けか、社内向けか
  • Details of what you’re building:構築する内容詳細※空欄可
  • What’s your goal with this application?:アプリ開発の目標

下記画像の赤枠内はプルダウン形式になっているので、目的に合った内容を選択します。

※特に目的がなければ、「Other」「Internal or employee-facing」で問題ありません。

入力後「Create a new app」をクリックします。

bubble-create-a-new-appのスクリーンショット画像

次に「New Application Assistant」書かれたサイドバーが表示されます。

アシスタント機能を使用するか確認していますが、今回は使用しませんので赤枠のボタンをそれぞれクリックします。

  • Start with a blank page:ブランクページで作成する
  • close the assistant:アシスタント機能を閉じる
bubbleアシスタント機能の画像

bubbleの操作画面の使い方

本項ではbubbleの操作画面の使い方を解説します。bubbleはすべて英語表記となっているため、特に英語が苦手な方にとっては、慣れるまでハードルが高く感じられるはずです。

またbubbleは機能が多いため、どこにどういった機能があるかわからなければ、開発をはじめたときにスムーズに進めることは難しいもの。

すべて暗記する必要はありませんので、「こんな機能もあるのか」といった感じでご覧になってみてください。

機能タブの概要

bubbleでは、画面の一番左にある6つのタブの中から機能を選択し、アプリを作成していきます。

bubble機能タブの画像

本記事では6つのタブそれぞれの詳細を解説します。

Design(デザイン)タブ

デザインタブは、編集中のページにエレメントを追加する機能を持ちます。

エレメントとは、テキストボックス・ボタン・マップといった要素のことです。

追加したいエレメントを選択し、ドラッグ&ドロップで右側のページに移動させるだけで、配置可能です。

bubbleデザインタブの使い方画像

Workflow(ワークフロー)タブ

ワークフロータブは、ワークフローを定義する際に使用します。

ワークフローとは、業務の一連のやりとりの流れを、あらかじめ決められたルールや慣習に沿って処理することです。

例えば、あるサイトでアカウントを持っていないユーザーがログインしようとした場合に

  • 「新規登録をしてください」というメッセージを表示させる
  • アカウント作成ページを表示させる

といったルールをワークフローに設定しておくことで、アクションの自動化が可能になります。

下記の画像の場合は、「送信する」ボタンをクリックすると、ボタンの色がグレーになるように設定しています。

bubbleワークフロータブの画面画像

Data(データ)タブ

データタブはデータ構造の確認や修正する場合に使用します。例えば、登録ユーザー情報をデータベースに登録し、管理や削除を行います。

Styles(スタイル)タブ

スタイルタブは、見た目に関する設定機能です。

配置したエレメント(ボタン、テキストなど)の色やフォントの大きさを変更が可能です。

エレメント一つひとつ編集しなくとも、共通のスタイルを設定しておくことで、後から一括変更もできます。

Plugins(プラグイン)タブ

プラグインタブは、拡張機能を追加する際に使用します。

例えば、クレジットカード決済機能など、bubble以外の外部サービスと簡単に連携させることが可能です。

Settings(セッティング)タブ

セッティングタブでは、bubbleの設定変更ができます。プランのアップグレードや請求に関する設定項目があります。

言語設定では日本語設定もできますが、翻訳対象範囲が限られているため、見た目上はあまり変化はありません。

Logs(ログ)タブ

ログタブでは、ストレージの使用状況やワークフローの動作状況を確認できます。

bubbleチュートリアルの使い方

bubbleでは、操作方法を学べるチュートリアルがあります。全12コースが用意されていますので、はじめての方は全コース実施することをおすすめします。

チュートリアルの開始方法

Home画面に戻り、「LESSONS」の右上にある「Start lesson」をクリックします。

bubbleホーム画面でチュートリアルを選択する際の画面

エディタ画面と案内文が表示されるので「Start」ボタンをクリックします。

するとチュートリアルが始まりますので、あとは手順に従って操作を進めます。

ひとつのコースにつき、およそ10分弱で完了します。チュートリアルは合計で12コースがあるので、2〜3時間ほどあればすべて終えられるでしょう。

bubbleチュートリアルの画像

チュートリアルはすべて英語ですが、矢印などで次にやるべきアクションが指示されるので、英語がわからない方でも問題ありません。

もし、英語表記がわかりにくいと感じた方は翻訳サービスを使うことをおすすめします。

例えば、Google翻訳を使用すると画面全体や、チュートリアルの文章が次のように表示されます。

ところどころ日本語に違和感はありますが、なんとなく何が書いてあるかは理解できるはずです。

bubbleチュートリアルの翻訳画面の画像

bubbleで掲示板アプリを開発してみた

bubbleで掲示板アプリのプロトタイプ(試作品)を作成しました。

実装した機能としては、

  • ログイン・ログアウト機能
  • アラート機能
  • メッセージ投稿機能

といった3つを設計しています。

これらの機能を実装して、テストリリースするまでに2時間程度で作成することができました。

掲示版アプリの挙動を確認

ログイン・ログアウト機能

新規登録ユーザーは「ユーザー名」「メールアドレス」「パスワード」を入力します。

新規登録ユーザーはデータベースに保存されるため、次回以降は「メールアドレス」「パスワード」を入力するだけでログインができるようにします。

また、ログインユーザー以外がメッセージ投稿しようとすると、ログイン画面に遷移するように設定しています。

bubbleで作成した掲示板アプリのログイン機能画面の画像

アラート機能

アラート機能を使うことで、ログアウト時に「ログアウトしました」、ログイン時に「ログインしました」をメッセージを表示させることができます。

bubbleで作成した掲示板アプリのログアウトメッセージ画像

メッセージ投稿機能

メッセージ内容を入力し「書き込む」ボタンを押すと「投稿者名」「日付」「メッセージ」が、投稿順に並ぶように設定しています。

bubbleの作成した掲示板アプリのメッセージ投稿画像

bubbleを使ったノーコードアプリ開発事例

本項では、ノーコード・ローコード開発を手掛けるBOLTが手掛けた、bubble開発事例を紹介します。

株式会社BaaS様のSaaS型プロダクトの開発事例

公式サイトのトップページ画像
画像参照元:公式HP

SaaS型の完全匿名の社内掲示板サービスです。

管理者(責任者)が議論をしたいテーマのスレッドを立て、その議題に対して全ての従業員が匿名で本音の意見を出すことによって、議論を活性化させます。

主な機能としては、

  • 完全匿名の社内掲示板
  • スレッドの振り返り機能
  • タスク管理
  • スレッドの制限
  • イイね機能の搭載
  • 不適切ワードの検出、管理、承認
  • 子会社アカウントへのマルチログイン

といった機能を実装し、社内エンゲージメントを向上させる社内掲示板サービスを開発しました。

bubbleを使うことで、納品までのリードタイム短縮化を実現し、顧客の要望に応じた柔軟なシステム構築支援を実現しています。

本事例以外にもBOLTでは、多数の開発事例があります。企画、要件定義の段階から柔軟に対応しておりますので、お気軽にご相談ください。

システム開発の相談はこちらから

\今すぐ無料で相談する/

BOLTの
詳細を見る

まとめ|bubbleを使えば、非エンジニアでも短時間でアプリ開発が可能

いかがでしたでしょうか。bubbleを使えば、非エンジニアでもアプリ開発が可能です。

複雑なプログラミングコードを使わずとも、bubbleの専用エディターがあればドラッグ&ドロップの直感的な操作だけで、機能の実装やワークフローの設計が可能です。

実装した機能はすぐにプレビューで挙動を確かめられるため、すばやく修正を行うことができます。

しかしながら、まったくプログラミング知識がない方が、開発設計ができるかといえば、現実的には難しいでしょう。

プログラミングコードは、あくまでもコンピューターに指示・命令を伝える手段でしかありません。

つまり、bubbleはコードを使わないとはいえ、プログラミングやデータベースの基礎理解は必要です。

そのためにも、まずはbubbleに触れてみることで、

  • bubble(ノーコード)を使って何を作りたいのか
  • 具体的にどういった動きをさせたいのか
  • 開発を進めるうえでどこが上手く行かないのか

といったことを整理することが大切です。

また、システム開発の外注先選びでお困りの方は、弊社までお気軽にご相談ください。

ノーコード・ローコードを用いた開発事例の共有ツール選定のサポートから要件定義実際の開発支援まで包括的にサポートさせていただくことが可能です。

システム開発を失敗しないために、弊社が相見積もりの取得までをサポートさせていただくことも可能です。むやみな営業電話などは決して行いませんので、まずは無料のご相談をお待ちしております。

システム開発の相談はこちらから

\今すぐ無料で相談する/

BOLTの
詳細を見る

bubble以外のノーコードツールに関する情報発信もしていますので、こちらも併せてご覧ください。

『BOLT』の資料請求はこちら

BOLTは、国内初のノーコード・ローコードZによる開発に特化したシステム開発サービスです。プログラミング不要のツールを活用することで、従来の開発会社よりも開発コストを抑えることができます。

BOLTでは、社内向け業務システムからコンシューマ向けのWEBサービスまで、幅広い開発案件に対応しております。

『開発に時間と費用がかかりすぎる』『開発会社に見積もりをお願いしたが費用感が合わなかった』といったお悩みのお持ちの方はお気軽にご相談ください。

今すぐ資料請求してみる