この記事はウェブクルーAdvent Calendar 2020 13日目の記事です。
昨日は同じ人事の @wc-kobayashiT さんの「LPや入力フォームで使える行動心理学」でした。

はじめに

私はHTMLやCSSを書くコーディングが本業なのですが、最近の流れの速さに若干息切れ気味（笑）
それと同時に「もっと早く、簡単にユーザーにサービスを届けるには…」という観点から、最近は独自にノーコード系の開発サービスを色々触っています。

ノーコード系の開発サービスとは

読んで字のごとくではありますが、ノーコーディングでサービスが開発できる「サービス」です。
通常、サービスの開発は、データベースの設計、API周りの構築、デザインの作成、HTMLやCSSによるコーディング、フロントエンド実装等、いろんな専門職（もしくはとんでもないフルスタックエンジニア）の手によって、割とたくさんの時間をかけて作り上げられます。
勿論それによって出来上がるプロダクトは素晴らしいものではありますが、いかんせん築城するのに時間がかかるし、設計図（仕様書）が大掛かりで、大工（エンジニア）がたくさんいればいるほど、途中での軌道修正がとてもやりにくい。

てことで、コーディングからデータベースの設計まである程度ひとりで小規模開発が出来るものがあれば、MVP（※）を考えつつサービス構築できるやん！と考えたもっと頭のいいエンジニア様が作ったのがノーコード系の開発サービスです。
※ MVP…『Minimum Viable Product』の略、「必要最低限の機能だけを搭載した製品」という意味

「え！コーディングしないでもできるの！？」って思いますが「コーディングしないでも出来ます」が、「え！コーディングのこと知らないでもできるの！？」って方には「あんまりできません」と答えます。

どちらかというと、コーディングとか、データベースとかデザインとかCSSとかをちゃんと知っている人が「それぶっちゃけ面倒だからやめようぜ」って言って使うサービス。
だから、何も知らなかったら、何もできません。

ちょっと前置き長くなりますが

弊社（だけじゃないとは思いますが）、半年に一度評価があります。いわゆる給与査定。目標を立てて、それの進捗度で評価されるのですが、そのプロセスやら結果やらを書き込むのがずーっとエクセル。そしてそれがすごい使いづらい。この記事を弊社の偉い人が見てるかどうかわかりませんが、一度だけ大きめの声で言います。

「エクセルは表計算用のアプリケーションです」
半年の成果やお給料アップに対する熱い想い（笑）を、文豪のごとくつらつらと書き連ねるためのツールではありません。

と、さんざん言ってるのですが特に何かに置き換わる様子もないままに、ひょっとしたら私こそが置き換える役割を課せられているのかも…と、ちょっと思ったりして、それでもいきなり全社的に公開するような日本企業っぽい勇気もありませんし、MVPをちゃんと意識しながら作りたいと思ったので、ノーコード系の開発ツールを使って、ひとりで自組織のみを対象として作ってみることにしました。

作ろうとしたサービスの機能

・共通のパスワードでログインしてから会員新規登録
・面談時に見せやすい形になる
・アカウントごとに保存できる
・記入するシートの種類によって入力欄が増減する
■ 目標記入欄
・タイトルが記入できる
・比重が記入できる
・プロセスが記入できる
・点数が記入できる
など、各目標に対して7つの記入欄がある。こんなところが1st PhaseのMVPといったところ。

なぜにひとつめの「共通のパスワードでログインしてから会員新規登録」があるかというと、こういうノーコード系のサービスは本番公開してしまえば、全世界からアクセスできるフルオープンなサービスとして立ち上がってしまうこと。（すくなくとも無料プランでは）

それで、全世界の人が会員登録をガンガン始められて、弊社の評価のフォーマットにガンガン登録されてしまっては、一気に容量オーバーのパンク状態になってしまいます。（すくなくとも無料プランでは笑）

それを防ぐには自組織のメンバーに共通のパスワードを発行しておいて、それを使ってログインをしてから各アカウントを作り直す、というフローが必要だからです。（すくなくとも無料プランでは涙）

使ってみたノーコード開発サービス

Adalo（アダロ）

https://www.adalo.com/

UIがとってもシンプル、パーツをどんど個組み合わせていくだけで見た目もそろえば、機能も出来上がっていく親切設計。
これによって作られたサービスですでに運用が始まって収益がたっているものも多数ある（らしい）。
私が色々調べて一番初めに手を出したサービスです。
が、色々考えて構築していったところで気が付いた難点。input系の見た目（入力枠のサイズ）が調整できない。それと全部英語。
→ 先ほども言いました通り、熱い想いを入力するのに入力枠が狭いとすぐにスクロールバーが出ちゃって、ちょっとやり辛いので断念。

bubble（バブル）

https://bubble.io/

自由度が高い、UIも割とわかりやすいけど、そもそも素人では扱いにくい。input系の見た目も数値の入力でなんとでもなる。だけど全部英語。
いずれにしても、コーディングがわかる人ならある程度直感的に操作できます。
それと某動画共有サイトにかなり細かく操作の説明をしてくれている親切な方がたくさんいます。
→ ということでこちらを採用

共通のパスワードでログインしてから会員新規登録できる仕組みを作る

① データベースUSERを作る

② トップページに新規会員登録フォーム（仮）を作りUSERと紐付ける

・登録項目
「メールアドレス（必須）」と「パスワード（必須）」

③ 共通アドレスとパスワードで新規会員登録をする

→ この共通アドレスとパスワードを後でみんなに共有する

④ USERデータベースに必須項目「お名前」と「シートの種類」を追加する

⑤ トップページの新規会員登録フォーム（仮）を削除して、ただのログインフォームを作る

⑤ ログイン後の画面にもうひとつ新規会員登録フォームモーダルを作りUSERと紐付ける

・登録項目
「メールアドレス（必須）」と「パスワード（必須）」と「お名前（必須）」と「利用するシートの種類（必須）」

⑥ 新規会員登録フォームモーダルの表示条件を-現在ログインしているアカウントに「利用するシートが登録されてない場合」-と設定する

共通アドレスとパスワードでログインしたメンバーは、そのUSERデータに「利用するシートの種類」が登録されてないので、ログイン後に再び新規会員登録フォームモーダルが強制的に立ち上がります。
そこで自分のアドレスとパスワードとシートの種類を登録しない限り、サービスを使うことが出来ない仕組みの出来上がりとなります。

できあがり

https://evaluationneo.bubbleapps.io/
さて、出来上がった新たな評価シートのURLです。サービス自体が一般公開されるので、そりゃマズいと思って今回の仕組みを作ったわけで、それが上手くできていればここからたくさんの人が見に来ても表紙しか見れないので大丈夫でしょう。
一瞬にしてデータベースの容量がパンクした場合は、私の作りがダメだったという事になります（笑）

最後に

今回は、自分で考えて、自分でレイアウトして、自分で仕組みを作るというのをやってみました。
たしかに、それなりの知識は持っていないと構築は難しいですが、サービスの良し悪しというのは、会社の偉い人が決めるものではなく、ユーザーのみが決めるべきもの。
反応を見て改修して、評判を聞いて増築して、を愚直に繰り返して、ユーザーの「イイね！」の声がたまれば、必然的に良いサービスが出来上がります。
逆に、少しでも「イイね！」が集まらなかったら、それは撤退して次のサービスを考え始めるべきなのだと思います。

その反応をどれだけ「早く見れるか」が勝負なので、そこに対してノーコード開発によるMVPの構築はとてもとてもスピーディで有益なのではないかと思いました。
それでもそれなりに時間はかかりますけどね。

明日は@piwiさんです！よろしくおねがいします！