大規模ECサイトを支えるデザインシステム

急成長の大規模なECサイトを展開する企業において、デザインとUIの側面ではそのスピードを維持するためにいくつかのトレードオフがありました。例えば、再利用に向かないUIのスポット開発を繰り返してきたため、近年ではデザインとコードの負債が目立つようになってきました。

古いサイトデザインを刷新するために、Adobe XDやSass/BEMの技術を活用しながら、大規模なECサイトにふさわしい「デザインシステム」の開発を始めました。企画や社内調整から、XDを用いたデザインとコーディングまで、私たちのデザインチームが実践したことと、その経験から得られたノウハウを共有します。

Transcript

1. 大規模ECサイトを支える デザインシステム デザインと開発編 Adobe XD ユーザグループ大阪 2019/12/26 1 2019.12.26 © 2019 MonotaRO Co., Ltd. All Rights Reserved.
2. はじめまして 2 Kevin McCoy 株式会社MonotaRO Web デザイングループ長 兼 モバイル UI/UX プロデューサー Twitter: @vacantgeologist
3. デザインシステムは盛り上がっています 3
4. なのに、日本国内の事例が なぜか少ない… 4
5. このセッションの目的 5 これからデザインシステムを作りたいと思っている人に 1. 役に立つ考え方（企画、調整） 2. 技術的な知識（モノタロウの事例紹介） を共有すること
6. 背景の紹介 Why make a Design System? 6
7. www.monotaro.com 7 B2B EC Site By MonotaRO Since 2001 2005年のトップページ
8. 2019年 8 1800万点の取扱商品 380万件以上のユーザ登録 1000億円を超える年間売上 日本で最大級のB2B ECサイト PC / モバイル / アプリ
9. 課題 9 10年間ほど25%の成長率を維持できています。しかし、ス ピードを重視するために、いくつかのトレードオフを選択 しました。これによって、以下の課題が発生: • スポット開発による、一貫性の少ないUIデザイン • レガシーコードの蓄積 • デザインのガイドラインが存在しなかった • タッチポイントによってブランドメッセージが違う
10. 10 同じはずの UI でも、そのデザイ ンがページ・使用箇所によって異 なる
11. 11 HTML/CSS のスパゲッティ化 • !important 多発 • 過去のスタイルを上書きする ためにセレクターの詳細度が どんどん上がっていく
12. デザイナーのスキルセット • 他社なら、このような分業かもしれません 12 デザイナー バックエンド エンジニア フロントエンド エンジニア UI のデザイン コードは書かない Photoshop, Illustrator, XD, etc. UI 部分の実装 HTML/CSS/JS 先端的な会社なら React/Vueなど高度 なFE開発 サーバサイド技術 データベース連携 ビジネスロジックの 実装
13. デザイナーのスキルセット • モノタロウでは、デザイナーもコードを書きます 13 デザイナー Webアプリケーション エンジニア UIのデザイン HTML/CSSコーディング Photoshop, Illustrator, XD, etc. サイトを動かすアプリケーションの開発 Python/JS etc.
14. デザイナーのスキルセット 14 デザイナー UIのデザイン HTML/CSSコーディング Photoshop, Illustrator, XD, etc. デザインも、重要な コードの一部も、改善 するためのスキルをデ ザイナーが持っていま す。
15. デザインシステムの企画が始まる 15 サイトのデザインをより良くして、 1. ユーザにかかる負荷を軽減したい 2. 一貫性の高いデザインを、効率よく作りたい 3. モノタロウのブランド力を強化したい
16. デザインシステムの企画が始まる 16 Atomic Design Design Systems Storybook Responsive Design Component Based UI React and Vue.js 最初は情報量に圧倒される気持ちになりました… どうやって選んでいけばいいのか…
17. デザインシステムの企画が始まる 17 選択肢が本当に多すぎるので • サイトを、今よりも良い状態すること • 3～5年程度、使えるデザインを目指す • やり方が最新かどうかよりも、スコープ内に収まり、 目的達成に向けて役に立つかどうかを選定基準に
18. いよいよ、出発 We begin the long journey ahead 18
19. デザインシステムの企画が始まる 19 デザインシステムのことを「スタイルガイド」と呼ぶこ とにしました。 特に深い理由は、ありません。
20. デザインシステムの企画が始まる 20 1. 既存のUIを集めて分類する 2. デザイン原則を考える 3. 社内調整
21. ① 既存のUIを集めて分類する 21
22. ① 既存のUIを集めて分類する 22 ••ページの◦◦UIではな くて、目的と用途を意識し てグルーピングしました。
23. ② デザイン原則を考える 23 • 原則がはっきりしないと、必要なバリエーションが作 れないため、優先して決めることにしました。 • おすすめ: Airbnbの事例が非常に分かりやすくて、私 たちも参考になりました。
24. ② デザイン原則を考える 24 Airbnb Design “Building a Visual Language” より https://airbnb.design/building-a-visual-lang uage/
25. ③ 社内調整が始まる 25 • スタイルガイドの必要性について認識合わせ ◦ プロジェクトの目的 ◦ v1.0 で対応する範囲 (Scope) • デザインキーワードを決定
26. ③ 社内調整が始まる 26 デザインキーワードはどう決めるか？ • 利用者はどんな人か (年齢層、価値観など) • 基本的な「提供価値」は何か • その価値を、どう見せたいか
27. ③ 社内調整が始まる 27 デザインキーワード • 答えが出ないなら、競合他社との比較を行い、差別化 できる案を提案すると良いかもしれません • Is Not / Is のペアがあると、分かりやすいです × やわらかい ◎しっかりしている、丈夫な × 阪神タイガース ◎ 侍ジャパン
28. ③ 社内調整が始まる 28 社内調整をより円滑にするためには • 必ず責任者・承認する人と調整すること ◦ モノタロウでは、部門長と社長でした ◦ 前例の無い取り組みなら、Bottom-up よりも Top-down になる と、やりやすい場合もあります ▪ いわゆる「デザイン経営」が知られる時代、関心を持っている 人が多くなってきています
29. ③ 社内調整が始まる 29 社内調整を、より円滑にするためには • 毎回、目的 (期待) を最初に伝える • 話す内容の抽象度を相手に合わせて上げる・下げる ◦ 相手の地位を目安に ▪ 社長なら「抽象度高め」にして、全体像について話す ▪ 担当エンジニアなら「具体的に」Detail 込みで話す
30. ③ 社内調整が始まる 30 デザインの調整で悩んでいる方におすすめ! 「デザインの伝え方: 組織の合意を 得るコミュニケーション術」 Tom Greever氏 / O’Reilly
31. デザインを作り始める From first designs to XD master files 31
32. スタイルガイドを作り始める 32 1. デザイン原則を踏まえた「ミニ世界」 2. Adobe XD で UI デザイン
33. ミニ世界 33 What's a ミニ世界?
34. ミニ世界 34 What's a ミニ世界? • 「よくあるUI」が集まるデザインサンプル ◦ ECサイトなら: ボタン、入力フォーム、価格、商 品写真、テキストリンク • パーツの相性を確認しながらデザインできるのが利点 • Adobe XD はこの段階から使用 • ミニ世界を使って、デザインを提案しました
35. ミニ世界のサンプル 35
36. ミニ世界のサンプル 36
37. ミニ世界のサンプル 37
38. ミニ世界のサンプル 38
39. ミニ世界のサンプル 39 Hint: デザイン原則も込み で考えると、決まった案 が横展開しやすい
40. ミニ世界のサンプル 40 Hint: ページに当てはめて みると、提案の具体性が 上がり、調整しやすくな ります。 ただ、細かいことはまだ あまり気にしない方が良 いと思います。
41. 採用されたミニ世界 41 採用された案を使って、 次に全体の UI をデザイン するフェーズに入ってい きます。 このミニ世界を、あとか ら参照することが非常に 多かったです。
42. XD で UI デザイン 42 • 1つの UI : 1つのアー トボード • 主要なバリエーショ ンを示す • 仕様の言語化 下: モバイル版のマスターファイル
43. XD で UI デザイン 43 • 1つの UI : 1つのアー トボード • 主要なバリエーショ ンを示す • 仕様の言語化
44. XD で UI デザイン 44 • 1つの UI : 1つのアー トボード • 主要なバリエーショ ンを示す • 仕様の言語化
45. XD で UI デザイン 45 • 1つの UI : 1つのアー トボード • 主要なバリエーショ ンを示す • 仕様の言語化
46. XD で UI デザイン: 振返り 46 • 助かりました ◦ Alt + マウスオーバーでサイズをpx単位で測る ◦ グリッドレイアウト ◦ Adobe Fonts (源ノ角ゴシック) ◦ 制限された機能によるプロセスの加速化 • 特に困らなかったが、気になる ◦ InVisionのDSMみたいなドキュメンテーション ツール (自作することにしたため)
47. XD で UI デザイン: 振返り 47 • あのときあれば使いたかった ◦ 2019/11 に登場した機能 ▪ 同時編集 (今はまだBeta) ▪ Component States ▪ Hover States • 本当に困った ◦ XDでテキストのレンダリングがブラウザ (HTML/CSS)と違う、手動でテキスト要素を配置
48. コードを書く Writing the actual code with Sass, HTML, and JS 48
49. コードの要件をまとめる 49 • 3～5年後まで、大規模ECサイトの開発と運用に耐え れる設計 • 色や余白などルール化した原則は、値を手打ちしたく ない ⇒ Sass • Scoped CSS, CSS in JS は、PythonとJSを書く人ま で影響するので、見送る • BEMは、大規模サイトに向いており、特別な技術に依 存しないのが魅力的
50. BEMについて 50 • BEMを採用することにしました • Block__Element--Modifier という標準的な書き方 • ネスト制限: Block__Element__Element 禁止 所感: BEMのネーミングは、みんなが騒ぐほど難しくないです。慣れた ら、普通にできます。
51. Sass設計 51 • SMACSS, FLOCSS, OOCSS 調査 ⇒ いいとこ取り • Sassの使える機能をきちんと定義 ◦ @extend 禁止 (ややこしくなりそうだったため) ◦ 学習コストをコントロール • 変数の命名規則からz-indexの与え方まで、本当に細 部の細部まで決めて、開発規則のドキュメンテーショ ンをきっちり作りました ◦ 手戻りを無くして、開発を加速させる
52. 52 Sassドキュメンテーション
53. • 必要最低限 ◦ 可能な限り、CSSアニメーションで対応 • フレームワークに依存しないように、ES5の標準的な書 き方 ◦ IE8対応 53 JavaScript
54. 54 開発プロセス • UIごとに担当を決める • コードレビューの徹底 • v1.0のコードが完成したときにCI (Jenkins) でビルド スクリプトを導入
55. ドキュメンテーション Documentation is everything 55
56. 作りたかったイメージ 56 使用例 コードサンプル 説明
57. あれ、あまり選択肢が無い… 57
58. 58 たどり着いたのは Vuepress テキスト • 記事は Markdown • Vue Router など、標準で 付いてきます • npm run build ⇒ サーバに 置くだけで公開できます • UIの使用例は、カスタム Vue コンポーネントを開発 して対応しました
59. 59 ドキュメントの紹介
60. ドキュメントは、ルールが大切 • です・ます調に統一、受動態禁止など • 記事の基本構成、情報の順番 • コードレビューみたいに、記事もレビュー徹底 60
61. v1.0 完成 Where we are, and where we’re going 61
62. 03 02 04 01 62 プロセスを俯瞰して見る 01 プロジェクトの必要性とス コープ・要件を決める 02 XDを用いたUIデザイン。複 数人が制作、全体でデザイ ンレビュー。 04 最終的に公開するアウト プットのドキュメントを仕 上げて、社内公開。 03 決めた設計をベースに HTML/CSS/JSの開発を行う。 コードレビューは欠かせない。 開発 ドキュメント作成 企画・調整 デザイン作業
63. 成果物 (デスクトップ、モバイルそれぞれ) • ドキュメントサイト (使用例、コードサンプル付き) • HTML/CSS/JSの開発規則 • Sassのコード • 自社カスタムアイコンフォント • XDのマスターファイル 63
64. What's next • サーバへの導入検証 ◦ 開発中 • ECプラットフォーム全体の刷新 (全社) 64
65. よくある課題 • デザインシステムを作りたいけど ◦ 話がまとまらない ◦ 周囲の人が理解してくれない ▪ みんなが本当に抱えている課題を把握できてい るか、要チェック。 • ユーザ、社内の人、社外の利害関係がいた場合など 65
66. よくある課題 • デザインシステムを作りたいけど ◦ 話がまとまらない ◦ 周囲の人が理解してくれない ▪ 説得力のある、具体的な案を作る • モノタロウは、ミニ世界でした • まだ無いものを、あるかのように見せれるのはデザイ ナーの強み! 66
67. 追い風と逆風 (モノタロウ事例) • レガシーコードとの戦い • IE8サポート • 前例の無い取り組み (不安、懸念、リスク) • 人的リソースの制約 決して、Silicon Valley的な、なんでも自由に作れる環境と は言えません。 67
68. 追い風と逆風 (モノタロウ事例) それでも、 ぼくたちは前進する。 68 いろいろあるかもしれない。
69. 助かったこと (モノタロウ事例) • 合理的な社風 (データドリブン、社内政治が少ない) • 常に改善案を練る、Ideaをストックするという、会社 全体の習慣 • 刷新にコミットしている ◦ EC基盤から、商品パッケージまで • Your Mileage May Vary (会社と状況はそれぞれ違う) 69
70. デザイナーとエンジニア募集中! • Webデザイナー • UXデザイナー • フロントエンドエンジニア mccoy@monotaro.com https://recruit.monotaro.com 70
71. 71 2019.12.26 © 2019 MonotaRO Co., Ltd. All Rights Reserved.