バブルの使い方：2025年のステップバイステップチュートリアル

執筆者ファヒム・ジョハルダー | 最終更新日 2025年4月29日

アプリを構築したいけど、大量のコードを知る必要があると思いますか?

それは大きな問題です。

多くのユーザーは、独自のコンテンツを作成したり、独自のページをデザインしたり、さらには独自のアプリを起動したりしたいと考えていますが、行き詰まりを感じています。

彼らは AI 機能を使用したり、ビデオチュートリアルを見て操作方法を学びたいと思っていますが、それはすべてまだ遠いように思えます。

さて、解決策はこれです。バブルです。

バブルの使い方をご紹介します。

バブル

複雑なデータベースに苦労するのはもう終わり。Bubbleを使えば、アプリのデータを視覚的に管理できます。今すぐデータドリブンアプリの構築を始めましょう！

バブルを無料でお試しください全文レビューを読む

バブルアカウントの設定

バブルウェブサイトへのアクセス

アプリを構築するための最初のステップは、Bubble Web サイトにアクセスすることです。

お気に入りの Web ブラウザ（Web サイトを閲覧するために使用するプログラム）を開きます。

一般的なブラウザとしては、Chrome、Firefox、Safari、Edgeなどがあります。上部のアドレスバーに「bubble.io」と入力し、Enterキーを押します。

こうすると、Bubble のホームページに直接移動します。

「サインアップ」、「始める」、「アカウントを作成」などのボタンを探します。

これは構築を開始するためのチケットです。

バブルを無料でお試しください

無料アカウントの登録

そのボタンをクリックするとサインアッププロセスが開始されます。

メールやゲームのアカウントを作成するときと同じように、いくつかの情報を入力する必要があります。

Bubble では連絡を取るためにメールアドレスが必要です。また、アカウントを安全に保つためにパスワードを設定する必要があります。

強力なパスワード（文字、数字、記号の組み合わせが最適です）を選択し、忘れないように安全な場所に書き留めておいてください。

Bubble では、Bubble を何に使う予定かなど、他にもいくつか質問されることがあります。

心配しないでください。やりたいことに最も近いオプションを選択してください。

バブルを無料でお試しください

バブルインターフェースを理解する

ログインすると、Bubble インターフェースが表示されます。

これはアプリを構築するメイン画面です。最初は少し雑然としているように見えるかもしれませんが、セクションごとに整理されています。

最も重要な部分は次のとおりです。

デザインタブ: ここでアプリのページを視覚的に作成します。ボタンなどの要素をドラッグ＆ドロップします。文章ボックス、画像などをこの領域に配置します。
ワークフロータブ: ここで、アプリに何をするか指示します。ユーザーがボタンをクリックしたり、何かを入力したりしたときにアプリが実行する指示書のような「ワークフロー」を作成します。
データタブ: ここでアプリのデータベースを管理します。データベースは、情報を保存するデジタルファイルキャビネットのようなものです。
要素ツリー: ここには、ページに追加したすべての要素がリストのように整理されて表示されます。
プロパティエディター: 要素をクリックすると、この領域にその要素の外観や動作を変更する方法がすべて表示されます。

アプリの最初のページを構築する

ビジュアルエディターについて知る

ビジュアルエディターは、実際にアプリの外観をデザインする場所です。

まるで真っ白なキャンバスのようです。画面の左側には「要素」と呼ばれるツールがいくつか表示されます。

「これらはページにドラッグ＆ドロップできるものです。デジタルの積み木のようなものだとお考えください。」

単語を入力するテキストボックス、クリックするボタン、写真を表示するための画像など、さまざまなものがあります。

バブルを無料でお試しください

テキストとボタンの追加

まずは簡単なところから始めましょう。

テキストを追加するには、「テキスト」要素をクリックして、ページの中央にドラッグします。

これで、何でも好きなものを入力できます。

たとえば、「私のアプリへようこそ！」や「下のボタンをクリックしてください。」などです。

次にボタンを追加しましょう。

「ボタン」要素をクリックし、テキストの下にドラッグします。ボタン内のテキストボックスに入力することで、ボタンの表示内容を変更できます。

「開始」や「ここをクリック」などのコマンドを試してください。

バブルを無料でお試しください

ページレイアウトの設計

さて、物事が少し乱雑になっていることに気付くかもしれません。

ご心配なく。修正できます。要素をクリックしてドラッグすれば移動できます。

ドラッグすると青い線が表示されるのがわかりますか?

それらは物事を整列させるのに役立ちます。

見栄えがよくなるまで、テキストとボタンを移動してみてください。

四隅にある小さな四角をクリックしてドラッグすることで、要素のサイズを変更することもできます。テキストを大きくしたり小さくしたり、ボタンを引き伸ばしたりすることもできます。

基本機能の追加

ワークフローを理解する

さて、アプリの見栄えが良くなりました。

でもどうやって作るの？する何か？

ここでワークフローが役立ちます。ワークフローは一連の指示のようなものです。

誰かがボタンをクリックしたり、他の操作を行ったりしたときに、アプリに何を実行するかを指示します。

バブルを無料でお試しください

ボタンに何かを実行させる

ボタンに簡単な操作を実行させてみましょう。

作成したボタンをクリックします。次に、「ワークフロー」というタブを探します。

「それをクリックしてください。すると、「イベントを追加するにはここをクリック」というボタンが表示されます。」

「アン イベント ワークフローを開始するボタンです。このボタンをクリックしてください。

「要素アクション」を選択し、「クリック」します。

ここで、ボタンがクリックされたときに何を実行するかをアプリに指示する必要があります。

メッセージを表示させてみましょう。「アクションを追加」をクリックします。

アプリで実行できる機能のリストが表示されます。「アラート」を探してクリックします。テキストボックスに、表示したいメッセージを入力します。例えば、「ボタンをクリックしました！」などです。

これで、誰かがボタンをクリックすると、小さなボックスがポップアップ表示され、メッセージが表示されます。これで最初のワークフローは完了です！

バブルを無料でお試しください

入力フィールドの追加

入力フィールドはユーザーが情報を入力できる場所です。

名前やメールアドレスなどを書き込めるテキストボックスのようなものだと考えてください。

入力フィールドを追加するには、「入力」要素をクリックしてページにドラッグします。

テキストやボタンと同様に、移動したりサイズを変更したりできます。

入力フィールドにどのような情報を入力するかを変更することもできます。

プロパティエディタをご覧ください。テキスト、数字、メールアドレス、パスワードのいずれかを選択できます。

ページとナビゲーションの接続

複数のページの作成

ほとんどのアプリには複数のページがあります。

ホームページ、プロフィールページ、設定ページなどがある場合があります。

新しいページを作成するには、「新しいページ」または同様のボタンまたはリンクを探します。

それをクリックすると、新しい空白のページが表示されます。

「プロフィール」や「設定」などの名前を付けます。

バブルを無料でお試しください

ボタンでページをリンクする

それでは、ユーザーがページ間を移動できるようにしましょう。

ボタンを使えばできます。最初のページに戻ってください。

ボタンをページにドラッグします。ボタンのワークフローに新しいアクションを追加します。

今回は、「ナビゲーション」を選択し、「ページへ移動」を選択します。

次に、ボタンでユーザーを送信するページを選択します。

これで、誰かがそのボタンをクリックすると、別のページに移動するようになります。

ナビゲーションメニューの構築

ページ数が多い場合は、ナビゲーションメニューがあると便利です。

これは、アプリの上部または下部にあるボタンの列で、ユーザーがページ間を簡単に移動できるようにします。

ナビゲーションメニューを作成するには、ページの上部に「グループ」要素を追加します。

次に、グループ内にいくつかのボタンを追加します。

先ほどと同じように、各ボタンを異なるページにリンクさせましょう。これで、アプリ内を簡単に移動できるようになります。

バブルを無料でお試しください

ページ間でのデータの受け渡し

場合によっては、あるページから別のページに情報を送信したいことがあります。

たとえば、プロフィールページがある場合は、ホームページからプロフィールページにユーザーの名前を送信したい場合があります。

これを行うには、「ページパラメータ」と呼ばれるものを使用する必要があります。

別のページに移動するボタンを作成する場合は、URL にパラメータを追加できます。

これは、ページに表示する情報を伝える小さなタグを追加するようなものです。

データを送信するページで、パラメータを使用して情報を表示できます。

たとえば、テキスト要素を追加し、パラメータからユーザーの名前を表示するように指示できます。

これで、プロフィールページに正しい名前が表示されます。

バブルを無料でお試しください

アプリのテストとプレビュー

作品をプレビューする方法

さて、いくつかのページを作成し、いくつかのアクションを追加しました。

ここで、アプリがどのように見えるか、どのように動作するかを確認します。

Bubbleを使えば簡単です。「プレビュー」などのボタンを探してください。

通常は再生ボタンのように見えます。

それをクリックすると、Bubble はブラウザで新しいタブを開き、アプリを表示します。

これは、アプリを実際に確認するようなものです。ボタンをクリックしたり、フィールドに入力したりして、すべてが計画通りに動作するかどうかを確認できます。

さまざまなシナリオのテスト

アプリをプレビューするときは、ランダムにクリックしないでください。

ユーザーがアプリを使用するさまざまな方法を考えてみます。

すべてのボタンをクリックして、すべてのフィールドに入力して、さまざまな操作をすると何が起こるか見てみましょう。

たとえば、ログインページがある場合は、間違ったパスワードを入力してみてください。

アプリにエラーメッセージが表示されるかどうかを確認します。

データを保存するボタンがある場合は、データベースをチェックして、データが正しく保存されていることを確認してください。

バブルを無料でお試しください

一般的な問題のデバッグ

時々、物事はうまくいかないこともあります。でも、それは大丈夫です。

誰にでも起こることです。問題を見つけたら、それは「バグ」と呼ばれます。バグを修正するには、「デバッグ」する必要があります。

Bubble にはバグを見つけるのに役立つツールがいくつかあります。

「デバッガー」と呼ばれるツールを探します。

アプリ実行時に舞台裏で何が起こっているかを確認できます。これにより、何かがうまく動作しない原因を特定するのに役立ちます。

よくある問題は次のとおりです:

ボタンは何も機能しません。
データが正しく保存されません。
ページが読み込まれません。
エラーメッセージ。

バブルを無料でお試しください

バブルの代替品

他のものを探しているバブルの代替ノーコードおよびローコードアプリ開発分野では?

以下に人気のあるオプションをいくつか紹介します。

ソフト: このプラットフォームは、スプレッドシートやデータベース（AirtableやGoogle Sheetsなど）をウェブアプリやクライアントポータルに素早く変換することに優れています。使いやすさとあらかじめ用意されたテンプレートで知られています。
バジー: 高度なカスタマイズ性を備えた複雑なWebアプリケーションを構築できる、強力なノーコードプラットフォームです。強力なプラグインエコシステムを備えていますが、学習曲線がやや急峻な場合があります。
グライド: This tool focuses on simplicity, allowing you to create mobile apps directly from Google Sheets. It’s great for быстро creating internal tools and simple applications.
ソフトジェン: このAI搭載プラットフォームは、ユーザーの説明を解釈してアプリケーションを生成することで、アプリ開発を簡素化することを目指しています。迅速なプロトタイピングと反復的な改良を目的として設計されています。
アダロ: 使いやすいドラッグアンドドロップインターフェースと、事前に構築されたコンポーネントのマーケットプレイスを備えたネイティブモバイルアプリの構築に重点を置いたノーコードプラットフォームです。