Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,928 views

Published on

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

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Design #3 Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 全社デザインシステムとサービスの付き合い方 2018.4.20 [FRY] @LODGE ヤフー株式会社 鹿山玲子
  2. 2. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 鹿山玲子 写真:XXX ヤフー株式会社 / Yahoo!ニュース デザイナー
  3. 3. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. ヤフ ーって、知ってる?
  4. 4. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  5. 5. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  6. 6. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  7. 7. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  8. 8. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  9. 9. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. Riff
  10. 10. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. Riff 既に出来上がっているサービスに 適用させることって出来るの?
  11. 11. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 導入にあたってやったこと
  12. 12. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  13. 13. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 2 0 1 6 .6 月 2 0 1 6 .9 月 2 0 1 7 .1 月 現在 ・ 対応洗い出し ・ 難し そう なと こ ろ の方針検討 ・ 各プロジェ ク ト で粛々と 対応 (7 人く ら い) ・ Riffへ の 提案などまと め ・ だいたい作業完了 ・ 待ちになってた部分など残タ スク 片付け ・ 運用中 対応にかけた期間 約5 ヶ 月
  14. 14. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 検索窓 フ ォ ーム セレク ト ボッ ク ス ページャ ー アイ コ ン
  15. 15. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  16. 16. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  17. 17. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  18. 18. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. ふりかえり
  19. 19. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 現場目線でよかったこと 1. 汎用的な素材をゼロから作らなくて良くなった 2. 新規ツールを作るときに役立った
  20. 20. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 対応するための工数、対応後の運用・・ 決して作業は楽にはならない
  21. 21. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 運用が・・ 1. HTMLも配布されているけど、クラス名ごと変わってしまうと影響 が大きく、導入できない・・ 2. アイコンをウェブフォントで読み込んでいたら、いつの間にか名前 が変わっていて読み込めなくなったり・・
  22. 22. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. サービス目線でよかったこと 1. トップページと見た目の統一感ができた 2. ユーザーにとってわかりやすく使いやすい状態に近づいた
  23. 23. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 感想 ・既存のサービスに適用するのは、一応できる。 ・大変だけど、やったほうがいいのは明らかなので協力して出来た ・デザインシステムがある状態からだと、新規の案件がはかどる!
  24. 24. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. 感想 ・既存のサービスに適用するのは、一応できる。 ・大変だけど、やったほうがいいのは明らかなので協力して出来た ・デザインシステムがある状態からだと、新規の案件がはかどる!
  25. 25. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.
  26. 26. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved. デザインシステム作ってみた
  27. 27. Copyright © 2018 Yahoo Japan Corporation. All Rights Reserved.

×