[必見]Webサービスの作り方を7ステップで解説[誰でもできる]

こんにちは!好奇心おばけのかわそん (@KKohey4)です!

先日、このようなツイートをしました。

新しいサービスを作ろうとした時1.既存サービスを調査 2.その機能をざっくり洗い出し 3.コア機能を判断 4.オリジナルを加える5.手順を計画 6.機能的なタスクの分解 7.実装開始 このフローを意識しつつチームで共有すると、かなりスムーズに共同開発できる。闇雲に進めるのはNG

上記を深掘りします。

本記事の内容

  • Webサービスの作り方
  • 大事なのは「リリースした後」

この記事を書いている僕は、年間50人以上の中高生にプログラミングを教えています。

オリジナルサービスの開発もサポート。

今回はその中で大切にしている方法を、全て公開しますね。

圧倒的に効果アリなので、
3分だけ、お付き合いを(`・ω・´)ゞ

[必見]Webサービスの作り方を7ステップで解説[誰でもできる]

結論を繰り返すと、下記の通り。

  1. 既存サービスを調査
  2. その機能をざっくり洗い出し
  3. コア機能を判断
  4. オリジナルを加える
  5. 手順を計画
  6. 機能的なタスクの分解
  7. 実装開始

上記の通り。

「転職」で検索した場合を例にしつつ、
それぞれサクッと説明していきます。

⓪使う技術を選ぶ

いきなり、スミマセン。

上記のツイートの内容に入る前に、使う技術を選ぶ必要があります。

バックエンドは?
フロントエンドは?
デプロイ方法は?

こんな感じのことですね。

そして、朗報ですが、この技術に関しては、[初心者向け]Webプログラミングを始める前の基礎知識[必見]で解説しています。

ここから、スタートです。

①既存サービスを調査する

敵を知ります。

まあ、作ろうと思ってたサービスと、全く同じものがあったら、ツライですし。

「転職」ってググると、1位に「マイナビ転職」がヒットしてきます。

まずは、ここを、ざっくりと調査します。

なぜ、検索上位のサービスを調べるのか。
それは「検索者の意図」を汲んでいる可能性が高いからです。
ニーズを満たしています。

②その機能をざっくり洗い出し

サービスの機能を洗い出します。
この段階では、とりあえずたくさん、調べておけばOKです。

あとで、コア機能を判定すればいいだけですので。

転職サービスにある機能。

希望年収、実績、資格、年齢、、、ぜんぶ、メモしておきましょう。

「そんなの、、、キリがないじゃん」

と思うかもですが、完璧を目指す必要はありません。

というか、ムリです。
ゴリゴリエンジニアたちが、共同で開発してるものなので、ふかーい機能がいっぱいです。

ざっくりでいいです、記録を。

③コア機能を判断


ここが、重要です。
洗い出した機能の中から、「コアになる機能」を選び出します。

細かい機能がたくさんある中で、どれが中心なのか。

これがずれると、結局、何のサービスなのか、わからなくなりますので。

「転職」したいのに、希望業種とかが選べなかったら、、、
企業とやりとりできなかったら、、、

意味ないですよね。

見極めましょう。(`・ω・´)ゞ

④オリジナル要素を加える

選んだコア機能に対して、オリジナル要素を加えます。

ここが、自分が作るサービスの「強み、魅力」になりますので、大切にすべきですね。

いろんな業界に転職できるのではなく、「バー」に特化したものを作るとか。

得意なカクテルとか、企業が知りたい情報が、変わってきます。

自分の「得意、好き」と需要を掛け算して、サービスの概要を決める段階です。
難しいですが、楽しいですよ。

⑤手順を計画


サービスの概要を決めることができました。

それを、どういう順番で実装していくか、計画を立てます。

とりあえず、画面一覧はいるよね。
で、そのあと、ルーティングをふって、
データベースを設計して、、、

みたいに、これもざっくりでいいので、「流れ」を決めます。

ぶっちゃけ、この流れを決めてるかどうかで、かなり効率は変わってきます。

全体像がわかってた方が、迷いなく進められますよ。(`・ω・´)ゞ

⑥機能的なタスクを分解

いよいよ、実際に実装していくタスクを決めていきます。

この日に、ルーティングをふって、送信するデータを決めて、この部分のDBを設計して、ログイン機能を実装して、、、

こんな感じ。

できれば1、2時間くらいの塊に分けられると、最高です。

こうやってタスクを区切っていく中で、

「あれ? ここの部分の仕様、考えが甘かったな」

っていうことに気づけます。

重要なのは、ごまかしのないように考えるっていうこと。
ごまかしても、のちのち、トラブルの元になるだけですので。

⑦実装開始

区切ったタスクを、実装していきます。

楽しんでいきましょう。
ここが、一番やりがいあるはず。

エラーとかに悩んだら、こちらをどうぞ。

✔️参考
プログラミングのエラー解決方法を5つ紹介[初心者~中級者向け]

悲報:計画通りに、Webサービスは作れません。

ちょっと、悲報です。
せっかく立てた計画ですが、この通りに進むとは考えない方がいいです。

理由は大きく3つ。

  • 変なところで、エラーが出る
  • 設計ミスに気づく
  • 他の予定とガッチャンコ

上記の通り。

重要な部分なので、ちょっと説明しますね。

人は完璧じゃありません[当たり前]

当たり前すぎる話ですが、人は完璧じゃありません。

ですので、完璧な計画を立てることも、不可能です。

ちょっと、僕の例で申し訳ないのですが、実際にあった話を紹介します。

友達
「かわそん、〇〇円で、△△日までに、これ作ってくれない?」
「できるよ〜、また、進捗は報告するね!」

で、紹介した流れに沿って、開発をはじめました。

「おし!そろそろ、実装始めよかな!」

と思って、Railsプロジェクトを立ち上げたら、、、

謎のエラーが3つ。
全て、Gemの依存関係の問題でした。

1週間前まで、問題なく動いてました。
やったのは、、OSのアップデート。

という訳で、情報を集めつつ、解決。

1時間で、Railsプロジェクトを作って、設定を終えるはずだったのに、1日かかりました。

こういうこと、普通に起こります。

ですので、大事なのは、

「予想外は予想通り」

っていうマインドです。

余裕を多めにとっておけば、焦りは少なくなりますよ。

Webサービスは「作ったあと」が大切です


さてさて、無事、Webサービスを作ることができました。

「やっと作れた、、!大満足ですわ」

こうやって感じる人も多いはず。

ですが、間違いなく大事なのは、リリースした後です。

理由は

  • ユーザからのフィードバックがもらえる
  • 枝葉の機能をつけないといけない

上記の通り。

予想してなかったところにバグがあったり、
こういう機能が欲しい、って連絡が届いたり。

ユーザから、指摘がもらえることがあります。

やっぱ、サービスって、使ってもらってなんぼの世界です。
こういう声を取り入れて初めて、「ユーザ目線」なサービスに仕上げていくことができます。

あと、今まで作ってきたのは、コア機能です。

「あったらいいな」レベルの機能は、実装してこなかったはず。

ですので、この段階で、取り組み始めるべきです。

幹だけのサービスより、緑いっぱいの木の方が、魅力的です。
こういう風に、育てていきます。

最後に:楽しみつつ、Webサービスを作りましょう。

記事のポイントは、下記です。

  • Web開発は7、8ステップです
  • 「ざっくり→細かく」っていう流れ
  • 完璧は不可能
  • 「予想外が予想通り」っていうマインドを
  • リリースしたあとが、大切です。

こんな感じですね。

この記事を読みつつ、サービスを開発するクセをつければ、かなり効率上がるのではないかなと。

「なんとなく始める」

こうやって、沼にハマるのを、かなり減らせるはず。

楽しみつつ、作っていきましょう。
プログラミングの、醍醐味ですよ。(`・ω・´)ゞ

では、以上です。
この記事が、少しでも参考になったなら、幸いです。

✔️参考記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です