SlideShare a Scribd company logo
Sketch 3 を使って、コンテンツの魅力を
最大限に活かしたUIを作ろう
DeNA UI/UXデザイナー 増田直生
2013年 12月 DeNA入社
増田直生
エンターテイメント事業本部
UI/UXデザインナー
iOSのアプリや、ウェブサービスなどの
UIデザインに特化したツール
Sketch3はどんなツールか?
コンテンツがより重要になってきているため
Sketch3を使う理由
デザイン全体を俯瞰して確認できる
Point
素材の書き出しが圧倒的に楽に
Point
オブジェクト間の距離にもう困らない
Point
共通のUIは使まわして、編集も一発
Point
エンジニア・コーダーさんにも嬉しい
パーツはもう作らなくてOK!
Point
Bohemian Coding
http://bohemiancoding.com/sketch/
Flinto
https://www.flinto.com/
Sketch Measure
https://github.com/utom/sketch-measure
(プロトタイプツール)
(メジャーツール)
Prott (プロトタイプツール)
https://prottapp.com/
Sketch Demo
https://copy.com/O10CsKlSdPUU
(Sketchソース)

More Related Content

What's hot

Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
 
Pixate導入についてのあれこれ
Pixate導入についてのあれこれPixate導入についてのあれこれ
Pixate導入についてのあれこれ
Kazuyuki Oikawa
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
 
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
 
Kwc uxjam160831
Kwc uxjam160831Kwc uxjam160831
Kwc uxjam160831
Takami Yusuke
 
WEB制作現場のボトムアップ
WEB制作現場のボトムアップWEB制作現場のボトムアップ
WEB制作現場のボトムアップ
Goro Ichikawa
 
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -
Akihiro Mukai
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
 
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
 
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
Meyco U
 
背景を作って苦労してみた ~Amplify Impostors~
背景を作って苦労してみた ~Amplify Impostors~背景を作って苦労してみた ~Amplify Impostors~
背景を作って苦労してみた ~Amplify Impostors~
poko ponmaru
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
 
ライティングについて 考えてみようの巻-公開版-
ライティングについて 考えてみようの巻-公開版-ライティングについて 考えてみようの巻-公開版-
ライティングについて 考えてみようの巻-公開版-
poko ponmaru
 
ボクの開発スタイル
ボクの開発スタイルボクの開発スタイル
ボクの開発スタイル
Yuki Anzai
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェス
rie05
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
 
エンジニアがUXに興味を持った経緯と初期衝動
エンジニアがUXに興味を持った経緯と初期衝動エンジニアがUXに興味を持った経緯と初期衝動
エンジニアがUXに興味を持った経緯と初期衝動
fumicos
 
ATO_2016.7.2_Minami_Suetsugu
ATO_2016.7.2_Minami_SuetsuguATO_2016.7.2_Minami_Suetsugu
ATO_2016.7.2_Minami_Suetsugu
AT-Okinawa
 
デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?
rie05
 
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
Yuxio tech
 

What's hot (20)

Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
Pixate導入についてのあれこれ
Pixate導入についてのあれこれPixate導入についてのあれこれ
Pixate導入についてのあれこれ
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
 
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
 
Kwc uxjam160831
Kwc uxjam160831Kwc uxjam160831
Kwc uxjam160831
 
WEB制作現場のボトムアップ
WEB制作現場のボトムアップWEB制作現場のボトムアップ
WEB制作現場のボトムアップ
 
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
 
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
 
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
 
背景を作って苦労してみた ~Amplify Impostors~
背景を作って苦労してみた ~Amplify Impostors~背景を作って苦労してみた ~Amplify Impostors~
背景を作って苦労してみた ~Amplify Impostors~
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
ライティングについて 考えてみようの巻-公開版-
ライティングについて 考えてみようの巻-公開版-ライティングについて 考えてみようの巻-公開版-
ライティングについて 考えてみようの巻-公開版-
 
ボクの開発スタイル
ボクの開発スタイルボクの開発スタイル
ボクの開発スタイル
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェス
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
 
エンジニアがUXに興味を持った経緯と初期衝動
エンジニアがUXに興味を持った経緯と初期衝動エンジニアがUXに興味を持った経緯と初期衝動
エンジニアがUXに興味を持った経緯と初期衝動
 
ATO_2016.7.2_Minami_Suetsugu
ATO_2016.7.2_Minami_SuetsuguATO_2016.7.2_Minami_Suetsugu
ATO_2016.7.2_Minami_Suetsugu
 
デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?
 
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)