この前のイベントで発表した5分で笑えるwebサービスの作り方です。企画で悩んでいる方やこれからハッカソンに参加したい方はぜひご参考にどうぞ。

1. 5分で笑える
Webサービスの作り方
hisaju

2. 自己紹介
• Twitter: @hisaju01
• フリーランス時代にシャチクのミカタや告白の行方など個
人サービスをいくつか作っていました
• 現在は株式会社StartupTechnologyという会社を作り、主
にクラウドソーシングを活用してお客様の新規Webサービ
スの開発を行っています。
• 完全時給制のRuby on Rails専門のクラウドソーシング
「StartupLabo」も運営しています

3. 告白の行方
告白したい相手の電話番号と告白文を入れると代わりに電話をかけて告白してくれ
る告白代行サービス。一応まだ生きてるので、合コンネタとしてお使いください。

4. シャチクのミカタ
Facebookの上司の投稿に対してネガポジ判定を行い自動でいいねしたり、上司の誕生
日にいち早く自動でお誕生日メッセージを投稿するサービス。リリースから半年経たな
いくらいでスパム判定されたかで垢バンされる

5. 伝説のメディアラッシュ
• IT系メディア
• イケダハヤトブログ
• lifehacker
• ねとらぼ
• R25(Web)
• はてなキーワード
• トレンドニュース
• GIZMODO
• 雑誌
• 週刊プレイボーイ（集英社)
• テレビ
• 特報！B級ニュースSHOW(TV東京)
• スーパーニュース(フジテレビ）
• ラジオ
• GOLD RUSH(J-WAVE)
• 新聞
• 夕刊フジ
• 日経新聞
( ･́ｰ･｀)どや！
MA8も決勝までいったよ

6. Notice
今日の話は
秒速で稼ぐお話ではないです

7. 5分で笑えるWebサービス
1. からないのになんでやるの？
2.企画の作り方
3.作ってみよう
4.アピールしてみよう

8. 5分で笑えるWebサービス
1. からないのになんでやるの？
2.企画の作り方
3.作ってみよう
4.アピールしてみよう

9. からないのにやる理由
• Webサービス開発の勉強、経験
• 名刺代わり
• 名前が売れる
• 人脈も増える
• 最終的に仕事にもつながる可能性が大

10. 会社の名刺の他に、自分の個性を表現する自分だけ
の名刺「二枚目の名刺」こそが、独立したアイデン
ティティを持つ自分を表現するという、人生をほん
のちょっと変えてくれる魔法をかけてくれるのです。
［安藤美冬さんの名言から］

11. 継続的な収益より
1回のバズ

12. 5分で笑えるWebサービス
1. からないのになんでやるの？
2.企画の作り方
3.作ってみよう
4.アピールしてみよう

13. 5分で笑えない
企画の作り方

14. 勉強で
• チュートリアルでサービ
ス作っても勉強にならな
い

15. みんなで
•企画がまとまらない
•尖りづらい

16. プロダクトアウト
•便利かもしれないですが、
面白くはならない

17. 夢
•多分完成しない
•テンションが持たない
•嫌になる

18. 5分で笑える
企画の作り方

19. 日常のあるある
•企画のスタートはテーマから
•日常のあるあるは共感が得られやすい
•ネガティブな方向のほうが面白くしやす
い
•日常のイラッとしたこと、クスッとした
ことをネタ帳にメモっておきましょう

20. 分かりやすい1機能
•課題に対して1機能で考える
•解決方法が間違ってると面白くなる

21. 世界観で広げる
•さらに世界観をつけることで、
今後追加していい機能や追加して
はいけない機能が見えて広がりや
すい

22. サービス名やコピー
•サービス名やコピーで広がり方も変
わります
•非常に重要なファクターなので時間
をかけて考えましょう

23. 例1)
• 日常のあるある
•上司とFBフレンドに、ソーシャルハラスメント
•いいねモンスター
•会社からいいねしてとメールで通達が
•分かりやすい1機能
•上司に対して自動でいいね
•世界観
•ソーシャルハラスメントを逆手に取って上司の機嫌を取り出世する
•キャッチコピー
•Facebookの上司に自動でいいねして立派なシャチクになろう

24. 例2)
• 日常のあるある
•女性にメチャメチャ奥手なエンジニアの友達
•草食系男子
•分かりやすい1機能
•自動で電話をして告白する
•世界観
•うさんくさい告白代行業者
•キャッチコピー
•ワンコイン自動告白サービス

25. 5分で笑えるWebサービス
1. からないのになんでやるの？
2.企画の作り方
3.作ってみよう
4.アピールしてみよう

26. 開発においての
重要なポイント

27. 作りきれるか

28. 短期間で
テンションを保ち
簡単に作れるパターン
を見つけよう

29. 秒速な開発パターンを持とう
• WAFは必須
• Sinatra
• Ruby on Rails
• デザインコーディングも大変なのでFWを持っておく
• Twitter bootstrap

30. 使いやすい環境を作っておこう
• 開発からデプロイまでを簡単に出来る自分のパターンを作る
• Macのローカル環境(rbenvとか)
• github
• さくらVPS
• Capistrano
• nginx + unicorn
• Heroku、Sqale

31. ちなみに
シャチクのミカタの
初期リリース版
製作期間

32. 3日くらい

33. うちわけ
• 画面まわりのプログラム 0.5日
• バッチ1日
• HTMLデザイン調整1.5日
今まで得意な開発パターンで
何個か作ってたので早くなってた(Perl Dancer)

34. 最初にやること

35. ドメイン取得

36. githubのリポジトリ

37. scaffold

38. git push

39. ドメインと
リポジトリが
TODOリスト

40. 後は作るのみ

41. リリースまでのタスク
• サーバーサイドプログラミング
• HTMLなどのフロントコーディング
• デザイン
• サーバーセットアップ（デプロイ環境構築）

42. リリースまでのタスク
• サーバーサイドプログラミング
• HTMLなどのフロントコーディング
• デザイン
• サーバーセットアップ（デプロイ環境構築）

43. HTMLまでは
書けるけど
絵が苦手。。

44. デザイン調達方法
• 知り合いのデザイナーにランチおごってロゴだけ作っ
てもらう
• 知り合いのデザイナーのプログラミングをしてあげ
る代わりにデザイン作ってもらう
• 素材集やフリー素材を容量を軽くする加工だけして
そのまま使う
• ココナラでお願いする(500円∼)

45. うなぎおごった

46. くだらないことをマジメにやる
• SSL導入
• プライバシーポリシー、特定商取引法に基づく表記
とかちゃんと書く
• ヘルプ書く
• faviconやOGPもまじめに
• サポート先も公開する→テレビ取材来た

47. 5分で笑えるWebサービス
1. からないのになんでやるの？
2.企画の作り方
3.作ってみよう
4.アピールしてみよう

48. step 1

49. ネットで拡散しよう難易度C 効果C
• 紹介サイト
• ソーシャル図鑑、スタートアップ.jp、サービスサ
ファリ
• ソーシャル
• Twitter、Facebook (OGP重要だよ！）
• ブログ

50. step 2

51. リアルでアピールしよう難易度C+ 効果B
• コンテスト
• ハッカソン
• ピッチイベント
人脈も増えるよ！

52. step 3

53. バズらせる難易度A 効果A
• インフルエンサーのブログ、ツイート
• はてぶホッテントリ
かなり難易度高い

54. まとめ
• 企画でバズるかが決まるので世界観、サイト名、
コピーはしっかり考えておこう
• 開発に時間をかけるとあっという間に旬ではなく
なるのでなるべく短期間で作れるパターンを持っ
ておこう（数こなせばどんどん短縮できる）
• とにかく楽しみましょう

56. では早速告白の行方っぽいものを
作ってみましょう

57. 入力フォーム DB登録
Twilioから告
白
告白の結果受
信
一覧に結果表
示