先日リリースを迎えたSTORES レジ。その舞台裏ではどのようなことが起きていたのでしょうか。全4本にわたるシリーズでSTORES レジのお話を聞いていきます。第一回目は、デザインを担当した氏原 諒子（うじはら・りょうこ）さん、加藤怜（かとう・れい）さんによる対談です。

初めてのアプリ開発

──STORES レジのデザインのなかで、お二人がそれぞれ何を担当されていたのかを教えてください。

氏原：今回デザインしたものはアプリとダッシュボードに分けられるのですが、私はアプリメインでデザインをしました。

加藤：私はどちらかというとダッシュボードです。アプリもやっていましたが、りょうこさん（氏原）がコンポーネントというアプリの部品のルールを作ってくれているので、それを使って私は画面を構成していました。

──お二人ともアプリをデザインするのはこれまでもご経験があったのですが？

氏原：iPhoneアプリは経験がありましたが、iPadアプリのデザインは初めてでした。

加藤：ダッシュボードのデザインはこれまでも関わってきましたがアプリは初めてでした。

──そうだったんですね。お二人ともどんなきっかけでこのプロジェクトにジョインしたのですか？

氏原：前職が解散してしまったので次の仕事を探しているときにちょうど縁あって声をかけていただきました。STORES は様々なサービスがあり、どこに所属するか悩んだのですが、新しくネットショップと連携したレジアプリに興味を持ち、今までスマートフォンのアプリを作っていた経験が活かせるのではないかと思い参加を決めました。

加藤：私はりょうこさん（氏原）よりも後にこのプロジェクトにジョインしたので、社内でSTORES レジの開発が進んでいるのを見ていました。けれど、自分が参加することになるとは思っていなかったので「なんで私なの！」という驚きが強かったです。きっと、私がかなりの飽き性であることを荒木さん（当時の1on1担当）は知っていてアサインしてくれんだと思います。実際に新しいことに関われるのは楽しみでした。

ツールと運に助けられた、コロナ下の働き方

──このプロジェクトが始まった時はすでにリモートワークが推奨されていたのでしょうか？

氏原：初めの半年ぐらいはオフィスで仕事していましたが、途中からリモートワークが始まりました。ツールはFigmaを使っているのですが、リアルタイムで複数人で編集ができるので、各自担当しているところをそれぞれ作って持ち寄って、決まった時間にフィードバックを出し合うという方法で進めていきました。

加藤：Figmaをheyで導入したのはけっこう最近のことなんですよ。それまでは非同期で作ったものをslackでシェアして投げ返してもらう進め方でした。出社していると隣の席同士で話せるのであまり不便に感じていませんでしたが、先にFigmaに移行しておいてよかったなと思います。

氏原：たしかに。Figmaに慣れているところにリモートワークになったので、あまり混乱がありませんでしたね。そういう意味では、運もあったのかも。

仕事の進め方で現れた壁

──仕事の進め方と言えば、このツイート、気になっていました。

氏原：これですね（笑）。この画像、最初はふざけてもっと過激な言葉遣いで書いてありました。これはですね、まず、私は最初井出さんがPMだと思っていたので、自らデザインで手を動かす方だと知らなかったんですよ。さらに私は時短で働いていて、井出さんは残業をしていたので、働く時間が二倍くらい違って。私がデザインを出して、翌日見てみると全く違うものになっているということがよくあったんです。それに助けられることもあった一方で、これから共有しようと思っていたアイデアがなかったことになっていたり、どうしてこういう変更が入ったのかわからないことに戸惑いもして。

──どうやって解決したんですか？

氏原：井出さんに言っちゃいました。まかせてほしい、って。かなり傲慢な言い方だったかもしれませんが、井出さんにはネットショップを初めとした STORES サービス全体を見てほしいと思っていたので。

加藤：井出さんは手を動かして検証したり考えたりするタイプなので、これはよくあることなんですよ。デザイナーとしては手を動かさせてしまうと心苦しいので、そうならならいように頑張る、という。今回のプロジェクトは、私はその戦いが終わった後に入ったので、やりとりを見ていたわけではないんですけどね。

氏原：戦ってない、戦ってない！（笑）ちゃんと話し合って、解決した後は進めやすくなりました。

──他に働き方などで工夫したことはありますか？

氏原：ちょうど一回目の緊急事態宣言の時に子どもの保育園が休園になってしまって、週3勤務に切り替えたことがありました。一時はどうなることかと思いましたが、レイレイ（加藤）がどんどん手を動かしてくれたのでプロジェクトそのものがストップすることがありませんでした。とても助かったなあ。

加藤：プロジェクトに入ってすぐの時だったので、使命感のようなものもあったかもしれません。「私が機能を作ればすむぞ」というような。

デザインスタディと粘りのブラッシュアップ

──お二人とも初めてiPadアプリのデザインをやられたということでしたが、苦労した点はどんなところでしたか？

加藤：アプリにとってのいいデザインは何なのかということをまずキャッチアップする必要があったのが苦労した点です。競合他社のアプリはほとんど網羅しましたし、iOSのアプリの挙動を学ぶために仕事効率化系のアプリの遷移やUIの種類を調べました。みているだけだと身につかないので、いいなと思ったところをメモしたり手をうごかしながら勉強しました。

氏原：私もそういうデザインスタディを行いました。競合他社や似ているアプリの文字サイズやボタンサイズがどうなっているのかを徹底的に調べたりブランドガイドラインを読み、コンポーネントづくりに生かしました。また、STORES のデザインガイドラインを勉強し、同じブランドのサービスとして違和感のないレジの画面を勉強していきました。

──実際に手を動かし始めたあとは順調だったのでしょうか？

加藤：いえいえ、そんなことはありませんよ。たくさん壁はありましたが、例えばプライマリーボタンの位置ですかね。アプリ内で一番重要なボタンの色や場所を決めた時はたくさんの検証をしました。様々な機能があるなかでも、見た目と場所が統一されている方がユーザーが覚えやすいので、どの色でどの大きさで、タイトルの下がいいのか、一番下にあるべきなのか。Figma Mirrorという実際の画面をシミュレーションできるアプリを使って何度も検証しました。

氏原：レジは画面から離れた位置から操作することや、きちんと画面を見つめていられない状況もありえる。それを踏まえて明暗をつけたり、大きさを調整したりしながら最も使いやすいサイズ感を探していきました。

加藤：それで、デザインがほぼ出来上がってこれで行こう！となったあたりで、「もう一段ブラッシュアップできる」と井出さんがおっしゃってデザイナーチームでもそうしようと決めて、リリースが延びたんです。

──具体的にどんなブラッシュアップだったのですか？

氏原：「こうしたら1ページ遷移を減らせるのではないか」「検索バーをなくせば商品にもっと目がいくのではないか」という、もっとシンプルにするためのブラッシュアップでした。

加藤：「もうひと粘りしよう」となってからは、井出さんからお告げのようなアドバイスをもらっては作ってみる、という作業を繰り返しました。

──できあがったと思ったらさらにブラッシュアップをというのは、気持ちが折れることはなかったのですか？

氏原：そこはデザイナーですから。修正で心が折れることはないですよ。

加藤：井出さんに修正案を出させてしまっているのは心苦しい気持ちはありました。けれど、私たちが一度作ったから、それをもっと引き上げるアイディアが出てきたんだと思っています。

2年越しに叶った、オーナーさんを幸せにすること

──やっとリリースを迎えた時はどんな気持ちでしたか？

加藤：リリースした当日、「レジ欲しかった！」という声をTwitterで見て、喜びを感じました。さらに自分で使われているお店に出向いてみて、使われているのを見た時には胸にくるものがありました。でも、操作している様子をみたら「ここはまだ改善できる、持って帰って改善しよう」とすぐに気持ちが切り替わっちゃいましたけど。

氏原：私も店舗に行ったんですよ。iPadで自分が作ったSTORES レジのアプリを開かれているのをみたら、嬉しかったですね。子供と夫に「あれ作ったんだよ」って自慢しました。レビュー会でオーナーさんの感想を聞いたときには泣きそうになりました。ずっとオーナーさんにとっていいものを、と考えて作ってきた2年間でしたが、このアプリにしか関わっていなかったので、2年間誰のことも幸せにしていない......という負い目があったんです。2年越しに初めてオーナーさんのことを幸せにできた。それが何よりも嬉しいです。

氏原さんのおすすめ：TENT
おしゃれで使いやすい日用品などの商品を販売されています。まな板にもなるお皿CHOPLATEはわが家でも大活躍。実店舗『TENTOのTEMPO』でレジアプリを使っていただいています！

加藤さんのおすすめ：かな料紙専門店 こきん
八重洲の店舗でSTORES レジを利用されている、和紙の専門店。珍しくて淡い色の和紙がたくさん並んでいてうっとりしてしまいます！