MEMOPATCH

歩いて5分の場所検索サービス、PatheeのiOSアプリはどうやって作られたのか?

  • このエントリーをはてなブックマークに追加

Goodpatchは外で使う検索サービス、Pathee(パシー)のUIデザインを担当しました。インタビューとして、Patheeのサービスを作られたTritrueの寺田真介さんと廣瀬誠さん、iOSアプリ制作を担当されたNotespaceの河村真也さん、弊社代表の土屋尚史、UIデザイナーの貫井伸隆、ディレクターの瀧本優の6人にお話をお伺いしました。

Patheeのサービスについて

左から、河村真也さん、廣瀬誠さん、寺田真介さん

 

――
では、まずPatheeのサービス内容について教えて下さい。
寺田
Patheeは外での検索体験を変えるサービスです。全ての情報を場所と紐づけて、整理してユーザーに提供します。例えばGoogleで「カレー」と検索すると、結果1位はカレーについて書かれたWikipediaのサイト、2位はカレーレシピを紹介しているCookpadのサイトです。外にいる時に、Wikipediaでカレーの歴史を調べることはないですし、Cookpadでカレーのレシピを調べることもないでしょう。そこで、外だけの情報を出したいと考えるようになりました。一言でいうと、Patheeは外で使う「検索エンジン」です。
――
Patheeができた経緯について教えてください。
寺田
元々、位置情報を使ったサービスを作りたいということを漠然と思っていました。その頃はFoursquareのチェックインと同じような内容しか思いつかなかったんですけど、いつも論文をチェックするようにしていて、流行の技術は何かなーと調べているうちにピンと思いついた技術があって、今回やろうと思いました。

 

論文のサイト http://ieeexplore.ieee.org/

 

http://search.ieice.org/

 

寺田
住所の情報がついているページだけでは、食べログの様なサービスと同じになってしまうけれど、住所が分からなくても推測する技術を思いついたので、検索エンジンとしてPatheeを作ろうということになりました。検索エンジンを作るにはお金が掛かるもので、プロトタイプは作ったものの、サーバー代がなかったため、困っていました。フーキーズという会社に紹介をしてもらった、ディレクターズの社長にPatheeのプロトタイプを見せたら、次の日に「サーバー貸すよ」と、ポンって1台、さらにその翌週もう2台持ってきてくれて、びっくりしました。
土屋
その時は1人だったんですか?
寺田
この時は1人で行きましたが、起業は2人でしました。
土屋
そのきっかけって何だったんでしょうか?
寺田
僕が32歳の時、勤めていた会社を辞めて起業しようと思った時に、プログラミングが出来て、自分と同い年で、結婚していない人を探していたんです。同年代の人はたいてい企業に勤めていて、ローンがあるとかそんな感じで。大学での同級生だった廣瀬に声を掛けました。
廣瀬
僕は当時、SIerでSEをやっていました。「これをやろうぜー」って言って集まったわけではなく(笑)。
寺田
彼は6ヶ月間くらいどうしようかなーと言っていました。僕は仕事でプログラミングをやっていたわけでもなかったので、1人では絶対だめだろうなと思っていて。
土屋
廣瀬さんはどの時点で一緒にやろうという感じになったんですか?
廣瀬
最初から一緒にやりたいという気持ちはあったんですけど、面白さや便利さなどのメリットと、失敗したときのデメリットについて考えていました。そのデメリットをどれくらい許容できるか、万が一失敗したとしても、自分の中で本当に後悔しないようにしたいということを考えてました。大学の頃から起業すると言っていたし、実際しそうなタイプだったので、いつかくるかな?と思ってはいて、仕事をするときにも、役立ちそうなことを意識して選ぶようにしていました。
土屋
1番目のアイデアがPatheeでしたか?
寺田
いえ、違いました。最初はログを解析して、そこからユーザーに価値を提供する、というようなことを考えていたのですが、これだ!というアイデアは起業してからできたという感じです。
土屋
大体起業して最初に出たアイデアというのは失敗する。僕もそうですけど、元々コーワーキングスペースについて考えていて、途中からUIにフォーカスして今に至りますし。
寺田
Patheeは5つ目くらいです。資料作ったレベルのものとか、プロトタイプを作ったものを含めると、Patheeの前に4つくらいあります。実は事前に先生にも見せて、特許取れると言っては頂けていて、そんな勢いなのか、と思いました。
土屋
そのPatheeの原形となるサービスはいつ公開されたんですか?
寺田
ディレクターズさんのサーバーを借りた後なので、8月、9月あたりだと思います。
土屋
僕らが会った時にローンチしたばかりという状況だったんですね。
寺田
誰に使って貰うつもりもなく(笑)。検索の結果を表示するのに1分掛かっていて、それを解決して3秒にするのに3ヶ月掛かりました。サーバーを使って実験できるまでは試せなくて、それからさらに作りはじめた感じです。
土屋
会社をはじめて、Patheeができたのは何年後なんでしょうか?
寺田
起業して1年経って思いついて、1年半後にできました。

左から、土屋尚史、瀧本優、貫井伸隆

 

――
この6人が集まった経緯を教えて下さい。
土屋
去年の夏にディレクターズの橋本さんとの飲み会で知り合ったのが寺田さんと河村さんでした。寺田さんに、「どういうサービスやっているんですか?」と聞いたら、「検索サービスをやっている」と言っていて、説明を聞いたら一発でどういうサービスか分かって、価値も理解できるので面白そうだと思ったんです。あとポイントだったのは、ディレクターズさんが普通では考えられないくらいのサポートをしているので、寺田さんはそれくらい人からサポートしてあげたいと思われる人なんだろうなと思いました。
寺田さんは元々エンジニアではなかったけど、Googleが出している論文を全部読んでいたり、Patheeの設計を自分で考えたということからエンジニアリングに対する想いの強さを知って、サービスのシンプルさとこのエンジニアリングの点が、僕にはGunosyと重なって見えた。Gunosyと最初に出会ったときみたいな感じがして、「やりますよ」と言いました。河村さんとも仕事の仕方のマインドが合って、「いつか一緒に仕事しましょう」と言っていたので、PatheeのiPhoneアプリを作る時にはここにいるメンバーでサポートしようよ、という感じでみんなで話していました。
寺田
僕は土屋さんのお話を聞いていて、すごい人だな、と思っていたので、まさかサポートしてくれることはあり得ないだろうと思っていました(笑)。Gunosyのデザインを担当されていたと有名だったので、声はかけたいなと思っていたのですが、サポートの話については本当かな、と思って半信半疑でした。Facebookでメッセージをやり取りしている時に確認をしたら、普通に「やりますよ」と言って貰えて、あっ本当だったんだ、と。同じように、ディレクターズさんも、マシンがきたけど、何か裏があるのではないかと心配になったりもしました。
河村
ディレクターズさんとの電話で、面白い検索エンジン作ってる変な人がいて、そのアプリ作りたいんだけどっていうところまで聞いていたので、あの会でやっと会えたという感じだったんです。
土屋
実際にiOSアプリを作るということが決まってからは、お金は資金調達ができてから返してもらう、ということを決めました。お金が出ないプロジェクトだったので、社内で誰が担当してくれるかな、というときに、Patheeっていうサービスがあるんだけど、興味ある人!って言って、募集をかけたときにきた2人が貫井と瀧本だった。
貫井
こういう検索エンジンを作ってる人がいるんだけど、興味あればミーティング参加してよーって言われたから、聞く聞く〜って入っていったら、知らぬ間にプロジェクトに入れられてた(笑)。
土屋
みんなやるかどうかずっと半信半疑でした(笑)。瀧本がディレクターで、貫井がUIデザイナーということでやろうとなって、なるべく早く動くものを作りたくて早めの段階でデザインを作って持っていって。河村さんが入るまでは、5人で早めに動くプロトタイプを作って、ブラッシュアップをしていたという感じで、2~3ヶ月くらいやっていました。
寺田
お金もなかったので、アプリを作るのは、プログラムなので最悪自分たちでやろうと考えてはいたのですが、デザインだけはできないということが分かっていました。誰が作るのか、というところは決まっていない状態で、話が進んでいました。
土屋
僕らも、誰がiOSの実装をやるんだろう?と思いながらプロトタイプを作っていて(笑)。アプリの実装段階に入ったのが、去年の12月くらい。この時点で、河村さんはPatheeは楽に作れるだろう、3日もあればできると思っていた(笑)。

PatheeのiOSアプリ制作について

 

――
デザインについて、気をつけたところ、こだわったところを教えて下さい。
貫井
「歩いて5分の場所検索」からぶれないようにしようと思いました。場所検索だから地図は出ているべきであるということと、どうやって検索するかというところを考えて、デザインを作りました。サジェストのワードを出して、地図を出して、検索バーを出せば、Patheeがやりたいことが叶うだろうなと思ってこうなりました。
土屋
PatheeはまずスマホのWeb版があって、ベースがあったんです。でも今回作ったiOSアプリ版のUIは全然違う。

 

Web版

 

iOSアプリ版

 

土屋
スマホのWeb版とiOSアプリ版でデザインを変えたポイントは?
貫井
Web版の課題点としてあったのは、地図が見づらかったことと、地図とリストが分断されていたのが使いづらいということでした。Web版は検索エンジンっぽく検索窓があって、検索してからボタンを押すと地図が表示されるような仕組みですが、iOSアプリではまず地図で現在地を示して、サジェストのワードを出すようにしています。地図を見ながら検索できるようにすることで、情報の一覧性を上手く表現するUIを目指しました。リストを見始める人は、地図は使わないだろうから、リストを見ていくうちに地図が消えるようにして、視覚的に見たい人は地図から見るだろう、ということで入口を2つ用意したというところがポイントです。さらに、サジェストの数も増やしました。
寺田
僕はこれを聞いたときに、2択というのをUIで表現するというところが すごいと思いました。自分たちだけでやっていたら、思いつかなかったのではないかと思います。
瀧本
今回はランディングページにもこだわりました。シンプルなコンセプトだったので、どういう特徴かというよりも、どういう風に人々が使うかという利用シーンを考えて、ストーリーを埋め込みました。まずスマホを持って、Patheeで検索して、5分以内で行けるところが見つかった!という内容をこの中に凝縮したという感じです。
寺田
これは僕にとっても驚きで、ちゃんと時系列になっていました。単に説明じゃなくて、話の流れができていて、なるほど、という感じになりました。
瀧本
タイムラインを意識して作って、メインイメージはグッドパッチのサンフランシスコ社員旅行の中で撮影しています。アニメーションにもこだわっていて、みんなで議論しながら、何回も撮り直しました。

Pathee ランディングページ

寺田
これを見ただけで、使いたい!という人がTwitterにたくさんいました。
瀧本
Twitterの反応を見ていて、ランディングのデザインが良いって出てたので、やって良かったなと思いました。コンテンツとしてはストーリーしかなかったので、アニメーションにもこだわって、良いランディングページができたのではないかと思います。
――
開発で苦労したところを教えて下さい。
貫井
俺がややこしかった。これは河村さん的に、絶対そう(笑)。
河村
貫井さんと関わるべきじゃなかった(笑)。
土屋
河村さん的には、Patheeはある程度元となるものがあるし、APIもあるし、プロトタイプもあると。これは3日でできると、楽観的に思っていたんです。Patheeというのはすごくシンプルなサービスで、ページ遷移もそんなにないんですけど、だからこそインタラクションにこだわらないといけなかった。河村さんはそのインタラクションにこだわるというところに関しては、そこまでやったことがなかったそうで。アプリを作る過程で、デザイナーとの関わり方というのは今までどんな感じでしたか?
河村
基本的にPSDを貰う。アニメーションなりはこっちで考える。作ったら、全然違う!といって動画が送られてくるのですから。びっくりしました(笑)。

 

送られた動画

Pathee from Goodpatch on Vimeo.

 

土屋
うちが他の会社と違うのは、徹底的にiOSエンジニアをいじめ抜くというところです。インタラクションにかなりこだわる。たしかに静的なデザインはプロトタイプとして作ったけれど、デザインというのはそこで終わりではなくて、それからの行程がもっと重要で、そこはエンジニアの協力が確実に必要。
貫井
どのプロジェクトも同じようにやっているんですけど、実装をお願いするエンジニアが挫折するんですよ。それと上の人が、このレベルで良い、とローンチしちゃうんですよね。ここで良いから、あと1ヶ月掛かるとか言ってられないから、と言ってローンチされてしまって、こだわれない。そこに時間を一番使いたいのに、そこができないという。絵だけ作るのは1〜2週間あればできるし、それからエンジニアに任せれば1ヶ月もあればできちゃう。そこからプラス1ヶ月くらいチューニング期間が欲しいんですよね。本当は。ユーザー体験をコントロールする上でインタラクションの部分というのはとても大事で、そこは頑張って密に協力していかないと、たぶんできない。
河村
想定していたインタラクションのレベルを超えちゃうと、結局ビューを重ねる順番が狂ってくるので、1から全部作り直しなんですよ。
土屋
何回作り直したんですか?
河村
4回です(笑)。作るのに1ヶ月くらい掛かりました。それから調整するのを含めると、2ヶ月掛かりましたね。
土屋
これ、普通なら訴訟もんですよ(笑)。受託では絶対できない作り方です。今回は貫井が異常な程こだわった。言葉では伝えられないんだよね。これはエンジニアとデザイナーの壁の問題で。河村さんと距離があったので、どういう風にして伝えるかという問題もあった。そこで貫井がどうしたかというと、動画を送りました。
貫井
はじめに作った動画を元に河村さんが作ってくれたものを見て、バウンスがちょっと違う!と言って(笑)。それを調整しに行ったんだよね。それから、もしかしてこんなのってできます?って言ってさらに動画を送りつけたんだけど。
河村
これは勘弁してくれ、となりました。このくるっと回るのは無理です、と言って、ぽこぽこだけになったのですが、それだけでもタイミングのところで苦労しました。
貫井
ぽこぽこ以外にも工夫していて、地図を指でひっぱると大きくなるようにしたり、途中から道順がでるようにしたり、リストが上に上がったときにメニューバーが縮まるようにもしています。
河村
このメニューバーのところは3日掛かりました(笑)。
貫井
他にもイースターエッグを入れるなど遊び心を交えて、プロダクトの差別化を図りました。
河村
イースターエッグはちょっと勘弁して下さいと言ったのですが(笑)。
貫井
削除ボタンも途中で変わりました。始めはポップアップで削除かキャンセルかを選択する仕組みだったんですけど、それがいやだと言って、2回タップにしてとお願いしました。作ってもらってからタップエリアが狭いと言って直してもらったり。地図からナビゲーションバーをタップしたときに、ちゃんと検索ボックスが戻ってきてほしい!とか(笑)。
河村
あと読み込み中のレーダー!実はこれ、四角形ではないんですよ。微妙に丸くなってるじゃないですか。マスクかけられなかったんですよ。角丸ならできるんですけど。ということで、僕が真ん中がくり抜いてある白い画像を描いて、貼ってるんです。原始的(笑)。
廣瀬
角丸ではダメだったんですか?
貫井
ダメです!しかも河村さんが作ったベータ版ではマスクがずれていて、マスクを作り直して貰いました。
河村
素材はこんな感じで、僕が描きました。

 

土屋
河村さんが当初3日でできると思っていたアプリが、結果3ヶ月掛かったんですね。4回コードを書き直して。
貫井
なぜなら、俺と関わってしまったから(笑)。
土屋
ここでポイントなのは、良いプロダクトを作ることが目的になっているところです。一番良いのは、お金が絡んでいないというところ。これが本当に重要で、お金が絡んでないからこそできる。Gunosyもそうだったんですけど、お金が絡んでいないからこそ、それをやろうということになって。お金を貰うとなると、金額がこれくらいのものだから、これ以上はできないって思う訳ですよ。でも、そもそもお金を貰っていないので、何を目的にするかって、いかに良いプロダクトを世に出すか、というところ。
貫井
この場合は、自分のポートフォリオに載せられるようなものを作ってやるんだ、っていうことがモチベーションになります。
河村
貫井さんは分かっていると思うけど、僕のやる気の乗せ方って「やりがい」じゃないですか。あと、僕が納得できないと絶対やらないというところを分かっていると思うので。そこでプロダクトを良くしていくという方向に向くのかな、と。
――
今後の展望を教えて下さい。
寺田
PatheeをGoogleに並ぶ検索エンジンまで育てたいと思っています。
土屋
外で使う検索エンジンはPatheeでしょ、みたいな。
寺田
もうGoodpatchさん以外には頼めないですね。こんなに良いものを作って貰えたら。

 

インタビューは以上です。本日リリースされた、PatheeのiOSアプリはApp Storeからインストールすることができます。

 

 

このインタビューで出てきたエピソードを思い出しながら、皆さんも外から検索してみて下さい!ありがとうございました。

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。