Slide 1

Slide 1 text

Align から始まる 萩原爽太・⼤垣連 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align

Slide 2

Slide 2 text

• N⾼2年/16歳 • Androidエンジニア(Kotlin) • インターン@Cookpad(1y) • Flutterもやる • サービス開発に興味がある。 • 変わった仕組みや機能を思いつきがち • モバイルアプリ, デザイン(ロゴなど)担当 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 萩原爽太 Twitter: @___soprog

Slide 3

Slide 3 text

• N⾼2年/16歳 • バックエンドエンジニア(Go) • Reactも書く • インターン@3-shake(1y) • CLIツールの作成や⾃作⾔語の拡張が趣味 • サーバーサイド実装, 総務系のタスク担当 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ⼤垣連 Twitter: @re_yuzuy GitHub: @yuzuy

Slide 4

Slide 4 text

Align( ) というプロジェクト Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align

Slide 5

Slide 5 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignてなに? どこが新しいの?

Slide 6

Slide 6 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 「エモい」を⼿軽に体験 Alignとは コンセプトは 暇になったタイミングに、ふと⼼が揺れ動く体験を味わえたらいいな

Slide 7

Slide 7 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 具体的に仕組みを⼀⾔で表すと バッテリー残量が近い⼈とマッチングする ランダムマッチングチャットアプリ

Slide 8

Slide 8 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 具体的に仕組みを⼀⾔で表すと ⼀⾔では表せないサービスでした バッテリー残量が近い⼈とマッチングする ランダムマッチングチャットアプリ

Slide 9

Slide 9 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align デモ動画

Slide 10

Slide 10 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 前提: スマホにはバッテリー残量という要素がある 53 58

Slide 11

Slide 11 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは バッテリー残量が近いというきっかけで相⼿とマッチングする 53 58 ͍ۙ

Slide 12

Slide 12 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 58 ձ࿩ 出会った相⼿と会話をする

Slide 13

Slide 13 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 58 ձ࿩ バッテリー残量は常に変化しえる

Slide 14

Slide 14 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 59 ձ࿩ バッテリー残量は常に変化しえる

Slide 15

Slide 15 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 60 バッテリー残量が離れてしまうと

Slide 16

Slide 16 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 虚無 会話は勝⼿に切断され、相⼿との関係を絶たれる

Slide 17

Slide 17 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量が近い・離れたの定義 Alignとは

Slide 18

Slide 18 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー帯の説明 バッテリー 残量 バッテリーの範囲[x%-y%] この帯の中でマッチング、帯から外れると会話終了 10% 20% 30% 40% 続く 1%-9%は実装上の理由で、100%は永遠にチャットができてしまうので使えない 10%-19%の バッテリー帯 (10%のバッテリー帯) 20%-29%の バッテリー帯 (20%のバッテリー帯) 30%-39%の バッテリー帯 (30%のバッテリー帯)

Slide 19

Slide 19 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align この仕組みがどのように コンセプトに向けて作⽤するの?

Slide 20

Slide 20 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 僕らが⾔うエモい(⼼が揺れ動く瞬間)は 何がエモい要素なの? 出会いと

Slide 21

Slide 21 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 僕らが⾔うエモい(⼼が揺れ動く瞬間)は 何がエモい要素なの? 別れ

Slide 22

Slide 22 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 関わりのある⼈の顔を思い浮かべてください 何がエモい要素なの?

Slide 23

Slide 23 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align あなたはその思い浮かべた⼈と、 今この瞬間から会えない・喋れない そんな世界線をリアルに想像してみてください 何がエモい要素なの?

Slide 24

Slide 24 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 何がエモい要素なの?

Slide 25

Slide 25 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 何がエモい要素なの?

Slide 26

Slide 26 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align どんな気持ちになりましたか? 何がエモい要素なの?

Slide 27

Slide 27 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align あっ!ってなったり 名残惜しいようななんとも⾔えない気持ちになった⽅ それが私達の話しているエモさです 何がエモい要素なの?

Slide 28

Slide 28 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignは いきなり出会って いきなりさようなら な仕組みを持っている 何がエモい要素なの?

Slide 29

Slide 29 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align それをアプリで簡単にスキマの時間に楽しめる 何がエモい要素なの?

Slide 30

Slide 30 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 運命を左右するのがバッテリー残量なのもキモ

Slide 31

Slide 31 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ? バッテリー残量 is (若⼲)⾃分でコントロールができる 53

Slide 32

Slide 32 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ? 続けようと思えば半永久的に続けられる! 充電器を使ったり、画⾯光量をmaxにしてみたり。。。調節 53

Slide 33

Slide 33 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ? 試⾏錯誤して話を続ければ、よりさようならしたときの名残惜しさは強くなりそう 53

Slide 34

Slide 34 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align これがAlignの仕組みと、エモさの引き出し⽅です

Slide 35

Slide 35 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす

Slide 36

Slide 36 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 10/27 21:00~22:00に決⾏ - 平⽇の暇な時間をアンケートし決めた時間 15⼈のテスター - 萩原、⼤垣の知り合いに協⼒してもらいました 出会った⼈とどのような会話をするのか 突然会話が切れたらどのような感想を持つのかの 検証が⽬的 - 事後にアンケートを取りました。

Slide 37

Slide 37 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす ユーザーテストの結果 円滑にテストプレイを進められた - インストールまでのオペや⼤きなバグもなく終了 ⾃分たちでも課題を発⾒ - 後述 有益なフィードバックも得られた- 後述

Slide 38

Slide 38 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - ⾃分たちの所感 友⼈同⼠でマッチングするのも楽しいという発⾒ - 当初、友⼈同⼠はマッチングしないように設定をしていたがオペミスで 友⼈同⼠がマッチング。それはそれで盛り上がることがわかった バッテリー帯の定義に修正が必要そうなことがわかった - 10%ごとのバッテリー帯を⽤意していたが、 バッテリーは減らず会話が⻑く続きすぎることがわかった 会話の種はやっぱり探すの難しそう - わかってはいたが、何を話していいのかわからない場合もそれなりに存在した 友⼈や友⼈の友⼈など、ある程度の情報を持っている場合は話がかなり盛り上がることも わかったので、うまく相⼿の情報を扱えるような仕組みがひつようなことがわかった

Slide 39

Slide 39 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー帯の説明 バッテリー 残量 バッテリーの範囲[x%-y%] この帯の中でマッチング、帯から外れると会話終了 10% 20% 30% 40% 続く 0%-0%は実装上の理由で、100%は永遠にチャットができてしまうので使えない 10%-19%の バッテリー帯 (10%のバッテリー帯) 20%-29%の バッテリー帯 (20%のバッテリー帯) 30%-39%の バッテリー帯 (30%のバッテリー帯) ここが広すぎて 会話が⻑すぎる

Slide 40

Slide 40 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - ⾃分たちの所感 友⼈同⼠でマッチングするのも楽しいという発⾒ - 当初、友⼈同⼠はマッチングしないように設定をしていたがオペミスで 友⼈同⼠がマッチング。それはそれで盛り上がることがわかった バッテリー帯(独⾃概念)の定義に修正が必要そうなことがわかった - 10%ごとのバッテリー帯を⽤意していたが、 バッテリーは減らず会話が⻑く続きすぎることがわかった 会話の種はやっぱり探すの難しそう - わかってはいたが、何を話していいのかわからない場合もそれなりに存在した 友⼈や友⼈の友⼈など、ある程度の情報を持っている場合は話がかなり盛り上がることも わかったので、うまく相⼿の情報を扱えるような仕組みが必要なことがわかった

Slide 41

Slide 41 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - テスターからのフィードバック UIがポップでよかった! 僕らが仮説として定義したエモさを体感できたみたい! - あっ!ってなったらしい 知り合い3⾚の他⼈1くらいの割合が意外と楽しかった 思ったより楽しんでくれたみたいでモチベバク上がりした

Slide 42

Slide 42 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - 出てきた課題&仮説 チャットながく続きすぎる問題 - 当初、僕らの予定では15分くらいつづける想定。 実際には25会話中で10会話は10分~20分続いていた。そのうち、⾃⼰切断が4つ。 ⻑すぎるとだれてしまうフィードバックもあった。15分、意外と⻑いぞ..? 特定コミュニティの中でも盛り上がる仮説 - 当初は、全く知らない⼈と出会い会話することを想定。 知り合い、あるいは顔は知っているくらいの間柄でチャットするのも⾯⽩いと いうフィードバックがあった。共通の話題があると話しやすいみたい。

Slide 43

Slide 43 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト2回⽬のようす

Slide 44

Slide 44 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト2回⽬のようす 前回のユーザーテストでわかったことを 改善し実験するために急遽決⾏

Slide 45

Slide 45 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト2回⽬のようす 前回のテストからの修正点 バッテリー帯を狭くした。前半5%/後半2% - 会話が⻑く続き過ぎた事例があったので、修正してみた コミュニティを1つに絞った(N⾼) - 知り合いとやっても楽しいというフィードバックがあったので、 顔⾒知りの可能性が⾼まるようにした

Slide 46

Slide 46 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト2回⽬のようす 結果 出会い, 別れの流れは引き続き⾼評価、エモさを感じてくれた 話題枯渇があったみたい - 同じコミュニティ内でも話題が枯渇するというフィードバックがあった Alignが話題をいかに提供できるかの仕組みづくりの必要性を強く感じた バッテリー帯: 5% → まだ⻑いかもしれない? 2% → 挨拶で終わる - こんな感じの感想だった。↓がチャットの継続時間。バランス調整が難しい… 5%で10分以上つづいた部屋が4/8つ, 3分続かなかった部屋が3/8つ 2%で10分以上つづいた部屋が0/6つ, 3分続かなかった部屋が3/6つ

Slide 47

Slide 47 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト2回⽬のようす 有益なフィードバックを得れた テストして改善サイクルを回していきます

Slide 48

Slide 48 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ?

Slide 49

Slide 49 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ?(フロントエンド編) Flutter - クロスプラットフォームフレームワーク Provider, StateNotifier packageを⽤いたMVVMアーキテクチャ FirebaseAppDistribution/DeployGateで配信 GitHubActions, Fastlaneで配信⾃動化

Slide 50

Slide 50 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ?(バックエンド編) Go⾔語 + gin(REST), fiber(WebSocket) まあまあきれいなCleanArchitecture GCP - AppEngine Standard/Flexible, Redis(Memorystore), MySQL(CloudSQL) 認証はFirebaseAuth/エラー監視はSentry

Slide 51

Slide 51 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 開発など、どんな具合で 進めていたの?

Slide 52

Slide 52 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり 未踏jr開始時に建てていたマイルストーン ユーザーテスト チャット・マッチング のみの最低限 ݄ 中⾼⽣が集まる イベントにて宣伝 ⼈をガッとあつめ テストをする ݄ 新機能らをリリース アクティブユーザー 1000⼈めざす ݄ 正式リリース UIなどをきれいにした りなんなりする ݄

Slide 53

Slide 53 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり 実際やってみて 実装 ݄ null 実装 ݄ null 実装 最後の最後必死の ユーザーテスト ݄ 実装 アプリを触ってもらって バグらせる会 ݄ null

Slide 54

Slide 54 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり ⽬標のスケジュールには及ばなかったが テストプレイを実施して 有益なフィードバックを得て改善まで出来た

Slide 55

Slide 55 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた理由のふりかえりと、学び

Slide 56

Slide 56 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 要因 最優先の⽬的を⾒失って頻繁に脇道にそれる スケジュール感をミスったおかげでモチベーションを殺した

Slide 57

Slide 57 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 最優先の⽬的を⾒失って頻繁に脇道にそれる 今回、最も優先すべきだったのはバッテリー残量による新たな出会いと 唐突な別れがエモい感情を引き起こすという仮説の検証だった 新しい機能のアイディアが思いついたときには、しっかり話し合わずに (本当に必要かを吟味せずに)実装を開始してしまった → APIはあるけどアプリでは何も使われていないものが多数ある

Slide 58

Slide 58 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 最優先の⽬的を⾒失って頻繁に脇道にそれる 最優先の⽬的を⾔語化、共有する ↑に必要な最低限の機能を⾒極める 新しい機能を思いついても絶対に必要でなければストックしておく

Slide 59

Slide 59 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 理想をそのままスケジュールに落とし込んでしまった(3ヶ⽉遅れくらい) ⼤雑把なタスクの切りわけ。期限の設定・共有が雑or無 スケジュール感をミスったおかげでモチベーションを殺した

Slide 60

Slide 60 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 細かくタスクを切り分け、期限を具体的に設定、共有する スケジュール感をミスったおかげでモチベーションを殺した

Slide 61

Slide 61 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align テストを踏まえた 今後のAlignにおける課題・展望

Slide 62

Slide 62 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 今後の課題・展望 テストを経て⼤きめの課題がいくつか⾒つかったので改善したい バッテリー帯をどうするのか → ⾊々なバッテリー帯でテストを繰り返す   可変にして課⾦も紐付けられるような仕組みも思いついたのでそれも合わせて検討していく 会話の話題 → ユーザーのプロフィールの充実などの機能を検討している 細かな修正もたくさんして試したい アプリのルール、複雑問題 → チュートリアル導⼊したい。が、アプリの⼿軽感を妨げるので、いい形を考えてテストしたい

Slide 63

Slide 63 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align

Slide 64

Slide 64 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align まとめ 未踏jr期間内で成し遂げたこと アプリコア機能の開発、全部出来た! →ユーザー管理・バッテリーを⽤いたマッチング,チャットの実装が完了した。  かなり完成度の⾼いものが出来たと⾃負しているので拡張し続けていきたい! ユーザーテストを⾏い有益なフィードバックを得ることができた! →Alignの謳うエモさの実証に向けた第⼀歩!ユーザーテストを2回できたことで、  テストのやり⽅にも知⾒が溜まったりしたので今後に活かしていく! フィードバックをもとに改善して再度ユーザーテストするサイクルを回せた! →フィードバッグをもとに新たな仮説を⽤意し、 再度検証するサイクルを回せたのでこの先も⽌めないで改善していく!

Slide 65

Slide 65 text

• 周りの半端ない⼈たちの活動を⾒てかなり刺激を 得た。個性があってかつクオリティが⾼い… • PM関さんの軌道修正⼒にかなり助けられた半年 だった。MTG後に⼤垣くんと毎回感動していた • 開発資⾦はかなりありがたい。サーバーをぶん回 せるのは本当に助かる • 他PJのコードレビューとかも少しさせてもらった りできて、とても楽しかった Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 萩原爽太 未踏jrの感想 まとめ

Slide 66

Slide 66 text

• 関さん(PM)の指摘がキレキレでとても助かった・ 参考になった(サービスの開発⼿法等) • CPU作れたり、ブラウザOS作れたり、リコーダー 作れたり、⾃分ができないことができる⼩中⾼⽣ がたくさんいて、⾃分もそういうスキルを磨いて いきたいと思った Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 未踏jrの感想 まとめ ⼤垣連

Slide 67

Slide 67 text

Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align (おまけ)おととい法⼈登記完了 ここから、Alignを広げていきます 応援・お⼿伝いお願いします! (ツイッターをフォローすると情報が⼿に⼊るので是⾮!)

Slide 68

Slide 68 text

Align から始まる 萩原爽太・⼤垣連 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align