前置き
この記事は、STORESレジができるまでにやったことや考えていたことをまとめています。僕は、プロジェクトリーダー兼リードデザイナーとして全体の設計と推進をする役割として関わっており、実際に手を動かして一緒に作ってきた仲間が入れ替わりもありながら20~30名ほどいます。そのため、記載されているアウトプットのほとんどはチームで作り上げたものだということにご留意ください。
はじまり
2019年の5月。僕はsoiというプロダクトの次のアクションを考えていました。ネットショップよりもライトな取引をするためのソーシャルxモバイルベースの販売プラットフォームとしてのsoiには可能性を感じつつも、初期的なPMFには至っておらず、ピボットする方向を探していました。
検討を進める中で、heyとして、ゼロからの新規事業をこのまま探索していくか、既存事業との相乗を狙った別の事業を作っていくかをさとうさんと話しはじめ、結論としてsoiをクローズし、STORES.jpとCoineyをつないだPOSレジサービスを作ることになりました。
オンラインとオフラインをひとつに
ネットショップ作成サービスとお店のキャッシュレス決済サービスという事業を持ち、そのふたつをつなぐ存在としてのPOSレジサービスというのはぱっと聞いた感じはわかりやすいですが、世の中にはすでに多くの類似サービスが存在します。
僕らがまず考えたのは、なぜいま、POSレジを作るのか。市場にたくさんの製品がある中で、自分たちにしかできないことはなんだろうか、ということです。
2019年は、D2CやDNVBと呼ばれたネットショップ発のブランドが話題になり、日本でもPOPUPやお店をオープンする流れが注目されてきていました。STORES.jpを利用していただいているブランドにも、店舗を構えたりPOPUPをするブランドが増えはじめていました。
ネット発のブランドがオフラインへ進出すること。リアルのお店がネットショップをはじめること。オンラインとオフラインというチャネルをまたいで活動の幅は広くなっていくし、ブランドが複数のチャネルで活動するというのは長期的なトレンドとして変わらないだろうと考えました。
そして、オンラインとオフラインがひとつになることを前提においた、スモールマーチャントのためのサービス・プロダクトを作るというのは、STORESだからこそできる価値提供になるはずだと考えました。
KITASANDO COFFEE に学ぶ
チームをつくる
ネットショップを中心としたブランドは店舗をどう捉えるのか。店舗からはじまったブランドはネットショップをどう運営しているのか。POSシステムに求められることは何か。レジってなんなのか。いやそもそも小売とは...。僕らはほとんどなにも知りませんでした。
これまでに存在しないまったく新しいサービスを作るわけではなく、すでに存在する仕組みやオペレーションを基本としながら、オンラインとオフラインの境をなくしていく。CoineyとSTORES.jpをつないで、新しい価値提供ができるようにしていく。その方向性を探っていく前段階として、店舗についてのヒアリングや他社サービスのリサーチを進めつつ、プロジェクトを進めるための体制を検討しはじめました。
かんたんなリサーチとサービスの方向性をまとめる
2ヶ月弱かけて骨子を固め、全社に向けてプロジェクトのキックオフMTGを実施しました。検討チームには、CoineyとSTORES.jpからそれぞれ数名に参加してもらいしました。とはいえ既存のプロジェクトもありますし、まずは何を作るんだっけというところからだったので、少しずつ現状把握をしたりリサーチを継続していきました。
2019/8/26 キックオフ資料
要件も仕様もなく、なんの根拠もない中でとりあえずピンを立てるためだけだったんですが、この当時のリリース目標は2020年秋って書いてありますね...
考えはじめる
オーナーさんに会って考える
まずはPOPUPをやっているブランドやお店を持っているブランドについて知るために、STORES.jpを利用しているオーナーさんにお話を伺いにいきました。
店舗ヒアリングへ
今使っているレジはなにか。どんな機能が重要なのか。店舗の在庫管理や顧客管理、売上管理ってどうなっているのか。店舗とネットショップってどう運営されているのか...
レジアプリやPOSシステムを作るとは言いつつ、そもそものお店の成り立ちやオーナーさんのビジネスの特徴、店舗を構えて活動をするときに抱える課題についてなど、幅広くお店についてを聞いていきました。
システムから考える
レジに必要な基本的な機能と、ネットショップの管理もひとつになったシステムとインターフェイス。キャッシュレス決済も簡単に導入できるような、そんなアプリケーションとPOSシステムを実現するにはどんな構成にすべきなのか。既存のシステムやアプリケーションを踏まえつつ、全体像を可視化していきました。
全体像をイメージする
そもそもPOSシステムを新たに作るのか、既存のネットショップのシステムをベースとして作るのか。どちらもPros/Consはありますが、結論としては、ネットショップのシステムを拡張しつつも、注文管理などのコアとなる仕組みは設計から見直し、今後5-10年を見据えた基盤として新たに開発することになりました。
そのほかにも、下記のような項目についてチームで考えを巡らせながら、現実的に小さくはじめるための要件を整理していきました。
- 店舗や在庫はどう管理するか
- アカウントやキャッシュレス決済の利用申請はどうなっているとよいか
- 店舗を作れるようにする必要があるがどうやってデータを管理するか。店舗に紐づくデータは多そうだ
- 例えば店舗の在庫を持てるようにするには
- 店舗の現金を管理できるようにするには
- キャッシュレス決済を利用できるようにするにはCoineyKit(現 決済SDK)と連携する方法で良いのか。他の方法は考えられるか
- どこから作っていくと良いだろうか
- ...
ラフに描いて考える
描いて考えること、リアルなフィードバックループを早く回すことでしか深く理解できないと思っているので、何もわからない中でもとにかく絵を描いてみるということをやっていきました。
レジとしてかんたんで使いやすいというベースが必要で、その上でどうやってオンラインとオフラインをつなぐ新しい機能を載せていくかを考えていました。
2019年の10月から、デザイナーとして🐨りょうこさんがチームに参加してくれたことで、僕がラフに描いた絵を元に相談しながらデザインプロトタイプを作っていけるようになりました。
初期のデザインスタディ
正直なところ、僕はこれまでひとりでプロダクトのデザインをしてきたので、他のデザイナーと協力してデザインする方法がよくわからず、りょうこさんには苦労をおかけしたなあと思っています...最近は少しはまともにチームでデザインできるようになったとは思います....（どうだろうか...あやしい...）
業界やユーザーをもっと知る
全体像を整理していく中で、業界やお店のことにもっと詳しくなる必要があると感じていました。元々heyのなかでPOPUPやオフラインのサービスの仮説検証をしながら、ラフォーレ原宿でWHITE GALLERYの運営をしていたあめりさんにチームに参加してもらい、リサーチを進めていきました。
STORESのユーザーを知る
STORES.jpを利用してくださっているオーナーさんの中に、POPUPをしたり店舗を持っているブランドがどのくらいいるのかすら僕らは知りませんでした。
500件ほどのユーザーさんを目視確認したり、アンケートをお願いしたりすることで、現在のSTORES.jpにどんな業種のブランドが多く、どれくらいのブランドが店舗を持っていたり、ネットショップ以外のチャネルでの活動を行なったことがあるのかを確認していきました。
いくつかの要素で分類して、タイプの違うブランドにお話を伺いにいきました。
もっと会いにいく
路面に店舗を構えているブランド、館の中に店舗を持っているブランド、複数の店舗を持っているブランド、工房と一体になっているブランド、ネットショップが売上の中心となっているブランド、卸が中心のブランド...
それらに商材の違いなども合わせて、理解を深めていきました。
ヒアリングのまとめの一部
市場を知る
既存サービスに存在する機能や価格等を整理し、どのサービスがどこに強みを持っているのかを確認していきました。ヒアリングやこの調査を元に、必要最低限の機能を整理していきました。
他サービス調査の一部
また、どのサービスがどれくらいの認知があり、実際に使われているのかという市場感の把握と、僕らがこれからどうやって製品を届けていくかを考えるために、調査会社さんに依頼してさらに広くレジ市場のリサーチも行っています。
レジはどういうタイミングで導入検討されるのか、どんな機能やサービスが選択のポイントとなるのか、導入の決め手は何かを理解して、初期の仮説を立てていきました。
お店を運営する
STORESでは、ラフォーレ原宿にWHITE GALLERYという販売スペースを持っていました。STORESでネットショップを開いているブランドが2週間周期で店舗販売ができる仕組みで、販売の準備から撤収まで、日々の店舗運営業務もまるっとSTORESでサポートしていました。（2020年で終了しています）
club sakenomitai POP UP (2020.03.04-03.17)
実際にやってみるというのは、話を聞いて想像するよりも遥かに多くのことを理解できます。あめりさんがずっと運営を担当していましたが、そこにアパレル業界で経験を積んだ店長を迎え入れて、店舗業務やレジがどうなっていると良いかなど、多くのことをフィードバックしてもらいながらプロダクトをデザインするための背景情報を集めていきました。
要件を固めていく
情報を集めながら、サービスの全体像を整理していきました。
レジアプリ要件定義書
どんなサービスを作るのか、そのためにはどういった開発が必要になるのか、システムの設計を見直しておく部分はどこか、どこから手をつけていくかといったことをまとめています。
全体の概要
また、この時点で機能やフローを理解できるレベルのデザインも完成させています。ちょうど2020年のはじめくらいの時期で、CoineyとSTORES.jpを統合してSTORESというひとつのブランドになったあたりだったので、プロダクトとしてのブランドイメージもまだフワッとしていて定まっていませんでした。
デザイン v1
デザインスタディ
僕もりょうこさんも、これまでiPadのデザインをやったことがなかったので、コンポーネントのルールを作るためにデザインスタディを行いました。
iPadのSettingsやFilesを紐解く
Square POSを紐解く
SquareのルールはiOSの標準ルールとどう違うのか。フォントサイズやボタンのサイズ、フローの考え方の違いを確認していきました。
Square POSのルールを適用してみたパターン
Shopify POSの設計思想
要件やデザインを整理しつつ、STORESブランドのイメージを取り入れたコンポーネントを作っていた2020年5月、ShopifyのPOSレジがフルリニューアルされました。
Shopify POSをさわる
スマートグリッドと呼ばれるホーム画面を中心に、店舗で提供される価値が拡張されていくことを前提としたデザインになっています。このインターフェイスはかんたんに使いこなせるわけではないと思いますが、ブランドごとにカスタマイズされること、オンラインとオフラインをどうやってつなぐかということにおいてすごく参考になりました。
Shopify POSのスマートグリッド
Shopify POSのローカルデザインシステムの話なんかも面白いです。ShopifyのデザインシステムであるPolarisは有名ですが、そこから派生させたPolaris for Retailという新しいローカルデザインシステムを構築してデザインしているようです。
ロケーションの多様性、セットアップの多様性、労働力の多様性。これらの多様性にどう対応し、より良い体験を提供できるか。より広い意味でのデザインシステムの重要性がわかります。
デザインをアップデートする
Shopify POSの考え方から学び、コンポーネントの設計を見直してデザインをアップデートしました。実装への着手を早めるために、このタイミングでデザイナーの🐰れいれいにも参加してもらうことになりました。
ホーム
会計
注文管理
商品管理
精算機能
実装する
ネットショップのシステムをベースに開発を進めていくことになったので、これまでネットショップのシステムを作ってきたバックエンドエンジニアの🕶りそうさん、🍠ちゃろさん、🐥うちこしくん、🐘ちばなさん、🍺にっし〜の5名にチームに参加してもらって開発を進めていきました。
全体の要件定義書は、実装するにはだいぶ粗く作ってあったので、ひとつひとつ詳細の要件と仕様をバックエンド、モバイルチームと検討し直しながら進めていきました。商品管理、在庫管理、注文管理などの基幹となる部分に手を入れたり、精算機能や店舗管理機能、レシート情報の管理など、ネットショップでは存在しなかった機能を新たに開発してます。
新しい注文管理基盤を設計する
これはまあ一般的だと思いますが、要件の叩きを元にエンジニアと議論しながら仕様を固め、仕様が固まったら各チームのロードマップに乗せて実装を進めていくような体制で開発を進めました。実装を進める中で見つかった新しい論点はつど議論して決めています。
ZenHubで進行管理をしてみたりもしていた
モバイルチームは、元々Coineyに所属していた👞よここしと、レジのためにheyに入社してもらった🧅よこちゃんのふたりで開発を進めていきました。
アプリはSwiftUIで書かれており、APIにはGraphQLが使われています。プリンターやスキャナーなどのハードウェア連携も含め、実装的に面白いことをやっていると思いますが、僕は今回実装には関わっていないのであまり詳しくお話しできません...そのうち各チームから開発についての話が聞けるタイミングもあるかと思うので、ご興味があればウォッチしておいていただけると良いかなと思います。
なんか実装についてすごくさらっとした感じで書いてしまっていますが、バックエンドも約1年半ほどかけて、基幹部分に手を入れたりデータ移行をしたりと難しい仕事をたくさんしてきているので、ぜひどこかで詳細が公開されると良いなあと思っていたりします。
STORESプラットフォーム
2020年10月にheyはCoubic(現STORES予約)を買収しましたが、STORESはプラットフォームとして広く価値を提供していくことを目指しています。レジのように内部で新規プロダクトを開発することも、M&Aによって幅を広げていくことも両軸で進めていく中で、プラットフォームとして価値をつなげていくための土台として、アカウント(ID)を統合するためのID基盤の開発や、STORESとしての統合された体験を提供するためのデザインシステムの開発を同時に進めていきました。
IdPの開発
IdPをなぜ開発するのかをかんたんにいうと、STORESのすべてのサービスをひとつのアカウントで利用できるようにすること。また分割されたシステムの認証・認可の仕組みを整えること。の2点です。STORESがより大きな価値を提供できるようにするため、組織を拡大していくために非常に重要になります。
IdPで提供されているアカウント作成画面
僕は、レジを中心にSTORESプラットフォームとして何を作っていくとよいか、という視点でいろいろと動いていたので、このIdPのプロジェクトにも並行して参加し、プロダクト的な意思決定とUIのデザイン・開発を担当していました。フロントエンドは僕とCTOが書くという力技です（いまはちゃんとフロントエンドエンジニアがいます）。
IdPは2021年4月にリリースされ、第一弾としてネットショップに導入されています。そして今回、STORESレジはネットショップと同じSTORESアカウントで利用できるようになっています。
デザインシステムの開発
レジのデザインを進める中で、これからのSTORESはどんなUIデザインであると良いだろうかと考えていました。これまでのネットショップのデザインに従うのか、それとも新しいデザインを考えるのか。
STORESが、複数の会社・サービスが合わさってひとつのブランド/プラットフォームを作っていくのであれば、その指針となるSTORESらしさを決めないとデザインするときに迷い続けてしまう。ユーザーにとって望ましく、一貫性のある体験を提供するために、新しいデザインシステムを作るべきだろうと考えました。
UI Componentsの一部
デザインシステムは、すなすなとゆーみんのふたりのデザイナーで進めています。フロントエンドの知見もある二人が、社内のフロントエンドエンジニアと議論しながら作っています。
レジはもちろん、ネットショップの管理画面にもこのデザインシステムが適用されはじめています。完全導入への道は長いですが、少しずつよくしていければなと思っています。
デザインシステムについては、またどこかで詳しく書こうかと思います。
品質を上げる
2021年3月に、基本的な機能が組み上がり、バックエンドとつないで実際に動作確認ができる状態になりました。
Quality Assurance
レジはお店の屋台骨みたいなものです。会計ができなくなることの影響は大きく、お店の信用にもつながるので、可用性はフォーナイン（99.99%）を目指しましょうみたいな話になります。
これまでSTORESは、基本的には社内で動作確認をすることが多く、たまに第三者検証を得意とする会社へテストを依頼したりしてきました。レジは、複数のデバイスとOS、STORES決済SDKと連携してのキャッシュレス決済、ハードウェアとの連携等など多様なパターンがあり、高い品質管理が求められることがわかっていたため、これまでSTORES決済でも一緒にプロジェクト進めてきたQaaSさんにチームに加わってもらい、品質の管理と向上を行うことにしました。
PMのちほぴが開発の進捗と調整をしながら全体のQAを管理して、機能テストからシナリオテストまでエンジニアとともに品質をあげていきました。
デザインを磨き込む
組み上がったアプリを触ってみると、いくらプロトタイプを作っていたとしても、やはり全然違った感覚を得られます。ぱっとみて理解しづらかったり、操作手順が複雑に感じたりと、大小たくさんの改善ポイントが見つかりました。
2021年のはじめに、4月にリリースしようとピンを立て直して進めていたんですが、触った感覚からもう一段大きく使い勝手を改善できそうだというのを感じ、ふたりのデザイナーと1週間で主要な画面のレイアウトやフローのリニューアルを実行しました。
最終デザイン
この対応をするために、4月というリリース目標を延期することを決めました。早くリリースするというのはもちろん重要で、リリースすることでわかることはものすごくたくさんあります。でも、自分たちがこれは使いやすいだろうと思っているものをちゃんと積み重ねていかない限り、本当に優れたプロダクトにはならないだろうとも思っています。
今回はリリースを延期する意思決定をして、かなり細かい部分までモバイルチームと連携して改善することができたので、もちろん足りない部分はたくさんありつつも使いやすいプロダクトになったのではと思っています。
リリースに向けて
5月の中頃からはリリースに向けての確認作業や準備が盛り上がっていました。
サポート体制の構築
レジのリリースに向けて、ユーザーさんからのお問い合わせや相談に対応できるよう、FAQやサポート体制の構築を進めはじめました。
レジは、ネットショップと同じアカウント・同じwebの管理画面を利用することに加えて、キャッシュレス決済としてSTORES決済もご利用いただけるような作りになっているので、これまでサービスごとに別れていたサポートのコミュニケーションがかなり複雑になることが予想できました。
その複雑な要件をときほぐして良い体験を作るために、これまでネットショップのカスタマーサポートを支え続けてきてくれているひやさんにチームに参加してもらい、サービス理解を深めてもらいながらFAQの作成や体制構築を進めていきました。
アプリの提出
緊急事態宣言が出ているような時勢ですが、ハードウェアの確認等もあったため、オフィスに集まって本番アプリの最終動作確認をして、AppStoreへアプリを提出しました。リリースの13日前の6月2日でした。
ついに...
(提出する瞬間の動画をSlackにアップしたんですが、画面が小さくてわからん、なんでモニターあるのにそっちに映さないんだと低評価コメントが続出しました...写真の奥に社内で有名なYouTuberの方が写っているので勉強させてもらおうと思います...）
サービスサイト
サービスサイトは、デザインをちゃんたく、実装をまさひろさんが担当しました。ギリッギリまで情報設計もデザインも粘ってしまい、実装の時間が少なくなって負担をかけてしまったので申し訳ないなと思いつつ、良いサイトができたかなあとは思っています。（ありがとう...ありがとう...）
サービスサイトトップページ
はじまり
リリースの10日前。下北沢のBONUS TRACKにオープンしたTENTさんのお店「TENTのTEMPO」にSTORESレジを先行導入させていただきました。
6/4のプレオープンにお伺いして買い物をし、無事に動いていることを確認してきました。本当によかった。
TENTのTEMPOヘ
ここまでくるのに、2年もかかってしまいました。
コロナによる社会変化もあり、ネットショップやネット予約はもちろん、非接触のためのキャッシュレス決済もたくさん利用されるようになってきています。
店舗という商圏の課題や、単一の販売チャネルしか持たないというリスクが顕在化しましたが、それでもリアルなお店という形は無くならなそうだというのも同時にわかったことでした。
オンラインとオフラインはもっと溶け合い、境界は無くなって、誰もが取り得る選択肢のひとつになっていく。そのためのインフラを提供していくことが、いまSTORESに求められているのではないかなと思っています。
ようやく、ここからがはじまりです。
STORESレジ、よろしくおねがいします。
ではまた
