クイックスタート
このガイドでは、Bubbleのすべての機能について説明します。
- はじめる — Create your account and open the Bubble editor
- カスタマイズ可能なデザインの使い方 — Place visual elements on the canvas and shape your UI
- 組み込みデータベースの使い方 — Structure app data with custom data types and fields
- ロジックとワークフローの使い方 — Create logic that triggers actions in response to events
- 高度なAIの使い方 — Add Bubble AI features without wiring up outside services
- バージョン管理の使い方 — Test new features safely without touching the live app
- セキュリティダッシュボードの使い方 — Set privacy rules and watch for suspicious user activity
- AIアプリジェネレーターの使い方 — Turn a plain-text idea into a working first app
- テンプレートの使い方 — Start building from a ready layout instead of a blank page
- Native Mobile App Builder の使い方 — Deliver web, iOS, and Android apps from one editor
所要時間： 各作品につき5分
このガイドには以下の内容も含まれています。 プロのヒント | よくある間違い | トラブルシューティング | 価格 | 代替案
このガイドを信頼する理由
I’ve used Bubble for two years and tested every feature covered here.
This tutorial comes from real hands-on experience, not vendor screenshots.
Bubble is one of the most powerful no-code platforms in the world today.
Most people search for how to use Bubble io and land on scattered videos.
You can code apps by hand, or you can ship no-code apps in a browser.
このガイドでは、主要な機能の使い方をすべて説明します。
スクリーンショットとプロのアドバイスを交えながら、手順を一つずつ解説します。
You’ll learn how to build a working app, not just read theory.
The Bubble editor opens limitless possibilities once you understand workflows.
バブルチュートリアル
This complete Bubble tutorial walks you through every feature, from your first app to the tips that turn beginners into power users.
バブル
Build scalable apps without writing a single line of code. Bubble gives you a visual editor, a real database, and workflows in one platform. Start free — no credit card required.
Bubbleの始め方
いずれかの機能を使用する前に、この初回設定を完了してください。
約3分かかります。
Watch this quick introduction first:
それでは、各ステップを順を追って見ていきましょう。
ステップ1：アカウントを作成する
Go to Bubble’s website and click “Get started for free.”
メールアドレスを入力し、パスワードを作成してください。
Read the terms, accept them, and agree to the privacy policy.
✓ チェックポイント: チェックしてください 受信トレイ 確認メールをお送りします。
Step 2: Open the Bubble Editor
Bubble runs in your browser, so there is nothing to download.
Name your first app, then pick a blank canvas to start building.
エディターの画面は以下のようになります。
✓ チェックポイント: You should see the Design, Workflow, and Data tabs.
ステップ3：初期設定を完了する
Click the Bubble logo in the top-left corner to reach app settings.
Set your app name, time zone, and language details there.
Then open the guided walkthrough Bubble shows every new user.
✅ 完了: これで、以下のすべての機能をご利用いただけます。
Bubbleのカスタマイズ可能なデザインの使い方
カスタマイズ可能なデザイン lets you design your user interface visually, without writing code.
以下に、その使用方法をステップごとに説明します。
ステップ1：デザインタブを開く
クリック デザイン in the left toolbar of the Bubble editor.
The elements panel holds containers, text, inputs, and buttons.
Step 2: Drag In Your Components
Drag components onto the page and drop them inside containers.
Group related elements first, because containers control the alignment.
これがその様子です。
✓ チェックポイント: Your page shows every element exactly where you dropped it.
Step 3: Check Responsive Behaviour
Switch to responsive view and test the layout at mobile widths.
Bubble shows breakpoints, so you can hide elements on small screens.
✅ 結果: You have a clean UI that fits desktop and mobile screens.
💡 プロのヒント: Plan your logic before you polish the design. A logic-first mindset saves hours of rework later.
Bubbleの組み込みデータベースの使い方
組み込みデータベース lets you structure app data with custom data types and fields.
以下に、その使用方法をステップごとに説明します。
ステップ1：データタブを開く
クリック データ, then create a data type such as “Project.”
Each data type behaves like a table in a normal database.
Step 2: Add Fields To Each Type
Add text, number, date, or image fields to describe your records.
Pick the field type that matches the data, not text for everything.
これがその様子です。
✓ チェックポイント: Your new data type lists every field you added.
ステップ3：プライバシールールを設定する
Add privacy rules immediately after you create each data type.
✅ 結果: Your database holds structured, protected records.
💡 プロのヒント: Never nest a “Do a search for” inside a repeating group. Nested searches slow every page load badly.
Bubble Logicとワークフローの使い方
ロジックとワークフロー lets you create logic that triggers actions in response to events.
以下に、その使用方法をステップごとに説明します。
ステップ1：ワークフロータブを開きます
クリック ワークフロー, then choose “Click here to add an event.”
Step 2: Pick Your Trigger
Select an event, such as a user clicking your signup button.
Events also cover page loads, database changes, and scheduled runs.
これがその様子です。
✓ チェックポイント: Your workflow shows the trigger with its actions beneath it.
Step 3: Add Actions In Order
Stack actions below the trigger, then reorder them by dragging.
Actions run top to bottom, so the order changes the outcome.
✅ 結果: Your app now reacts to what real users actually do.
💡 プロのヒント: Run Preview Mode in a real browser before you launch any workflow change. Bugs hide in the editor.
Bubble Advanced AI の使い方
高度なAI lets you add Bubble AI features to your app without outside services.
以下に、その使用方法をステップごとに説明します。
Step 1: Open the AI Panel
Find the AI options inside the Workflow tab action list.
ステップ2：必要なものを説明する
Write a clear prompt describing the text or image you want.
Drop dynamic data into the prompt to personalise every result.
これがその様子です。
✓ チェックポイント: Your test run returns a usable AI response.
Step 3: Connect the Output
Save the AI result to a database field so your app can reuse it.
✅ 結果: Your app now delivers AI features with no external setup.
💡 プロのヒント: Keep prompts short and relevant. Long prompts cost more and rarely improve the output quality.
Bubbleバージョン管理の使い方
バージョン管理 lets you test new features safely without breaking the live app.
以下に、その使用方法をステップごとに説明します。
Step 1: Create a Branch
Open the version menu and create a branch from your main version.
Your main version stays live while you work in the branch.
Step 2: Build and Test
Develop your new feature inside the branch, then test it there.
これがその様子です。
✓ チェックポイント: Your branch name appears in the editor’s top bar.
Step 3: Merge When Ready
Merge the branch back into main, then deploy to live.
✅ 結果: You can ship changes without a single broken page for users.
💡 プロのヒント: Name branches after the feature, not the date. Future you will read them far more easily.
Bubble Securityダッシュボードの使い方
セキュリティダッシュボード lets you watch privacy rules and account activity in one place.
以下に、その使用方法をステップごとに説明します。
ステップ1：セキュリティダッシュボードを開く
Find it under your app settings in the Bubble editor.
Step 2: Review the Warnings
Bubble flags data types with weak or missing privacy rules.
A red warning means anyone can read that data today.
これがその様子です。
✓ チェックポイント: The warning list shrinks as you fix each data type.
Step 3: Fix Each Warning
Tighten each rule so only the right user can read that data.
✅ 結果: Your app blocks spam signups and stops data leaking to strangers.
💡 プロのヒント: Recheck the dashboard after every launch. New fields often ship without privacy rules attached.
Bubble AIアプリジェネレーターの使い方
AIアプリ ジェネレータ lets you turn a plain-text idea into a working first app.
以下に、その使用方法をステップごとに説明します。
ステップ1：ジェネレーターを開く
Start a new app and choose the AI option instead of blank.
ステップ2：詳細なプロンプトを作成する
Describe your app features in natural language, screen by screen.
Name your data types in the prompt for a cleaner database.
これがその様子です。
✓ チェックポイント: You see generated pages with a matching database behind them.
Step 3: Refine the Result
Open the generated app and edit pages, data, and workflows by hand.
✅ 結果: You have a blueprint instead of an empty canvas.
💡 プロのヒント: Treat the output as a draft. The generator handles structure well, but the details still need you.
バブルテンプレートの使い方
テンプレート lets you start building from a ready layout instead of a blank page.
以下に、その使用方法をステップごとに説明します。
ステップ1：マーケットプレイスを閲覧する
Open the template gallery and filter by app type or industry.
ステップ2：テンプレートを適用する
Install it into a new app, then preview every page it created.
Most templates arrive with sample data you can delete safely.
これがその様子です。
✓ チェックポイント: Your app opens with the template’s pages already built.
Step 3: Replace the Sample Content
Swap placeholder content, colours, and copy for your own.
✅ 結果: You skip days of layout work on your first app.
💡 プロのヒント: Check the template’s last update date. Old templates often use elements Bubble has since replaced.
Bubbleネイティブモバイルアプリビルダーの使い方
ネイティブモバイルアプリビルダー lets you deliver web, iOS, and Android apps from one editor.
以下に、その使用方法をステップごとに説明します。
Step 1: Create a Mobile App
Add a native app to your project from the app dashboard.
Step 2: Build Mobile Screens
Design screens with mobile elements like tab bars and native inputs.
Mobile screens use their own element set, not your web layout.
これがその様子です。
✓ チェックポイント: Your mobile preview runs on your own phone.
Step 3: Submit to the Stores
Set your icons and app details, then push a build to each store.
✅ 結果: One project now serves web and mobile users together.
💡 プロのヒント: Test on a real device 早い. Simulators hide scrolling and keyboard problems that users hit daily.
Bubble Proのヒントとショートカット
After two years on this platform, here are the tips I share most often.
Bubble’s community forum answers specific questions faster than any course.
You can join it free, or buy paid coaching when you want one-to-one help.
Beginner tutorials on sites like Buildcamp cover the fundamentals in a few hours.
Small, self-contained projects build your skills faster than long videos.
Over 6,000 plugins in the marketplace enhance what a finished app can do.
Follow these practices from day one and you’ll avoid most rewrites.
Here’s the setup I use daily:
キーボードショートカット
| アクション | ショートカット |
|---|---|
| Copy an element | Ctrl + C |
| Paste with workflows | Ctrl + Shift + V |
| 変更を元に戻す | Ctrl + Z |
| Open app search | Ctrl + F |
ほとんどの人が見逃す隠れた機能
- APIコネクタ： Connect to external services that no plugin covers yet.
- App Search: Locate the exact element or workflow you need during development.
- The official Bubble Manual: Step-by-step tutorials plus troubleshooting notes for common problems.
- Reusable elements: Build headers once, then share those components across every page.
バブルに関するよくある間違いを避ける方法
Mistake #1: Packing Everything Into Version One
❌ 間違い: Listing twenty features before you build a single page.
✅ 右: Pick 3-4 core features for your MVP, then plan the rest as later versions.
Mistake #2: Installing Every Plugin You Find
❌ 間違い: Adding ten plugins from the marketplace in one afternoon.
✅ 右: Each plugin adds weight, so keep only essential, well-supported ones.
Mistake #3: Editing the Live App Directly
❌ 間違い: Changing workflows on the live version while real users are inside.
✅ 右: Test in a branch, then deploy once the change works.
バブルのトラブルシューティング
Problem: Your Page Loads Empty in Preview
原因： A privacy rule is blocking the data from the current user.
修理： Open the Data tab, check that data type’s rules, and allow the right user to view it.
Problem: A Workflow Never Runs
原因： A condition on the event is false, so Bubble skips it silently.
修理： Remove the condition, test again, then add it back one piece at a time.
Problem: The App Feels Slow
原因： Nested searches and unused plugins both drag your load time down.
修理： Flatten those searches, delete plugins you never call, and watch the error log for repeat warnings.
📌 注記： If none of these fix your issue, contact Bubble support.
バブルとは何ですか?
バブル is a no-code app builder that lets you build scalable apps without writing a single line of code.
Think of it like a design tool wired straight into a real database.
It brings your idea to life without hiring a developer.
Apps built here scale from a weekend MVP to enterprise-grade products.
こちらの簡単な概要をご覧ください。
主な機能は以下のとおりです。
- カスタマイズ可能なデザイン: Place visual elements on the canvas and shape your UI
- 組み込みデータベース: Structure app data with custom data types and fields
- ロジックとワークフロー： Create logic that triggers actions in response to events
- 高度なAI: Add Bubble AI features without wiring up outside services
- バージョン管理: Test new features safely without touching the live app
- セキュリティダッシュボード: Set privacy rules and watch for suspicious user activity
- AIアプリジェネレーター： Turn a plain-text idea into a working first app
- テンプレート: Start building from a ready layout instead of a blank page
- ネイティブモバイルアプリビルダー： Deliver web, iOS, and Android apps from one editor
詳細なレビューについては、こちらをご覧ください。 バブルレビュー.
バブル価格設定
2026年のバブルのコストは以下のとおりです。
| プラン | 価格 | 最適な用途 |
|---|---|---|
| 無料 | 月額0ドル | Learning the editor |
| スターター | 月額29ドル | Your first live app |
| 成長 | 月額119ドル | Apps with paying users |
| チーム | 月額349ドル | 複数 編集者 working together |
| カスタム | 連絡先バブル | エンタープライズワークロード |
無料トライアル: Yes — the Free plan never expires, so you can learn without paying.
返金保証: Bubble offers refunds within 14 days on new paid plans.
💰 最もお得な価格: Starter — it removes the Bubble branding and lets you launch on your own domain.
バブル対オルタナティブ投資
Bubbleは他社と比べてどうでしょうか？競合状況は以下のとおりです。
| 道具 | 最適な用途 | 価格 | 評価 |
|---|---|---|---|
| バブル | Full custom apps | 月額29ドル | ⭐ 4.3 |
| ソフト | Client portals | 月額59ドル | ⭐ 4.5 |
| バジー | Figma to app | 月額19ドル | ⭐ 4.1 |
| グライド | スプレッドシートアプリ | 月額49ドル | ⭐ 4.4 |
| ソフトジェン | AI-built web apps | 月額20ドル | ⭐ 4.0 |
| アダロ | ネイティブモバイルアプリ | 月額45ドル | ⭐ 4.2 |
| 愛すべきAI | Prompt-to-code apps | 月額25ドル | ⭐ 4.4 |
| 新興 | Agent-driven builds | 月額20ドル | ⭐ 4.0 |
おすすめ商品：
- 総合ベスト： Bubble — the deepest control over data, design, and workflows
- ベスト予算： Buzzy — the lowest entry price for a working prototype
- 初心者におすすめ： Glide — you can build from a spreadsheet in one sitting
- モバイル端末に最適： Adalo — native screens without a separate mobile project
🎯 バブルの代替品
Bubbleの代替サービスをお探しですか？おすすめのサービスはこちらです。
- 🚀 ソフト: Builds portals and internal tools on top of Airtable in an afternoon.
- 💰 バジー： Converts Figma designs into working apps, useful for design-led teams.
- 🎨 グライド: Turns spreadsheets into tidy apps with almost no setup time.
- ⚡ ソフトジェン： Generates full web apps from a written brief in minutes.
- 📱 アダロ： Focuses on native mobile builds with app store publishing included.
- 🧠 愛らしいAI： Writes real code from prompts, so developers can extend it later.
- 🔧 緊急: Runs AI agents that build and revise your app as you chat.
全リストについては、こちらをご覧ください。 バブルの代替 ガイド。
⚔️ バブル比較
Bubbleが各競合他社と比べてどうなのか、以下に示します。
- バブル vs ソフト： Softr is faster to launch, but Bubble wins once you need custom logic.
- バブル対バジー： Buzzy starts from your design files, while Bubble gives you deeper database power.
- バブル vs グライド： Glide suits simple data apps, and Bubble handles complex products better.
- バブル対ソフトゲン： Softgen generates quickly, but Bubble offers more control after generation.
- バブル対アダロ： Adalo feels simpler for mobile, though Bubble now ships native apps too.
- Bubble vs Lovable ai: Lovable ai produces code, while Bubble keeps everything inside one visual editor.
- バブル対新興企業： Emergent leans on AI agents, and Bubble gives you predictable manual control.
今すぐBubbleを使い始めましょう
あなたはBubbleの主要な機能をすべて使いこなせるようになりました。
- ✅ カスタマイズ可能なデザイン
- ✅ 内蔵データベース
- ✅ ロジックとワークフロー
- ✅ 高度なAI
- ✅ バージョン管理
- ✅ セキュリティダッシュボード
- ✅ AIアプリジェネレーター
- ✅ テンプレート
- ✅ ネイティブモバイルアプリビルダー
次のステップ： どれか一つの機能を選んで、今すぐ試してみてください。
ほとんどの人はカスタマイズ可能なデザインから始めます。
It takes less than 5 minutes to continue from here.
よくある質問
Bubble.ioはどのように機能しますか？
Bubble runs a visual editor in your browser. You design pages, define data types, and build workflows. Bubble hosts the app and handles the servers for you.
Bubble.ioは初心者向けですか？
Yes. Beginners can follow the built-in walkthroughs and free tutorials. Expect a week of practice before the workflow logic feels natural.
Bubbleでお金を稼ぐ方法は？
Charge users a subscription inside your app, sell templates and plugins in the marketplace, or build client apps as a freelance Bubble developer.
What is bubble io used for?
People use it for marketplaces, SaaS products, internal tools, directories, and MVPs. It suits any web app that needs a database and user accounts.
Bubbleは無料で利用できますか？
Yes. The Free plan lets you build and test forever. You need a paid plan to launch on a custom domain and remove Bubble branding.
English 
Spanish 
Chinese 
German 
French 
Arabic 
Russian 
Portuguese 
Japanese 
Korean 
Italian 
Turkish 
Dutch 
Polish 
Indonesian 
Thai 
Vietnamese 