Bubble（ノーコード）の使い方を徹底解説！画像付きだから初心者でも安心！

こちらの記事では、ノーコードツールBubble（バブル）の使い方を解説しています。

Bubbleのアカウント作成から実際の開発まで画像付きで解説していますので、参考にしてください。

＊こちらの記事は「Bubble」のアカウントが必要になります。

\開発実績100件突破！Bubble開発のプロ集団/

そもそもノーコードツールBubbleとは？

ノーコードツールBubble（バブル）とは、米国に本社を置く、Bubble Group,incが提供するノーコードプラットフォームです。

Webサイト・アプリの開発に適しており、ノーコードツールであることから、開発にコーディングは不要です。

ノーコードツールの中でもトップクラスに柔軟な開発が可能なことから多くの人々に利用されています。

そもそもBubbleって？という方は以下の記事を参考にしてください。

Bubbleの使い方｜アカウント作成～アプリ開発方法

Bubbleの使い方を解説するにあたって、

Bubbleは、日本語に対応していないため、「Google翻訳」や「DeepeL」の利用をおすすめします。

インターネットブラウザで「Google Chrome」を利用している方は、画面右上のアドレスバーから日本語に切り替えることも可能です。（画面のレイアウトが崩れる）

Bubbleのアカウントを作成する

まずは、Bubbleのアカウントを作成しましょう。

＊既に登録済みの方は、Bubble公式サイトからログインしてください。

アプリの開発手順

次に、Bubbleでアプリを開発する手順を解説します。

STEP.1

「New app」をクリック。

STEP.2

アプリの情報を入力し「Create a new app」をクリック。

• Name of this new app（アプリの名前）
• What kind of app are you bliding（アプリの種類）
• is it customer-facing or internal?（外部、内部向けか）
• Start from a template（optional）（テンプレートの使用）
• Datails of what you’re building（アプリの詳細）
• What’s your goal with this application（作成する目的）

STEP.3

「Start with a blank page」と「close the assistant」をクリック。

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

開発画面の解説は次の章を参考にしてください。

Bubbleの使い方｜開発画面の解説～実際の開発

Bubbleでアプリを作成する際は、7つのタブを使用して作成します。

• Design（デザイン）タブ
• Workflow（ワークフロー）タブ
• Data（データ）タブ
• Styles（スタイル）タブ
• Plugins（プラグイン）タブ
• Settings（セッティング）タブ
• Logs（ログ）タブ

それぞれのタブについて詳しく解説します。

Design（デザイン）タブ

デザインタブとは、テキストやボタンなどの要素（エレメント）を配置してアプリの見た目を設計するタブです。

Designタブは以下の要素で構成されています。

UI Builderの画面

どのエレメントの中に含まれているのか確認する。

テキスト、ボタンなど視覚的なエレメントの選択をする。

各エレメントをまとめる（グループ）。

繰り返し表示する「リピーティンググループ」「ポップアップ表示」を作成できる。

テキストの入力フォーム、チェックボックスなどを作成できる。

再度使用するエレメントを登録できる。

「タブが配置されているエレメント」などのテンプレートが用意されている。

Responsiveの画面

Responsive画面では、デバイスごとの表示画面の確認・画面サイズを変更できます。

また、エレメント別にレスポンシブ設定することもできます。。

Workflow（ワークフロー）タブ

Workrflowタブとは、アプリの動作を設定するタブです。

例として、ボタンをクリックしたら別のページに移動するなどです。

特定のルールを設定することで、アクションの自動化ができます。

Data（データ）タブ

Detaタブとは、アプリのデータ構造を作成するタブです。

データベースの設定を行うことができます。

Dataタブは以下の要素で構成されています。

Data types

データの名前。

Data field

データタイプに属するデータの項目。

App data

アプリ内に実際にあるデータを閲覧、登録、編集、削除できる。

開発と本番で2つに分けられています。（開発と本番で、データベース自体が違う。）

Option sets

運営側が事前に設定する静的なデータ。（性別や生年月日など変更できない要素）

Styles（スタイル）タブ

Stylesタブとは、各エレメントの書式テンプレートの管理をするタブです。

作成、編集、削除ができます。

例、フォント、文字サイズ、文字色など。

Plugins（プラグイン）タブ

Pluguinsタブとは、外部連携や追加機能を手軽に導入できるプラグインを管理するタブです。

プラグインのインストール、アンインストールができます。

例、ストライプの決済機能の導入、Twitterのソーシャルログインなど。

Settings（セッティング）タブ

Settingsタブとは、各種設定をできるタブです。

例、アプリの料金プラン変更、カスタムフォントの設定などの設定。

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

Logs（ログ）タブ

ログタブとは、サーバーの使用状況やワークフローの実行回数の統計情報を確認できるタブです。

実際の開発

以下の記事で、Bubbleを用いた実際の開発方法を解説しています。

画像付きで解説していますので、Bubbleのより詳しい使い方を知りたい方は参考にしてください。

チュートリアルで学習しよう！

Bubbleでは、チュートリアルを利用して基本的な操作方法について学習することができます。

初めてBubbleを使用する方は、チュートリアルを利用することで、Bubbleの基礎的な操作方法について理解ができるため、利用することをおすすめします。

Bubbleのチュートリアルには、以下の12種類のレッスンがあります。

また、1度学習したレッスンは、「Hard mode」というクリック箇所が表示されないモードでの学習ができるようになります。

自身の力でレッスンをクリアすることで、よりBubbleについて理解が深まりますので、ぜひ挑戦してみてください。

チュートリアルの開始方法は、以下の通りです。

補足になりますがチュートリアルとは別に「Bubble Academy」「Bubble forum」「How to build」を利用してBubbleについて学習できます。

チュートリアルと比較して、より細かくBubbleについて学習できますので、ご活用ください。

Bubbleの開発事例

Bubbleの事例をご覧になりたい方は、以下の記事でBubbleの事例を多く紹介していますので、参考にしてください。

Bubbleの使い方｜まとめ

ノーコードツールBubbleの使い方について解説しましたが、参考になったでしょうか？

Bubbleは他のノーコードツールと比較して柔軟な開発ができますが、日本語に対応していないため、英語に不慣れな方は難しいと感じることがあると思います。

学習コストはかかってしまいますが、使いこなすことで素早く柔軟な開発が可能になります。

無料から利用できますので、興味のある方は実際に使ってみることをおすすめします。

最後まで読んで頂きありがとうございました。

\開発実績100件突破！Bubble開発のプロ集団/