Bubble Phase 1: 基礎編 学習教材

投稿者: ocha 投稿日:

📋 Phase 1の全体目標

この4週間のプログラムを通じて、Bubbleの基本的な操作方法を習得し、簡単なWebアプリケーションを作成できるようになることを目指します。

  • Bubbleエディターの基本的な使い方をマスターする
  • UI要素を適切に配置してレスポンシブなデザインを作成できる
  • 基本的なワークフローを設定して動的な機能を実装できる
  • 複数ページのアプリケーション構造を理解する

📅 Week 1: Bubbleプラットフォームの理解とアカウント設定

🎯 学習目標

  • Bubbleの基本概念とno-codeプラットフォームの特徴を理解する
  • アカウント作成からエディター画面の基本操作まで習得する
  • Bubbleエディターの各タブ（Design、Workflow、Data、Styles等）の役割を把握する
  • 最初のページを作成して基本的な要素を配置できる

📚 詳細な学習内容

Day 1-2: Bubbleプラットフォームの理解

  1. No-codeとは何か、Bubbleの特徴と利点
  2. Bubbleで作成できるアプリケーションの種類
  3. 無料プランと有料プランの違い
  4. アカウント作成とプロフィール設定

Day 3-4: エディター画面の基本操作

  1. 新しいアプリの作成方法
  2. エディター画面のレイアウト理解
  3. 各タブ（Design、Workflow、Data、Styles、Settings、Logs、Plugins）の概要
  4. プレビュー機能の使い方

Day 5-7: 基本的な要素の配置

  1. Visual elementsの種類と特徴
  2. Text、Image、Button要素の配置
  3. 要素のプロパティ設定
  4. 基本的なレイアウト調整

💡 例題1: 簡単な自己紹介ページの作成

目標： 基本的な要素を使って自己紹介ページを作成する

ステップバイステップ手順：

  1. 新しいアプリを作成
    • Bubbleのダッシュボードから「New app」をクリック
    • アプリ名を「MyProfile」と入力
    • 「Create app」をクリック
  2. ヘッダーテキストを追加
    • 左パネルから「Text」要素をドラッグ
    • ページ上部に配置
    • 「Welcome to My Profile」と入力
    • 右パネルでフォントサイズを24pxに設定
  3. プロフィール画像を追加
    • 「Image」要素をドラッグしてテキストの下に配置
    • サイズを150x150pxに設定
    • 「Dynamic image」から任意の画像URLを設定またはアップロード機能を使用
  4. 説明文を追加
    • もう一つ「Text」要素を追加
    • 自己紹介文を入力
    • フォントサイズを16px、行間を1.4に設定
  5. プレビューで確認
    • 右上の「Preview」ボタンをクリック
    • 作成したページが正しく表示されることを確認

🏆 Week 1 チャレンジ問題

初級 チャレンジ1: 会社紹介ページ

課題： Text、Image、Buttonを使って簡単な会社紹介ページを作成してください。

  • 会社名（大きなタイトル）
  • 会社ロゴ画像
  • 会社説明文（3-4行）
  • 「お問い合わせ」ボタン（機能は未実装でOK）

中級 チャレンジ2: 製品紹介カード

課題： 複数の要素を組み合わせて製品紹介カードを3つ作成してください。

  • 各カードには製品画像、製品名、価格、説明文を含める
  • 3つのカードを横並びに配置
  • 統一されたデザインで作成

上級 チャレンジ3: レスポンシブレイアウト

課題： 画面サイズに応じてレイアウトが変わるページを作成してください。

  • デスクトップ表示とモバイル表示でレイアウトを最適化
  • Responsive設定を活用
  • 各デバイスでプレビュー確認

✅ Week 1 学習チェックリスト

  • □ Bubbleアカウントを作成できた
  • □ 新しいアプリを作成できた
  • □ エディター画面の各タブの役割を理解した
  • □ Text要素を配置して編集できた
  • □ Image要素を配置して画像を設定できた
  • □ Button要素を配置してスタイルを変更できた
  • □ プレビュー機能を使ってページを確認できた
  • □ 要素のプロパティ（サイズ、色、フォントなど）を変更できた

📅 Week 2: UI要素の配置とデザイン基礎

🎯 学習目標

  • 様々なUI要素（Input、Group、Repeating Group等）の使い方を習得する
  • レスポンシブデザインの基本概念を理解して実践する
  • Stylesタブを使った統一されたデザインシステムを構築できる
  • レイアウト設定とアライメントを適切に使用できる

📚 詳細な学習内容

Day 1-2: 様々なUI要素の理解

  1. Input elements（Input、Multiline Input、Dropdown、Checkbox等）
  2. Container elements（Group、Repeating Group、Popup等）
  3. 各要素のプロパティと設定オプション
  4. 要素の階層構造とネスト

Day 3-4: レスポンシブデザインの基礎

  1. レスポンシブエンジンの仕組み
  2. Breakpointsの設定と使い方
  3. 要素のレスポンシブ設定（Column、Row、Fixed等）
  4. 各デバイスでのプレビューとテスト

Day 5-7: デザインシステムとスタイリング

  1. Stylesタブの使い方と重要性
  2. カスタムスタイルの作成と適用
  3. 色の設定とカラーパレット
  4. フォント設定とタイポグラフィ

💡 例題2: お問い合わせフォームの作成

目標： 様々なInput要素を使って機能的なお問い合わせフォームを作成する

ステップバイステップ手順：

  1. フォームの基本構造を作成
    • 新しいページ「contact」を作成
    • Groupを配置してフォームコンテナとする
    • Groupの幅を400px、中央揃えに設定
  2. フォーム要素を追加
    • 「お名前」ラベル用のTextを追加
    • 名前入力用のInputを追加（Placeholder: “お名前を入力してください”）
    • 「メールアドレス」ラベルとInput（Content format: Email）
    • 「お問い合わせ内容」ラベルとMultiline Input
  3. 送信ボタンの追加
    • 「送信」Buttonを追加
    • ボタンのスタイルを調整（背景色、テキストカラー）
  4. レスポンシブ設定
    • 各要素をColumnレイアウトに設定
    • モバイル表示での確認と調整
  5. カスタムスタイルの適用
    • Stylesタブで「Form Input」スタイルを作成
    • 統一されたボーダー、パディング設定
    • 各Input要素にスタイルを適用

💡 例題3: 商品一覧ページ（Repeating Group使用）

目標： Repeating Groupを使って商品カードのリストを作成する

ステップバイステップ手順：

  1. サンプルデータの準備
    • Dataタブで新しいData Typeを作成（名前: Product）
    • フィールド追加: name (text), price (number), image (image)
    • App dataでサンプル商品を3-4個追加
  2. Repeating Groupの設定
    • Repeating Groupを配置
    • Type of content: Product
    • Data source: Search for Products
    • Layout style: Full list, Fixed cells
  3. セル内の要素配置
    • Repeating Group内にImage要素を配置
    • Dynamic image設定: Current cell’s Product’s image
    • 商品名用のText: Current cell’s Product’s name
    • 価格用のText: Current cell’s Product’s price
  4. カードデザインの調整
    • Repeating Group cellにボーダーとシャドウを追加
    • 要素間のスペーシング調整
    • 統一されたカードレイアウト作成

🏆 Week 2 チャレンジ問題

初級 チャレンジ1: ユーザー登録フォーム

課題： 以下の項目を含むユーザー登録フォームを作成してください。

  • ユーザー名（Input）
  • メールアドレス（Email形式のInput）
  • パスワード（Password形式のInput）
  • 性別（Dropdown: 男性/女性/その他）
  • 利用規約への同意（Checkbox）
  • 登録ボタン

中級 チャレンジ2: ブログ記事一覧

課題： ブログ記事のData Typeを作成し、Repeating Groupで表示してください。

  • Data Type「BlogPost」を作成（title, content, author, date, featured_image）
  • サンプル記事を5個以上作成
  • Repeating Groupでカード形式のレイアウト
  • レスポンシブ対応（PC: 3列、タブレット: 2列、モバイル: 1列）

上級 チャレンジ3: ダッシュボードレイアウト

課題： 管理画面風のダッシュボードを作成してください。

  • サイドバーナビゲーション
  • ヘッダーバー（ロゴ、ユーザー情報）
  • メインコンテンツエリア（統計カード×4、グラフエリア、最新情報リスト）
  • 完全レスポンシブ対応
  • 統一されたデザインシステム

✅ Week 2 学習チェックリスト

  • □ 各種Input要素を適切に配置できた
  • □ Groupを使って要素をまとめることができた
  • □ Repeating Groupの基本的な使い方を理解した
  • □ レスポンシブ設定を適用できた
  • □ 複数のデバイスでプレビュー確認を行った
  • □ Stylesタブでカスタムスタイルを作成できた
  • □ 統一されたデザインでページを作成できた
  • □ 要素の階層構造を理解してネストできた

📅 Week 3: ワークフロー設定の基本

🎯 学習目標

  • Workflowタブの基本的な使い方と概念を理解する
  • イベント（Event）とアクション（Action）の関係を把握する
  • 条件分岐（Conditionals）を使った動的な動作を実装できる
  • 基本的なデータ操作（作成、更新、削除）を行うワークフローを作成できる

📚 詳細な学習内容

Day 1-2: ワークフローの基本概念

  1. ワークフローとは何か、なぜ重要か
  2. イベント（Event）の種類と特徴
  3. アクション（Action）の種類と使い方
  4. 最初のシンプルなワークフロー作成

Day 3-4: データ操作の基本

  1. 「Create a new thing」アクション
  2. 「Make changes to thing」アクション
  3. 「Delete a thing」アクション
  4. データの参照とCurrent User

Day 5-7: 条件分岐とナビゲーション

  1. 条件分岐（Only when）の使い方
  2. 「Go to page」アクション
  3. 「Show/Hide」アクション
  4. エラーハンドリングの基本

💡 例題4: 簡単なTo-Doリストアプリ

目標： ワークフローを使ってタスクの追加・削除・完了機能を実装する

ステップバイステップ手順：

  1. データ構造の準備
    • Data Type「Task」を作成
    • フィールド: title (text), completed (yes/no), created_date (date)
    • Privacy設定: 「Everyone can view this」に設定
  2. UI要素の配置
    • タスク入力用のInput
    • 「追加」ボタン
    • タスク一覧表示用のRepeating Group（Type: Task）
    • 各タスクに「完了」「削除」ボタン
  3. タスク追加のワークフロー
    • 「追加」ボタンのクリックイベントを作成
    • Action: Create a new thing (Thing: Task)
    • title = Input’s value
    • completed = no
    • created_date = Current date/time
    • 条件: Only when Input’s value is not empty
  4. タスク完了のワークフロー
    • 「完了」ボタンのクリックイベントを作成
    • Action: Make changes to thing (Thing: Current cell’s Task)
    • completed = yes
  5. タスク削除のワークフロー
    • 「削除」ボタンのクリックイベントを作成
    • Action: Delete a thing (Thing: Current cell’s Task)

💡 例題5: 動的なコンテンツ表示

目標： 条件分岐を使って動的にコンテンツを表示・非表示する機能を実装する

ステップバイステップ手順：

  1. カスタムステートの設定
    • ページのCustom statesに「show_details」(yes/no型)を追加
    • 初期値: no
  2. UI要素の準備
    • 「詳細を表示」ボタン
    • 詳細情報を含むGroup（初期状態: 非表示）
    • 「詳細を隠す」ボタン
  3. 表示ワークフロー
    • 「詳細を表示」ボタンのクリックイベント
    • Action 1: Set state (Element: Page, Custom state: show_details, Value: yes)
    • Action 2: Show (Element: 詳細Group)
  4. 非表示ワークフロー
    • 「詳細を隠す」ボタンのクリックイベント
    • Action 1: Set state (Element: Page, Custom state: show_details, Value: no)
    • Action 2: Hide (Element: 詳細Group)
  5. 条件付き表示の設定
    • 各ボタンに条件付き表示を設定
    • 「詳細を表示」ボタン: When Page’s show_details is no
    • 「詳細を隠す」ボタン: When Page’s show_details is yes

🏆 Week 3 チャレンジ問題

初級 チャレンジ1: カウンターアプリ

課題： 数値を増減させるシンプルなカウンターを作成してください。

  • 現在の数値を表示するText要素
  • 「+1」「-1」ボタン
  • 「リセット」ボタン（0に戻す）
  • カスタムステートを使用

中級 チャレンジ2: 簡単な投票システム

課題： 選択肢に対して投票できるシステムを作成してください。

  • Data Type「Poll」を作成（question, option1, option2, votes1, votes2）
  • 投票画面で選択肢を表示
  • 投票ボタンで投票数を増加
  • 結果表示ページ（各選択肢の投票数とパーセンテージ）
  • 重複投票防止の仕組み

上級 チャレンジ3: 動的フォームバリデーション

課題： リアルタイムでバリデーションを行うフォームを作成してください。

  • メールアドレス形式チェック
  • パスワード強度チェック（8文字以上、英数字含む）
  • パスワード確認の一致チェック
  • 各項目のエラーメッセージ表示
  • すべての条件を満たした時のみ送信ボタンを有効化

✅ Week 3 学習チェックリスト

  • □ Workflowタブの基本操作を理解した
  • □ イベントとアクションの関係を把握した
  • □ 「Create a new thing」でデータを作成できた
  • □ 「Make changes to thing」でデータを更新できた
  • □ 「Delete a thing」でデータを削除できた
  • □ 条件分岐「Only when」を使用できた
  • □ カスタムステートを設定・使用できた
  • □ 「Show/Hide」アクションを使用できた
  • □ 基本的なエラーハンドリングを理解した

📅 Week 4: ページ遷移と基本的なアプリ構造

🎯 学習目標

  • 複数ページの作成とナビゲーションシステムを構築できる
  • URLパラメータを使ったデータの受け渡しを理解する
  • Popupやグループの表示制御を活用できる
  • 一貫したナビゲーションとUX設計を実装できる

📚 詳細な学習内容

Day 1-2: ページ管理とナビゲーション

  1. 新しいページの作成と設定
  2. 「Go to page」アクションの詳細
  3. ナビゲーションメニューの作成
  4. Header/Footerの共通化

Day 3-4: データの受け渡し

  1. URLパラメータの仕組み
  2. 「Send data to page」の使い方
  3. 「Get data from page URL」でのデータ受信
  4. 動的なページコンテンツの表示

Day 5-7: ポップアップとモーダル

  1. Popupエレメントの作成と設定
  2. 「Show popup」「Hide popup」アクション
  3. モーダルダイアログの実装
  4. フォーム送信とフィードバック

💡 例題6: ブログシステムの構築

目標： 記事一覧ページと記事詳細ページを作成し、ナビゲーションを実装する

ステップバイステップ手順：

  1. データ構造の準備
    • Data Type「Article」を作成
    • フィールド: title, content, author, published_date, featured_image
    • サンプル記事を5個作成
  2. 記事一覧ページ（index）
    • ページタイトル「ブログ一覧」
    • Repeating Group（Type: Article）
    • 各記事カードに: タイトル、作成日、「詳細を見る」ボタン
  3. 記事詳細ページ（article）の作成
    • 新しいページ「article」を作成
    • Type of content: Article
    • Data source: Get data from page URL
  4. 詳細ページのUI構築
    • 記事タイトル: Current page Article’s title
    • 記事内容: Current page Article’s content
    • 作成日: Current page Article’s published_date
    • 「一覧に戻る」ボタン
  5. ページ遷移の実装
    • 一覧ページの「詳細を見る」ボタンのワークフロー
    • Action: Go to page (Destination: article)
    • Send data to page: Current cell’s Article
    • 詳細ページの「一覧に戻る」ボタン: Go to page (Destination: index)

💡 例題7: ユーザープロフィール管理システム

目標： Popupを使ったプロフィール編集機能を実装する

ステップバイステップ手順：

  1. ユーザーデータの準備
    • Userデータタイプにフィールド追加: display_name, bio, avatar
    • 現在のユーザー情報表示エリア作成
  2. プロフィール編集Popupの作成
    • 新しいPopup「ProfileEdit」を作成
    • Type of content: User
    • 編集フォーム: display_name, bio, avatar用のInput
    • 「保存」「キャンセル」ボタン
  3. Popup表示ワークフロー
    • 「プロフィール編集」ボタンのクリックイベント
    • Action: Show popup (Popup: ProfileEdit)
    • Send data to popup: Current User
  4. プロフィール更新ワークフロー
    • 「保存」ボタンのクリックイベント
    • Action 1: Make changes to thing (Thing: Popup ProfileEdit’s User)
    • 各フィールドを対応するInputの値で更新
    • Action 2: Hide popup (Popup: ProfileEdit)
  5. キャンセル機能
    • 「キャンセル」ボタンのクリックイベント
    • Action: Hide popup (Popup: ProfileEdit)
    • 「Reset inputs」で入力内容をクリア

🏆 Week 4 チャレンジ問題

初級 チャレンジ1: 簡単な写真ギャラリー

課題： 画像一覧から詳細表示ができるギャラリーを作成してください。

  • Data Type「Photo」（title, description, image_url）
  • ギャラリーページ（画像一覧をグリッド表示）
  • 詳細ページ（大きな画像とタイトル、説明文）
  • ナビゲーション機能

中級 チャレンジ2: ECサイト的な商品管理

課題： 商品の一覧・詳細・カート機能を持つシステムを作成してください。

  • 商品一覧ページ（カテゴリ別フィルタ機能）
  • 商品詳細ページ（画像、説明、価格、「カートに追加」ボタン）
  • カート機能（Popupで実装、数量変更、削除機能）
  • 商品検索機能

上級 チャレンジ3: マルチステップフォーム

課題： 複数ページにまたがる申込みフォームを作成してください。

  • ステップ1: 基本情報入力
  • ステップ2: 詳細情報入力
  • ステップ3: 確認画面
  • ステップ4: 完了画面
  • 各ステップでバリデーション
  • 進行状況表示
  • 前のステップに戻る機能

✅ Week 4 学習チェックリスト

  • □ 新しいページを作成できた
  • □ 「Go to page」でページ遷移を実装できた
  • □ URLパラメータでデータを受け渡しできた
  • □ 動的なページコンテンツを表示できた
  • □ Popupを作成して表示・非表示を制御できた
  • □ Popupでデータの編集・保存を実装できた
  • □ 一貫したナビゲーションシステムを構築できた
  • □ 複数ページにわたるアプリケーションを設計できた

🎓 Phase 1 修了後のステップ

Phase 1を完了したら、以下の内容でスキルアップを続けましょう：

  • Phase 2: データベース設計とプライバシー設定の詳細学習
  • Phase 3: OpenAI APIや外部サービスとの連携
  • Phase 4: 実際のMVP開発プロジェクト

📚 追加学習リソース

カテゴリー: ノーコード開発

関連投稿

ノーコード開発

Bubble 学習カリキュラム案

🎯 カリキュラム概要 対象者：ノーコード開発初心者〜中級者、起業家、プ 続きを読む…