プログラミング

【完全保存版】webサービスを作成する手順をまとめました

プログラミング初心者「webサービス作りたいけど、何から手をつければ良いかわからない…」

こんな疑問に答えます。

こんにちは、りくです。

ぼくは、上記tweetのようにLaravelを使ってサービスを作ったり、週3フリーランスエンジニアとして働いたりしています。

でも、6ヵ月前までは自分のプロダクトすら作ったことがない初心者エンジニアでした。こういった背景から、webサービスを作るために具体的に、どのようなステップを踏まえれば良いかをサクッと解説します。

【結論】
ネタバレしますと、webサービスを作成する手順は、以下の通りです。

  • サービスのコンセプト、サービス名決める
  • 必要な機能とurlを洗い出す
  • 手書きで簡単なモックアップを作成する
  • DB構造を考える
  • 開発全体の期間を決める
  • 開発する

webサービス作りたいけど、「何から手をつければ良いかわからない…」というかたは、ぜひこの記事を読んでください。

webサービスのコンセプト、サービス名決める

サービスのコンセプト一言で説明できるようにしましょう

なぜなら、コンセプトを決めずに開発すると迷走するから。

定まったコンセプトがあれば、UIや機能で悩んだ時、そのコンセプトにしたがって、開発を進めることができますよね?

しかしコンセプトが曖昧なまま開発を進めると、後から

  • この機能を追加しようかな…
  •  いやいや、やっぱ違和感がある…元に戻そう..

など迷走し、開発効率が落ちてしまいます

コンセプトなんて後から作りがながら決めればいいやー、と後回しにしていると痛い目にあいますよ。

疑問:どうやってコンセプトを決めれば良いの?

webサービスのコンセプトを決める!!、と聞くと難しく聞こえるかもですが、そんなことないですよ。

日々の自分の生活で困っていることありますよね?その課題を言葉にし、それを解決するにはどうすれば良いか考え、コンセプトまで落とし込んでしまえば良いのです。

以下でぼくが以前作った、Eco Hackというサービスを例にして解説します。

ぼくの例

ぼくがEco Hackを作ったきっかけ

大学のシラバスを使って授業を調べたことがもちろんあると思いますが、ぶっちゃけメチャクチャ使いにくい…。

具体的には、

  • 既存の日大経済のシラバスはスマホ対応していないので、見にくい
  • 実際に授業を受けた人の声が聞きたい
  • すでに似たような口コミサイトはありますが、全授業を網羅しているわけではないし、使いにくい

これらの課題を解決するため、「日大経済生の大学生活をサポートする」というコンセプトにしました。

ドメインを取得する

コンセプトが決まったら、サービス名も決め、ドメインもお名前.comなどで取得しましょう。

必要な機能を洗い出す

次にサービスに必要な機能を洗い出し、それぞれの機能にどのURLをあてるか考えましょう。

これをやることで、サービスのイメージがつきますし、必要な技術や実装に何日かかるかわかります。

雑ですが、Eco Hackを考えていた時のメモがあったので公開します。こんな感じです

  • /(10日)
    新規投稿一覧(reviewがあるかないか)
    人気授業一覧 adminで設定する
    検索機能 /search input 授業名 授業内容 selectで複数の検索条件でも検索可能に
    年度 学部 学期 曜日 時限 checkbox レビューがある授業 必修科目かどうか
  • /lesson/id(5日)
    お気に入り登録 review amazon fb line twitter shares
    この授業を履修した人は、こちらの授業も履修しています
    あなたが閲覧したシラバス
  • login/logout fb twitter login mail.paaaword パスワードリセット機能(5日)
  • /signup fb twitter mail.paaaword mail name email password
  • /user /id 1(10日)
    /posts reviewしたlesson一覧
    /edit 1 /password
    /profile edit => name icon(default) email 説明文
    /delete
  • /index 全授業の一覧(10日)
  • /about
  • /help
  • /terms
  • /privacy
  • /contactmytwitter
  • /requests
  • 問い合わせ
  • /admin ランキングlesson設定 sidebar やcontent途中の広告設定(10日)

    「完璧に全て網羅しよう!!」と思うと疲れるので出来るだけでokです

    注意点

    サービスを考えるとあれもこれもと、機能が思いつくと思いますが、、

    大事なのはいきなり全て実装しようと思わず「出来る限りシンプル」「必要最低限」にすることです。

    先ほど決めたサービスのコンセプトを満たすための最低限必要な機能を中心にして、それ以外の機能は流行ってから実装すればokです。

    簡単なモックアップを作成する

    モックアップを作りましょう。

    モックアップとは、画面のデザインの試作品みたいな感じです。

    モックアップを作って、見た目としてどんなwebサービスになるか、より具体的にサービスのイメージができます。

    手書きでも、prottのようなツールを使ってもどちらでもOKです。

    具体例

    ぼくが途中まで作ってボツになったpkLinksというサービスがあるのですが、そのモックアップを公開します。

    ぜひ参考にしてください。

    pkLinksのモックアップ 全10ページ(prott)

    注意点

    全く完成形がイメージ出来ていないのに作り出すのはNGです。

    「とりあえずバックエンドを先に作って、UIは後で合わせれば良いや~」という人が居ますが、個人開発の場合それはNGです

    完成形が見えていないとページごとのUIに統一感がなくなり結果として、サービス使用時に「違和感」が出てしまいます

    サービスを使用時に、ユーザーに違和感を感じさせてはいけません

    個人サービスのUIは「最低限不快にならないレベル」ならOKだと思いますが、完成形がイメージできないのに、勢いだけで作ると、「素人感」が出てしまいます。

    DB構造を決める

    データベースのテーブルを必要な機能をもとに考えましょう

    これをやることで無駄なコードが減ります

    またまた雑ですが、Eco Hackを考えていた時のメモがあったので公開します。こんな感じです

    メモを見る(google document)

    開発全体の期間を決める

    機能ごとに大体の期限を決めて、開発全体の大まかな期限を算出し決めましょう。

    期限がないと中だるみするからです。

    webサービスの開発を始める!

    いよいよ開発開始です!

    が、まず最初にgithubのリポジトリ作成しましょう。

    初心者にありがちなのがプロダクト完成してから、gitにアップするというもの。

    これでは、コードを管理できません

    なので、新たな機能を作成するごとにブランチを作って、コードを管理しましょう。

    まとめ

    ここまでで、「webサービスを作るのに下準備がめっちゃ必要なんだなぁ」ということがわかっていただけたと思います。

    そうです! webサービス開発は下準備が大切です!!

    モチベと勢いだけで開発すると、後々痛い目似合いますし、結果として開発効率が落ちます。

    あわせて読みたい
    大学生にオススメなプログラミングスクールTOP3【現役エンジニアが語る】 「プログラミングスクールに行きたいけど、たくさんあってどれが良いのかよく分からない‥」 こんな疑問に答えます。 ...
    ABOUT ME
    リク@学生海外エンジニア
    バンコクで働く大学生エンジニア兼講師。海外経験を積むため休学して元LINEの天才エンジニアに弟子入りしタイに移住。3ヶ月でWEBサービスを開発。その経験からプログラミング学習の秘訣を書きます。
    フリーランスエンジニアになって自由に生きよう

    【大学生へ】

    「 毎日満員電車に乗って、クタクタになるまで働いても、給料はスズメの涙… 」

    あなたがこのまま何も努力をしなかった場合、必ず上記のように、ツマラナイ毎日を過ごすことになります。ところが、今からでもこんな状況から脱出する方法があります。

    それが、フリーランスエンジニアになることです。ぼくは文系大学生からフリーランスエンジニアになりましたが、ぶっちゃけ最高です。

    フリーランスエンジニアになって自由に生きたいという方は、ぼくが紹介している記事を読んでみてください。

    大学生がフリーランスエンジニアとして働いてみた感想【最高】