1.1　1か月目 サービス設計と基礎知識の学習

　きっかけは、お笑いライブの検索サイト「Walive!」がとつぜん閉鎖したことでした。お笑いファンに愛されているサービスが無くなってしまうのはもったいない。そう思った私は、サイトを引き継ぐためにサービス設計とプログラミングの学習を始めました。

アイデア出し

　１．自分が困っていることをベースに考える（自分が欲しいサービスを作りたい）

　２．自分が今できることをベースに考える（技術的な学びを実践することが目的）

　３．他人が困っていることをベースに考える（稼ぎたい、ユーザーの反応を見たい）

　まずは1番がおすすめです。2番や3番だと、途中で「本当にみんなサービスを使ってくれるだろうか」と不安になります。自分が使うサービスのほうがモチベーションを維持しやすいです。

サービス内容を決める

　サービス内容は「ひとことで言える」ことが大事です。機能が多すぎると、結局何のためのサービスか分からなくなります。開発の負担も増えます。まずはひとつの機能に絞りましょう。

×「お笑いライブを検索できて、芸人のプロフィールを見られて、チケットを融通できるサービス」
  ○「お笑いライブを横断検索できるサービス」

サービス名を決めて、ドメインを取得する

　ドメインを取るためにサービス名を考えます。ポイントは下記の5つです。

　・1. サービス内容を端的に言う：サービス内容そのものをサービス名にすれば、わかりやすさはピカイチです（例：チケットトレード→チケトレ、小説を書く・読む→カクヨム）。

　・2. 英単語を組み合わせる：サービスで重要となる要素を洗い出し、語感がしっくりくるものを選びます。お笑いライブ検索「ワラリー」という名前は、wara（わらい）+rally（集まり） という英単語の組み合わせから決めました。

　・3. 長いサービス名にしない：サービス名が長いとユーザーは覚えられません。略称でつけると良いでしょう（例：careertrek → キャリトレ）。

　・4. 日本語の方が親しみやすい：難しすぎる英語だと覚えられません。読めなかったりもします。カタカナでつけてしまいましょう。

　・5. ユニークにする：名称が被るとエゴサーチで反響をチェックしづらくなります。

サービスで使う技術を決める

　初心者なら、まずはRubyやPHP、HTML/CSSとjQueryを学びましょう。フレームワークは情報を探しやすいRuby on RailsかLaravelがおすすめです。

モデル（テーブル）設計

　「SQL designer」というWebブラウザーアプリを使うと、ER図を簡単に作成できます。

　テーブル同士の関係は親と子までにすると良いでしょう。初心者向けの教材だと親と孫、ひ孫のデータの扱い方まで解説している記事が少なく、つまづくポイントとなります。

　「実際に運用可能か」ということも考慮ポイントとなります。たとえばワラリー！では、お笑いライブのチケット予約先を複数記録するためにふたつのモデルを作りました。

　・Eventモデル（お笑いライブの情報を記録する親モデル）

　・EventLinkモデル（お笑いライブのイベントの予約URLを記録する子モデル）

　しかし今考えると、最初はEventモデルに「URL」というカラムをひとつ作成すれば十分だったと思っています。手入力でわざわざ複数の予約サイトを登録するのは手間なのです。扱える情報を制限する方が、使いやすくなるという教訓を得ました。

画面遷移の設計

　ユーザーがどのような順番でページにアクセスするかを考えます。私は「Draw.io」を使って画面遷移図を作成しましたが、紙でも十分だと思います。

サービスのデザインを決める

　印象をよくするために、今風のきれいなデザインにするのは大事です。一方でデザインに凝ると時間がかかるのも事実です。なるべくカンタンにイケてる画面を作りましょう。

　・デザインは紙に書く：ツールはたくさんありますが、紙とペンで十分です。初心者はデザインツールの操作よりも開発技術の学習を重視しましょう。

　・1カラムにする：ワラリー！は8割がスマホからの閲覧です。PCとスマホで表示を変えるのは大変なので1カラムにしました。大手サービスの構造を真似すると良い感じに見えます。

　・イメージカラーを決める：ワラリー！のイメージカラーはピンクです。旧サイトのイメージカラーが水色だったため、「旧サイトと差別化をはかりたい」「目立ちたい」「わくわくする感じにしたい」という意図から、寒色ではなく暖色を用いました。ヘッダやサイト内のボタンなど、アクセントカラーとして使用しています。

1.2　2か月目 エラーで行き詰まってもくもく会に参加しまくる

機能を決める

　サービスを作り始めるときは、「あんなこといいな、できたらいいな」とやりたいことがどんどん浮かんできます。まずは全部書き出しましょう！思いつくものを羅列できたら、難易度や優先度を振り分け、リリースまでに開発する機能を絞ります。

コードを書く

　書かなければサービスは動きません！いよいよ書くべし！書くべし！！です！！！

モチベーションを維持するコツ

　わからないことや解決できないエラーにつまづきます。そんなときは「もくもく会」などのエンジニアが集まるイベントに行って相談しましょう！「自分のサービスを作っています」と言うと、快く相談にのってもらえます。オンラインのQ&AサービスやSNSで質問することもできますが、初心者だとエラー内容を適切に質問するのは難しく、コミュニケーションに疲弊します。慣れないうちは対面での質問をおすすめします。

サービスを完成させるコツ

ちょっとずつでいいので開発し続ける

　期間が空くと「どこまでやったっけ？」と状況を忘れてしまいます。なるべく毎日ちょっとずつ開発しましょう。また「やりたいことリスト」でタスクを忘れないようにします。進捗が遅すぎて「完成するのか？」と不安になるかもしれませんが、続けていればいつかは完成します。

タスクは細かく分解する

　GitHubのIssue機能を使って管理しましょう。「ユーザーの登録機能」と一口にいっても「メール認証」「SNSログイン（Twitter、Instagram、Facebook、Google）」「退会した場合、何週間まで復旧できるようにするか」など、細かい仕様はサービスによって異なります。メソッド単位までタスクを分解することで、進捗を可視化し、モチベーションを上げることができます。

ツールや言語はあれこれ手を出しすぎない

　初心者の場合、ただでさえ技術を学ぶのが大変です。なるべく絞りましょう。ワラリー！は、下記の言語で構成されています。

　・マークアップ言語（HTML/CSS/SCSS）

　・バックエンドの開発言語（Ruby/Ruby on Rails）

　・フロントエンドの開発言語（JavaScript/jQuery）

　新しく覚えて使用したツールは下記です。

　・Homebrew：Macのパッケージ管理ツール。ツールのインストールに使います。

　・Visual Studio Code：IDE（統合開発環境）兼エディター。ソースを書きつつターミナルでテストできるのが利点。以前はSublime Textの無料版を使いましたが、ポップアップ広告で集中しづらかったです。VS Codeは無料で、広告も出ません。

　・PG Commander：PostgreSQLを操作するGUIツール。RailsアプリをHerokuで使うには、初期設定のSQlite3からデータベースを変更する必要があります。

　・GitHub：ソースコード管理サービス。様々なサービスと連携できる。

　・Slack：コミュニケーションツール。もくもく会やエンジニアコミュニティに所属すると、質問・相談を行えます。

　・Heroku：カンタンにRailsのサービスを公開できます。ただ、無料枠はすぐに制限がかかってしまいます。ワラリー！では、hobby dev（月額$7、24時間稼働）とPostgres Premium（月額$9、1000万レコードまで使用可能）に課金しています。

　学習を諦めたけど、結果としてなんとかなったフレームワークやツールもあります。

　・AngularJS：JavaScriptのフレームワーク。「このカレンダーのデザインいいな」と思った技術がAngularでしたが、jQueryで代替しました。

　・Bootstrap：とても有名なCSSのフレームワーク。Bootstrapのテンプレートを使いたかったのですが、しっくりくるデザインがなく、結局CSSを手書きしました。

　・Bourbon：CSSのフレームワーク。ライブラリーを導入した際に依存関係があったらしくエラーが出て、結局そのライブラリーごと使うのを止めました。

　・Masonry：タイル状に可変で記事を配置できるRailsのGem。パソコンでは3カラムのタイル状レイアウト、スマホでは1カラムのレイアウトにしたかったのですが、力尽きて結局パソコン・スマホ共通で1カラムにしました。

　・Prott：アプリ向けのプロトタイピングツール。操作を覚える時間がなかったため断念。ラフやデモは個人開発であれば省いた方が開発期間の短縮になります。

　・Haml：Rubyを書く際に「erb方式でなくhaml方式で書いた方が実務に近い！」とアドバイスを受けたのですが、Progateなど初心者向けのRailsの教材はerbで書かれているので結局そのままerbを使いました。

1.3　3か月目 70%の完成度でリリースする

フォームの入力テスト

　１．まずは表示されるか、機能するかどうか

　２．実際に投稿される想定のデータを入れて、レイアウトが崩れないか

　３．悪意のあるデータや特殊記号を入れても問題が起こらないか（SQLインジェクション、クロスサイトスクリプティング対策など）

404エラー、503エラーなどのエラー画面の設定

　Railsの標準だと英語のエラー画面が出てしまいますので、日本語の画面を設定しましょう。「Better Error Pages」というサイトで、3種類のデザインから選んでエラーページを作ることができ便利です。

ステージング環境をつくる

　本番環境とは別に、サーバーでの動作を確認するためのステージング環境を作りましょう。Herokuの場合は、Heroku Pipelineという機能が用意されています。

β版を公開してアドバイスをもらう

　β版を友人に見てもらいましょう。サービスの根幹にあまり重要でない機能を提案されることもあるので、もらった意見を取捨選択しつつフィードバックを反映します。

利用規約・プライバシーポリシーの作成

　利用規約やプライバシーポリシーが丁寧だと、ユーザーからの信頼度が上がります。『良いウェブサービスを支える「利用規約」の作り方』という本がおすすめです。

サービスのリリースをお知らせする

　おめでとうございます！サービスがリリースできました！この時点であなたはめちゃめちゃすごいです。自分で自分を褒めてあげましょう。SNSで宣伝しましょう。

Twitterで宣伝する

　リリース時はご祝儀訪問がもらえるチャンスです。アピール文言を練り、リンクを文中に仕込み、画像を添付しましょう。『朝に投稿 → 昼にRT → 夜に「RTありがとうございます！」と引用RT』の流れで告知効果が高まります。

　「ワラリー！」では、相手によって文言を変えました。エンジニア向けには「初心者の成功体験」「100日間という数字」をアピール。「91RT、355いいね」いただきました。

Web系未経験の初心者が100日間で初めてのrailsサービスをリリース
  https://warally.info

  首都圏のお笑いライブを日付やキーワードで横断検索できるサービスです！
  ・5秒で使えるTwitterログイン
  ・わかりやすいUI
  ・13サイトからデータを毎日スクレイピング
  よかったら見てください〜 (添付画像3枚)

　お笑いファンには「できること」を強調して伝えました。「お笑いライブ検索サイトの閉鎖」から2週間というタイミングもあり、224RT、325いいねとかなり拡散されました。

【お知らせ】お笑いライブを検索できるサイトができました！
  http://warally.info/
  ・日付検索、キーワード検索ができます
  ・フライヤー表示機能あり
  ・誰でもライブを登録可能
  今日やってるライブあるかな？という時にぜひご利用ください (添付画像4枚)

Qiitaで記事を書く

　サービス公開と同時に記事を書くと、Qiitaユーザーにもサービスを知ってもらうことができます。宣伝目的だとQiitaの規約違反となってしまうため、サービスで使用した技術の紹介をメインで書くと良いでしょう。

Google Analyticsを使用して人気機能を見極める

　どのページにアクセスが集まっているか、どこから集客できているかを分析するにはGoogle Analyticsを導入します。コンテンツの詳細ページを、posts/[:id]ではなくposts/[:title]にすると、GAの画面で人気記事がわかるので便利です。

Google Search ConsoleでSEOを強化してアクセス数を増やす

　SEO（Googleからの検索最適化）に力を入れると長期的なサービスの発展が望めます。

　・サイトマップの生成とサイトマップの自動更新機能を実装する

　・メタキーワードを設定する：ワラリー！の場合は「お笑いライブ」「チケット」「東京」「スケジュール」などを設定しました。

　・ページタイトルを動的に設定する：「サイト名｜ページタイトル」ではなく「ページタイトル｜サイト名」の順番で設定するとよいそうです。

　・サイト内リンクを増やす：ワラリー！では日付、タイトル、会場、出演者などそれぞれの項目がリンクになっています。SNSシェアボタンも付けましょう。

Google Adsenseによるマネタイズのコツ

　Webサービスで稼ぐ場合、Google Adsenseによる広告を導入するのがカンタンです。ワラリー！では、月間5万PVに対して5000円程度の収益が発生しています。

　・広告サイズはレスポンシブにする：サイズが大きいほど、クリック数が増えますし、閲覧によるインプレッション収益が上がります。ワラリー！では、最初は控えめにラージモバイルバナー（320×100サイズ）を使いました。しかし、売上が伸びず赤字になったため、レスポンシブ（336 x 280サイズ）に変更しました。フィード型のサービスなので、ファーストビューには広告を置かず、5つのライブにつき1つレスポンシブ広告を表示します。広告サイズを変えたことで、11月に500円だった収益が12月には5000円と10倍になりました。

　・不快な広告はブロックする：毎日使ってもらえるサービスにしたいので「デリケートなカテゴリー」（出会い系、宗教、消費者金融など）や「マンガ系の広告主」（エロ・グロ系のマンガ）をブロックしました。これらの広告はクリック単価が高いという側面もあるので、サービスのテーマや世界観に応じて、ブロックするカテゴリや広告主を決めると良いでしょう。

1.4　まとめ

　初めて個人開発を始めたときは「一生完成しないんじゃないのか」と不安な毎日を過ごしていました。しかし、諦めずにいろんな方に相談して助けてもらったことで、なんとかリリースまでこぎつけることができました。

　これから始めるかたは「こんなに大変なの？」と心が折れそうになる瞬間もあるかもしれません。そんなとき、この本がモチベーションにつながるよう、祈っております。

かしい

  フリーの駆け出しWEBエンジニア。お笑いライブの検索サイト「ワラリー!」を運営中。
  もともと外資のITコンサル会社で業務システム設計をしていたが、独学でRuby on Rails、
  JavaScript などを勉強して独立。技術ブログでは初心者向けの情報を発信中。

  https://warally.info/