サービス横断デザインシステムのフロントエンド開発に携わって学んだこと #FEStudy

サービス横断デザインシステムの フロントエンド開発に携わって学んだこと ヤフー株式会社 デザイナー 春野 健吾 ©2021 Yahoo Japan Corporation All rights reserved.

はじめに ⾃⼰紹介 春野 健吾 ヤフー株式会社 デザイナー 2017年4⽉ 新卒⼊社（社会⼈4年⽬） 趣味︓ボードゲーム、テレビゲーム ©2021 Yahoo Japan Corporation All rights reserved. 2

はじめに ⾃⼰紹介 – 仕事の内容 • 広告プロダクトのプロモーションサイト制作（主にマークアップ） • 検索結果画⾯のモジュール制作（フロントエンド） • 社内外のフロントエンド勉強会イベントの企画・運営（Bonfire Frontendなど） • サービス横断デザインシステム「Riff」（フロントエンド） ©2021 Yahoo Japan Corporation All rights reserved. 3

はじめに ⾃⼰紹介 – 仕事の内容 • 広告プロダクトのプロモーションサイト制作（主にマークアップ） • 検索結果画⾯のモジュール制作（フロントエンド） • 社内外のフロントエンド勉強会イベントの企画・運営（Bonfire Frontendなど） • サービス横断デザインシステム「Riff」（フロントエンド） • 2019年10⽉から現在に⾄るまで開発チームに（約1年半） • フロントエンド開発に携わって学んだことをメインに話します 2017/4 ⼊社 2019/10 ©2021 Yahoo Japan Corporation All rights reserved. 現在 4

デザインシステムを作る⽬的って何︖ ©2021 Yahoo Japan Corporation All rights reserved. 5

デザインシステムを作る⽬的って何︖ デザインシステムを作る⽬的 UIデザインの品質向上 UIデザインの業務効率化 ©2021 Yahoo Japan Corporation All rights reserved. 6

デザインシステムを作る⽬的って何︖ UIデザインの品質向上 • 画⾯設計を繰り返している間にデザインがバラバラになっちゃった︕ • デザインのブレはユーザー体験にじわじわと影響が出る • デザインの「当たり前品質」を担保する 追加 次へ 決定 購⼊する 追加 混沌へ… 記事を⾒る 詳細を⾒る ©2021 Yahoo Japan Corporation All rights reserved. 7

デザインシステムを作る⽬的って何︖ UIデザインの業務効率化 • 新しい機能実装のためにパーツをいちから作り直し︕︖ • 過去事例調べるのも⼿を動かすのも時間がかかる • ⾞輪の再開発を防いで作業を効率化させる 追加 次へ 決定 購⼊する 追加 混沌へ… 記事を⾒る 詳細を⾒る 新規開発 また新規開発︖ ©2021 Yahoo Japan Corporation All rights reserved. またまた新規開発︕︖ 8

サービス横断デザインシステム「Riff」 ©2021 Yahoo Japan Corporation All rights reserved. 9

「Riff」 サービス横断デザインシステム「Riff」 Yahoo! JAPANの標準的なUIの ビジュアルスタイル定義（スタイルガイド）とUIライブラリ ©2021 Yahoo Japan Corporation All rights reserved. 10

「Riff」 スタイルガイド Color UIビジュアルデザインにおける基本的な 指針をドキュメント化したもの ・Color ・Typography ・Icon Typography ・Spacing ・… ©2021 Yahoo Japan Corporation All rights reserved. 11

「Riff」 スタイルガイド Icon UIビジュアルデザインにおける基本的な 指針をドキュメント化したもの ・Color ・Typography ・Icon ・Spacing ・… ©2021 Yahoo Japan Corporation All rights reserved. 12

「Riff」 UIライブラリ スタイルガイドに則って作成された、UI ライブラリ ・Button ・Checkbox ・Switch ・Search ・… ©2021 Yahoo Japan Corporation All rights reserved. 13

「Riff」 UIライブラリの提供 Sketchライブラリ ・UIデザイン向け ・（Figma版も開発中） JavaScriptライブラリ ・UI開発向け ・React製 ・（CSSライブラリとしても提供） ©2021 Yahoo Japan Corporation All rights reserved. 14

「Riff」 UIライブラリの提供 Sketchライブラリ ©2021 Yahoo Japan Corporation All rights reserved. 15

「Riff」 UIライブラリの提供 React Component ©2021 Yahoo Japan Corporation All rights reserved. 16

「Riff」 利⽤するデザイナーのメリット ・スタイルガイドとSketchライブラリを 使うことで、プロトタイプを容易に制作 できる（作業効率化） ・デザインの基盤は崩れないので、プロ ダクトの品質に注⼒できる（品質向上） ©2021 Yahoo Japan Corporation All rights reserved. 17

「Riff」 利⽤するエンジニアのメリット ・Reactライブラリを使うことで、コン ポーネントをいちから作る必要がなくな る（作業効率化） ・デザインの調整に気にすることがなく 機能⾯の実装に注⼒できる（品質向上） ©2021 Yahoo Japan Corporation All rights reserved. 18

「Riff」 実際に使われているところの例 ©2021 Yahoo Japan Corporation All rights reserved. 19

デザインシステムの制作の流れはどんな感じ︖ ©2021 Yahoo Japan Corporation All rights reserved. 21

デザインシステムの制作の流れはどんな感じ︖ 「Riff」デザインシステム チーム体制 スタイルガイド 制作グループ UIデザインキット 制作グループ ©2021 Yahoo Japan Corporation All rights reserved. コーディング 開発グループ 22

デザインシステムの制作の流れはどんな感じ︖ デザインシステム制作の流れ プロダクト側へヒヤリング スタイルガイド・Sketchライブラリ 制作 必要なスタイルガイド、 コンポーネント洗い出し ©2021 Yahoo Japan Corporation All rights reserved. コーディング開発 23

デザインシステムの制作の流れはどんな感じ︖ デザインシステム制作の流れ プロダクト側へヒヤリング スタイルガイド・Sketchライブラリ 制作 必要なスタイルガイド、 コンポーネント洗い出し コーディング開発 フロントエンドエンジニア担当 ©2021 Yahoo Japan Corporation All rights reserved. 24

実際どのように開発をしているの︖ ©2021 Yahoo Japan Corporation All rights reserved. 25

実際どのように開発をしているの︖ コーディング開発チームがやっていること • Reactコンポーネント開発 • • 基本的にモブプロで開発 Sketch Plugin開発 ©2021 Yahoo Japan Corporation All rights reserved. 26

実際どのように開発をしているの︖ つかっているもの • React + TypeScript + Next.js • Storybook • Playroom • Jest + Puppeteer + reg-suit • Lerna • … ©2021 Yahoo Japan Corporation All rights reserved. 27

実際どのように開発をしているの︖ デザインは時が経つと次々にアップデートされる • UIデザインのトレンドも早い、次々と新しいことや変化がおこる • ここ最近だとダークモード • コーディング開発側もその変化に追いついていかないといけない • 変化に伴う修正を容易にできる環境を⽤意しておく ©2021 Yahoo Japan Corporation All rights reserved. 28

実際どのように開発をしているの︖ 細かなコンポーネント開発 • コンポーネントは、Tokenやコンポーネントの組み合わせでできる • 最⼩となるコンポーネントを⽤意しておけば、後の制作も容易に ©2021 Yahoo Japan Corporation All rights reserved. 29

実際どのように開発をしているの︖ Color Token • 役割を持った⾊には名前をつけて、カスタムプロパティとして定義しておく • コンポーネントには定義された⾊だけを使う（直接カラーコードは使わない） • ⾊に変更があった時、修正すればよいのはカスタムプロパティだけ ©2021 Yahoo Japan Corporation All rights reserved. 30

実際どのように開発をしているの︖ 「⾊」は⼀度決まったからといって変わらないということはない • ⾊の定義が⾒直されることがあった • ダークモード対応 • アクセシビリティ関連（コントラスト⽐） • ⾊の変更はすべてのコンポーネントに影響する • Color Tokenを利⽤した設計をしていたので、苦労する未来を防げた ©2021 Yahoo Japan Corporation All rights reserved. 31

実際どのように開発をしているの︖ Utility Style Token • ⾊だけでなく、タイポグラフィ、余⽩、レイヤーも定義づけできる • タイポグラフィ… サイズ、⾊、装飾などをひとまとめに定義 • 余⽩ … 4の倍数ルールなら、倍率で管理してしまう • レイヤー … z-indexやbox-shadowをひとまとめに定義 ©2021 Yahoo Japan Corporation All rights reserved. 32

実際どのように開発をしているの︖ Utility Style Token • ⾊だけでなく、タイポグラフィ、余⽩、レイヤーも定義づけできる • タイポグラフィ… サイズ、⾊、装飾などをひとまとめに定義 • 余⽩ … 4の倍数ルールなら、倍率で管理してしまう • レイヤー … z-indexやbox-shadowをひとまとめに定義 UIデザインに数値的法則があるなら、 コードにうまく落とし込んで効率化させる ©2021 Yahoo Japan Corporation All rights reserved. 33

実際どのように開発をしているの︖ 組み合わせてコンポーネントを作る • Button = Element + Link ( + Icon ) • 組み合わないとき → デザインのズレに気づける デザインモック • Iconコンポーネントのサイズパターンが⾜りない︖ • Iconコンポーネントのサイズパターンに合っていない Buttonのデザイン設計になってしまっている︖ コーディングしたもの • → デザイナーに確認できる アイコンサイズが合わない ©2021 Yahoo Japan Corporation All rights reserved. 34

実際どのように開発をしているの︖ オーバーライドする開発はデメリットもある • 参照しているコンポーネント全体に影響する • 例︓Iconの⼤きさの⽐率変更 → Messageでスタイル崩れが︕ 影響 → ©2021 Yahoo Japan Corporation All rights reserved. 35

実際どのように開発をしているの︖ ビジュアルレグレッションテスト（VRT） • スクリーンショットを撮って、変更前 後の⾒た⽬の違いを検出してくれる • PRを出すたびにCI/CDでVRTを実⾏ し、予期せぬコンポーネントでスタイ ル崩れが起きていないか事前チェック できる reg-suit ©2021 Yahoo Japan Corporation All rights reserved. 36

実際どのように開発をしているの︖ ビジュアルレグレッションテスト（VRT） ©2021 Yahoo Japan Corporation All rights reserved. 37

実際どのように開発をしているの︖ アクセシビリティ • デザインでカバーできないところに気にかける • WAI-ARIA • @storybook/addon-a11y ©2021 Yahoo Japan Corporation All rights reserved. 38

実際どのように開発をしているの︖ ⾊のコントラスト⽐ • アクセシビリティ基準の要件を満たす • テキストと背景のコントラスト⽐は 「4.5︓1」以上 • ⼤テキスト、補⾜テキストと背景の コントラスト⽐は「3︓1」以上 • すべての⾊のパターンをOK・NGを 洗い出すのは⼤変 ©2021 Yahoo Japan Corporation All rights reserved. 39

実際どのように開発をしているの︖ ⾊のコントラスト⽐ • 実装でコントラスト⽐計算⾃動化（ドキュメント化の効率化） ©2021 Yahoo Japan Corporation All rights reserved. 40

実際どのように開発をしているの︖ ⾊のコントラスト⽐ • 実装でコントラスト⽐ 計算⾃動化 （ドキュメント化の効率化） ©2021 Yahoo Japan Corporation All rights reserved. 41

デザイナーと共創する上でつまづいたこと ©2021 Yahoo Japan Corporation All rights reserved. 42

デザイナーと共創する上でつまづいたこと 「差し戻し」を数多くした • 基本的にはデザインができて、開発に進む流れ • 実装していくと、不確かな要素がみつかる • 結果︓デザイナーに差し戻し • 差し戻しはお互いに苦労する デザイン制作 デザイン渡す 差し戻す ©2021 Yahoo Japan Corporation All rights reserved. コーディング 実装 ︖︖︖ 43

デザイナーと共創する上でつまづいたこと デザインシステム制作の流れ ここで右往左往する プロダクト側へヒヤリング スタイルガイド・Sketchライブラリ 制作 必要なスタイルガイド、 コンポーネント洗い出し コーディング開発 フロントエンドエンジニア担当 ©2021 Yahoo Japan Corporation All rights reserved. 44

デザイナーと共創する上でつまづいたこと デザインシステム制作の流れ この期間が⼤事 プロダクト側へヒヤリング スタイルガイド・Sketchライブラリ 制作 必要なスタイルガイド、 コンポーネント洗い出し コーディング開発 フロントエンドエンジニア担当 ©2021 Yahoo Japan Corporation All rights reserved. 45

デザイナーと共創する上でつまづいたこと 開発する前にフィードバックを⼼がける • 与えられたデザインから想像で作らない • hover状態や⽂字量変化による可変幅など 実際はこうですよ 実装物渡す 差し戻す • きっとこうなる だろう ︕︖︕︖ 不確かな情報は開発を進める前に伝えておく • 不確かな情報って何がありうるだろう︖ ©2021 Yahoo Japan Corporation All rights reserved. 46

デザイナーと共創する上でつまづいたこと フロントエンド⽬線で主張する • ⾊とかタイポグラフィとかはデザインのプロにおまかせする • コーディングする側の⽴場で客観的にフィードバックする デザイン制作 ︕ デザイン渡す マウスオーバ時はどう なっていますか︖ フィードバック ©2021 Yahoo Japan Corporation All rights reserved. 47

デザイナーと共創する上でつまづいたこと 例︓List ©2021 Yahoo Japan Corporation All rights reserved. 48

デザイナーと共創する上でつまづいたこと 例︓List • クリッカブルの表現はどうなりますか︖ • ⽂字量がたくさんあるときはどうなりますか︖ ©2021 Yahoo Japan Corporation All rights reserved. 49

デザイナーと共創する上でつまづいたこと 例︓Pagination ©2021 Yahoo Japan Corporation All rights reserved. 50

デザイナーと共創する上でつまづいたこと 例︓Pagination • 100件中34件⽬のときにselectedは左から何番⽬︖ • 数字が2桁、3桁のときにボタンは横に伸びる︖ ©2021 Yahoo Japan Corporation All rights reserved. 51

まとめ ©2021 Yahoo Japan Corporation All rights reserved. 52

まとめ 話したこと • サービス横断デザインシステム「Riff」について • 変化し続けるデザインに対応できるような開発環境になっていると将来幸せ • デザイナーと共創するには開発前のコミュニケーションが⼤事 ©2021 Yahoo Japan Corporation All rights reserved. 53

EOP ©2021 Yahoo Japan Corporation All rights reserved.