ホーム

Webアプリを0から開発する方法 | 早く、安く

どうも、りょすけです。

 

本日は、Webアプリを0から開発する方法に関して記事を書こうと思います。

 

つくづく思うのですが、

 

日本のシステム屋さんは、新規Webサービス開発が上手くないと思います。

 

お金とリソースが、山のようにあるなら良いのです。

 

湯水のようにお金と時間を捧げれば良いのです。

 

でも、うちらはお金もないし、人もいないし、

 

他にも仕事があってBUSYなのです。

 

そのような状況下で、どういう風に効率的に、上手く、良い感じに、安上がりで、

 

新規Web開発を進めていけばいいのか。

 

やり方を教えます。

 

私は、これまで5年ほどコードを書いていまして、

 

21歳の頃に初めて新規Webサービスを開発してから、

 

作っては潰し ... 作っては潰し ...  を繰り返してきました。

 

長きにわたる個人開発の連続の中で、蓄積してきたノウハウを、

 

ここで発表するという企画になっています。

 

この記事に少しでも信頼性を担保するために、

 

実際に自分が開発しているサービスを紹介させてもらいます。

 

まず、Meee!(みぃ)というスキルシェアサービスや、

 

Language Exchange というコミュニケーションサービスを、

 

開発、運営をしています。

 

 

私が、今から解説する方法を忠実に実行していただければ、

 

おそらく、新規Web開発のコストが1/5くらいにはなると思う。

 

必要不可欠なポイントだけ抑え、その他の無駄は削ぎ落とします。

 

多少、横暴に見えるかもしれませんが、少なくとも個人開発者とか、

 

リソースと資金が少ない零細企業にはおすすめの方法です。

 

では、行ってみよう٩( 'ω' )و

 

想定読者

ちなみに、この説明は、上級者向けです。ある程度プログラミングができて、そろそろ自分でサービスを創造してみようかな?って思えるくらいの人が対象です。フロント、バックエンド、インフラへのデプロイ経験もあることが望ましい。理想のラインは、Railsでの開発方法が分かる人ですかね。

 

まず初めに、CSSを捨てましょう

 

Webサービスを作り始める最初のステップは、

 

ブラウザ上に描かれるwebデザインや、画面遷移図を設計することなのですが、

 

はっきり言って、僕はこれは不必要だと思います。

 

デザインのモックを作り始めてしまうというのは、多くの人が最初に陥る過ちの一つです。

 

ちょっと想像して欲しいのですが、

 

フォトショや、モックアップ作成ツールで事細かくデザインを作ってしまって、

 

それを実装するのは誰なんでしょうか?

 

CSSって結構奥が深くて、スキルの高いCSSのエンジニアさんを雇うと、

 

それだけでコストが高くなってしまいます。

 

だから、デザインを事細かく決めるのはやめましょう。

 

自分が開発しているサービスもCSSをほとんど書いてないです。

 

Meee!に関してはReactのmaterial-uiのテンプレを流用してコピペしただけだし、

 

Language Exchangeに関してはCSSとHTMLを買ってRailsに埋め込んでいます。

 

*CSSとHTMLを買うときに、フルスタックのフレームワークで開発をするのならば、移植しやすいディレクトリのツリー構造になっているか確認してください。

 

シンプルにデザインの根幹はサボる、既に完成されている物を使う。細かい部分は後にする。

 

これが大切です。

 

それで、リリース後にビジネス上の理由から追加したい画面やウィジットなどを自分で書けばいい。

 

もしくは、そこだけ外注でピンポイントで雇えばいいです。

 

そうすれば安いです。

 

例えば、僕の話しをすると、Language Exchangeのトップの部分ですね。

 

 

この黄色い丸で囲まれてる部分のみ追加で自分でCSSを書きました。

 

ただ、書いたって言ってもコピペです。

 

CodepenというCSSのソースを保管できるサイトで、

 

レスポンシブデザインのボックスを検索して埋め込んだだけです。

 

 

こういう風に、

 

お金がないのなら、デザインはサボるのがとても大事。

 

今の時代、

 

デザインに金をかけなくてもレスポンシブで綺麗なwebは作れます。

 

UIやUXにこだわるのは、サービスが拡大してからでも遅くない。

 

俺たちに、使える金は少ないのだから!!

 

 

プログラミング言語を選ぶ

 

この記事を読む人が、個人開発者かどうかは分かりませんが、

 

個人開発でサービスを作る場合には、このセクションは特に大切です。

 

何故なら、個人開発の場合は、

 

本業とは別にモチベーション維持をしないといけないからです。

 

なので、開発言語や環境を選ぶときは、

 

今自分が興味のある言語を使うこと。

 

が大切だと思う。

 

でも、これには落とし穴もあって、難しい技術を使いすぎるとトラブルを自己解決できないこともあるかもしれない。

 

例えば、私の経験をお話しすると、もう潰してしまったサービスなのですが、

 

一度Go言語を使ってweb開発を作ったことがあります。

 

Goは僕にとっては色々難しく、型や、ポインタ、メモリリークなどかなりしんどかった。

 

外部のライブラリも少なく、Railsで作れば些細なことも長い工数がかかったり、

 

気軽にherokuなどのサーバーにあげられなかったり、

 

ec2でインフラ自作したら時折サーバーが落ちて辛いとか、

 

インフラのエンジニア別で必要になるとか、

 

そういうことが起こってきます。

 

だから、Web技術に馴染みの深い言語を使うことも大切だよ。

 

今、Meee!ではReactのNodeで書いてるんだけど、

 

これらはWebには非常に相性が良いから保守が楽チンです。

 

Language ExchangeはRailsだから、まあ言わずもがな。

 

Web開発はRailsの御家芸だし、王道だし、gemが沢山あるし、

 

Herokuもお手軽便利でクオリティも高い。

 

次、『これがないとサービスとして成り立たない』コードのみ書く

 

例えば、

 

求人サイトを作ることを例に見てみましょう。

 

DODAという転職のサイトがありますが、

 

このサイトのトップページをみてみると、

 

省いてもいい機能が盛り沢山です。

 

 

この、黄色い部分で囲ったところ、

 

No need

求人を検索するフィールド

職種をラジオボタンで選ぶフィールド

勤務地

年収

 

一番最初にサービスの開発をするとき、

 

例えばこんなに沢山のこのフィールドはいらないよね?って俺なら思う、地域と職種だけでいいと思う。

 

むしろ、皆んながやりたいことがあるとも限らないし、地域だけで選ばせてもいいくらいだと思う。

 

あとは、

 

右下にある四角いボタン、これを押すと、チャットが出てくる。

 

 

こういうのも、全然いらない。

 

さらにさらに、

 

 

 

こういう多すぎる条件も必要なのか?

 

んー、まあこのように、

 

今、自分が述べたことが、UX的により正しいのかは置いておいて、重要なのは最低限の機能のみ作る努力することです。

 

求人サイトの場合は、

 

結局『働きたい人』と『人材が欲しい人』をマッチングするだけで、

 

ここさへ整えばぶっちゃけいいわけです。

 

ぶっちゃけ求人が並んでて応募できればユーザーはそれで良いはず。

 

ユーザーが頭を使わずに、ボケーっとしながら操作できるのは価値です。

 

だからDODAのように文字が沢山あるサイトはどうなのかな?

 

とも思ったりする。

 

最低限の機能だけシンプルに作る。それ以外は全て後回し!

 

 

じゃあ、実際にどこまでシンプルにすればいいのか?

 

これは、僕のMeee!のサービスをみてもらえればいい。

 

 

 

これだけです。

 

これ、業界大手のココナラと比べると簡潔さが抜群に分かるでしょ。

 

 

最初は、とことんシンプルでいいと思うんだ、俺は。

 

 

実際に、今のMeee!の現在のUIでも商品が売れたし、

 

逆にユーザーが迷うこともなかったです。

 

大切なのはサービスへ誘導するまでのマーケティングの話し。

 

コードの質は後回し、テストも書かなくていい!とにかく動かせ!とにかく書け

 

ちょっと本当ごめんなさい。

 

エンジニアとしてあるまじき行為です。

 

わかってるんです。

 

でも、僕たちには通常時間がないのです。

 

それに、ソフトウェアというのはリリース後も改善できるのです。

 

汚く書けと言ってるのではない。コードを綺麗に簡潔にすることに多大な努力をするのは後回しでいい!

 

って言ってるだけなんです。

 

僕の経験上の話しですけども、大概高速でweb開発したとして、

 

4ヶ月でエンドユーザーが使えるものはできると思う。

 

それで、もうリリースしていい。その後、4ヶ月かけて少しずつマーケティングして、

 

いらない部分、必要な部分を確かめながら、その間にリファクタして、テスト書いてください。

 

うちらは、メルカリみたいに資金調達してサービス出して巨大に一気にCMだ!みたいなのとは違う。

 

小さく出して、少しずつ改善して、長期的にRPGみたいに育てながら、

 

チャンスが来たら大々的に宣伝して、

 

その頃にはユーザーの増大にも耐えられる強いソフトウェアになってればいい。

 

この記事は、そもそもそういう風な目的を持つ人へ書いてます。個人開発でリスクを今は取りたくない人とか、零細企業でリスクを今は取りたくない法人の人とか。

 

以上、まとめ

 

ちょっと、今忙しくてなぐり書きで記事を書いたので、

 

後々修正していくかもだけど、

 

まとめるとこんな感じです。

 

ポイント

・デザインはスクラッチで書かない。買うか、ライブラリで済ませる。

・プログラミング言語は自分が興味がある物を使う(大抵新しい技術になるはず)その上、webに親和性高いものであればベター

・無駄な機能は作らない、とことんシンプルでいい、最小の機能だけあればいい、むしろ、新規ユーザーは迷わなくて親切

・コードの質は後回し、テストも書かなくていい!とにかく動かせ!とにかく書け

 

以上です!

 

ありがとうございました。

 

Pocket
LinkedIn にシェア



新規webサービスの開発の依頼ならoffテク⭐️

低コストで、Reactなどモダン言語での新規webサービス開発を承ります

-ホーム

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.