Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
Yahoo! JAPANアプリの
つくりかた
青柳麻紀
デザインシステムを活用したUIデザイン
自己紹介
青柳 麻紀
2008年度入社
体験設計/UIデザイン/イラスト
第4代ビジュアル設計黒帯
はじめに
「Yahoo! JAPANアプリのつくりか
た」はひとことで言うと「アプリの
利用体験を向上させるためにデザイ
ンシステムを活用しているんです
よ」というお話です
今日お話すること
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用
0
10
2
0
3
Yahoo! JAPANアプリについて
まとめ
Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
1
Yahoo! JAPANアプリについて
Yahoo! JAPANアプリについて01
Yahoo! JAPANアプリについて01
iOS Android
ホーム サービス お知らせ その他
Yahoo! JAPANアプリについて01
検索 ニュース 災害情報
Yahoo! JAPANアプリについて01
ヤフー提供の様々なサービスをご利用いただけます
Yahoo! JAPANアプリについて01
Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用
Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用
主要機能はNative実装
Yahoo! JAPANアプリのつくりかた02
Webサービスはアプリ内ブラウザで表示
Yahoo! JAPANアプリのつくりかた02
100種類以上
Yahoo! JAPANアプリのつくりかた02
アプリの特徴
・ブラウジング機能を搭載
・100以上のWebサービスを提供
Yahoo! JAPANアプリのつくりかた02
アプリ内に様々なUIが混在
Yahoo! JAPANアプリのつくりかた02
アプリ内ブラウザでのWebサービスのUIが
アプリと揃わず体験が分断されてしまう
Yahoo! JAPANアプリのつくりかた02
課題
Yahoo! JAPANアプリのつくりかた02
アプリのUIに揃える?
アプリ内のブラウザ以外にも
あらゆる環境での利用が想定される
Yahoo! JAPANアプリのつくりかた02
Yahoo! JAPANアプリのつくりかた
サービスのジャンルに最適化された
トーン&マナーで設計されている
ナビゲーション コマース スポーツ
Yahoo! JAPANアプリのつくりかた02
アプリに揃えることは得策ではない
Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用
Yahoo! JAPANアプリのつくりかた
アプリ内ブラウザでの表示を最適化
どんなことをやったか
Yahoo! JAPANアプリでのサービス利用時は
アプリの体験に最適化されたUIを提供
Yahoo! JAPANアプリのつくりかた02
Yahoo! JAPANアプリのつくりかた02
Yahoo! JAPANアプリのつくりかた02
Yahoo! JAPANアプリのつくりかた02
アプリの体験に最適化されたUIデザイン
Yahoo! JAPANアプリのつくりかた02
利用体験が分断されず、機能利用に集中できる
Yahoo! JAPANアプリのつくりかた02
Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
2
Yahoo! JAPANアプリのつくりかた
-アプリの特徴とユーザビリティ課題
-解決策
-デザインシステムの活用
アプリ内ブラウザでの表示を最適化
解決策こんなことをやった
Yahoo! JAPANアプリのつくりかた02
アプリ内ブラウザでの表示を最適化
アプリとwebサービスの
UI操作体験を揃える
=
Yahoo! JAPANアプリのつくりかた02
・トーン&マナーの統一
・操作感の統一
UI操作体験を揃える
Yahoo! JAPANアプリのつくりかた02
デザインシステムの活用
Yahoo! JAPANアプリのつくりかた02
デザインの考え方を上位概念から
体系化し整理
Yahoo! JAPANアプリのつくりかた02
デザインシステム
デザイン原則・VI・スタイルガイド・コンポーネントライブラリなど
Yahoo! JAPAN デザイン原則
スタイルガイド
コンポーネントライブラリ
Yahoo! JAPAN Visual Identity
Yahoo! JAPANアプリのつくりかた02
Yahoo! JAPAN デザイン原則
Yahoo! JAPANアプリのつくりかた02
デザインにおける「ヤフーらしさ」を明文化したもの
Yahoo! JAPAN Visual Identity
Yahoo! JAPANアプリのつくりかた02
より具体的な視覚的な面での「ヤフーらしさ」を明文化したもの
スタイルガイド
Yahoo! JAPANアプリのつくりかた02
設計したUIスタイルを明文化したもの
カラーパレット
スタイルガイド
Yahoo! JAPANアプリのつくりかた02
UIデザインに用いる
配色のルール
アイコンスタイル
スタイルガイド
Yahoo! JAPANアプリのつくりかた02
モチーフのアングルや角
丸のサイズなどのルール
イラストレーション
スタイルガイド
Yahoo! JAPANアプリのつくりかた02
イラストのスタイルや
使い方のルール
コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
スタイルガイドを元に作られたコンポーネントを集約・配布するもの
Sketchファイル
コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
様々なコンポーネントを
Sketchファイルで配布
HTML/CSS
コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
コンポーネント単位で
ソースコードを配布
Webフォント
コンポーネントライブラリ
Yahoo! JAPANアプリのつくりかた02
汎用的なアイコンを
Webフォントとして配布
これらを元にアプリがつくられている
Yahoo! JAPANアプリのつくりかた02
Yahoo! JAPANアプリのつくりかた02
WebサービスのUI最適化にも活用
Yahoo! JAPANアプリのつくりかた02
おまけ
Yahoo! JAPANアプリのつくりかた02
おまけ
Navigation barパターンを出し分け
おまけ
Yahoo! JAPANアプリのつくりかた02
Nativeの機能とWebサービスの行き来を
シームレスに
おまけ
Yahoo! JAPANアプリのつくりかた02
Copyright 2018 Yahoo Japan Corporation. All Rights
Reserved.
0
3
まとめ
Yahoo! JAPANアプリのつくりかた
まとめ03
デザインシステムを活用
まとめ03
Yahoo! JAPAN デザイン原則
スタイルガイド
コンポーネントライブラリ
Yahoo! JAPAN Visual Identity
アプリ内のUIデザインに一貫性を持たせて
シームレスな体験を提供
まとめ03
・デザインの一貫性を担保「らしさ」の醸成
・ユーザーの学習コストの削減
・車輪の再発明の防止
デザインシステム活用の重要性
まとめ03
車輪の再発明の防止
デザイナーの役割は多岐にわたる
UIビジュアルに迷う時間を削減し、
サービスの成長やブランディング向上施策の検討、
メンバーと盃を交わし親交を深める時間に
あてたほうがよい
まとめ03
デザインシステム活用の重要性
おわりに
「Yahoo! JAPANアプリのつくりか
た」はひとことで言うと「アプリの
利用体験を向上させるためにデザイ
ンシステムを活用しているんです
よ」というお話でした
Copyright 2018 Yahoo Japan Corporation. All Rights Reserved.

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