素人がWebサービス(Webアプリ)を一人で開発しリリースする方法

Pocket

最近、Webサービスを開発し、リリースをしました。
どのように考えこのWebサービスを作ったのか、つらつら書いていきます。

何を作ったのか

作ったのはこのWebサービスです。

オンラインメモ|会員登録無くブラウザで使えるwebメモ帳サービス

名称未設定

メモ帳です。昔からメモはWeb上で取りたいと思っていたんですが、なかなか使い勝手の良いものが無かったので、自分で作ってみました。

この記事でお伝えすること

Tactics

僕は文系の普通の会社員で、プログラミングやWebもそこまで詳しいわけではないです。そのため、細かい技術的なこと(言語は何で、どんな特徴やうまい使い方があるか、開発環境は何か、みたいな?)を頑張って書いてもまあ薄ら寒い内容になり、これをご覧になるプログラミング諸先輩方には痴態をさらし、技術的な情報を得ようとする方には間違った知識をお伝えするだけになります。

なので、この記事では技術的なことも少しは書きますが、むしろ僕がどのような算段でWebサービスの企画をしたのかといった考察部分。また素人・初心者でも本当にWebサービスを簡単に作る事が出来るのか、僕なりの考えを書いていきます。

なお、まだリリース直後です。成功したかどうかは追記しますが、この記事は考えのみを書いているので正しいかどうかは分かりません。すみません。




作ったサービスの技術レベル

tumblr_lmcinttzB71qe3219

オンラインメモの仕組みはめちゃ簡単なのですが、説明します。

ユーザーが作成したメモはブラウザのlocal storageに保存され、次回も同じブラウザでアクセスすると、保存されたメモを見れるというものです。それだけです。

アクセスがあるとサーバーからはhtmlを一枚吐き出すだけで、あとはブラウザ上でロジックが動きます。もろクライアントサイドのサービスなので、使った言語はJavaScriptのみです。

行程としては、ドメインを取得してレンタルサーバーを借りて、htmlやらcssやらをテキストエディタで書いて、そのサーバーにアップしただけです。

開発のために手を動かした作業時間は全部で10時間です。
・local storageを活用したロジック作成(機能開発):5時間
・スマホ・PC用デザイン作成:3時間
・集客力向上(SEO対策・各種連携):2時間

一点制作方法に関してミスったことがあるんですが、CMSでWordPressを活用した事です。
もともとキュレーションメディアをWordPressで運営していて、その時の経験から今回もWordPressを使いました。使った目的としては、
・SEO対策
・ソーシャル連携
・アナリティクス連携
・デザインにテンプレートを使う
といった点だったのですが、これだけシンプルなWebサービスであれば、ここらへんはCMS無しでやれば出来るみたいです。
さらに、WordPressは独自のJqueryとかがあり、バッティングしないように色々気を使わないといけなかったため、結果大変でした。未解決のバグもまだあります。

このあたりは実際にやってみないと分からない部分なのですが、僕はもちろん技術専門ではないため、苦労する事が多いです。
基本的な開発の流れやツールなどは、プロに教わりながら身につけられるような環境が欲しいです。ここは僕の今の大きなテーマです。




開発のモチベーション

Engineering-construction-wallpaper2

僕は以前から、ネットにつないで簡単に使えるメモ帳が欲しいと思っていました。過去にはevernoteを使っていたのですが、個人的には手軽に使うには少し複雑すぎるため、結局使わなくなってしまいました。もっとサイトにアクセスしたらその瞬間から即メモが取れるような、シンプルなWebアプリは無いかといくつか探したんですがしっくりくるやつが無く、自分で作ろうと思いました。

よくなぜそのサービスを立ち上げるか、といったモチベーションの重要性がブログ等で書かれていますが、大体結論は『そのサービスが社会貢献できると思えたら作れ』みたいにかいてあります。僕もそれは同意です。

トリイケンゴさんのブログで、サービス(商品)に対する自信が無いと、それはうまくいかないという内容がありました。

それは、「絶対にこの商品を広めるべきだ」という情熱とか自信とかが無いということなんです。

そこが一番の問題なんですよ。

さらにヤバイのは、ほとんどの人がその気持ちに気付いていながら、テクニック不足に問題をすり替えてるということです。

だから、テクニックを覚えてもあまり使いこなせない。その結果ずーーーっと悩むわけです。もしくは、目先だけうまくいっても、ある程度までいくとまた同じような悩みにぶつかります。

ビジネスの根本には、必ず「商品価値への確信」が無くてはいけません。

なるほど。これは核心的です。

こういったこともあり、僕も作ろうとしているサービスが社会的に意義がある、と思う事はとても重要なのだと思います。

アクセス数予想の方法

Calculator-and-paperwork

どんなWebサービスを作りたいか決まったら、そのサービスが果たしてニーズがあるのか調べました。
調べる内容は、キーワードの検索数と競合サイトのPV数です。

・キーワードの検索数:あまりに少なかったら、ニーズ無しと判断する

キーワードプランナー

・競合サービスのPV:競合サービスより良いものにすれば、PVは超せる可能性があると判断する

SimilarWeb

これらを使い、どのくらいのトラフィックが期待できるか、予想しました。
オンラインメモの場合、「オンラインメモ」というワードの検索数/月が400程度、競合サイトのユーザー数/月が30000人程度でした。
ユーザー30000人に月3回づつ使って頂くことで、月間トータル90000PVを超える事を目標としています。




サービス名のつけ方

SEO Search Engine Optimization, Ranking algorithm

SEO対策は素人に毛が生えた程度なんですが、検索のキーワードで入ってきたら、そのイメージに一番近い名前のサービスだとSEOも強いだろうという単純な考えで、サービス名はそのまま『オンラインメモ』としました。

結果、リリースして一週間程度ですが、『オンラインメモ』で検索すると4番目に表示されるようになりました。
この方法はアリだと思います。

ただ通常は、『どこでもメモ』みたいに自分好みのタイトルを付けると思います。その際はせめて、titleタグは『オンラインメモサービス”どこでもメモ”』のように、検索キーワードはなるべく前に持ってくる方が、SEOに強くなると思います。

シンプルで使いやすくする

Simple

食べ物とか生活用品と違い、Webサービスは無くても全然困らない類いのサービスです。
そんな中でユーザーに使ってもらうためには、いかに簡単に使えるか、使ってて気持ちいいか、迷わないか、といったUXの部分が非常に大事です。
(複雑にすると実装が出来ないということもあり)なるべくシンプルにしました。

デザインはキレイにする

daigaku

『シンプルで使いやすくする』と同じ目的で、デザインも奇麗にするように心がけました。
今回参考にしたのは、大学ノートの神、ツバメノートです。
デザインの奇麗さもそうですが、普段慣れ親しんだノートのデザインがWebにも踏襲されていることで、違和感無く使ってもらえるのではないか、と考えました。




本当に初心者でも作れるのか

the-expert-in-anything-was-once-a-beginner

実際に作ってみて思うのは、『すげー大変だけど、やれば出来る』ということです。

僕がどのくらい素人なのか、に関しては、
・html css:
  半年くらいやってきていてまあ分かる
・プログラミング:
  とても昔、Javaを半年くらいやっていて参考書とか見れば基本は思い出せる
・サーバー、クライアント、SEO、等といったいわゆるWebの知識:
  都度必要なものは調べながら進めている
くらいで、素人に毛が生えたレベルです。

ブログとかHPとか、htmlの知識だけで完結するものに関しては少しのキャッチアップで出来るとは思います。
しかし、プログラミング的な要素が入ってくると、とたんに難しくなる印象があります。

今回はとても簡単なロジックで、Webで検索して見つかったコードを元に開発が出来たのですが、少しロジックを変えたり応用しようとすると、やはり内容を理解する必要があります。

内容を理解するには、全く知識が無い場合、基礎的な所から勉強する必要がありますが、色々なブログを読んでいるとどの素人の方でも本や学習サイトで1〜2ヶ月程は勉強する期間を持っているようです。

幸い数年前と違い、分かりやすく教えてくれるサイトなどはかなりあります。
僕ももっと勉強しつつ、今後も手探りで色々作っていこうと思います。

リリースを終えて、普及へ

fireworks2

リリースはしましたが、目標は月間90000PVです。

そのためのWebサービスの宣伝は、各種サイトへの登録や申請、草の根運動など出来る限り行っています。
どの方法が宣伝効果が高いのかは次の記事で書こうと思います。

Webサービスの効果的な宣伝方法は?画期的な方法にたどり着いた話

Pocket

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>