僕がサービスを作る時の手順

どうも@leavescomic1です。

はじめに

僕はちょこちょことWebサービスを作っているのですが、今日は僕がサービスを作る手順を紹介します。これからweb系のサービスを作ってみたいと思ってる方に何か参考になれば幸いです。

ただ、ここで１つ注意して欲しいのは僕はエンジニアとして働いたことがないので、サービスの進め方は完全に我流です。非効率なことだったり、プロからみたらおかしいと思う点も多々あるかと思いますので、あくまでも『こんなやり方もあるんだ』くらいの気持ちで読んで頂ければと思います。

説明では自分が作ったサービスの１つで初心者向けのクラウドソーシング『novice』を例にして紹介します。

STEP1 サービスのコンセプトを決める

まずはどんなサービスを作るのか考え、そのサービスのコンセプトを決めます。僕はいつもノートに箇条書きで書き出しています。字がとてつもなく汚いのはご愛嬌。

STEP2 必要な機能を書き出す

作るサービスのコンセプトが決まったら、そのサービスに必要な機能をノートに書き出します。この時色々と必要な機能が出てくると思いますが、実際に最初に作る段階では必要最低限の機能のみ実装するようにした方が良いです。

僕はできるだけシンプルに最初は作ろうと考えてはいるのですが、開発途中であれも、これもっていう風にいろんな機能を付けてしまい、ユーザービリティが複雑なものを作ってしまいがちなので、皆さんはシンプルに、そのサービスの核となる部分のみ作ってリリースしてしまった方がいいと思います。リリースした後に、サブ的な機能はいくらでも追加していけますし、最初から完璧なものを目指すといつまでたってもサービスをリリースすることができないと思いますので。

STEP3 データベースの設計

作るサービスの具体的な機能が決まったら、次にデータベース設計を行います。ER図を書いて、パラメーター名、型、1対多などのテーブルの関係性を決めていきます。

※今現在運用しているサービスのデータベース設計は公開できないので、以前にバックエンドだけ作った段階で開発を断念したポイント交換サービスのデータベース設計を載せます。

STEP4 サービスのレイアウトを書き出す

データベース設計まで出来たら、ノートに簡単なレイアウトを書き出していきます。UI/UXを考えて、できるだけユーザーが使いやすいようシンプルなレイアウトにした方が良いと思います。僕はここが一番苦手で、全然ユーザーが使いやすいレイアウトを考えることができません。

STEP5 バックエンドのコーディング

フロントエンドから先にコーディングを行うやり方もあると思うのですが、僕は個人で全てやるので、バックエンドから先にコーディングしていきます。動作を確認するために、最低限のフロント部分をここで書く場合もありますが、基本はデザイン無視でバックエンドを書いていきます。

STEP6 Adobe XDでページのデザインを作成

バックエンドが大体完成したら、次はノートに書いたページレイアウトを参考にしながら、Adobe XDを使って１ページ毎にどんなデザインにするか考えて、書きだしていきます。Adobe XD便利ですよね。ノートにレイアウトを書いたりせず、いきなりAdobe  XDでUI/UXデザインを作成していっても良いかと思います。

また、サービスのプロトタイプを作る時にもAdobe XDは非常に活躍してくれると思います。Adobe XD内でページ遷移の機能を付けて、本当の動いているサービスみたいに見せることができますし。非エンジニアの方にもオススメのツールです。

STEP7 フロントエンドのコーディング

Adobe XDでデザインを完成させたら、そのデザインにそってフロント部分をコーディングしていきます。レスポンシブのコーディングもここでしていきます。必要ならばJavascriptでページに動きを出したりもしていきます。

STEP8 テストを書く

僕はナマケモノなので、最後にまとめてテストを書きます。『わざわざテストまで書いて作った機能をやっぱり実装するのやめる』みたいなことになったら嫌なので。個人開発だし。テストも必要最低限の部分しか書きません。核となる機能部分だけです。

STEP9 周辺ツールの実装

テストがかけたら、監視ツールやログ収集ツール等を実装していきます。僕はサーバーに大体Herokuを使っているので、アドオンとしてボタン一つで実装でき、とても楽チンです。

STEP10 リリース

最後にもう一回テストを行い、全てOKであればいよいよリリースです。お金をかけて派手に宣伝していくも良し。お金をかけずに地道に宣伝していくも良し。いろんなやり方があると思います。とりあえず一旦ここでリリースまで漕ぎ着けたので、途中で投げ出さなかった自分を褒めてあげましょう。おめでとー！！

その他リリースまでにやること

STEP1〜STEP10に記載したこと以外にも実際はやることはたくさんあると思います。コーディング毎にGitにプッシュしたり、サーバーにデプロイしたり、外部APIについて調べたり。あと、サービスの宣伝は開発と並行して行うのがオススメです。また、作りたいサービスの内容によってはプログラミング以外のこともやっていかなくてはいけないと思います。そういう面も考慮して１歩ずつ完成に向けて計画していきましょう。

さいごに

冒頭でも書きましたが、ここで紹介した手順はあくまでも僕のやり方で、皆さんがサービスの開発をするときは各々のやりやすい手順で進めていって頂ければと思います。また、サービスの規模にもよりますが、フロントエンドまである程度しっかりとしたものを作ろうと思ったらそれなりの時間がかかります。そうなると一番大切なのは技術力ではなく、サービスに対する情熱です。

いくらスキルが高いエンジニアでもサービスに対して情熱がなければ、何週間、何ヶ月とサービスの開発を続けることは難しいです。とにかく『絶対作ってやる』『このサービスでみんなを喜ばせたい！』という情熱さえあれば、案外なんとかなるケースが多いと思います。

今回紹介した開発手順が参考になるかどうか分かりませんが、少しで皆様のお役に立てれば嬉しいです。僕もサービスの開発頑張ります。