プログラミングスクールに通った私がノーコードで見積り作成ツール「Mitsuba」を開発してみた話

こんにちは、大熊です。本業は翻訳・ライター業をしていて、仕事の合間にプロダクト開発をしています。今回ノーコードで、クレジットカード決済機能つき見積書作成ツール「Mitsuba」を作ったので、ノーコード開発で学んだことについて書いて行こうと思います。

そもそもノーコードとは

Airtable, Webflow, Bubbleなどのプログラミングなしでウェブサービスの開発ができるプラットフォームが、いわゆるノーコードのサービスです。

最初に使ったノーコードサービスは、AirtableのデータをWebページに変えるサービス「Pory.io」でした。

これを使って世界のカオスマップを集めたサイトを昨年の9月くらいに立ち上げています。データをAirtableに集めたら、あとはものの数分でサイトを立ち上げることができたので、かなり感動でした。

ただ、既存のWordpressといったコンテンツ管理システムと比べてそんなに良いかというと「別にそうでもないかも」と思ったのが正直なところです。

情報を掲載するだけでなく、会員登録できたり、他のユーザーとやりとりできたりするような、もっとインタラクティブなウェブサービスがノーコードで作れないかなと思っていて、そんな時に知ったのが「Bubble」でした。

コーディングの自動化

2012年に誕生したBubbleはプログラミングの知識なしで、アプリが作れるサービスです。ノーコードサービスの中でも比較的開発の自由度が高いのが特徴です。

ちなみに私は2019年1月から9週間、東京目黒にあるLe Wagon Tokyoのプログラミングブートキャンプに参加し、コードを書いてプロダクトを作る方法を学んでいます。なんでプログラミングブートキャンプにまで通ってプログラミングできるようになったのに、ノーコード開発に興味を持ったのかというと、正直、学んだといっても開発の素人なので、自分ひとりでコーディングしてプロダクトを作るのには大きな不安があったからです。実践経験が足りないので、ひとつエラーが起きたら、そのエラーの理由と対処法を探すだけで何時間もかかってしまいます。涙。

プロのエンジニアになるなら、コードを書いて経験を積んだ方がいいのでしょうが、私の当面の目標はひとまずプロダクトを作ってみる！だったので、ノーコードを選んだという経緯があります。

とはいえ、Bubbleでは、コードこそ書かないものの、プログラミングブートキャンプで学んだWebサービス開発の知識はすごく役立っていて、ブートキャンプに通っていてよかったと思っています（プログラミングが身についた以上に、このブートキャンプにはいろんな国から参加者が集まっていて、留学気分でプログラミングを学べたのがすごく楽しくて良かったです）。

「ノーコード」だからといって、これまでのプロダクト開発とまったく違う方法でプロダクトを作るのではありません。ノーコードはあくまで従来の開発の一部を自動化、あるいは視覚化して分かりやすくしているサービスなのです。例えば、「ユーザーがこのボタンを押したら、ログイン画面を表示する」というロジックをコードではなく、設定から選んで作れるようになるということです。

なので、データベースの作り方だったり、データの呼び出し方だったり、そうしたサービス開発の基本を知っているとノーコード開発が爆速で進みます。逆に言えば、そうした基本知識がないと、いくらノーコードがわかりやすいと言っても、最初はやっぱりとっつきづらいかもしれません。

Mitsubaはどんなプロダクト？

さて、今回実際に作ってみたのが、こちら、クレジットカード決済機能つき見積書作成ツール「Mitsuba」です。※2021年4月現在、サービスを休止しています。

フリーランサーや副業している方向けのサービスで、Mitsubaで見積もりを作って先方に共有すると、先方はクレジットカードでの支払いを仮登録できます。仕事が終わって依頼を終了すると同時に、見積もりに記載した報酬額を仮登録された先方のクレジットカードに請求する仕組みです。

なぜこれを作ったのかと言うと、初回の取引をもっと気軽に、安心してできるようにしたいと思ったからでした。最近はSNSから仕事を依頼したいと言れたことがある人も増えているのではないでしょうか。ただ、初めて取引する相手だと、ちゃんと報酬が支払われるのか不安になることがあります。実際、ツイッターで依頼を受けて仕事したのに、支払いがされなかったなどのトラブルが発生しているのをたまに見ます。

私自身もフリーランサーなので、仕事の幅を増やすためにも安心して仕事を受けられるようにしたいな、と思ったのがMitsubaを作るきっかけでした。

Mitsubaは登壇依頼だったり、イラスト作成だったり、基本的には単発の仕事の依頼を受け付けることを想定しています。もし反響がよければ、もっと機能を拡張していこうと思っていますので、良かったら試してみてください。

※現在β版では小計10万円までのお見積もりしか作れません。また、Mitsubaの利用料はフリーランサー側に手数料がかかってしまいます。なので、トライアル的に一回仕事をして、クライアントが信用できる人だとわかったなら、それ以降の依頼は請求書払いなどに切り替えることをおすすめします。

開発時間の短縮　＝　モチベーション維持！

実際にひとつプロダクトを作って実感したノーコード最大の利点は、（言わずもがなですが）開発時間を大幅に短縮できることです。Mitsubaの主な機能は次の通りです。

機能
・Auth0での会員登録/ログイン
・見積書作成のフォーム
・Stripeでフリーランサーをセラー登録
・Stripeでクライアントの決済情報を登録
・フリーランサーとクライアントとのやりとり画面
・簡単なお問い合わせフォーム
・プロフィール画面

Mitsubaは2020年11月の終盤に開発をはじめたので、およそ3か月で完成しました。本業があるので、開発に割けるのは平日ちょこっとと週末だけなことを考えると比較的早かったのではないかと思います（主観ですが）。

もうひとつ、開発時間の短縮に加え、開発のモチベーションを維持できたのは私にとって大きな利点でした。ひとりだとどうしても開発を続けるモチベーションが保ちづらいと思うのですよね。

ノーコードなら数十分もあれば、サクッと機能が作れます。目に見える成果があるからこそ、毎日コツコツ開発を続けて、サービスを形にすることができたと思っています。ゼロからコードを書いていたら、途中で挫折していたかもしれません。。

また、一緒にプロダクトを作っている小沼さんからフィードバックもらったり、デザインを手伝ってもらったりしたおかげで、モチベーションを保てたというのもあります。仲間はモチベーション維持に大事ですね。。

とにかくデザインが肝！

実は、上記の機能だけなら、1か月くらいで形になっていたのですが、デザインがなかなか決まらず、そこで思った以上の時間がかかってしまった形です。最初に作ったバージョンはページ遷移が多く、しっくりこなかったので、一度ページの構成とデザインを大幅に変更しています。最初からデザインを固めないで開発を始めたのが失敗でした。後から細々調整する羽目になり、大幅なタイムロスが発生したので、次回は気をつけたいです。。

Bubbleに慣れてくると、機能は本当に簡単に作れてしまいます。今後ますます、こうしたノーコードサービスが増えるならなおのこと、他のプロダクトと差別化するためにも、プロダクトの質を高めるためにも、デザイン力が重要になってきそうです。

一方で、ノーコードで作るのが難しいなと思ったのもまたデザイン面です。地味にデザインの制約があります。例えば、Bubbleでのレスポンシブの設計は、コードで書く方法とは根本的に考え方が違うので、慣れるのにちょっと時間がかかるかもしれません。また、カスタムのアイコンを使うのもちょっと手間がかかります。今後プラグインなどが増えて、使いやすくなることを期待しています（すでにFigmaで作ったデザインを取り組む機能もあるようなので、これを使うといいのかもしれません。今度試してみようと思います）。

ノーコードを試した結論

・比較的簡単に開発できる。プログラミングができれば爆速で進みます。
・開発のモチベーションが保ちやすい。
・プログラミングの完全代替にはならないけれど、大体のWebサービスは作れそうです（AirbnbのようなマーケットプレイスからInstagramのようなSNSまで、Bubbleで作り方の解説もあります）。
・とにかくデザインが大事！

興味があればノーコードサービスをお試しください。最後までお読みいただきありがとうございました。ではでは。