ブランド統合の中で始まった「STORES レジ」プロジェクト　新規事業におけるデザインシステム構築の課題

アジェンダの紹介

藤井大祐氏（以下、藤井）：それでは、「STORESのデザインシステムのこれまでと現状」ということで、ヘイ株式会社から発表いたします。

今、2名いるのですが、本日は合同登壇ということで、私が画面共有しながら、2人でお話しします。デザインシステム全体をゼロからリードしていただいている井出さんと、「STORES」というネットショップサービスのサービス開発でフロントエンドエンジニアをしている藤井です。よろしくお願いします。

井出優太氏（以下、井出）：お願いします。

藤井：私たちヘイ株式会社は、「お店のデジタル、まるっとサポート」というテーマで、個人または中小企業の方々を中心とした商売に対して、さまざまなプロダクトを通じて経済を支えるSTORES プラットフォーム、デジタルインフラを提供しています。

こちらに画面が4つ載っていますが、具体的にはネットショップの開設サービス、iPadポスレジ、予約サービス、決済サービスなどを展開しています。

今日のアジェンダです。会社の歴史に近いと思いますが、ヘイのデザインシステムのこれまでの歴史。これまでと、現状の課題、現在どういう状況になっているかというところ、これからについてお話ししていこうと思います。

ヘイ株式会社の成り立ちとブランド統合

まずはデザインシステムのこれまでです。今日のプレゼンですが、2人いるので、トーク形式も少し入れながら話していきます。

まずはヘイの成り立ちから。ヘイはもともといくつかの企業に分かれており、社名がバラバラだったという過去があります。2018年頃にヘイの前身であるSTORES.jp（ストアーズ・ドット・ジェーピー株式会社）、Coiney（コイニー株式会社）という2つの会社が統合して、ヘイ株式会社が誕生しました。

私たちヘイは、オンライン・オフラインを問わずに商売のすべてを支えるプラットフォームを作ることを目的としています。そんな中、iPadポスレジがヘイの新規事業として動き出しました。

この「STORES レジ」というiPadポスレジは、ネットショップの基盤を拡張して、在庫管理、売上管理、アイテム管理といった運用を、オンライン・オフラインを含めて一括管理できるプロダクトです。

それによって、オンライン・オフライン問わずに商売を支えていこうとしているのですが、STORES レジは、ネットショップ、決済サービスと一緒に使ってもらうことを目指したプロジェクトなので、全体の体験にどう一貫性を持たせていくか、というところを考えていく必要がありました。

2020年頃、並行して、それぞれ別ブランドにあったネットショップ開設サービスのSTORES.jpと、決済サービスのCoineyを1つのSTORESというブランドに統合していく運びとなりました。

1つのブランドにある複数の製品をまるっと提供していくことで、より大きな価値を出すという戦略の中で、まずは象徴としてのブランドを統合して、ブランドイメージやカラーパレットを統合していきました。

ネットショップの管理画面のデザインフルリニューアルで見えてきた課題

さて、2020年ですね。この時期に決定したカラーパレットを用いて、ネットショップの管理画面のデザインのフルリニューアルが行われました。

既存でいくつかあった課題を解消しながら、デザインのリニューアルを行い、この時に決まったカラーパレットを使ってSTORESらしいデザインを考え始めた、デザインシステムの前段になる初期のフェーズとなっています。

半年ぐらいをかけたフルリニューアルですが、この過程で、新たに見えてきたプロダクトの課題、目指したい方向性を考え始めました。

こちらが当時の思考のdumpです。このあたりはデザインシステムが生まれていく前なので、デザイナーの井出さんに聞いてみたいのですが、いかがでしょう。

井出：ネットショップと決済とレジができていく中で、2020年の5月ぐらいに「Coubic」という別の予約サービスをやっていた会社を買収して、「サービスが増えます」となりました。

ぜんぜん別の会社で作っていたプロダクトだったのですが、ユーザーにはSTORESという1つのブランドで、それぞれのサービスを併用してもらいたかったので、新しいサービスをどういうデザインにしたらいいのか、今まであるデザインをそのまま残していくのか、ブランドとして統合したほうがいいんじゃないかということが、このタイミングで考えなければいけない課題として挙がってきました。

先ほどのブランドを統合して、ネットショップはそこに追従するようにリニューアルをしたのですが、それだけではダメです。「統合したデザインの指針をきちんと立てていかないといけないよね」と、いろいろ考えて進めていく中で、「やはりデザインシステムをきちんとやったほうがいいよね」という話がありました。

目指すところは、複数のプロダクトを1人のユーザーに使ってもらえるような状態なので、その時に、例えば「ネットショップを使っているから、レジを使った時と同じような操作感で簡単に使える」という状態を、私たちはビジネスとしてもきちんと目指していく必要があると考え始めました。

そういうことをもうやらなければいけないということはデザイナーとしては見えていたので、「そもそもデザインシステムって、どういうところまでカバーするものなんだっけ」ということを考え始めたのが、2020年5月ぐらいでした。

こういう世界観で、こういうUIで、こう目指していきたいという素案を半年ぐらいかけてまとめて、エンジニアと話し始めることを進めていきました。

プロダクトはそれぞれ違ったフレームワークで作られていた

今回がたぶん初公開だと思いますが、STORESのデザインシステムは、「STAND」という名前で作っています。

これは商売を支える「Stand by」という意味合いと、例えばコーヒースタンドみたいな、小さいお店という意味があります。「商売のデジタル化を支援するスタンダードのプロダクトになりたい」という意味も込めて、この名前にしています。

プロダクト自体は、ぜんぜん別のシステムで作っていて、新しいものが増える段階で、レジ自体を新しいデザインにすることは決めていました。その中で、「Webアプリはこれに沿ってやるんだっけ？」という話や「作っていた会社もフレームワークも違うし、どうやっていくの？」という話があって、フロントエンドのみんなを巻き込みながら話を進めていきました。

その当時の課題については、チャンさん（藤井大祐氏のあだ名）から話してもらえると。

藤井：そうですね。デザインシステムに則ったUIにしていきたい。ただ、もともと違う会社でそれぞれのプロダクトが作られていて、フレームワークも違っていました。

具体的には、ネットショップ開設サービスのSTORES はVueで作られていて、決済と予約のサービスはReactで書かれていました。もともと会社が分かれていたこともあって、横断的なエンジニア組織もないので、「今後もプロダクトは増えていく予定だしどうしよう」と、各地で小さく始めていける手段がないのかを議論していました。

その結果、tailwindcssを用いる方針になりました。utility-first CSS frameworkであるtailwindcssを使うと、カスタマイズ可能なユーティリティクラスのみを吐き出してくれます。

jsやhtmlは提供せずに、ユーティリティクラスのみを吐き出してくれるので、tailwind configだけを設定したものを作り、configを統一することで、吐いたユーティリティクラスを各プロダクトで転用して利用します。「いつかは共通ライブラリへ移植できたらいいね」と話をしていきました。

これらが固まってきた段階で、デザインシステムで構築された初めてのプロダクトSTORES プラットフォームのログイン基盤になるIDプラットフォームができました。CTOと、今登壇している井出さんと実装を進めながら、tailwindでいけるのかをこの中で試していました。

レジリリースに向けてデザインシステムにどこまで対応するかを議論

2021年に、レジのリリースに向けてネットショップの管理画面の実装も始まりました。こちらは、レジがネットショップとオンライン・オフラインを統合した体験を持つプロダクトなので、ネットショップの中でもレジのアカウント開設ができるようにしたい。そのための統合的体験が必要というところで、ネットショップの管理画面もやっていました。

ネットショップの管理画面はID基盤と比べて、コンポーネントの数も画面数も多いうえ、ネットショップでの既存フローの改修も入ってきており、とはいえレジのリリースも差し迫っている。ただ、デザインシステム自体を検討中のUIもたくさんあり、まだまだ検討段階というところで本当にどうしようというフェーズにありました。

デザインシステムにどこまで対応するかをフロントチームの中で議論しました。既存のデザインでデザイナーに刷り直してもらうのか、もしくはtailwindを使わずに既存のコンポーネントをSCSSで、デザインだけはなんちゃってデザインみたいにちょっと新しくして作っていくのか、もしくはもうハンドルを切ってtailwindで新規にSTAND UIを作るのかというところを話し合いました。

結果、今はtailwindで作らなくても最終的にはtailwindで作り直すことになるので、二度手間も避けるという意味でも、必要最低限のコンポーネントに絞って、1からデザインシステムを作っていくことにしました。

その代わり、デザイナーとの連携を密に叩き上げていき、デザイナーとミーティングして、tailwind configを最初に詰めて、最低限のところはフィックスさせる。

また、エンジニア・デザイナーの昼会を毎日実施して、コンポーネント単位での未決定事項を、どんどん実装をしながら詰めていくというかたちを採りました。

理想は、configを別リポに切って、そこからバージョンを管理して引っ張ってくるというかたちですが、それだとレジリリースに向けて間に合わないし、管理をするのが難しいので、変更が激しいフェーズにおいては、各プロダクトに対して愚直に変更差分をコピペしていったという背景があります。

こうして2021年6月に無事にレジがリリースされて、急ピッチで進めたスタイリングも一定は完成しました。

レジのリリース後にガイドラインを書いたり、UIコンポーネントのアップデートが進んでいたり、今ではこういったかたちとなっています。

tailwind configを切り離していて、Vueはコンポーネントライブラリの切り出しがほぼ終わっている状態です。今はネットショップ以外は各プロダクト内にUIコンポーネント集を持っている感じですが、このあたりも今後統合していこうと、各地でがんばっています。

ただ、課題がいろいろありまして……ここから井出さんにお願いします。

現在の課題

井出：めっちゃ課題がありますという現時点の話なので、解決策が全部あるわけではないのですが、いったんUIを作って進めてみる中で、やはり「こういう時には使いにくい」とか、「こういうパターンの時にはよくない」ということが出てきました。

必要になったら作る、みたいにけっこう愚直に進めているので、デザイナーとしては「本当はこういうUIがいい」というのがある中で、「既存のUIを組み合わせてもできるじゃん」と、開発のスピード優先でそちらが選択されてしまうこともあります。

また、そのUIのコンポーネントはできているのですが、イラストとかビジュアルコミュニケーションをどうやってプロダクトの中でやっていくかというところまでは手が回っていなくて、「どうしていこうかね」という話があります。

結局作りながら走っているので、ガイドラインがまだ整備できていません。コンポーネントレベルだとガイドラインが作られているのでいいのですが、レイアウトレベルになってくるとぜんぜんわからない、みたいなものがあって、けっこうそこで工数が発生しています。今は、プロダクトの事業ごとにエンジニアの組織が分かれているので、各所でそれが発生しています。

今後アップデートをどんどんしていきたいのですが、そのあたりの変更は「それぞれで実装しています」みたいなものがあるので、それぞれとどうやって同期を取っていくのかは運用課題としてあります。

こういう課題を解決していくのは、事業としても大事だというのはわかっていますが、それを改善していく人たちの目標設定や評価、デザインシステムの価値を見えるようにしていくのはすごく難しいです。今はトップダウンで進めていますが、そういうチームを作るとしたら、どうしていくのかが課題になっています。

エンジニアの専任チームがおらず、デザイナーはエンジニアと比べるとチーム規模感的にもけっこう小さいので同期が取りやすくはあるのですが、そういうものをどうやって作っていくのかも課題です。

UI改善に向けた取り組み

こういうのがありつつ、今はこのstand act2と呼ばれているUI改善をがんばって進めています。（スライドを示して）左が作られたもので、右がアップデートをかけようとしているものです。なので、実現されてはいないのですが、Figma上ではこういうアップデートを考えています。

今はこのあたりの実装や、ガイドライン化をどうしていくのかを、エンジニアと相談しながらやっています。

それと並行して、さっきのドキュメントをどうやって作っていくかという話も進めています。ヘイは基本的にはWebだけではなくてモバイルアプリもあるし、なんならtoB向けに商売できるプロダクトを作っていますが、toBの先のtoCもあるので、そういうところもどう作るかみたいな話を整理してドキュメント化することを進めています。

これから目指すことと、求めている人材

これからどうやっていきたいかという話をすると、やはりデザインシステムを磨き上げていくチームをきちんと作っていくことと、事業側にコミットしてそれを元にデリバリーしていくチームをうまく接続して、高い品質の製品を早く届けられる状態を作っていきたいと思っています。

今求めている職種を書きました。UIデザイナーという意味だと、デザインシステムをバリバリ磨いていくスペシャリストが欲しいですし、そこをブリッジするデザインエンジニアやデリバリーしていくプロダクトデザイナーやフロントエンドエンジニアも欲しいと思っています。

デジタルプロダクトを使いこなして、商売や仕事が楽しくなるという状態をSTORESは作っていきたいと思っていますが、やはりデジタルなプロダクトは普通の人からするとすごく難しいので、使いこなせるように学習を助けていくための、ラーニング・エクスペリエンスを担当するデザイナーや、コミュニケーションを担当するデザイナーをもっと増やしていきたいなと思っています。

藤井：歴史紹介みたいな感じになりましたが、課題がたくさんあるのでぜひ来てもらいたいなと思っています。

井出：機会があればまた記事などを紹介できればと思います。ありがとうございました。

藤井：ヘイの紹介は以上です。本日はありがとうございました。