ワラガイ ケン
こんにちは、ecboのワラガイです。荷物預かりサービス「ecbo cloak (エクボクローク) 」のデザイン/クリエイティブ全般&プロダクト周りをまるっと担当しています。
今までWeb版のみのサービスでしたが、今回やっとアプリをリリースするまで至ったのでそれまでの経緯を少しまとめたいと思います。
アプリを作り始めた理由
今回アプリリリースに至った背景は主に２つあります。
1. 「事前予約」から「当日予約」へのニーズ拡大
2017年の1月にサービスローンチした当初、訪日観光客が利用できるサービスを意識してデザインしていました。
というのも、ecbo cloak誕生のきっかけは代表であり相方の工藤が、渋谷駅で訪日観光客がスーツケースを預けたいのにコインロッカーが全て埋まって困っていた人を目の当たりにした、という原体験から生まれたことにもあります。
リリース当初から5言語化対応をし、ローンチ時のプロモーションビデオには海外からの旅行者をイメージしたものにしました。
おかげさまで多くの海外の訪日メディアや旅行ブログに大きく取り上げていただき、ローンチしてしばらくはユーザーや予約の大部分を海外の方が占めていました。
月日が経ち、最初は個人経営のカフェやお店が多かったところ、JRや郵便局など大手との提携が実現していく中で、海外旅行者の利用に加わり日本人のお客様の利用も徐々に増え始めました。
海外旅行者からすれば、旅行先で使うサービスをわざわざアプリを落として予約するより、ブラウザ上で予約できるのはむしろ好都合でしたが、日本人の国内利用、しかも例えば目の前にある店舗での利用を考えれば、やはりスピードと快適さを重視したアプリ化は急務でした。
2. 「日常利用」「リピート利用」の増加
海外の旅行者の場合、どうしても日本を訪れる回数に限りがありましたが、日本人の利用が増えるにつれ、普段の生活の中で2回目、3回目とリピート利用するお客様も増えていきました。
中には10回以上利用いただいているお客様もたくさんいます。やはりその場合、わざわざブラウザを立ち上げて何度もログインし、予約を取ってもらうより、ダウンロードしたアプリで快適に利用してほしい、という想いがありました。
アプリ化までのタイムライン
アプリリリースまでのタイムラインはざっくりこんな感じでした。
- 18年3月：既存サービスの見直し
- 4月：ワイヤー１から着手
- 8月：スタイルガイド完成
- 9月：社内フィードバック集め開始
- 10月：Android版調整
- 12月：テストリリース
- 19年1月：正式リリース
本格的に動き出しはじめたのは2018年3月頃。
社内ではデザイナーが僕1人だけだったので、最初デザイナーをしている大学からの友人の力を途中まで借りつつ、まず現状のウェブ版のサービスの流れを改めて見直し、アプリ化するにあたり変えたい箇所をリストアップしていきました。
こんな感じでオフィスの壁に貼って、変更点をリストアップしていきました（狭いオフィスだったのですがけっこう壁中ワイヤーやらデザインやらを好き勝手貼りまくってました）。
現状の整理ができたところで、一度各画面を要素に分解して、改めて手書きのスケッチでワイヤーを考え直していきました。一見プロセスとしては順序が逆ですが、基本的には今ウェブにある要素から不要な部分を引き算（新しい要素のアドオンはしない）という方針で分解を進めていきました。
手書きのスケッチを元に、sketchで少しずつ形にしていく作業。この頃からフロントエンジニアもチームに加わり(それまでは社内エンジニア不在でした…！)、エンジニアサイドの意見も少しずつデザインに反映されていきました。
各スクリーンのラフなワイヤーが出来上がり始めると、これらを下記のようなフロー図にまとめていきました。
まあそんなこんなで粛々とUIをまとめていくのですが、今回アプリ化と合わせて形にしたかったのがコンポーネントごとのデザインスタイルガイドでした。2年前にウェブ版を作成した時にガイドラインをしっかりとまとめ切ることができず、修正していく内に少しずつトンマナが変わってしまったという苦い経験がありました。
色々な会社のガイドラインを参考にしつつ、徐々に作り上げていきました。今後はアップデートを加えつつこれらを元にstorybook化して公開できるレベルまでもっていく予定です。
9月に入り（プロジェクト開始から半年）、アプリはある程度形になってきました。この頃から社内チーム用にexpoでアプリのベータ版を配布し、フィードバックをセクション別にtrelloにまとめる形で集めはじめました。
10月頃になるとある程度形になってきたので、Android版のアプリに着手しはじめました。今回少ないリソース（この時点でデザイナー1名、エンジニア1名）でアプリをスクラッチから作成することを考慮し、同じソースでiOS/Android両方作れる「React Native」を採用しました。
それまでは自分がiPhoneユーザーということもあり、あまりAndroidの方に手が回っていなかったのですが、その後入社したエンジニアの柴田が1ヶ月ほどでまとめてくれ、非常に助かりました。
そして年末にはなんとかテストバージョンが完成し、年明けに集めたフィードバックを元に修正を加え、今回2019/1/21にv1.0を正式リリースするまでに至りました。
工夫したところ
冒頭でも少し述べた通り、今まで海外旅行者の事前予約（自国で訪日前に予約をする）利用が多かったものが、利用シーンが拡大し「予約をしていないが、目の前の店舗(あるいは近くの店舗)で今すぐ利用したい」というニーズが増え始めました。
そのためアプリ立ち上げ時にまず位置情報付きの周囲のマップが表示され、その場から近くで利用できる店舗がひと目で分かるようにしました。
予約までの操作時間をなるべく減らしたい
アプリ化の最初の頃の議事録に残っていたメモです。
アプリではなるべく少ないタップ数で、なるべく短時間で、予約完了に至るように作成しました。目の前の店舗で今すぐ荷物を預けたい場合、10秒ほどで予約を完了することができます。
他にもウェブ版で修正したいけれどなかなか手が回らなかった細かいところを、アプリ版ではいくつも改良しています。
例えばウェブ版の検索だと、アクセスしている時間帯に限らず、予約できる店舗のみ表示する仕組みでした。そのため、仮に夜遅くにアクセスしたとき、ほとんどピンが表示されない状態になってしまい、日時検索をしないと予約可能な店舗が探せない状態でした。
今回アプリでは日中は変わらずすぐに予約ができる店舗が表示され、夜は店舗のオープン時間データを元に、翌日の日中で予約できる店舗を表示する仕組みに変えたことで、店舗が探しやすくなりました(下図) 。こういった小さな工夫を今回のアプリにたくさん仕込んでいます。
また今回は日本のマーケットだけでなく、台湾・香港のマーケットでも両アプリをDLできるようになっています。これはecbo cloakグローバル展開への第一歩であり、様子を見つつ他のマーケットにも徐々に広めていく予定です。
余談ですがアプリの言語対応にはlocizeを使っています。
テキストセクションごとにキーを割り振って、左側に値する翻訳を右側に入力するだけでどんどんシステムに反映される仕組みです。このおかげで翻訳作業がうんと効率良く、スピーディーになりました。
まとめ
今回のアプリ化にあたり、まだまだアップデートの余地はたくさんあるものの、今までのウェブ利用とは比べられないくらい使いやすい体験に生まれ変わったと感じています。これからもどんどん改善を加えていく予定ですが、「v1.0」としては非常に満足度の高いアプリに仕上がりました。
既にウェブ版で利用したことのある方も、まだ利用していない方も、ぜひダウンロードして利用してみてください！
ecbo cloak（エクボクローク）
iOS版：
https://itunes.apple.com/jp/app/id1443707795
Android版：
https://play.google.com/store/apps/details?id=io.ecbo.cloak&hl
最後に…やっとここまで来ましたが、これはまだまだスタートラインに立っただけのことだと思っています。これからどんどんユーザーヒアリングを重ね、フィードバックを元にブラッシュアップしていきます。他の海外マーケットにも少しずつ広げていきます。
また、僕らはプラットフォームを提供してる以上、今回のように荷物を預けたいユーザーだけでなく、荷物場所を提供してくれるオーナー様も、私たちにとっては立派なユーザーです。今後はオーナー様向けのアプリにも着手していきます。（本当はすぐにでも届けてあげたいのですが、今のリソースではどうしても時間がかかってしまい申し訳ない気持ちでいっぱいです。）
僕たちと一緒にecbo cloakを大きく成長させたい方、世界に向けて大きくチャレンジしたい方はぜひお声かけください！デザイナーはもちろんですが、他の職種でもウェルカムです。
Wantedly採用情報：https://www.wantedly.com/companies/ecbo/projects
@kecbon note記事：https://note.mu/kecbon/n/nb0b868c7fb7e
