YJTC18 B-7 Yahoo! JAPANアプリの作り方

161 Views

January 29, 18

スライド概要

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

profile-image

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

シェア

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

01 Yahoo! JAPANアプリについて

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.

Copyright 2018 Yahoo Japan Corporation. All Rights Reserved.