見出し画像

【開発過程を全公開】 ITベンチャーが 1ヶ月半 で自社サービスを立ち上げた話。

株式会社Gns

1. 自分のサービスを出してみたい、そこのあなたへ

はじめまして。株式会社Gns 篠塚です。

この記事は、

・何かしらサービスを出してみたいが、何から始めたらいいか分からない
・リリースまでにやるべきことが分からない
・どのような状態ならリリースしていいか分からない

という人向けに、「まずはこれをやればサービスとして世の中に出せるよ」というHowToをまとめた記事です。
※今回、細かい技術的な話までは触れませんので、悪しからず。

プログラミングの知識はあるが、サービス開発をしたことない方。
何かしらのサービスを出してみたい方。

そんな方の、少しでも参考になれば嬉しいです。

2. 自己紹介

弊社【株式会社Gns】は、WebサービスとかWebサイトとかを作ってる会社です。
この度、2021年9月1日に、遅刻防止サービス『Maniauu(マニアウー)』をリリースしました。

※2022年7月31日をもってManiauuのサービスは終了いたしました。


開発期間は、約1ヶ月半ほど。
「こういうサービス作るぞ!」と決めてから、普段の業務の合間にコツコツ開発し、気づけば結構なスピードでリリース出来ました。

『Maniauu(マニアウー)』のリリースから2週間経った今。
ベンチャー企業がサービスを立ち上げるまでの軌跡を残せば、これからサービスを作る方の参考になるのでは?と思い、筆を取った次第です。

3. まず何したらいいの

サービスをリリースするまでにやるべきことは、大きく5つ。

・サービス内容を決める
・リリース日を決める
・仕様を決める
・開発する
・リリースする

それぞれ、とてもシンプルです。
1個ずつ行きましょう。

4. サービス内容

サービス内容の決め方は様々です。
「初めてのサービス開発」の場合は、自分が欲しいサービス・作ってみたいサービスで良いと思います。

大事なのは、自分の実力で作れそうな範囲のサービスにしてください。

サービスを作ったことがない人が、いきなり「NFTを活用した最先端のコミュニティサービスを作ろう!」と意気込んでも、おそらく上手く行きません。

「だいたいこうやったら作れそうかな〜」と当たりがつくものを、スコープとして選定することが大事です。

また、開発にも関連しますが、類似のサービスを予め調査しておくと開発がかなり楽に進むと思います。
類似のサービスがどのような言語・技術により作られているかを知り、それを真似しつつ、自分のオリジナル要素を乗せていきましょう。

我々のサービスでは、コンセプト・開発技術共に「Mezamee」というWebアプリを参考にさせて頂いてます。

この辺りの経緯は、COOの飯塚が書いていますので、興味ある方はそちらもぜひご覧ください。

5. リリース日を決める

超重要です。
リリース日を先に決めて、死んでも間にあわせる勢いで作りましょう。

よくありがちなのが、「ある程度サービスが出来てきてからリリース日を決めよう」という進め方。
一生リリースにたどり着きません。
ゴールが定まっていないと、開発なんて進まないからです。

『Maniauu(マニアウー)』では、「絶対9月1日にリリースしよう!」というところから始まっています。
ゴールが明確だったからこそ、死ぬ気で(徹夜続きで)開発を進めることが出来たんですね。

本当に死ぬ、と思った瞬間が3回くらいありました。ええ。

・・・

話が逸れましたね。

無理矢理でもいいです。まずは、リリース日を決めましょう。


6. 仕様を決める

リリース日を決めたら、具体的に仕様を詰めて行きます。
必要に応じて簡単なドキュメントを作成しましょう。

基本的には開発者が全仕様を把握していればOKなので、1人で開発する場合は不要かもしれません。
『Maniauu(マニアウー)』は弊社役員と2名で開発をしており、認識を合わせるためのドキュメントを3つだけ作成しました。

・画面一覧
・機能一覧
・画面遷移図

開発者が少なければ、このくらいのドキュメントで大丈夫です。細かい仕様は開発しながら徐々に詰めて行きます。

実際に作成したドキュメントは、記事の最後で紹介します。必要な方は参考にしてください。

7. 開発する

仕様が決まれば、実際に開発に着手します。

今回、React + firebase という構成で開発しましたが、サービスを作る上で適切な言語を選定してください。
選定が難しい場合は、類似サービスにどんな言語が使われているかを調査し、真似ればOKです。

開発を進めるにあたりよく陥るのが、「基礎は学んだものの、その後どうしたらいいか分からない」という状態です。
そこで、サービスを完成させるまでのステップを、大きく3つに分割すると進みやすいです。

①言語の基礎を学ぶ
②作りたいものに近いサービスを作る
③オリジナル要素を乗せてサービスを完成させる

それぞれ、簡単に説明しますね。

①言語の基礎を学ぶ
まずは王道、公式チュートリアルでも触ってみてください。例えばReactならこれですね。

ただ、チュートリアルが難しくて挫折する人がいるのも事実。
そんな方は、最低限の知識のみですが、Progateをとりあえず1周しておきましょう。

もちろん、基礎が分かっている方は飛ばしてください。

ただ、基礎とオリジナルサービス開発の間には大きな隔たりがあります。
そのため、②作りたいものに近いサービスを作るが重要です。

チュートリアルだけだと、作りたいサービスまでかなり遠いことが多いです。(チュートリアルでは実用的なサービスを作らないので、当然といえば当然ですね)

そのため、オリジナルサービスを作る前に、模写で良いので実用的なサービスを1つ作りましょう。

具体的に、『Maniauu(マニアウー)』の例で説明します。

『Maniauu(マニアウー)』に必要な機能は、大きく4つです。

①ユーザー登録機能
②予定登録機能
③決済機能
④位置情報取得機能

これらの機能開発にあたり、『Maniauu(マニアウー)』では、ECサイトをベースにし、不足機能を追加していく、という開発手順を踏んでいます。

一般的なECサイトでは、作りたい4機能のうち3つは実装されています。
①ユーザー登録機能
②商品登録機能(→予定登録機能と同等)
③決済機能

ECサイトは非常に一般的なサービスゆえに、実装関連の情報もかなり豊富です。
そのため、
・簡単なECサイトを作る
・後から不足機能(位置情報取得)を載せる
という手順を踏むことで、効率よく開発を終わらせる手法を取りました。

あとは、③オリジナル要素を乗せてサービスを完成させるだけです。
必要な機能を足したり、不要な機能を削除したり、デザインを整えたり、、、
Googleでひたすら調べながら、やりたいことを実現していくのみです。

中でも、公式ドキュメントを読めるかどうかは特に重要になります。(エンジニアの皆様にとっては、当然のことと思いますが)
やりたいことを調べても、ドンピシャな情報が出てこないことは多々あります。そんな時は、公式ドキュメントを見ながら実装していくしかないです。

『Maniauu(マニアウー)』では、主に下記ドキュメントにお世話になりました。

 英語が苦手な方は、翻訳にかけながらで大丈夫なので、逃げずにきちんと向き合いましょう。

8. リリース準備をする

サービスの機能面が出来てきたら、リリース基準を決めましょう。

個人利用や、趣味の範囲でのリリースなら最悪バグがあっても良いです。(良くないけど)
が、ビジネスとして出す場合は、基本的なセキュリティ対策や、動作確認テストは必須です。

動作確認テストは、ある程度余裕を持って終わらせておいてください。割とバグが見つかるものなので、、、

『Maniauu(マニアウー)』ではリリース直前に多端末検証(色々なスマホでの実機テスト)を行ったため、リリース前日の朝5時までバグ修正する羽目になりました。死にました。
テストは、入念に早めにやりましょう。本当に。

あとは、利用規約やプライバシーポリシーの準備等・・・
エンジニアが忘れがちな部分ですが、とても重要です。
専門家に聞きながら、きちんと準備してくださいね。

9. リリース

いよいよリリース当日。
自分のサービスが世の中に出ていくときです。

せっかく世の中に出したのに誰にも使われないと悲しいので、広めるための施策もある程度は考えておきましょう。

Twitter等のSNSで宣伝してもいいですし、スタートアップ企業であればPR TIMESが月1記事無料で出せるのでオススメです。

『Maniauu(マニアウー)』でもPR TIMESにプレスリリースを出しており、一定の集客効果を得ています。

アクセス実績はこんな感じ。
PR TIMESからの流入+転載サイトからの流入があります。

スクリーンショット 2021-09-08 22.51.49

これで、まずはリリース完了です。お疲れ様でした。

あとは運用をしながら、より良いサービスを作るもよし。新サービスに着手するもよし。

『Maniauu(マニアウー)』では、新規ユーザー登録時や、ユーザーが予定を登録した際にSlackに通知を飛ばしています。

スクリーンショット 2021-09-08 23.04.07

ユーザーの実際の使い方を見ながら、ユーザビリティの向上・改善をしていきます。また同時に、新機能の開発も着々と進めております。
ここまで読んで頂いた方は、ぜひ一度使ってみてくださいね。(宣伝)

10. 最後に

「自分のサービス作ってみたい」と思っている方は、まずリリース日を決めて、進んでみてください。
一度リリースを経験すると、「こういうサービスも作れそう」という幅が広がってきます。

サービス開発という、エンジニアとして大きな第一歩を踏み出しましょう。


おまけ

『Maniauu(マニアウー)』で作成したドキュメント、参考にしたサービスを公開します。

・作成ドキュメント

①画面一覧 / 機能一覧(Googleスプレッドシート)

設計段階で思いつくものを書いていき、共同開発者と共有しました。
開発が進む中で「ここは削ろう」「この仕様は変えよう」が頻繁に起こります。あくまで参考程度として、初期設計に囚われず柔軟に行きましょう。

②画面遷移図(miro)

スクリーンショット 2021-09-13 18.13.46

※スクリーンショットで失礼します。雰囲気だけでも伝われば・・

まだ実装を始めていない、設計段階で作るものなので、参考サービス(Mezamee)を触りながら画面遷移図を作りました。
また、作図にはmiro(https://miro.com/)というサービスを利用しています。オンラインホワイトボードツールで、画面遷移やフローチャートを簡単につくれたり、共同編集も出来たりと、汎用性が高くオススメです。

ドキュメント自体のクオリティは置いといて、必要なドキュメントはこのくらいで十分です。ここに時間を掛けすぎても仕方がないので。
全員の中で「作るべき画面」「必要な機能」の認識が合えば、ドキュメントの役割は果たしています。

逆に、作るサービスの全体像が見えていない段階では、このレベルで良いのでドキュメントを作成してみてください。
一度作ると、頭が整理されるのでオススメです。

サービスによっては、DB設計とかフローチャートとかシーケンスとか、キチンと作っていくんですが、、、それはまた別の機会に。

・参考にしたブログ・サービス

トラハック(@torahack_)さんのYoutubeが大変参考になりました。ありがとうございました。
React + firebaseで簡単なECアプリを作成しよう、という動画です。

特にFluxフローの解説がとても分かりやすいので、初学者の学習教材としてもオススメです。
主に決済関連の実装を参考にさせていただきました。

あとは先に述べた、公式ドキュメントを見て開発しています。外部サービスとの連携は、基本的に公式ドキュメントを参考にしてください。

開発の詳細をもっと知りたい方や、共同開発をしてみたい方。
ぜひお気軽に、お問い合わせください。


【お問い合わせ先】
株式会社Gns
URL:https://gns-japan.com/
事業内容:Web制作、ITコンサル、遅刻防止サービスの提供
メール:info@gns-japan.com
LINE:https://lin.ee/9Vuc0Xd


この記事が参加している募集

振り返りnote

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!