エムアンドシーシステム株式会社の「Bubble.io（バブル）社内勉強会レポート」です

社内でノーコードツール「Bubble」の勉強会を開催しました。
DXチーム全員で対話しながら進める実践形式で、新しい技術を学ぶことはDXを進める力を養う良い刺激となりました。
この記事では、Bubble勉強会で学んだことや感じたことをご紹介します。

Bubble.ioは完全ノーコードでウェブアプリを作成できるツールです。
画面デザインをドラッグ＆ドロップで構築し、データベース設定や処理（ワークフロー）も直感的に組み込めるため、プロトタイプから本番運用まで幅広いアプリを一貫して作成できるのが特徴です。
カスタマイズ性が高く、複雑なロジックや外部APIとの連携も実装可能です。

※APIとは？
アプリ同士やサービス同士が「やり取りできるようにするための道具セット」のことです。 アプリの中身を詳しく知らなくても、他サービスの機能やデータを安全に使えるようになります。

私たちはこれまでノーコードツール「Click」を用いて、社内向け情報共有アプリやイベント告知アプリなどを作成してきました。
Clickは“すばやく作る”という点で非常に優秀ですが、より複雑なロジックや柔軟なカスタマイズが必要となる場面も増えてきています。
そこで、より表現の幅が広く、本格的な開発が可能なBubbleも選択肢の一つとして検討することになりました。

Bubbleはデザインや機能の自由度が高く、Clickに比べてできることが大幅に広がります。

• アンケートや申込フォーム
• イベント・社内向けツール
• 顧客管理（CRM）
• ダッシュボード（お知らせ・資料・問い合わせ集約）
• 予約システム

できることが多い分、学習コストは高めですが、その分だけ“作れるものの幅”が広がることが魅力です。

BubbleはFigmaとの連携に対応しており、デザイナーが作るUIをそのままBubbleへ取り込むことができます。
画面を作り直す手間が省け、デザインと機能実装の分業がしやすくなるため、開発のスピードと品質が向上します。

デザインを“そのまま”アプリ画面に反映

Bubble公式プラグインを利用し、Figmaのフレームを選んでエクスポートするだけでBubble側にページとして取り込めます。
レイアウト・色・余白が正確に再現されるため、UIを一から作り直す必要がありません。
デザイナーの意図を保ったまま開発に集中できるため、開発スピードも大幅に向上します。

機能実装までの流れがスムーズ

取り込んだデザインはBubble側で自由に編集可能です。
ワークフロー設定、データベース連携、API接続などをそのまま追加できるため、「デザイン → 実装」の流れが途切れず、アイディアを短期間で試すことができます。

分業しやすく、見た目の統一も保てる

デザイナーはUI設計に、開発者は機能実装に集中できるため、作業の干渉が少なくなり、チーム全体の生産性が高まります。
また、Figmaのオートレイアウトを活かせるため、Bubble側でもレスポンシブ対応が整いやすい点もメリットです。

実装の流れ

• Figmaデザインをインポート
• UI調整と動的要素の追加
• テスト・動作確認
• 公開

※UI（ユーザーインターフェース）：使いやすく見やすい画面デザインのこと。

今回の勉強会では、Bubbleの“できることの多さ”と“難しさ”の両面を強く実感しました。
ドラッグ＆ドロップで画面が作れ、設定すればすぐ動くという手軽さは大きな魅力で、触るたびに理解が進んでいく感覚がありました。

楽しさのポイント

UIを作ってすぐ動作確認ができることは、想像以上に面白く、学習のモチベーションにつながりました。
「触った分だけ結果が返ってくる」ので、小さな成功体験が積み重なり、自然と次のステップに挑戦したくなります。
デザイン面・機能面の自由度が高いことも、学習意欲を後押ししました。

むずかしかった部分

その一方で、自由度が高いゆえに、画面設計・データベース・ワークフローの関係性を理解するまでは混乱しやすかったです。また、私にとってはまったく新しいプラットフォームだったため、操作に慣れるまでかなり苦労しました。機能が非常に多く設定項目も細かいため、作業中に「今どこを触っていたか分からなくなる」ことが何度もあり、気づけば開発画面の中で迷子になってしまう場面も多くありました。
自由度の高さは大きな魅力である一方で、初心者にとっては大きな壁だと感じました。

英語UIによるハードル

Bubbleは画面全体が英語で構成されているため、技術用語や論理的な表現に慣れるまでは戸惑うことも多くありました。
直訳できない概念もあり、「この設定はどういう意味だろう？」と立ち止まる場面が何度もありました。
こうした“英語に慣れるまでの期間”は、初心者がつまずきやすいポイントの一つだと感じました。

体験を通じて得た気づき

「まず触ってみる」ことで少しずつ仕組みがつかめ、最初は分からなかったことがつながっていく瞬間がありました。
初心者だからこそ見える視点や疑問も多く、それが新しい発見につながる場面もありました。

DXチームでも、「試す → 失敗する → 修正する」という流れこそが、Bubbleを習得する最短ルートだという意見で一致しました。
完璧に理解してからではなく、触ってみることで道が開けていく——そんな学びを全員が共有できた勉強会となりました。

Bubbleのようなノーコードツールは、業務改善の“最初の一歩”を踏み出しやすくしてくれます。
小さなアプリでも、日々の負担を減らし、情報共有や業務連携をスムーズにする力があります。
まずは小さく作ってみること。それがDXにつながる大きな変化の始まりです。

備考欄

引用元

• 【公式サイト】Bubble.io: アプリ開発できるノーコードツール
• 【公式サイト】ノーコードツールバブルとディザインツールFigjam連携！
• 【公式サイト】BubbleとFigjam
• 経済産業省:経営による企業価値向上に向けて

記事情報