全社デザインシステムとサービスの付き合い方

466 Views

April 24, 18

#デザインシステム #Riff #Yahoo #導入事例 #UX

スライド概要

2018年4月20日に行われた『Bonfire Design #3』のスライドです。
Yahoo!ニュースで全社デザインシステムを導入した時の、現場の課題や気づきについて発表しました。
ニュースアプリ独自で導入予定のデザインシステムについては、またいつかどこかでお話しできればと思ってます。

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 160.7K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 85.8K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 72.7K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 57.6K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 34.8K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 28.9K
各ページのテキスト
1.

Design #3 2018.4.20 [FRY] @LODGE 全社デザインシステムとサービスの付き合い方 ヤフー株式会社 鹿山玲子 Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

2.

鹿山玲子 ヤフー株式会社 / Yahoo!ニュース デザイナー 写真：XXX Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

3.

ヤフーって、知ってる？ Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

4.

おさらい Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

5.

Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

6.

Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

7.

Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

8.

Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

9.

Riff Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

10.

Riff 既に出来上がっているサービスに 適用させることって出来るの？ Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

11.

導入にあたってやったこと Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

12.

2016.6月 ・対応洗い出し ・難しそうなところの方針検討 ・各プロジェクトで粛々と対応 (7人くらい) 2016.9月 ・Riffへの提案などまとめ ・だいたい作業完了 2017.1月 ・待ちになってた部分など残タスク片付け 現在 ・運用中 Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

13.

2016.6月 ・対応洗い出し ・難しそうなところの方針検討 ・各プロジェクトで粛々と対応 (7人くらい) 2016.9月 対応にかけた期間 ・Riffへの提案などまとめ ・だいたい作業完了 5ヶ月 約 2017.1月 ・待ちになってた部分など残タスク片付け 現在 ・運用中 Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

14.

検索窓 フォーム セレクトボックス ページャー アイコン Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

15.

Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

16.

Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

17.

Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

18.

ふりかえり Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

19.

現場目線でよかったこと 1. 汎用的な素材をゼロから作らなくて良くなった 2. 新規ツールを作るときに役立った Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

20.

対応するための工数、対応後の運用・・ 決して作業は楽にはならない Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

21.

運用が・・ 1. HTMLも配布されているけど、クラス名ごと変わってしまうと影響 が大きく、導入できない・・ 2. アイコンをウェブフォントで読み込んでいたら、いつの間にか名前 が変わっていて読み込めなくなったり・・ Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

22.

サービス目線でよかったこと 1. トップページと見た目の統一感ができた 2. ユーザーにとってわかりやすく使いやすい状態に近づいた Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

23.

感想 ・既存のサービスに適用するのは、一応できる。 ・大変だけど、やったほうがいいのは明らかなので協力して出来た ・デザインシステムがある状態からだと、新規の案件がはかどる！ Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

24.

感想 ・既存のサービスに適用するのは、一応できる。 ・大変だけど、やったほうがいいのは明らかなので協力して出来た ・デザインシステムがある状態からだと、新規の案件がはかどる！ Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

25.

生まれたもの Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

26.

デザインシステム作ってみた Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

27.

Coming soon… Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.