Upgrade to Pro — share decks privately, control downloads, hide ads and more …

STORES のデザインシステムのこれまでと現状

8875e86a57aad1f0f716374bcb6507c7?s=47 daitasu
March 11, 2022

STORES のデザインシステムのこれまでと現状

Frontend Talk 〜デザインシステム構築のリアルな裏側〜
2022/03/10 合同登壇
株式会社 ヘイ デザイナー 井出 優太
株式会社 ヘイ フロントエンドエンジニア 藤井 大祐
https://andpad.connpass.com/event/238368/

8875e86a57aad1f0f716374bcb6507c7?s=128

daitasu

March 11, 2022
Tweet

More Decks by daitasu

Other Decks in Design

Transcript

  1. STORES のデザインシステムの これまでと現状 Frontend Talk 〜デザインシステム構築のリアルな裏側〜【hey|note|ANDPAD】 2022/03/10

  2. #hey_note_andpad    話し手 藤井 大祐 リテール本部 フロントエンドエンジニア 井出 優太 プロダクトデザイン本部

    デザイナー @daitasu @_ideyuta
  3. None
  4. デザインシステムのこれまで 1 現在の課題 2 これからのこと 3

  5. デザインシステムのこれまで 1

  6. heyができる 2018 STORES.jpとCoineyが統合してheyが誕生した

  7. STORES レジ のデザイン開始・どうしよう? 2019 レジは、ネットショップ・決済と一緒に使ってもらうことを目指したプロジェクトなので、全体の体験をどうやって統合していくか も考える必要があった。新しいプロダクト、統合されたブランドとして、どんなデザインにしていくのが良いんだろうか... ?

  8. ブランド統合へ 2020 ひとつのブランドの中に、複数の製品があり、それらをまるっと提供することでより価値を大きくするという戦略を実行していくた めに、象徴としてのブランドをまずは統合した。カラーパレットやブランドイメージも更新され、さて....

  9. ネットショップ管理画面のデザインリニューアル 2020 ブランド統合時に決定されたカラーパレットを使ってスタイリングを考えたり、既存の課題を解消しながら、レジが入ってくること に備えてリニューアルをおこなった。STORES らしいデザインを考え始めた初期的な段階のデザイン。

  10. リニューアルを進めながらわかったことをふま えて、目指したい方向を考えはじめた...

  11. 当時の思考のdump 2020 5 我々はどこにいきたいのだろうか... 前提 • サービスが4つある(ネットショップ・ターミナル・レジ・予約) • プロダクトが12こある ◦

    ネットショップ 3つ(ストア・ダッシュボード・ストアデザイン) ◦ ターミナル 4つ(管理画面・iOS/Androidアプリ・SDK・請求書決済) ◦ レジ(iOSアプリ) ◦ 予約 4つ(管理画面・予約サイト・管理画面アプリ・顧客向けアプリ) 課題 • ブランドは統合されているけど、同じルールでプロダクトがデザインされていないのでツール の学習コストが高い ◦ 現在は併用ユーザーが少ないのでクリティカルではない • ルールが多数あると管理コスト・属人性が高くなる • 新しく作るプロダクトが従うべきルールがない • 横断的なルールがないので局所で迷うことが多い ◦ ブランドガイドラインのみ • プロダクト横断的な体験設計はどこでどうやる? • どうすれば無視されない共通ルールを作れるか ◦ 開発・デザイン横断の専門部隊がないと難しそう? ◦ どうやって運用するかをセットで考える必要がある ▪ 漸進的に適用できるのかとか(ECは今後はできそう) ▪ ターミナルはどこかでリプレイスが必要かも ◦ デザインシステム自体はとにかく先にできていないと何もできない どう管理するか • 各プロダクトのUIは統一的なデザインシステムに則った方が良いか? ◦ 理想的には則った方が良い ▪ ツールを利用する学習コストが減る • プラットフォーム(web/iOS/Androidなど)の原則には基 本的に従って作る ▪ 車輪の再発明がなくなることでデザイン・開発コストを下げられる ◦ 新たに作るプロダクトに関しては則る ▪ レジ ▪ 共通管理画面 ▪ このためのデザインシステムは必要 • 作る • 効率的に管理するには? ◦ デザインシステムがある プロダクト横断的な体験設計 • 各プロダクトから1人連れてきて考え続ける感じ? ◦ 空いてる誰かをアサインして、各プロダクト担当にレビューしてもらうとかそういう 感じになりそう • デザインチームだけで完結しなそう
  12. ひとりのユーザーが複数のプロダクトを横断的に使用する

  13. 当時の思考のdump 2020 5 デザインシステムは、どこまでの領域をカバーし、どういった役割を持つのだろうか...

  14. 素案をまとめた 2020 11 まだエンジニアからのフィードバックを受ける前の素案。どういうところを目指したいかという話が中心だった。

  15. None
  16. #hey_note_andpad    2020年末 当時の状況 • STORESレジ(iPadアプリ)はデザインシステムに則る • ウェブアプリもこれからはデザインシステムに則ったUIにして いきたいな •

    プロダクトそれぞれフレームワークが異なる(そもそも作って る会社が違ったので)けどどうする? • デザインシステムの実装はどう進めていくのが良いのか...?
  17. #hey_note_andpad    ウェブ、どうしよう M&Aや内製でプロダクトは増えていく予定だし、統一するにしても横断 組織もない。小さく各地ではじめられる方が良いのではなかろうか...

  18. #hey_note_andpad    tailwindcssを起用 • utility-first CSS framework • カスタマイズ可能なユーティリティ クラスのみを吐き出す

    • jsやhtmlは提供しない • config統一で吐いたユーティリティク ラスを各プロダクトで利用する • いつか共通ライブラリへ移植できた らいいね
  19. ID基盤プロジェクト・フロントエンドはCTOとideで実装 2021 4 STORES のアカウントを統合していくために、ID基盤をリリース。 デザインの細かいところを決めつつ、tailwindを使って本当にこれでいけるのかを試していった

  20. レジリリースに向けて、管理画面の実装がはじまる 2021 レジは、ネットショップのシステムを拡張して作っているので、商品の管理や注文の管理がひとつの製品の中でできるようになって いる。そのため、ネットショップだけ利用したい人、レジだけ利用したい人も迷わないように設計を変えていく必要があった。

  21. #hey_note_andpad    当時の状況 デザインシステムは検討中のUIもたくさんある でもレジのリリースは迫ってきている

  22. #hey_note_andpad    デザインシステムにどこまで対応するか 1. これまでの既存デザインにする 2. tailwindは使わずに既存のコンポーネントを デザインだけ新しくする 3. tailwindで新規にSTAND

    UIを作る
  23. #hey_note_andpad    デザインシステムにどこまで対応するか 1. これまでの既存デザインにする 2. tailwindは使わずに既存のコンポーネントを デザインだけ新しくする 3. tailwindで新規にSTAND

    UIを作る
  24. #hey_note_andpad    Action:デザイナーとの連携を密に、叩き上げていく ④ configリポを修正し、各プロ ダクトに愚直にコピペ ① tailwind configを最低限のみ確定 ②

    デザイナーとの昼会を毎日実施 ③コンポーネントごとにstaging確認 デザインの変更差分を 愚直にSync tailwind config ID基盤 ネットショップ・レジ 管理画面 …
  25. レジも無事にリリース・スタイリングが一定完成する 2021

  26. 各地で改善が進んでいたり、ガイドラインを書いたり、 UIコンポーネントのアップデートが進んでいたり 2021 ~22

  27. #hey_note_andpad    STAND 現状の構成 config Component  Library  EC/レジ 予約 ID

    基盤 レジアプリ 予約アプリ STAND Web STAND iOS STAND Regi 各地で色々頑張っている...
  28. 現在の課題 2

  29. #hey_note_andpad    課題がいっぱい • 今はまだUIコンポーネント集。作ったけど、課題もたくさん出てきた • 適切なUIよりも既存のUIで組み合わせる方を選択されてしまったりも • イラストとか楽しさとわかりやすさを注入していくにはどうすれば •

    コンポーネント以外のデザインルールはデザイナーの脳内 • 今後の変更差分をどうやって同期するの • デザインシステムを改善していくチームの目標・評価は • エンジニアの専任チームがない • アップデートの運用の仕組みが整ってない • 事業と比較されると優先度が低く見られてしまう
  30. #hey_note_andpad    トライ:UI改善 stand act2 UI 改善案の検討

  31. None
  32. None
  33. None
  34. #hey_note_andpad    トライ:ドキュメント作成

  35. #hey_note_andpad    トライ:ドキュメント作成 理念 エクスペリエンスバリュー STORES の景色 デザイントークン  ロゴ・シンボル  カラーパレット

     タイポグラフィ  … コミュニケーションガイドライン  ボイス&トーン  用語  … ウェブ管理画面  UIコンポーネント  設計ガイドライン  開発ガイドライン モバイルアプリ  … レジ  … ストアフロント  … サービスサイト  …
  36. None
  37. None
  38. None
  39. これからのこと 3

  40. #hey_note_andpad    その先へ デザインシステムを磨き上げていくチームと、事業価 値をデリバリーしていくチームをうまく接続して、高 い品質の製品を早く届けられるように。 • UIデザイナー(スペシャリスト) • デザインエンジニア

    • プロダクトデザイナー • フロントエンドエンジニア
  41. #hey_note_andpad    その先へ ユーザーの学習を助け、デジタルプロダクトを使いこ なし、商売や仕事が楽しくなる人を増やせるように。 • LXデザイナー • プロダクトデザイナー •

    コミュニケーションデザイナー
  42. #hey_note_andpad    募集中 https://hello.hey.jp/ フロントエンドエンジニア デザイナー