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

264 Views

January 29, 18

#デザインシステム #UIデザイン #Yahoo! JAPANアプリ #ユーザビリティ #アプリ開発

スライド概要

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

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

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

またはPlayer版

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

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 160.6K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 85.6K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 72.7K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 57.5K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 34.8K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 28.9K

各ページのテキスト

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

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

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

01 Yahoo! JAPANアプリについて

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

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

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

10.

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

11.

12.

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.

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.

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.

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.