April Zeroができるまで

April Zeroができるまで

第1部

これは、最初のApril Zeroのウェブサイトをどう設計したかの第1章です。スケッチや、没にしたコンセプト、古いプロトタイプを見せながら、どう変わっていったかをお話しします。

自分でも使ってみたいと思ったら、Gyroscopeに登録できます。

2014年3月：きっかけ

とにかく動き出す

ルームメイトとパリへ行く直前でした。彼は熱心な写真家で、どこかへ出かけるとたいてい 旅のミニサイトを作ります。 全画面の美しい写真と動画でいっぱいのサイトです。その前は 日本を旅したときのもの でした。

数か月あとに見返すのはいつも楽しいものでした。 何をしたのかが細かく年代順に並び、道中のあらゆる場面が美しい写真と動画で残っている。

この旅では、行った場所をすべて記録するためにMovesアプリを使うことにしました。SFOの保安検査の列に並びながら入れたのですが、それがまもなく取り憑かれたような日々の始まりになるとは、思ってもいませんでした。

Movesや似たアプリを試して、バッテリーの持ちに困った人もいるでしょう。長いあいだ、GPSや移動を使うアプリ（Nike、Find My Friends、Highlightなど）はどれもひどいものでした。バッテリーがみるみる減るからです。 そこにiPhone 5Sが出ました。 ところが噂されていたiWatchの話でもちきりで、Appleが世に出した画期的なM7プロセッサは、ほとんど誰にも気づかれませんでした。私もそのひとりです。

ある日を境に、バッテリーをほとんど減らさずにできることが山ほど増えました。ある日を境に、豊かな情報がリアルタイムで手に入るようになりました。ある日を境に、それまでのフィットネス機器はまとめて時代遅れになりました。ハードウェアの問題が、ただのソフトウェアの問題になったのです。Movesは、それをきちんと活かした数少ないアプリのひとつでした。

心臓の鼓動

ちょうど同じころ、iPhoneのカメラで心拍数を測れるCardiioというアプリのことを教わりました。ダウンロードしたのは そんなの動くはずがないと思ったから でした。自分の心臓が1分に何回打つかなんて、心底どうでもよかったのです。

ところが数日いじっているうちに、すっかり夢中になりました。何がいいかというと、 測定が15秒ほどで終わる ことです。ポケットからスマートフォンを出してロックを解いてアプリを開く時間を入れても、せいぜい30秒。

本当に引き込まれたのは、 よく鍛えられたアスリートは安静時の心拍数が低い と知ったときでした。低いほどいい。今の自分の状態を、これほど手軽に客観的な数字にできる方法はありませんでした。しかも楽しい。

ある週、心拍数が異常に高いことに気づきました。ふだんは60前後なのに、80や90に近い。何かにストレスを感じているのだろうか。 私は長い距離を走り、翌日もう一度測りました。 60に戻っていました。おもしろい…

自分の体にNew Relicを入れたようなものです。グラフを見て不具合を直すことには慣れていました。ただ今回はサーバーではなく、自分の体でした。

走って生きる

その前の趣味はインドアのロッククライミングでした。Mission Cliffsから数ブロックのところに住んでいて、そこでボルダリングをするのが毎晩の習慣になっていました。ただ、かなり体に負担のかかるスポーツで、まもなく肩をあちこち痛めてしまいました。

代わりにランニングを始めました。ちょうど大きな失恋から立ち直りかけていて、走ることはいい支えになりました。それまでもNikeのランニングアプリをたまに使って、あちこち1マイルほど走ることはありましたが、まとまった距離を踏むことはありませんでした。GPSを使うアプリはバッテリーを食い尽くすので、使っていて楽しくなかったのです。

でもM7のおかげで、スマートフォンよりも先に膝のほうが音を上げるようになりました。買おうかと思っていた高級なGarminのランニングウォッチやFitbitは、もう必要ありません。大事な道具が足りないと言い訳をするのは簡単ですが、 必要なものはすべて、もうポケットの中にありました。

走った記録の写真をInstagramに載せることが、始めてからも走り続けるための力になりました。Nikeには、写真に地図と距離とロゴを重ねる簡単な仕組みがありました。#nikeplusのハッシュタグを付けて投稿すれば、世界じゅうのランナーからたくさんのいいねがもらえます。

私の好きなものが三つ揃っていました。 走ること、写真、そして注目されること。 みごとな組み合わせです。ランナーにとっていい時代でした。Runkeeper、Strava、Nikeなど、すぐれた道具とコミュニティがそこらじゅうにありました。

ランごとの数字が全部見えることで、最適化して伸ばしていく対象ができました。自分に課題と目標を出せるようになったのです。

ところが、ほかのことにはこういう仕組みがほとんどありませんでした。私はこの手の情報とやる気を、ランニングだけでなく暮らしのあらゆる面で欲しいと思いました。要するにアナリティクスです。アナリティクスなら作ったことがあります。スケッチを始める時が来ました。

血液の値

年に一度の健康診断が遅れていました。標準の検査を全部受け、自分の記録用に血液検査の写しをメールで送ってほしいと頼みました。

翌週、とても詳しいPDFが届きました。今の数値だけでなく、それぞれの理想的な範囲の説明と、私の状態についての分析まで付いていました。ビタミンDがとても低いのには驚きましたし、ほかにも理想的とは言えない範囲のものがありました。これは本当にすばらしいデータなのに、受信箱の中の テキストのPDF添付に閉じ込められていました。 もっとふさわしい姿があるはずです。

それ以来、私は毎月血液検査を受けて、変化をよく見ています。ダッシュボードに並べておけば、何を良くすべきかを常に思い出せます。記録するだけで良くなるという自分の仮説に賭けていました。もしそれが外れても、少なくとも状況が分かるので、もっと頑張れます。

体脂肪

『The 4 Hour Body』 でTim Ferrissは、自分を記録するために使った道具や検査をいろいろ紹介しています。そのひとつが、体脂肪率を正確に測るための携帯型のUSB超音波装置でした。体重はすでに量っていましたが、体脂肪率が分かれば、何が変わっているのかをもっとよく理解できます。

超音波の手順は少し面倒です。数分かかりますし、専用のジェルも要ります。それでも、そこから出てくるデータは本当に正確で、毎日見るのが楽しみでした。自分の体の中を実際に目で見られるのです。脂肪と筋肉と、その下の骨が何ミリあるかまで。

盛大に食べた週末のあとは体脂肪が跳ね上がり、その次の週にはむしろ前より下がる。手に入るデータはすばらしいのに、アプリの画面と見せ方はそうではありませんでした。

これが、自分のしているほかのすべてとどうつながっているのかを見たかったのです。

私は 記録するだけで良くなり始める という考えも信じていました。今の状態と変化の速さが分かれば、よりよい判断ができ、素早く試し、何が効いて何が効かないのかを理解できます。大事にしているものを測る仕組みがなければ、要するに計器なしで飛んでいるようなものです。

心拍数や体重のように手軽で頻繁に測れるものと、体脂肪や血液の値のように面倒だけれど深いことが分かるものと、そのちょうどいい釣り合いを見つける必要があると気づきました。両方そろえば、とてもいいダッシュボードになり、ひとつの物語を語れます。技術はこれから急速に良くなる、とくにこれが広まって需要が増えればなおさらだ、とも踏んでいました。マイクロチップを埋め込む版がKickstarterに出てきても、AppleがApple Watchで測り始めても、私はコードを数行変えるだけで済みます。

2014年4月：最初の下書き

データの升目

このポッド型のデザインの考え方とシンプルさが気に入りました。きれいな升目と、あとから差し替えられるモジュール。多くはAPIから100％自動にできますし、最近のクライミングのように手で入れるものも数分で済みます。

怠けても、ものすごく忙しくなっても、サイトは古びません。走るのも、音楽を聴くのも、Instagramに新しい写真を上げるのも、どうせ続けているのですから！

スケッチの大切さ

プロジェクトの初期は、たいていスケッチと考えごとに費やします。デザインを作るときもコードを書くときも、まず描いてみるほうが頭がはっきりします。

紙の上のスケッチが強いのは、速く動けるからです。思いついた速さのままアイデアを記録できる媒体は、たぶんこれだけです。頭の中だけで考えるのではなく、目に見える選択肢を自分の前に並べられるので、より確かな判断ができます。どんなに粗くても、二つの案を紙に並べれば、どちらがいいかは一目で分かることがよくあります。

Wacomのタブレット

紙のあとは、デジタルでも成り立つかを確かめるために、すぐPhotoshopでこの案を描きました。紙の小さなサムネイルでは良さそうに見えても、デジタルにすると機能しないデザインはたくさんあります。スケッチという形式には、つまらない案まで上品で洗練されて見せてしまうところがあるのです。ホワイトボードや紙で作業していると、縮尺をごまかして、入らない場所に文字を収めたり、要素が実際よりずっと広い面積を占めたりしがちです。

初期のモックアップでは、あえてスケッチ調のままにするのも好きです。紙の上にいるように考え続けられますし、 一度に一つの変数だけ を扱えます。レイアウトと中身は決まったので、次は色を足して、コントラストと大きさが成り立つかを確かめました。質感や書体、背景画像といった時間のかかる細部は、これが通ってから詰めることにしました。

この版はなかなか良さそうだったので、友人たちに送りました。かなり喜んでくれたので、Photoshopでさらに現実に近いモックアップを作り続けました。 これはいけるかもしれない。

それから数日、細部を整えたりバリエーションを試したりしました。中身と情報の組み立てにはとてもわくわくしていました。いつだってそこがいちばん大事です。ただ、見るたびに息をのむような様式やレイアウトではありませんでした。

しっかりしていて使えるデザイン。でも、世界一ではない。

April Zeroのスタイルガイド

これは未来でした。自分についてのすべてを魔法のように解析して分かち合えるというのは、人が空を飛ぶことや電気と同じくらい途方もないことです。 実際にそうであるのと同じくらい、未来的に感じられるものにしたかった。

ブランドを作るとき、私はたいていムードボードを作って、いろいろな様式を素早く試し、その空気を伝えるのに必要な要素を洗い出します。集めるものは何でも構いません。映画の一場面、写真、屋外広告、ほかのアプリの画面など。モーションデザインや広告からは、よく着想をもらいます。予算があり、腕のいい作り手が関わっているからです。DribbbleやBehanceにもいいものがたくさんあります。

すぐれたホログラフィックなインターフェースや、未来を感じさせるものはいくらでもあります。でも、もっと絞り込む必要がありました。人生のたいていの判断と同じように、私は自分に問いました。 Tony Starkならどうするか？

何度も出てくる要素に気づきました。 ホログラムの重なり、同心円、アイソメトリックな視点 & 細い線。 使いやすさを損なわずにこれを製品へ持ち込むのは難しそうでしたが、出発点としては上等でした。

中身も様式も絞り込めたので、もう一度、白紙に戻る時が来ました…

バージョン2

前のモジュール性と組み立ては残しつつ、あの退屈なレイアウトからは離れたいと思いました。そこで全体を「ミニアプリ」に分けて、テーマごとにデータを見せることにしました。最初の二つは「Sport」と「Explorer」と呼べそうです。

それぞれの区画をひとつの文脈に絞れば、数字やスタッツを来訪者に投げつけるのではなく、まとまりのある物語ができます。

それに将来、既存のものを作り直さずに新しい区画を足していけます。当時わくわくしていた案をいくつか挙げると、こんなものでした。

「Aviation」 自家用操縦士の免許を取る過程で、飛んだ記録を全部残す

「Underwater」 スキューバの資格を取る過程で、潜った記録を残す

「Digital」 パソコンに向かっているあいだ何をしていたか（デザイン、コード、画面収録など）

「Finance」 お金の使い方、億万長者になるまでの進捗バー

「Love」 恋愛を数字にする、など

中にはパスワードをかけたほうがいいものもありそうですが…

Sportを設計する

Sportの区画には、運動と医療に関わるものをすべて入れる予定でした。今の血液の値と、時間とともに伸びていく成績を見せます。

最初の版は、いろいろな活動が並ぶフィード型でした。血液の値の見せ方はとても気に入りましたが、フィードはひと目で読み取るには難しすぎると感じました。直近の数件しか見えず、全体像がつかめないのです。

1年ぶんのデータをひと目で見られるようにしたかった。そのためには、まとめた数字を増やし、全体をもっと詰める必要がありました。

レイアウトは良くなりましたが、先進的な感じはしませんでした。それは作りながら、控えめなアニメーションや細部を足して解ける問題です。

これがコードで組んだ静的な版です。両脇の暗い列がコントラストを足し、中身の列をずらすことでホームページとつながります。

すべてを探索でき、触れられるものにしたいと思っていました。何かにカーソルを載せれば、それについてもっと詳しく分かる。裏側には、見せられるデータがまだたくさんありました。

スピナー

それまでのサイトの解析を見ていて気づいた癖があります。たいていの人は1、2ページ見て離脱するということです。どれだけすばらしい世界が広がっていても、ほとんどの訪問者はそこまで行きません。何かをクリックするのはかなりの決断で、全部の区画をくまなく見て回る人はいないのです。

そこで、新しい種類のインターフェースを作りたいと思いました。最初から何かをクリックする覚悟をしなくても、マウスを動かすだけで探索できる。軽やかで、簡単で、楽しい小さな反応があるもの。

こうしてスピナーが生まれました。最初のiPodのように、使って楽しく、革命的なものを作りたかったのです。

それは、退屈な四角いレイアウトから離れることでもありました。ムードボードには丸く動く要素がたくさんあったので、それをインターフェースの中に自然に置けます。

十分にわくわくするモックアップができたら、いよいよコードを書く番です。以前ブログを試したときのJekyllの土台がすでにありました。新しいブランチを切って、スピナーを書き始めました。

初期のコードのプロトタイプ

これは、デザイン & コードの両方で問題に取り組むことがとても役に立つ、いい例です。見た目が良いことも大事ですが、どう感じられ、どう動くかを見極めることも同じくらい大事でした。そこで、もともとブログに使うつもりだったJekyllのコンテナの中で、軽いJavaScriptの簡単なプロトタイプを組みました。

最初の版は、見た目はぱっとしませんでした。バージョン1（上）はごく基本的なものです。うまく回して位置を揃えるのが少し厄介だったので、作りながらデバッグするために色の派手な円を使っていました。

バージョン3（下）では輪の要素と、文字にカーソルを載せると円が回るといった反応のためのJavaScriptを足しました。

バージョン5では登場のアニメーションを足しました。動いている最中の要素にトランジションをかけようとしたので、思っていたより難しい作業でした。

バージョン8では、登場とは違う設定で退場のアニメーションを入れ、何かをクリックしたときの手応えを大きくしました。

どの版も、特定の問題をひとつ直すか、少し良くする機能をひとつ足すものでした。使っていてどんどん楽しくなっていくのは、うれしい驚きでした。ここには時間をかける価値のあるものがある、という自分の考えが裏づけられました。 もう少し磨いてデザインの細部を詰めれば、すばらしい体験になる。

そうして私は作り続けました。1日に何時間もページを再読み込みしては、アニメーションをより滑らかに、より面白く、より正しい間合いにしようとしていました。

自分では楽しんでいましたが、デザイン上の問題がないかを確かめるには、もっと裏づけが要ります。当時はあちこちのコーヒーショップで働いていたので、見知らぬ人に声をかけてサイトを触ってもらいました。

渡したのはノートパソコンと 「これ、使ってみてください」 という一言だけ。あとは何をするかをじっと見ていました。いくつか問題に気づきました。多くは、実際にはリンクではないところをクリックしてしまうというものです。よく押される場所までリンクの範囲を広げ、押せると分かるようにホバーの効果を足しました。まもなく、協力してくれた人たちはサイトの移動にも理解にも困らなくなりました。

結果として、期待どおり直感的なものになりました。それ以上に、みんなカーソルを動かして区画をクリックするのを本当に楽しんでいて、自分が引き起こしたアニメーションに少し驚き、喜んでいました。

ホームページの中心となるデザインに納得できたので、次はサイトの中でいちばん怖かった部分に取りかかる番でした。

Explorer

ここからは技術的な問題が次々に出てきます。それまでの区画は、簡単なデータでスケッチしてPhotoshopでモックアップを作れば済みました。でもここには本物の中身が要ります。APIキーを用意して、Movesから自分のデータを取り込み始めました。

サンフランシスコで数週間過ごすうちに、もっと多様なデータが必要だと気づきました。そこでMacBookとパスポートを持って、調査のためにニューヨークへ向かいました。この区画でその感覚を伝えるには、自分が本当に 探検と冒険の心持ち になる必要があったのです。

飛行機の移動、タイムゾーンの変化、セントラルパークでのラン、そして食べたピザの数をどう見せるかを考えなければなりません。行って正解でした。Movesのタイムゾーンの扱いに、考慮すべき問題がすぐにいくつも見つかったからです。サンフランシスコにとどまって、国際的な検証は昔のパリのデータで済ませていたら、次にタイムゾーンをまたいだ瞬間に全部が崩れていたでしょう。

帰りの飛行機の中で、Movesのデータを全部処理して、簡単なタイムラインに並べ始めました。読めたものではない代物でしたが、旅の本物のデータで動いていました！

いちばん大きなデザインの判断のひとつが、タイムラインを横向きにして、日を縦に積み重ねることでした。

似たデザインはほとんどが縦向きで、私がぶつかっていた文字の重なりの問題を都合よく避けていました。それでも私は、すべての日を並べて見比べられることが欠かせないと考えていました。1日ぶんを一本の軸にして、あとから豊かなデータを載せられるようにしたかったのです。ラベルを見せる問題は、別のやり方で解くしかありません。

ラベルを4段にうまくずらして配置するアルゴリズムを試し始めました。場所と場所の時間差を見て、文字を出す余白が必ず取れるようにするものです。

バージョン9は明るい背景でしたが、バージョン10では暗い背景に変えました。地名がより浮き立ち、サイトのほかの部分の様式とも合うからです。

最初は主要な場所だけを見せて、カーソルを載せるとその日の詳細が出て、小さな文字も現れるようにしました。家やホテルのように何度も出てくる場所は、滞在時間は長くてもほかの場所ほど面白くないので、表示を控えめにしました。

そんなある日、公園で外仕事をすることにしました。なにしろ区画の名前はExplorerなのですから。

そして… 何ひとつ読めませんでした。

白い背景だった元の版は問題なかったのに、配色を改良した新しい暗い版は、日なたではまったく使いものになりませんでした。

だからこそ 自分の製品を実際の場面で使うことがとても大事なのです。 どんなに小さなことに思えても、現場から離れているほど、不意を突かれたり設計の穴を抱えたりする可能性が高くなります。私が飛行機の中やコーヒーショップ、逆さまの姿勢、そのほか変な目で見られそうな状況で作業するのが好きなのは、そのためです。違う視点に頭が開き、ふだんなら見過ごす問題が浮かび上がります。

そこで判断を迫られました。95％の人にとって室内で見栄えがいいのだから暗いままにするのか、それとも全部作り直して明るくするのか。自分に起きたことは、誰かにも起きるかもしれない。もっと大事なのは、また自分に起きるかもしれないということです。

行き詰まったり段差にぶつかったりしたとき、とにかく進み続けて、解けるまで何時間もぶつけたほうがいい場合があります。逆に、いったん切り替えて別の角度から近づくほうがいい場合もあります。私は記録用に暗い版（11）と明るい版（12）を作って、ほかの問題に移ることにしました。

移動をどう表すか

最初の版では、移動と場所が同じ線の上にありました。もっと直感的にしたくて、地点から地点への移動を跳躍として表すことにしました。

まとめの数字

いちばん上の世界地図で今いる場所を見せるのはそのままに、ページ全体の統計も足したいと思いました。30本のタイムラインを追わなくても、そのページの要点がつかめるように。そこでもう一段の構造を入れて、 全体を月ごとに分けました。 月ごとに統計が付き、互いに見比べられます。

月ごとに自分の習慣がどう変わるかを見るのは、とても面白いものでした。旅と空港で過ぎた月もあれば、よくクライミングに行った時期も、1日の大半をコーヒーショップで過ごした時期もあります。ニューヨークから戻るとイタリア料理店の数がすとんと減り、代わりにブリトーが並びました。

レスポンシブにする

レスポンシブ版に取りかかると、雲行きが怪しくなりました。デスクトップでうまくいっていた横向きのタイムラインが、小さな画面には収まりません。縦にする必要がありますが、モバイル対応のためにサイト全体の機能を捨てたくはありませんでした。そこで、両方の向きで動き、画面の大きさが変わったら滑らかに切り替わるように、コードを書き直し始めました。

デスクトップを壊さずにモバイル専用の版を持てるコードは動きました。これで、大きい版を狭い場所に押し込むのではなく、モバイルのデザインをゼロから考えられます。

同じデータをいじり続けるのに、そろそろ飽きてきていました。デザインは形になってきたのに、まだ何かが足りない。景色を変えて、新しい視点が欲しくなりました。

5月6日、コーヒーショップ（Coffee Bar）で作業していたとき、友人からメッセージが届きました。

完璧なタイミングでした。