スマホ Web 版トップページの事例で学ぶ デザインシステム導入の過程で意識すべきポイント #yjtc / YJTC C-9

スマホWeb版トップページの事例で学ぶ デザインシステム導入の過程で 意識すべきポイント ヤフー株式会社 メディア統括本部 メディア企画デザイン1本部 芦田眞綾 ©2021 Yahoo Japan Corporation All rights reserved.

芦田 眞綾 メディア統括本部 メディア企画デザイン1本部 2016年 新卒入社 入社時より Yahoo! JAPAN トップページに携わる メインは UI / UX デザイン 現在はデザインシステムの構築も担当 Copyrights 2019 Yahoo Japan Corporation. All Rights Reserved.

スマホ Web 版トップページのデザインシステム導入 3

スマホ Web 版のトップページのデザインシステム導入 デザインシステムとは デザインシステム ・プロダクトの目的を達成するために必要なデザインのルール ・EX: デザイン原則・スタイルルール・UIコンポーネントルールなど 導入の目的 ・デザインのクオリティと開発の効率を向上させる ・プロダクトの価値提供のスピードを早める

スマホ Web 版のトップページのデザインシステム導入 デザインシステム導入の概要 2020年9月にリリース 導入までの期間は約1年 技術刷新 スタイルルールの整理・再定義 UI仕様の認識を共通化 QAテスト・リリース 2020年9月 導入完了 デザインシステム導入 メインテキスト サブテキスト NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW YAHOO! JAPAN Q キーワードを入力 検索 26/18 100% 千代田区 路線 ショッピング スポーツナビ すべて ヤフオク! PayPay ファイナンス ポイント すべて ニュース クーポン 芸能 スポーツ 話題 敷金やツケ 民法どう変わる? 口2635 9/28(月) 7:08 NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW トルコ最大級の地下都市発見

スタイルルールの整理・再定義 6

スタイルルールの整理・再定義 スタイルルールが整っていない理由 5年前にスタイルルールが定義される デザインツールの変化とデバイスの進化に追従 スタイルルールの例外パターンが増える スタイルルールが機能しなくなる 7

スタイルルールの整理・再定義 スタイルルールが整っていないことによる弊害 各UI画面の整合性を取ったレビューをすることが難しくなる 今日の試合の見どころは? スマートログインでもっとお得に 地域設定 現在設定されている地域 未設定 現在地で設定 北海道・東北 関東 甲信越・北陸 東海 閉じる Yahoo! JAPAN アプリ アプリで開く QR・バーコードリーダー Yahoo! JAPAN ID アプリで開く ID新規取得 毎日くじ 個人設定 天気・災害情報 未設定 占い 星座設定 同じ用途なのに見た目が違うUIが増えてしまう 8

スタイルルールの整理・再定義 スタイルルールが整っていないことによる弊害 同じ用途なのに見た目が違うUI 今日の試合の見どころは? スマートログインでもっとお得に 地域設定 現在設定されている地域 未設定 現在地で設定 北海道・東北 関東 甲信越・北陸 東海 閉じる Yahoo! JAPAN アプリ アプリで開く QR・バーコードリーダー Yahoo! JAPAN ID アプリで開く ID新規取得 毎日くじ 個人設定 天気・災害情報 未設定 占い 星座設定 ユーザの負担が増える・開発コストがかさむ 9

スタイルルールの整理・再定義 スタイルルールの整理 各UI画面で使われているスタイル一覧を作成 使われている文脈も 見た目も同じ 使われている文脈は 同じで見た目が違う 使われている文脈は 違って見た目が同じ 作成したスタイル一覧をグルーピングする

スタイルルールの整理・再定義 スタイルルールの整理 グルーピングしたものから共通項を見つけてルールを作る 使われている文脈も 見た目も同じ 使われている文脈は 同じで見た目が違う 使われている文脈は 違って見た目が同じ ユーザの直感性と視認性を考慮して基準となるスタイルを決める

スタイルルールの整理・再定義 スタイルルールの整理 グルーピングしたものから共通項を見つけてルールを作る 使われている文脈も 見た目も同じ 使われている文脈は 同じで見た目が違う 使われている文脈は 違って見た目が同じ どのようなケースで使うのかを明確にして別のスタイルとして定義

スタイルルールの整理・再定義 再定義したスタイルルール（カラー） メインテキスト サブテキスト リンク メインテキスト サブテキスト リンク 色数の3分の1を削減 13

スタイルルールの整理・再定義 再定義したスタイルルール（フォントサイズ） 16px 15px 14px メインテキスト 見出しテキスト 13px 12px 11px サブテキスト 10px 9px 補助テキスト 16px 14px 11px 10px メインテキスト 見出しテキスト サブテキスト 補助テキスト フォントサイズを8段階から4段階に削減 14

スタイルルールの整理・再定義 デザイナーが他のデザイナーに対して意識すべきポイント スタイルルールはシンプルか どのスタイルをあてるか迷わないようにする スタイルを適用している理由を説明できるか 曖昧になっているのであれば再考

スタイルルールの整理・再定義 デザイナーがエンジニアに対して意識すべきポイント スタイルの命名はスタイル自体が変わっても問題ないか 色の印象ではなく色の意味で命名する メインテキスト サブテキスト ダークグレー ライトグレー

スタイルルールの整理・再定義 デザイナーがユーザに対して意識すべきポイント スタイルルールを変えた時にUIの見え方に問題ないか 情報の強弱が変わらないようにスタイルを調整する

UI仕様の認識を共通化 18

UI仕様の認識を共通化 UI仕様の認識を共通化する理由 UI仕様と実装が違う? UI仕様通りに作ってもらいたい… UI仕様がわかりにくい… 実装上の都合が考慮されていないかも? デザイナー エンジニア UI仕様と実装のずれを防ぐため 19

UI仕様の認識を共通化 UIコンポーネントの粒度をそろえる Atomic Designの考え方を採用 Atoms Molecules Organisms Templates Pages メインテキスト サブテキスト NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW 敷金やツケ 民法どう変わる? 口2635 9/28(月) 7:08 NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW トルコ最大級の地下都市発見 口1510 9/28(月) 6:18 NEW 150年ぶり サボテン新種発見 口76 9/28(月) 7:23 NEW 奇策に選手も驚き 日本代表 口954 9/28(月) 7:11 NEW ママタレ 割れる子供の顔出し 口384 9/28(月) 6:31 NEW 採用していない YAHOO! JAPAN Q キーワードを入力 検索 26/18 100% 千代田区 路線 ショッピング スポーツナビ すべて ヤフオク! PayPay ファイナンス ポイント すべて ニュース クーポン 芸能 スポーツ 話題 敷金やツケ 民法どう変わる? 口2635 9/28(月) 7:08 NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW トルコ最大級の地下都市発見 口1510 9/28(月) 6:18 NEW 150年ぶり サボテン新種発見 口76 9/28(月) 7:23 NEW 奇策に選手も驚き 日本代表 口954 9/28(月) 7:11 NEW ママタレ 割れる子供の顔出し 口384 9/28(月) 6:31 NEW 20

UI仕様の認識を共通化 UIコンポーネントの粒度をそろえる Atomic Designの考え方を採用 Atoms Molecules Organisms Templates Pages メインテキスト サブテキスト NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW 敷金やツケ 民法どう変わる? 口2635 9/28(月) 7:08 NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW トルコ最大級の地下都市発見 口1510 9/28(月) 6:18 NEW 150年ぶり サボテン新種発見 口76 9/28(月) 7:23 NEW 奇策に選手も驚き 日本代表 口954 9/28(月) 7:11 NEW ママタレ 割れる子供の顔出し 口384 9/28(月) 6:31 NEW 採用していない YAHOO! JAPAN Q キーワードを入力 検索 26/18 100% 千代田区 路線 ショッピング スポーツナビ すべて ヤフオク! PayPay ファイナンス ポイント すべて ニュース クーポン 芸能 スポーツ 話題 敷金やツケ 民法どう変わる? 口2635 9/28(月) 7:08 NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW トルコ最大級の地下都市発見 口1510 9/28(月) 6:18 NEW 150年ぶり サボテン新種発見 口76 9/28(月) 7:23 NEW 奇策に選手も驚き 日本代表 口954 9/28(月) 7:11 NEW ママタレ 割れる子供の顔出し 口384 9/28(月) 6:31 NEW AtomsとMoleculesを まとめて"Parts"と定義 "Modules"と 呼んでいる 21

UI仕様の認識を共通化 わかりやすいデザインファイルの作成 Sketchファイル設計をUIコンポーネントルールに合わせる Sketch Library Parts メインテキスト サブテキスト NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW スタイルルール Sketchファイル (Sketch Library) Modules 敷金やツケ 民法どう変わる? 口2635 9/28(月) 7:08 NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW トルコ最大級の地下都市発見 口1510 9/28(月) 6:18 NEW 150年ぶり サボテン新種発見 口76 9/28(月) 7:23 NEW 奇策に選手も驚き 日本代表 口954 9/28(月) 7:11 NEW ママタレ 割れる子供の顔出し 口384 9/28(月) 6:31 NEW Sketchファイル Pages YAHOO! JAPAN Q キーワードを入力 検索 敷金やツケ 民法どう変わる? 口2635 9/28(月) 7:08 NEW 野良猫に餌やり禁止 賛否続々 口172 9/28(月) 6:55 NEW トルコ最大級の地下都市発見 口1510 9/28(月) 6:18 NEW 150年ぶり サボテン新種発見 口76 9/28(月) 7:23 NEW 奇策に選手も驚き 日本代表 口954 9/28(月) 7:11 NEW ママタレ 割れる子供の顔出し 口384 9/28(月) 6:31 NEW 22

UI仕様の認識を共通化 UI仕様の認識がそろう UI仕様の共通認識が揃った！！ 実装を考慮した仕様書になった！！ UI仕様と実装の差分がなくなった！！ デザイナー エンジニア 実装上の変更やUI仕様の変更をスムーズに反映できる 23

UI仕様の認識を共通化 UIの統一 同じ用途なのに見た目が違うUIが解消される 今日の試合の見どころは? スマートログインでもっとお得に 地域設定 現在設定されている地域 未設定 現在地で設定 北海道・東北 関東 甲信越・北陸 東海 閉じる Yahoo! JAPAN アプリ アプリで開く QR・バーコードリーダー 毎日スロットくじ Yahoo! JAPAN ID ログイン ID新規取得 生体認証ログイン設定 個人設定 天気・災害情報 未設定 ユーザビリティの向上・開発コストの減少 24

UI仕様の認識を共通化 デザイナーが他のデザイナーに対して意識すべきポイント 再利用できるUIになっているか 最適化されすぎたUIにならないようにする デザインファイル作成のルールはわかりやすいか ルールが複雑だと守られない可能性が高い

UI仕様の認識を共通化 デザイナーがエンジニアに対して意識すべきポイント 実装上の考慮がもれていないか コンポーネントの命名や共通パーツの使い方を確認する 一目でわかるデザインファイルか デザインファイルのPreviewでエンジニアからの見え方を確認する

UI仕様の認識を共通化 デザイナーがユーザに対して意識すべきポイント UIコンポーネントルールを反映したUIに違和感を持たないか こまめに実機でユーザ体験の確認する

まとめ 28

まとめ まとめ スマホWeb版トップページのデザインシステム導入の過程 ・スタイルルールの整理・再定義 ・UI仕様の認識を共通化 デザイナー・エンジニア・ユーザの三者の立場で考えると 今までよりプロダクトの価値提供が早くなる Yahoo! JAPAN Tech Blog 「長年のデザイン課題を解決！スマホWeb版トップページ デザインシステム導入」

21 Yahoo! JAPAN Tech Conference 2021