業務アプリの移植先として、ノーコードツール Bubble を検討してみる

昨今、話題に上がっているローコード・ノーコードによるWebページの開発を行うにあたり、この度、世界的にもっとも著名な「Bubble」を使ってみましたので、その感想など、以下に述べていきたいと思います。

業務用アプリケーションとノーコード

今回ノーコードの選定にあたり、いくつかのサービスを探索しました。

まず、一番に候補に挙がったのは「Kintone(サイボウズ株式会社)」です。日本国産のため、使い勝手がよいので間違はないはずですが、使用ユーザ数による課金制であり、月額780円/ユーザーと高価のため棄却しました。

ところがこれを除くと「PCで使用する業務アプリ」という観点でなかなかヒットするものが見つかりません。「STUDIO」や「ペライチ」、「Glide」といったサービスがありましたが、いずれもスマホ専用だったり、広告やランディングページ向けだったりと、目的に合致しないことがわかりました。

運用シーンで考えても、スマホ画面で扱うような情報量ではなく、オペレータも昔ながらの事務方です。移植前の画面を見ても、コテコテの「一覧」画面や、下部のファンクションキー(F9:プリント等)が設置されたデザインであり、極端なUI変更は忌避される可能性がありました。

私自身、あまりUX/UIデザインの知見がないため、リスク回避的に旧来のデザインに近づけたものを探していましたが、なかなか対応できそうなものが見つかりませんでした。

そのような中で、最も汎用的と名高いBubbleに触れることになりました。

Bubbleについて

bubble.io

Bubbleとは

Bubbleは、ドラッグアンドドロップのインターフェースを通じてアプリケーションをビジュアルに構築することができる、SaaSによるノーコードアプリケーションです。

プログラミングの知識がなくても、ユーザーは直感的な操作でアプリケーションを作成できるという謳い文句で、世界で約200万人のユーザがいるといわれています。

<編集画面>

<実行画面>

また、レスポンシブへの対応も容易であり、行列を正しく配置するだけで、以下のとおり簡単にスマホデザインに対応できるようになります。

<実行画面>

Bubbleの特徴

Bubbleが広く使われている特徴としては、その汎用性が挙げられます。使用できる機能は一般的なフロント画面用のテキストやリストに限らず、GoogleMapや、アカウント管理、e決済機能まで、幅広い機能を簡単に取り込むことができます。

また、デベロッパが自由に開発・公開できるPlugin機能によって、機能のさらなる拡張や、独自のマーケットプレイスによる配布が行えます。開発したプラグインは自由に有償化でき、開発者にインセンティブがあるため、随時機能拡張が行われている状態です。

<Plugin追加画面>

使用してみた所感(実際どうなの?)

最初に、実際に使用してみた所感を述べます。

よかったところ

  • 評判通り機能が豊富・汎用的であり、たしかにでなんでも作れそう。
  • バックエンドデータとの連携がPluginとして用意されており(SQL Database Connector)、MySQL等、既存データベースとの連携が容易。
  • デザイン設定と、実際に作られるCSSとのフィット&ギャップが少ない(前回記事にしたFigma→Amplify Studioのような、コード変換が行われないため?)
  • Pluginを開発する場合は、JQueryを使用したコーディングが主体となるため高難度だが、その分自由度が高い。

厳しいところ

  • 操作のインターフェイスがすべて英語であり日本語非対応(データの表示自体は日本語にできる)。開発者フォーラムも英語のため、入門が難しく、とっつきづらい。チュートリアルYoutubeを駆使して、初期の学習コストに最低でも1週間程度はかかる。
  • 画面デザインのUIが使いづらい。複数オブジェクトをまとめて移動しようとしても、ひとつしかドラッグできなかったり。Figma等に慣れていると、イライラするかも。
  • Freeプランの制約がなかなかきつい。有償のStarterプランにアップグレードしないと、Webホスティングもできない。特にデモ用のテーブルデータを、独自の登録画面から1レコードずつ手作業で登録するのには骨が折れた(結局、Seleniumで自動操作させたけど)

一番使い慣れが大変そうなのが「画面デザイン」。普通にWebデザインが必要となります。KintoneやDesknet'sといった、国産の「やさしい」ノーコードソフトは、データの型や桁数に応じてフォントサイズや項目幅を「いいかんじ」に配置してくれるようですが、こちらはひとつひとつ、細かく指定が必要です。

Webデザイナーからすると当然の作業ですが、「ローコード」と聞いて安易に飛びつくと、げんなりします。

結論

まだまだ試行錯誤しているところですが、このサービスであれば、なんとか元の形式に揃えたデザインが作れそうです。操作に慣れてくると、たしかにサクサク画面が作れるし、Pluginなどを使いこなせば、いろいろな機能も簡単にできそうな気がしてきました。

ただ前述のとおり、本来であればUX/UIデザインの側面から、このような画面再現よりもより良いデザインを設計すべきとは思います。自分がやっていることが、時代錯誤な提案をしているという自責の念もあるのですが、新しいデザインを作るにしてもツールの使い方が分かっていた方がよかろう、ということで、まずはやり進んでみたいと思います。