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

279 Views

April 24, 18

スライド概要

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

profile-image

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

シェア

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

関連スライド

各ページのテキスト
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.