STORES のykpythemindです。今回はSTORES 内で強化しているデザインエンジニアリングの領域についてお伝えできたらと思います。
今までのSTORES はどうやってUIを作ってきたか
まずは我々のプロダクトと、ここまで歩んできた道のりについて説明します。 STORES は中堅・中小規模の店舗を運営する方々にむけて、ネットショップ開設・POSレジ・キャッシュレス決済・オンライン予約システム・アプリ作成など、お店のデジタル化を総合的に支援するサービスを展開しています。 今回のUIの領域としては、店鋪を運営する方々（事業者様）が日々使う画面にフォーカスしてお話しようと思います。 1
我々の組織のユニークなところとして、今まで数回の経営統合を経て、複数プロダクトを持つ会社として成長してきたという点です。価値観や開発プロセスが異なるチームが、それぞれのチームの中でUIの開発を行ってきたという背景があります。
ネットショップ
STORES ネットショップ は、2022年ごろまで、フロントエンド・バックエンドチームが分業していて、フロントエンドチームが主にUIを開発していました。プロダクトデザイナーの立案したデザインをフロントエンドチームが実装する形で、現状の実装の95%以上は Nuxt 上に構築されています。
予約
STORES 予約 は前身のCoubicが経営統合されることでSTORESの仲間入りをしたプロダクトです。
Coubicには専属のプロダクトデザイナーがおらず、アドホックに作られたページが複数存在していました。STORES として、最低限使いやすいプロダクトに変えていくために、プロダクトマネージャ、プロダクトデザイナーとともに情報設計を見直しつつ、2年の間に「予約ページの作成フロー」「予約カレンダー」「顧客一覧」などを刷新してきました。
Ruby on Railsで出力したhtmlの上にwebpackでビルドしたReactコンポーネント群をマウントするレガシーなUIと、Next.jsで構築された比較的新しい管理画面があり、6割近くの重要な画面は後者のNext.js上にReactで実装されています。
また、事業者さま向けアプリ(iOS/Android)が存在し、日々の業務でご利用いただいています。
決済
STORES 決済 は主に店頭での対面キャッシュレス決済を行うサービスであり、決済端末が存在します(決済端末自体はOEMであり内製していません)。決済端末に接続するiOS/Androidアプリを通じて、店鋪の業務を行っていただいています。
ボリュームとしてはネットショップ・予約ほどではないものの、「売上画面」や「請求書決済」といったWebサイトを通じて機能提供をしている部分にもユーザーインターフェースが存在します。この画面はReactで実装されています。
レジ
店頭での業務を支援する、POSレジアプリがあります。これはiPad/iPhone向けにSwiftUIで実装されています。
ネットショップの在庫と店頭在庫が同期するだけでなく、STORES 決済との連携、STORES ブランドアプリでのポイント付与の連携、STORES 予約 の予約情報との連携など各社内システムのハブとなっています。事業者さまがお客様との一番近い接点を作る部分であり、業務に密接に関連があります。
ここでは触れませんでしたが、STORES ブランドアプリも独自の管理画面があり、日々の利用者が存在します。STORES モバイルオーダー にも店舗内のオペレーションで利用いただくキッチンディスプレイといったアプリが存在します。
2024年までは上記のようにプロダクトごとに事業者さまが利用される管理画面が分かれており、STORESアカウントというID基盤の仕組みによりシングルサインオンできる状態ではあったものの、相互に利用することを想定した管理画面の構成にはなっていませんでした。
2025年: スタンダードプラン リリースに伴う管理画面の統合
我々のプロダクトは本来、複数製品を組み合わせて使っていただくことで、よりメリットを感じていただきやすいものになっています。満を持して2025年3月、有料プランを１つに統合しスタンダードプランとしてリリースし、このタイミングで管理画面のナビゲーションも共通化しました。
異なるシステム間でも、ユーザーが選択したナビゲーションの内容が同期して表示されるようになっています。
ナビゲーションのデータはある１つのバックエンドサービスをSingle Source of Truthにして取得することにし、各管理画面にはナビゲーションのUI、ロジックの実装をprivate npm packageとして配布しています。素朴な構成ですが、React、Vue版2種類の実装のメンテナンスコストを下げるための工夫がされています。
スタンダードプランにはSTORES の基本的なプロダクトがすべて入っていて使うことができます。そのため、バラバラであった管理画面をまずは回遊できるようにして、新プランとともにリリースする、というのが非常に重要なポイントでした。
急激な統合を行ったことにより、お客様にご迷惑したところは多分にあると思っています。心苦しいポイントです。しかし、複数プロダクトを活用してくださる方も増えており、少しずつ価値を感じていただいているお声も開発チームに届き始めています。統合の価値を加速させるため、より深い部分でのプロダクト体験の統合に軸足を置くことが急務になりました。
デザインエンジニアリングの組織化
上記の課題もあいまって、2025年4月からデザインエンジニアの組織をCPOの井出と立ち上げました。
井出はプロダクトデザインが専門ながら、UIの実装をVue, Reactレベルでも行える、デザインエンジニアを体現している人間です。組織立ち上げ時の井手からのコメントを掲載しておきます。
ソフトウェアのインターフェース／インタラクションデザインは、そもそもがエンジニアリングの仕事だと考えている。（中略）少し前までは、認知科学や人間工学、ユーザーインターフェイスの設計に関する知識がそこまで体形づけられていなかったこともあり、それぞれの専門性の価値があったが、昨今は基本的なナレッジやデファクトと言える設計がほぼ確立され、少なくとも画面をみて操作するという状況においては専門性をキャッチアップすることは容易に（多くは隠蔽されて気にしなくてよく）なっている。
（中略）インターフェースのデザインと実装を高度に実行可能な組織を立ち上げることは、我々の今後のプロダクトの作り方に大きく影響を与えられるだろうと考えている。
現在のデザインエンジニアチームはマネージャである私を含む4名で構成されていて、とてもスモールなチームです。
組織のミッションとして「一貫したプロダクト体験の企画・実装」「デザインエンジニアによる新しい開発手法の提案・浸透」を置いています。
専任のプロダクトデザイナーと分業しながら画面を作るという従来の方法も取っていますが、前述のように、我々のシステムは複数のコンテキストが混ざり合ってできており、システム思考が大きく求められます。
我々のシステムの作られ方の都合や裏側のデータの都合を踏まえて製品を作る上では、ソフトウェアエンジニアリングへの深い理解がある人間がよりデザインの領域に足を踏み入れれることが大きなレバーになるだろうと考えています。
取り組んできたもの: STAND
STORES のUIに関わる仕事をしてきた皆が今までに取り組んできた資産をよりブラッシュアップさせています。また、統合するために必要な仕組み・ツールを実装しています。
STAND は、STORES のデザインシステムです。定期的なデザイントークンなどのアップデートが行われており、現在v3になっています。
STAND のMCPサーバの実装もチームとして取り組んでいます。
取り組んできたもの: アニメーション
自然なアニメーションは UI を予測しやすくしたり、使う楽しさが増したりすると考えています。
プロダクトの体験をよくするために自然なアニメーションを研究・実装しています。
取り組んできたもの: 振る舞いを統一するためのユーティリティ
Webのフォームにおけるクライアントサイドバリデーションの振る舞いを統一するための薄いライブラリを作成しました。
その他、ナビゲーションの振る舞いを統一するためのユーティリティなど、Webアプリにおいて困りがちな仕組みを各システムのUIで再利用できるように社内ライブラリとして配布しています。
これから取り組みたいこと
前述の通り、管理画面はひとまず統合した、という段階で、各機能の振る舞いは各プロダクトカットで実装がされていた時代のままです。STAND デザインシステムの導入・最新版への追従率も高くはありません。まずはデザインエンジニアのスモールチームで大通りを統合しきりたいと考えています。
…「しきる」というのは我々の人数では現実的ではないかもしれません。どこから優先して大きなこだわりを注入していくか、それがどうお客様の日常に影響するのかを考え、実行するというところまで我々の役割として委ねられている領域です。
日々使っていただくプロダクトの手触りを良くしていくこと、社内での教育・成長機会が作れるような体制づくり、AIを使ったスケーラブルな実装の仕組みづくり、Webフロントエンドとモバイルアプリ開発体制のより深い協業など、これから長いスパンで取り組んでいきたいことがあります。
気になった方へ
お話聞いてみたい、などありましたら 採用サイト からお願いします。
新卒採用も加速しています。良いインターフェース、体験を作ること、そしてそれをスケールさせることにに興味のある方も、通年でインターン募集しておりますので、ご応募お待ちしております！
- ネットショップのサイトや予約サイトのような、購入者様の利用する画面領域もあり、こちらもデザインエンジニアの関わる領域ですが、今回は割愛します。↩
