React NativeでGyroscopeアプリをつくる
iPhoneアプリをつくりながら20ポンド減量した話
先日、新しいiPhoneアプリHealth Tracking by Gyroscopeを出しました。HealthKitのデータをGyroscopeに同期して、自分の生活のすべてを追いかけられるダッシュボードになるアプリです。
この新しいアプリをテストして良くしていくあいだに、私は20ポンド以上痩せていました。データは2年以上ずっと記録して同期していたのに、自分のデータをリアルタイムで見られるようになって初めて、行動を変えて日ごとに健康になっていけたのです。まさにクオンティファイド・セルフの夢でした。
私たちの目標は、自分のデータを使って、体重を落とす、仕事をはかどらせる、大事な瞬間をシェアするといった実際の目標をかなえられるアプリをつくることでした。
この欲張りな目標をかなえたアプリは、まだ誰もつくっていませんでした。それでも、ほかの体験のなかにすでに素晴らしいデザインの要素がいくつかあって、そこがいい出発点になりました。
お手本にしたもの
Feltronの年次レポート
この10年、Nicholas Feltonは自分の人生の美しい年次レポートをつくり続けてきました。1年を通してデータをきっちり記録し、テーマごとに分析してデザインしたものです。これまでの年のものはfeltron.comか、SF MOMAで見られます。
あのレポートは、他人の人生をのぞく窓としてとても面白いものでした。私たちのところにも似たようなデータが毎日自動で集まってきていたので、自分についてどんなレポートがつくれるのか、本当に楽しみでした。単純に面白いというだけでなく、役に立つパターンを見つけて健康を良くするためにも。
ウェブ解析
仕事では、毎日頼りにしているダッシュボードやサービスがいくつもあります。事業の要になるもの、お金を生むものには、たいてい何十社もの会社が、状況を理解して最適化するためのダッシュボードをつくっています。
私たちのサーバーはすべて計測が行き届いていて、意図したとおりに動いているか確認でき、何かおかしくなればすぐに知らせが来ます。そう遠くない未来には、同じようなダッシュボードが自分のからだにも用意されるはずです。
Google AnalyticsやFabricといったほかの解析ツールも、トラフィックや複雑な指標を読み解くのに役立っています。大きな数字、スパークライン、目立たせた外れ値といったデザインの工夫のおかげで、大量のデータもひと目で読み取れます。
ビデオゲーム
ビデオゲームは、解析をもっと楽しいかたちで使っています。レベルや体力、経験値といった数値を持ったキャラクターが出てくることも多いですよね。
見せ方さえよければ、自分の調子を知って、いま何に集中すべきかを決めるのに、とても楽しくて直感的なやり方になります。生き延びる、レベルを上げる、回復薬を使う、といった具合に。
人はこうした架空の数字を上げるのに何百時間もかけるのに、現実の人生には同じようなものがありません。いまのところは…
コードネームはMagneto
私たちのプロジェクトには、すべてX-Menのキャラクターの名前がついています。このアプリは「Magneto」でした。
2015年の初め、FacebookがReact Nativeという面白い新技術を出しました。Reactの大ファンだったEricが、基本的なReact Nativeのプロジェクトで実験を始めて、私たちのAPIからライブのデータを取ってきて画面に出してみせました。
アプリはXCodeから動くのですが、中身のコードはほとんどJavaScriptで、Sublime Textでも好きなエディタでも編集できました。数時間もしないうちに、私は画面の要素を書き換えて、FlexboxやCSSに似た書き方でスタイルを当てられるようになっていました。魔法のようでした。
ウェアラブル
ちょうど同じころにApple Watchが出て、期待と戸惑いが入りまじっていました。話題になるのはたいていアプリと通知でしたが、私たちがいちばん心を躍らせたのは健康の機能でした。
身につけ始めると、心拍数と歩数がバックグラウンドで記録されていきました。私はそれを、自分の健康の大事な一部であるほかのデータと組み合わせたいと思いました。Fitbitの体重計から来る体重と体脂肪、Spotifyで聴いた音楽、毎日どれくらい仕事に時間を使ったか、といったものです。
Healthアプリはみんなのスマホに入っていて、歩数のような基本的なデータを測っていました。ただ、私がやりたかった単純なことのいくつかは、そのHealthアプリでは無理か、とても面倒でした。
- 直前のワークアウトの心拍数のグラフを見る
- スクロールもタップもせずに今日の様子をひととおり見る
- 今日だけでなく、昨日何をしたかを手軽に見る
初期からのユーザーで、フルタイムのエンジニアとしてチームに入ったばかりだったMahdiが、このHealthKitの同期の仕組みをObjective-Cでつくり始めました。
ランニングのアプリ
MahdiがHealthKitの同期をつくっているあいだ、私はもうひとつの小さなアプリに取りかかっていました。いろいろなフィルターとレイアウトで、自分のランニングを好きなように仕上げてシェアできるアプリです。
そのランニングアプリを出すと、何千人もの人が使い始めて、工夫をこらしたワークアウトの画像を投稿してくれました。ただ、自分はランナーではないから、ワークアウトの地図を楽しむことも、消費したカロリーがドーナツ何個ぶんか見ることもできない、という声もたくさん届きました。
アスリートだけでなく、Gyroscopeを使うすべての人に、あの楽しさとやる気を届ける方法を考える必要がありました。私たちの答えは、誰もがやっていることで同じような体験をつくることでした。音楽、心拍、睡眠、パソコンでの作業、歩数、移動、といったものです。
初期のアプリのモックアップ
まず、情報をぜんぶアプリに収めるためのモバイル向けダッシュボードをデザインしていきました。中身を見るときは、すべてを正方形のカードにして、その下にいろいろ変えられる選択肢を並べることにしました。
シェアの部分も、ページの下でもっと目立つように広げました。いちばんの成果をInstagramに投稿したり、友だちに送ったりすることが、この体験の大きな部分になるからです。
こうした画面はデータありきなので、最初のモックアップはおおまかな出発点にしかなりませんでした。最終的なデザインのほとんどは、実際のアプリの上で、サーバーから届く本物のデータとグラフを見ながら決めていきました。
週次レポート
日々のカードはひとつのデータに絞っていましたが、週次レポートには情報がずっと多く、全体を見せてパターンを浮かび上がらせることができました。
その一方、ウェブサイトでは…
Fitbit連携やHealthKitの同期といった新しい機能のおかげで、健康にまつわる新しいデータがどんどん入ってくるようになりました。心拍数、歩数、血圧、体脂肪率。けれども、もともとのウェブサイトは場所と写真に寄っていました。新しいデータを気軽に見られるようにウェブの体験を良くする必要があって、私のいちばん好きなデザイナーのひとり、Shane Mielkeと新しいウェブのプロフィールテーマに取りかかりました。
この新しいテーマは、自分の数値をすべて見せる、もっと本格的なダッシュボードのつもりでした。Shaneは十数枚のモックアップを出してくれて、そのなかのこれに私たちは本当に心を掴まれました。
転機のひとつは、中身を人間のからだの部位という直感的な区切りに分けたことでした。最初はこのたとえがうまくいくか自信がありませんでしたが、手元にあるデータにかなりよく合いましたし、これから増やしていく余地も残せました。
人体の3Dモデル（Shaneが男性と女性のシンプルなものをつくってくれました）があれば、からだそのものをナビゲーションにして、開いた部分を光らせることができます。
睡眠、生産性、パソコンに向かった時間といった心の健康の数値は、脳の部分に入ります。将来は気分や瞑想のようなものも足せます。
心拍数や血圧といった心臓と血管の数値は胸のあたりにまとめ、歩数やランニング、そのほかのワークアウトのような運動は脚のあたりに置けます。
それぞれの部分は大事な概念で、あとから細かいものを足していけます。たとえば食事の記録を加えることになっても、全体をつくり直さずに体幹の部分に入れられます。
このデータの並べ方は驚くほどうまくいったので、アプリでも続けてみることにしました。Shaneと私はモバイルのホーム画面をあれこれ試して、それぞれの部分のカードを画面に詰め込んでいきました。
ここまでは、そのほとんどが架空のデータでつくったモックアップでした。どれも、大きくて読みやすい見出しと、データの中身を見せる図でできています。次の段階は、実際につくってみて、自分の本物のデータで日々どれだけ役に立つかを確かめることでした。
状態を色で示す
このダッシュボードで目指したのは、ちらっと見るだけで必要なことがわかるようにすることでした。大きな数字と色分けされたカードなら、その部分が今日は「良い」のかどうかがすぐにわかります。
たとえば歩数が数千歩に届いていなければ、フィットネスのカードは赤やオレンジになって、もっと動くよう促します。目標に届いたりジムから帰ってきたところなら緑になって、ほかのことに移れます。ひとつの部分を緑にするのはそれほど難しくありません。難しいのは、すべての部分でちょうどいいバランスをとることでした。
起動画面
最初の起動画面には、未来的でありながら人間らしいものがほしいと思っていました。数年前に日本で撮ったこの写真が、ちょうどいい感情を持っている気がしました。
その上にGyroscopeのロゴと文字を載せて、最初のログイン画面ができました。
ベータテスト
9月の半ばには、人に使ってもらえる状態の試作アプリができていました。自分たちで試してはいましたが、大きな課題は、私たちに合わせたものではなく、世界中の何百万人にとって同じように役立つものにすることでした。
そこで、ベータプログラムの始まりとして、友人とProユーザーの何人かに配ることにしました。お知らせを流したり感想を集めたりしやすいように、Facebookのグループも立てました。
更新を投稿するたびに、ユーザーが感想を送ってくれて、不具合をすばやく見つける助けになりました。それがすべて数時間、数分のうちに起きるので、どんどん手直しできました。非公開のベータなので、App Storeの審査を待たずに、ほぼその場で新しいバージョンを出せたのです。
それまでは自分たちの推測と、ごく少数の人からの感想でデザインしていましたが、ここからはもっと多くの数字とユーザーの声をもとに決められるようになりました。
初期のベータテスターの体験を聞けたのは、この上なくうれしいことでした。
「自分の生活を記録するのが本当に楽なのは、Gyroscopeだけです。ひと目で、自分が何をうまくやれていて、何に取り組むべきかがわかります。アプリを開かない日は一日もありません」
– Brandon Littell
このテストは、クラッシュや不具合を見つけるだけでなく、ずっと一緒につくっていく時間になりました。要望や提案をくれる人も多く、そのおかげで、人が日常的に使う機能に力を注げました。
人生を地図にする
いちばんわくわくするデータのひとつが、SwarmかMovesで記録される位置情報です。ランニングや自転車、そのほかの運動でも、地図の上に点が増えていきます。
ウェブサイトでMapboxを使うのが気に入っていたので、アプリでも同じ地図の技術を入れることにしました。最初は拡大や移動のできる地図を試しましたが、すぐに体験をすっきりさせて、地図は動かない背景として使うことに決めました。計算はこちらでして、必要なものがぜんぶ収まる最適な拡大率と構図を探すのです。
Movesで移動を記録している人は、自分が行った場所すべてのヒートマップと、時間の使い方の内訳を見られました。健康という観点では、歩いた時間と車に乗った時間の比が面白いところです。私はそれを見てから早めに家を出て、打ち合わせにはできるだけ歩いていくようになりました。
運動のヒントになる画面もあれば、旅の様子や、どんなレストランに行ったかを知るための画面もありました。
プッシュ通知
暮らしを楽にするやり方のひとつが、毎日ちょっとした気づきを添えたシンプルなプッシュ通知を送ることでした。
送る時間と文面には、たくさんの議論とテストを重ねました。最初は1日の終わりに振り返りとして送りたいと思っていました。ただ、データは届くまでに時間がかかることがあって、そろっていない数字を伝えてしまう危険がありました。そこで、翌朝の9時に決めました。
私たちがいちばん大事にしているのは、お金や狙った数字を犠牲にしてでも、使う人の暮らしを楽にすることです。アプリを開かせるためにもったいぶった書き方をするのではなく、必要なことをぜんぶ通知に入れて、アプリを開かなくても価値が受け取れるようにしました。
「Gyroscopeはずいぶん前から使っていましたが、私にとって本当に大事なものになったのは、娘が生まれてからでした。健康を保つためのデータが整理されていて、細かいところまで見せてくれるのが大好きです。しかも、いつも何かしら体験が良くなっている感じがします。チームが本当にユーザーのことを考えているのが伝わってきます。
全体の健康を見渡すだけでなく、生産性の数字を見て、頭の調子がどうかにも気を配っています。Iris（私のスタートアップ）で週に平均38〜42時間働きながら、フルタイムの母でもあります。Gyroscopeはその働く時間を管理して、しっかりした「バランス」をつくる助けになってくれました。本当に感謝しています。結果はどうか。とてつもなくはかどるようになりました。以前は40時間の仕事のうち、かなりの部分がむだ話に消えていました。いまは？ 赤ちゃんがいると1日がどうなるかわからないので、時間を本当に大事に使っています…」
– Cat Noone
月次レポート
月に一度、新しい月次レポートが出ます。その時間は、進み具合を振り返って、自分を見つめ直すために使ってほしいと思っていました。このデータで答えたい、いくつかの素朴な問いがありました。
十分に動きましたか？
十分に眠れましたか？
どれくらいはかどりましたか？
「大学生にとって、健康なバランスを保つことが成功の鍵です。Gyroscopeは自分の生活のデータを目に見えるかたちにしてくれるので、睡眠と運動と勉強のバランスをとれます。可視化が美しくて、とても役に立つアプリです！」
– Victoria Spiegel
減量
1年あまり前にGyroscopeを始めてから、私はじわじわとかなり太っていました。理由は謎でも何でもありません。ストレス、足りない睡眠、夜遅くまで働いて夜食を食べる日々。それが、わずかにやっていた運動を軽く打ち消していたのです。
このアプリでかなえたかったことのひとつが、自分の減量を助けてくれることでした。毎朝、Fitbit Ariaの体重計に乗って、体重と体脂肪を測ります。
そして1日を通して、Gyroscopeがその数字を思い出させてくれます。自分に正直でいられるように、そして直近の流れのなかで今日を見られるように、いくつかのレイアウトをつくりました。早く気づいて、自分で立て直すことが鍵でした。
それまでは、週次レポートが来るときか、たまにサイトを見るときまで、体重のことは頭から追い出せてしまいました。そのあいだに、健康によくない選択をいくらでもしてしまいます。歩けるところでもUberを呼ぶ、デザートを頼む、コーヒーにクッキーをもう一枚つける。それが積み重なっていました。ずっと目に入っているおかげで、毎日おいしい甘いものを食べたくなる気持ちを抑えられました。
半年後、アプリを出す直前になって、自分が20ポンドほど、体脂肪も5%落ちているのを見つけてうれしくなりました。特別なことは何もしていません。ただ、毎日の小さな変化と選択が積み重なって、ずっと健康になっていたのです。どこへでも歩くようにしていたので歩数は増えていましたし、アプリを開いて自分の進み具合を見るたびに、この流れを続けようという気持ちが強くなりました。
ほかのベータテスターの多くにも似たような話がありました。まだ足したいことも良くしたいこともたくさんありますが、みんなが自分の生活を良くするために使えるように、App Storeで公開しました。