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

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

daitasu
March 11, 2022

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

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

daitasu

March 11, 2022
Tweet

More Decks by daitasu

Other Decks in Design

Transcript

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

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

    プロダクトそれぞれフレームワークが異なる(そもそも作って る会社が違ったので)けどどうする? • デザインシステムの実装はどう進めていくのが良いのか...?
  3. #hey_note_andpad    tailwindcssを起用 • utility-first CSS framework • カスタマイズ可能なユーティリティ クラスのみを吐き出す

    • jsやhtmlは提供しない • config統一で吐いたユーティリティク ラスを各プロダクトで利用する • いつか共通ライブラリへ移植できた らいいね
  4. #hey_note_andpad    Action:デザイナーとの連携を密に、叩き上げていく ④ configリポを修正し、各プロ ダクトに愚直にコピペ ① tailwind configを最低限のみ確定 ②

    デザイナーとの昼会を毎日実施 ③コンポーネントごとにstaging確認 デザインの変更差分を 愚直にSync tailwind config ID基盤 ネットショップ・レジ 管理画面 …
  5. #hey_note_andpad    STAND 現状の構成 config Component  Library  EC/レジ 予約 ID

    基盤 レジアプリ 予約アプリ STAND Web STAND iOS STAND Regi 各地で色々頑張っている...
  6. #hey_note_andpad    課題がいっぱい • 今はまだUIコンポーネント集。作ったけど、課題もたくさん出てきた • 適切なUIよりも既存のUIで組み合わせる方を選択されてしまったりも • イラストとか楽しさとわかりやすさを注入していくにはどうすれば •

    コンポーネント以外のデザインルールはデザイナーの脳内 • 今後の変更差分をどうやって同期するの • デザインシステムを改善していくチームの目標・評価は • エンジニアの専任チームがない • アップデートの運用の仕組みが整ってない • 事業と比較されると優先度が低く見られてしまう
  7. #hey_note_andpad    トライ:ドキュメント作成 理念 エクスペリエンスバリュー STORES の景色 デザイントークン  ロゴ・シンボル  カラーパレット

     タイポグラフィ  … コミュニケーションガイドライン  ボイス&トーン  用語  … ウェブ管理画面  UIコンポーネント  設計ガイドライン  開発ガイドライン モバイルアプリ  … レジ  … ストアフロント  … サービスサイト  …