ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/597/room ーーーーーーーーーーーーーーーーーーーーーーー

1. 「wri.pe」を事例に学ぶ
自作サービスの作り方
Yuichiro MASUI / @masuidrive
∼ サービスデザイン編 ∼

2. Hi! I’m @masuidrive.
• Yuichiro MASUI - Ichi
• Open source developer, Ruby fun
• Pukiwiki, Ruby on Rails tutorial movie in Japanese,
IKEA hacker
• Furo-grammer (Coding in hot tub)
• FrogApps, Inc. CTO // ex-Appcelerati
@masuidrive
Yuichiro MASUI
miil / Toreta
!
MobiRuby / PukiWiki
Ruby on Rails

5. アジェンダ
• wri.peってなに？ - 10min
• wri.peを作る動機 - 10min
• サービス設計 - 10min
• デザイン - 10min

10. 動機
• 趣味で年１つぐらいのプロダクトを作りたい
• 新しい事を覚えたい → 使いたい
• 海外での知名度作り

12. 煩雑なメモを
どうにかしたい

13. メモアプリの課題
• いつでも、どこでも
• 溜まったメモの整理
• 書いたことを忘れる
• もう読まないメモの処理

14. 欲しいメモ帳アプリ
• プログラマならMarkdown
• gmailみたいなArchive
• カレンダービュー
• 全文検索・キーボードオペレーション
• iPhone/iPad/Androidサポート

15. 設計
• 1週間以内に常用できるレベルのサービス構築
• 自分でずっと使える
• メンテナンス・バージョンアップを簡単に
• データの保全性を第一に

16. 技術選択
• 認証はGithubとFacebook
• テストも兼ねてRails 4.0.0 + Ruby 2.0
• JavascriptはBackbone.js + HTML5 storage
• 運用はPaaSで

17. 毎日自分で使う為に
• サーバの運用は自分でしない
• バックアップも全自動
• 軽く動く

18. デザイン
• ユーザとの接点はデザイン
• 全ての機能はUIを通じて提供される
• 自分で使うとしても心地よくなるデザインを

19. デザイン
• 今回は時間がないのでデザインも自分で
• メニューバー＋メイン
• iOS/Android対応を視野に
• モチーフとなるデザインを探す

20. dribbble.com

21. dribbble.com
• webapp, mail, editorなどで検索
• 好きなデザインをBucketに入れる
• http://dribbble.com/masuidrive/buckets/133417

23. デザイン
• メモは縦に伸びるので縦方向は貴重
• メニューバーを上に置かず、橫へ
• 編集エリアを大きく

25. 印象に残らない
• 上のバーがBootstrapっぽい
• 特徴色となる水色が弱い
• メリハリがない
• 色数は多くしたくない

28. 指摘
• マウスオーバー時に色が変わらない
• 色の変え方でも個性が出る
• ボタンを少し大きくする
• サイズや角丸などの見た目を合わせ統一感を出す
• DropdownやSwitchの見た目も合わせる

29. まとめ
• 自分の使うアプリを好きなように作れるのは
プログラマの特権
• 一発芸なのか長期的に使うアプリなのかによって
サービス設計は大きく異なる
• デザインはdribbble.comを見て考える

30. 宿題
自分が作りたいアプリを1行で説明する