Frontend Talk 〜デザインシステム構築のリアルな裏側〜 2022/03/10 合同登壇 株式会社 ヘイ デザイナー 井出 優太 株式会社 ヘイ フロントエンドエンジニア 藤井 大祐 https://andpad.connpass.com/event/238368/
STORES のデザインシステムのこれまでと現状Frontend Talk 〜デザインシステム構築のリアルな裏側〜【hey｜note｜ANDPAD】 2022/03/10
View Slide
#hey_note_andpad 話し手藤井 大祐リテール本部フロントエンドエンジニア井出 優太プロダクトデザイン本部デザイナー@daitasu@_ideyuta
デザインシステムのこれまで1現在の課題2これからのこと3
デザインシステムのこれまで1
heyができる2018STORES.jpとCoineyが統合してheyが誕生した
STORES レジ のデザイン開始・どうしよう？2019レジは、ネットショップ・決済と一緒に使ってもらうことを目指したプロジェクトなので、全体の体験をどうやって統合していくかも考える必要があった。新しいプロダクト、統合されたブランドとして、どんなデザインにしていくのが良いんだろうか...？
ブランド統合へ2020ひとつのブランドの中に、複数の製品があり、それらをまるっと提供することでより価値を大きくするという戦略を実行していくために、象徴としてのブランドをまずは統合した。カラーパレットやブランドイメージも更新され、さて....
ネットショップ管理画面のデザインリニューアル2020ブランド統合時に決定されたカラーパレットを使ってスタイリングを考えたり、既存の課題を解消しながら、レジが入ってくることに備えてリニューアルをおこなった。STORES らしいデザインを考え始めた初期的な段階のデザイン。
リニューアルを進めながらわかったことをふまえて、目指したい方向を考えはじめた...
当時の思考のdump20205我々はどこにいきたいのだろうか...前提● サービスが4つある（ネットショップ・ターミナル・レジ・予約）● プロダクトが12こある○ ネットショップ 3つ（ストア・ダッシュボード・ストアデザイン）○ ターミナル 4つ（管理画面・iOS/Androidアプリ・SDK・請求書決済）○ レジ（iOSアプリ）○ 予約 4つ（管理画面・予約サイト・管理画面アプリ・顧客向けアプリ）課題● ブランドは統合されているけど、同じルールでプロダクトがデザインされていないのでツールの学習コストが高い○ 現在は併用ユーザーが少ないのでクリティカルではない● ルールが多数あると管理コスト・属人性が高くなる● 新しく作るプロダクトが従うべきルールがない● 横断的なルールがないので局所で迷うことが多い○ ブランドガイドラインのみ● プロダクト横断的な体験設計はどこでどうやる？● どうすれば無視されない共通ルールを作れるか○ 開発・デザイン横断の専門部隊がないと難しそう？○ どうやって運用するかをセットで考える必要がある■ 漸進的に適用できるのかとか（ECは今後はできそう）■ ターミナルはどこかでリプレイスが必要かも○ デザインシステム自体はとにかく先にできていないと何もできないどう管理するか● 各プロダクトのUIは統一的なデザインシステムに則った方が良いか？○ 理想的には則った方が良い■ ツールを利用する学習コストが減る● プラットフォーム（web/iOS/Androidなど）の原則には基本的に従って作る■ 車輪の再発明がなくなることでデザイン・開発コストを下げられる○ 新たに作るプロダクトに関しては則る■ レジ■ 共通管理画面■ このためのデザインシステムは必要● 作る● 効率的に管理するには？○ デザインシステムがあるプロダクト横断的な体験設計● 各プロダクトから1人連れてきて考え続ける感じ？○ 空いてる誰かをアサインして、各プロダクト担当にレビューしてもらうとかそういう感じになりそう● デザインチームだけで完結しなそう
ひとりのユーザーが複数のプロダクトを横断的に使用する
当時の思考のdump20205デザインシステムは、どこまでの領域をカバーし、どういった役割を持つのだろうか...
素案をまとめた202011まだエンジニアからのフィードバックを受ける前の素案。どういうところを目指したいかという話が中心だった。
#hey_note_andpad 2020年末 当時の状況● STORESレジ（iPadアプリ）はデザインシステムに則る● ウェブアプリもこれからはデザインシステムに則ったUIにしていきたいな● プロダクトそれぞれフレームワークが異なる（そもそも作ってる会社が違ったので）けどどうする？● デザインシステムの実装はどう進めていくのが良いのか...？
#hey_note_andpad ウェブ、どうしようM&Aや内製でプロダクトは増えていく予定だし、統一するにしても横断組織もない。小さく各地ではじめられる方が良いのではなかろうか...
#hey_note_andpad tailwindcssを起用● utility-first CSS framework● カスタマイズ可能なユーティリティクラスのみを吐き出す● jsやhtmlは提供しない● config統一で吐いたユーティリティクラスを各プロダクトで利用する● いつか共通ライブラリへ移植できたらいいね
ID基盤プロジェクト・フロントエンドはCTOとideで実装20214STORES のアカウントを統合していくために、ID基盤をリリース。デザインの細かいところを決めつつ、tailwindを使って本当にこれでいけるのかを試していった
レジリリースに向けて、管理画面の実装がはじまる2021レジは、ネットショップのシステムを拡張して作っているので、商品の管理や注文の管理がひとつの製品の中でできるようになっている。そのため、ネットショップだけ利用したい人、レジだけ利用したい人も迷わないように設計を変えていく必要があった。
#hey_note_andpad 当時の状況デザインシステムは検討中のUIもたくさんあるでもレジのリリースは迫ってきている
#hey_note_andpad デザインシステムにどこまで対応するか1. これまでの既存デザインにする2. tailwindは使わずに既存のコンポーネントをデザインだけ新しくする3. tailwindで新規にSTAND UIを作る
#hey_note_andpad Action：デザイナーとの連携を密に、叩き上げていく④ configリポを修正し、各プロダクトに愚直にコピペ① tailwind configを最低限のみ確定 ② デザイナーとの昼会を毎日実施③コンポーネントごとにstaging確認デザインの変更差分を愚直にSynctailwindconfig ID基盤ネットショップ・レジ管理画面…
レジも無事にリリース・スタイリングが一定完成する2021
各地で改善が進んでいたり、ガイドラインを書いたり、UIコンポーネントのアップデートが進んでいたり2021~22
#hey_note_andpad STAND現状の構成configComponent Library EC/レジ 予約 ID 基盤 レジアプリ 予約アプリSTAND Web STAND iOSSTAND Regi各地で色々頑張っている...
現在の課題2
#hey_note_andpad 課題がいっぱい● 今はまだUIコンポーネント集。作ったけど、課題もたくさん出てきた● 適切なUIよりも既存のUIで組み合わせる方を選択されてしまったりも● イラストとか楽しさとわかりやすさを注入していくにはどうすれば● コンポーネント以外のデザインルールはデザイナーの脳内● 今後の変更差分をどうやって同期するの● デザインシステムを改善していくチームの目標・評価は● エンジニアの専任チームがない● アップデートの運用の仕組みが整ってない● 事業と比較されると優先度が低く見られてしまう
#hey_note_andpad トライ：UI改善stand act2UI 改善案の検討
#hey_note_andpad トライ：ドキュメント作成
#hey_note_andpad トライ：ドキュメント作成理念エクスペリエンスバリューSTORES の景色デザイントークン ロゴ・シンボル カラーパレット タイポグラフィ …コミュニケーションガイドライン ボイス&トーン 用語 …ウェブ管理画面 UIコンポーネント 設計ガイドライン 開発ガイドラインモバイルアプリ …レジ …ストアフロント …サービスサイト …
これからのこと3
#hey_note_andpad その先へデザインシステムを磨き上げていくチームと、事業価値をデリバリーしていくチームをうまく接続して、高い品質の製品を早く届けられるように。● UIデザイナー（スペシャリスト）● デザインエンジニア● プロダクトデザイナー● フロントエンドエンジニア
#hey_note_andpad その先へユーザーの学習を助け、デジタルプロダクトを使いこなし、商売や仕事が楽しくなる人を増やせるように。● LXデザイナー● プロダクトデザイナー● コミュニケーションデザイナー
#hey_note_andpad 募集中https://hello.hey.jp/フロントエンドエンジニア デザイナー
daitasu
yutaromurakami
koel
j5ik2o
kumanoayumi
wattlaa
uxaustralia
akwkm
cyberagentdevelopers
y__ri9813
stephaniewalter
tapidokes
mza
chriscoyier
marcelosomers
bcantrill
caitiem20
revolveconf
jnunemaker
ddemaree
lauravandoore
carmenintech
tanoku
trallard