Yahoo! JAPAN Tech Conference 2018 B-7 セッションのスライドです。

1. Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
Yahoo! JAPANアプリの
つくりかた
青柳麻紀
デザインシステムを活用したUIデザイン

2. 自己紹介
青柳 麻紀
2008年度入社
体験設計/UIデザイン/イラスト
第4代ビジュアル設計黒帯

3. はじめに
「Yahoo! JAPANアプリのつくりか
た」はひとことで言うと「アプリの
利用体験を向上させるためにデザイ
ンシステムを活用しているんです
よ」というお話です

4. 今日お話すること
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用
0
10
2
0
3
Yahoo! JAPANアプリについて
まとめ

5. Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
1
Yahoo! JAPANアプリについて

6. Yahoo! JAPANアプリについて01

7. Yahoo! JAPANアプリについて01
iOS Android

8. ホーム サービス お知らせ その他
Yahoo! JAPANアプリについて01

9. 検索 ニュース 災害情報
Yahoo! JAPANアプリについて01

10. ヤフー提供の様々なサービスをご利用いただけます
Yahoo! JAPANアプリについて01

11. Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用

12. Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用

13. 主要機能はNative実装
Yahoo! JAPANアプリのつくりかた02

14. Webサービスはアプリ内ブラウザで表示
Yahoo! JAPANアプリのつくりかた02

15. 100種類以上
Yahoo! JAPANアプリのつくりかた02

16. アプリの特徴
・ブラウジング機能を搭載
・100以上のWebサービスを提供
Yahoo! JAPANアプリのつくりかた02

17. アプリ内に様々なUIが混在
Yahoo! JAPANアプリのつくりかた02

18. アプリ内ブラウザでのWebサービスのUIが
アプリと揃わず体験が分断されてしまう
Yahoo! JAPANアプリのつくりかた02
課題

19. Yahoo! JAPANアプリのつくりかた02
アプリのUIに揃える？

20. アプリ内のブラウザ以外にも
あらゆる環境での利用が想定される
Yahoo! JAPANアプリのつくりかた02

21. Yahoo! JAPANアプリのつくりかた
サービスのジャンルに最適化された
トーン＆マナーで設計されている
ナビゲーション コマース スポーツ

22. Yahoo! JAPANアプリのつくりかた02
アプリに揃えることは得策ではない

23. Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用

24. Yahoo! JAPANアプリのつくりかた
アプリ内ブラウザでの表示を最適化
どんなことをやったか

25. Yahoo! JAPANアプリでのサービス利用時は
アプリの体験に最適化されたUIを提供
Yahoo! JAPANアプリのつくりかた02

26. Yahoo! JAPANアプリのつくりかた02

27. Yahoo! JAPANアプリのつくりかた02

28. Yahoo! JAPANアプリのつくりかた02

29. アプリの体験に最適化されたUIデザイン
Yahoo! JAPANアプリのつくりかた02

30. 利用体験が分断されず、機能利用に集中できる
Yahoo! JAPANアプリのつくりかた02

31. Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用

32. アプリ内ブラウザでの表示を最適化
解決策こんなことをやった
Yahoo! JAPANアプリのつくりかた02

33. アプリ内ブラウザでの表示を最適化
アプリとwebサービスの
UI操作体験を揃える
＝
Yahoo! JAPANアプリのつくりかた02

34. ・トーン＆マナーの統一
・操作感の統一
UI操作体験を揃える
Yahoo! JAPANアプリのつくりかた02

35. デザインシステムの活用
Yahoo! JAPANアプリのつくりかた02

36. デザインの考え方を上位概念から
体系化し整理
Yahoo! JAPANアプリのつくりかた02
デザインシステム
デザイン原則・VI・スタイルガイド・コンポーネントライブラリなど

37. Yahoo! JAPAN デザイン原則
スタイルガイド
コンポーネントライブラリ
Yahoo! JAPAN Visual Identity
Yahoo! JAPANアプリのつくりかた02

38. Yahoo! JAPAN デザイン原則
Yahoo! JAPANアプリのつくりかた02
デザインにおける「ヤフーらしさ」を明文化したもの

39. Yahoo! JAPAN Visual Identity
Yahoo! JAPANアプリのつくりかた02
より具体的な視覚的な面での「ヤフーらしさ」を明文化したもの

40. スタイルガイド
Yahoo! JAPANアプリのつくりかた02
設計したUIスタイルを明文化したもの

41. カラーパレット
スタイルガイド
Yahoo! JAPANアプリのつくりかた02
UIデザインに用いる
配色のルール

42. アイコンスタイル
スタイルガイド
Yahoo! JAPANアプリのつくりかた02
モチーフのアングルや角
丸のサイズなどのルール

43. イラストレーション
スタイルガイド
Yahoo! JAPANアプリのつくりかた02
イラストのスタイルや
使い方のルール

44. コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
スタイルガイドを元に作られたコンポーネントを集約・配布するもの

45. Sketchファイル
コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
様々なコンポーネントを
Sketchファイルで配布

46. HTML/CSS
コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
コンポーネント単位で
ソースコードを配布

47. Webフォント
コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
汎用的なアイコンを
Webフォントとして配布

48. これらを元にアプリがつくられている
Yahoo! JAPANアプリのつくりかた02

49. Yahoo! JAPANアプリのつくりかた02
WebサービスのUI最適化にも活用

50. Yahoo! JAPANアプリのつくりかた02
おまけ

51. Yahoo! JAPANアプリのつくりかた02
おまけ

52. Navigation barパターンを出し分け
おまけ
Yahoo! JAPANアプリのつくりかた02

53. Nativeの機能とWebサービスの行き来を
シームレスに
おまけ
Yahoo! JAPANアプリのつくりかた02

54. Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
3
まとめ

55. Yahoo! JAPANアプリのつくりかた
まとめ03

56. デザインシステムを活用
まとめ03
Yahoo! JAPAN デザイン原則
スタイルガイド
コンポーネントライブラリ
Yahoo! JAPAN Visual Identity

57. アプリ内のUIデザインに一貫性を持たせて
シームレスな体験を提供
まとめ03

58. ・デザインの一貫性を担保「らしさ」の醸成
・ユーザーの学習コストの削減
・車輪の再発明の防止
デザインシステム活用の重要性
まとめ03

59. 車輪の再発明の防止
デザイナーの役割は多岐にわたる
UIビジュアルに迷う時間を削減し、
サービスの成長やブランディング向上施策の検討、
メンバーと盃を交わし親交を深める時間に
あてたほうがよい
まとめ03
デザインシステム活用の重要性

60. おわりに
「Yahoo! JAPANアプリのつくりか
た」はひとことで言うと「アプリの
利用体験を向上させるためにデザイ
ンシステムを活用しているんです
よ」というお話でした

61. Copyright 2018 Yahoo Japan Corporation. All Rights Reserved.