Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Sketchハンズオン超簡単4つのキーで覚えるはじめ方
Search
井上辰徳
March 27, 2017
6.6k
6
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Sketchハンズオン超簡単4つのキーで覚えるはじめ方
Sketchは4つのキーを覚えればUIが作れます。
井上辰徳
March 27, 2017
More Decks by 井上辰徳
See All by 井上辰徳
そのスキル本当に必要?デザイナーが伸び悩まないためにはじめたこと
inoue_tatsunori
36
21k
デザイナーが30年成長し続けるために知っておくべき罠
inoue_tatsunori
62
67k
キャリアリフレクションのすすめ
inoue_tatsunori
10
2.3k
デザイン・マネジメント -経営のためのデザイン-
inoue_tatsunori
7
1.2k
クリエイターのマネジメントとは何か?組織と個人を強くする仕組みづくり
inoue_tatsunori
16
14k
デザイナーが伸び悩まないためのスキル27分類
inoue_tatsunori
31
130k
リードデザイナーってどんな人か考えてみた
inoue_tatsunori
12
12k
Featured
See All Featured
HDC tutorial
michielstock
2
960
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
310
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
540
Building Applications with DynamoDB
mza
96
7.2k
Building Adaptive Systems
keathley
44
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
630
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
600
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
370
Rails Girls Zürich Keynote
gr2m
96
14k
Abbi's Birthday
coloredviolet
4
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
Transcript
Sketch Challenge
4ͭͷΩʔͰ͡ΊΔ ΠϯλʔϑΣΠεͷઆ໌ 1 2 3 4 5 6 6 *Λ࡞ͬͯΈΔ
ϚεΫͱάϧʔϓ ॻ͖ग़͠ γϯϘϧͷ֓೦ 7 ͦͷଞ
ΠϯλʔϑΣΠεͷઆ໌ 1
ΞʔτϘʔυ ΦϒδΣΫτ Πϯαʔτ ϨΠϠʔ ϖʔδ ΠϯεϖΫλʔ ϨΠϠʔ ϖʔδ ΠϯεϖΫλʔ
WHERE WHERE WHAT
ʮ ԿΛ࡞Δ͔ ʯ جຊతʹΠϯαʔτʹೖ͍ͬͯΔ
σβΠφʔ ΠϯαʔτΛ։͖·ͤΜ
4ͭͷΩʔͰ͡ΊΔ 2
͜ͷ 4 ͭ ͷγϣʔτΧοτΩʔͰ 6 * ࡞ΕΔ
σόΠεͷը໘Λ࡞Δͱࢥ͍ͬͯͩ͘͞ A r t b o a r d
ӈͷΠϯεϖΫλʔ͕มΘΓ·͢ υϥοάͰϦαΠζ
3FUJOBͷొͰQJYFMͱσόΠεαΠζͷ͕ࠩ J04ϙΠϯτΛݟΔ J1IPOFॳظ ʷ ʷ
ʷ ʷ ʷ 3FUJOB σόΠε ʷ ʷ ʷ ʷ ʷ J1IPOF1MVT Ҏ߱ 3FUJOBొ J1IPOF J1IPOF( J1IPOF(4 J1IPOF J1IPOF4 J1IPOF J1IPOF4& J1IPOF J1IPOFT J1IPOF J1IPOF1MVT J1IPOFT1MVT J1IPOF1MVT ϙΠϯτ
࢛֯ܗͷΦϒδΣΫ τΛ࡞Δ R e c t a n g l
e
ӈͷΠϯεϖΫλʔʹใ͕ೖΓ·͢
ԁܗͷΦϒδΣΫ τΛ࡞Δ O v a l
ςΩετΛೖྗ͢Δ T e x t
ςΩετ༻ͷΠϯεϖΫλʔʹมΘΓ·͢
ΦϒδΣΫ τҐஔ ΦϒδΣΫ ταΠζ ΦϒδΣΫ τͷಁ໌ ໘ͷ৭ ઢͷ৭ γϟυ ଆγϟυ
ϒϥʔޮՌ ͖ స ςΩετ༻ͷΠϯεϖΫλʔʹมΘΓ·͢ ςΩετϘοΫε ϑΥϯτ ৭ɾαΠζ ἧ͑ํ ϘοΫεͷϑ Ο ο τPS ݻఆ จࣈؒͱߦؒͷௐ
ϘλϯΛ࡞ͬͯΈ·͠ΐ͏ ʂ 335ʷ60ͷ࢛͍֯Ϙλϯ4QYͷؙ֯ ৭#4a8a46 Өx:0ɺy:2ɺBlur:0ɺSpread:0 Өͷ৭#3b7635ɺ ෆಁ໌ ʮΞϓϦΛμϯϩʔυʯ ͷϥϕϧ͕ηϯλʔʹೖ͍ͬͯΔ ϥϕϧͷαΠζ16QYɺ
৭#FFFFFF ϑΥϯτώϥΪϊ֯ΰ86 Ϙλϯͷஔॴ্͔Β200px
͜ΜͳϘλϯʹͳΓ·͢
6 * Λ࡞ͬͯΈΔ 3
ຊͷڭࡐ TLFUDI@DIBMMFOHFTLFUDI
ΩʔΛҙࣝͯ͠࡞Γ·͠ΐ͏ʂ ϚʔδϯΛҙࣝͯ͠ ϨΠΞτ͢Δͷ͜ͱ͕ϙΠϯτ ʂ ΦϒδΣΫτΛબͯ͠BMU Λԡ͢ͱϚʔδϯ͕දࣔ͞Ε·͢ alt
ϚεΫͱάϧʔϓ 4
ϨΠϠʔΛཧ͠·͠ΐ͏ ʂ 㵰 G
֊ ֊
ϚεΫΛͬͯΈ·͠ΐ͏ ʂ 㵰 M DPOUSPM
ࣸਅΛૠೖͯ͠ϚεΫΛ͔͚Δ 'JOEFS͔Βυϥοάͯ͠ૠೖ ͭͷϨΠϠʔΛબ͠ ͯ ͍ͭͰʹάϧʔϓʹ͢Δ 㵰 M DPOUSPM
ॻ͖ग़͠ 5
ॻ͖ग़͠ͷഒ ϑΥʔϚο τબ ΞʔτϘʔυͱύʔπʹॻ͖ग़͠ͷઃఆΛ͢Δ ॻ͖ग़͠
υϥοά ԿͳΒυϥοάͰ͍͚Δ υϥοά
·ͱΊͯॻ͖ग़͢ 㵰 E TIJGU
νΣοΫΛೖΕΔͱ·ͱΊͯॻ͖ग़ͤΔ
෦తʹॻ͖ग़͢ S l i c e S
γϯϘϧͷ֓೦ 6
γϯϘϧΛ࡞Δ ϨΠϠʔΛબ͠ ͯ $SFBUF4ZNCPMΛԡ͢ γϯϘϧϨΠϠʔ͕Ͱ͖Δ γϯϘϧʹͨ͠ύʔπ͕ཷ·Δ
γϯϘϧΛ࡞ΔͱͲ͏ͳΔʁ ύʔπΛ࠶ར༻͠ ͯɺ มߋҰׅͰߦ͑·͢ Ϙλϯ Ϙλϯ Ϙλϯ Ϙλϯ
ΠϯεϖΫλʔ͔Βݸผʹมߋ ৭ɺࣸਅͷใݸผʹ࣋ͭ͜ͱ͕Ͱ͖·͢ ϩάΠϯ ߪೖ Ϙλϯ " " " " "
# $ % " # $ %
ཧͷγϯϘϧͷΈํ NAME NAME NAME 定義 色、アイコン、フォント シンボル スタイル シンボルを含む シンボル
パーツ モジュール
ͦͷଞ 7
Φʔτηʔϒʹҙ ͍࣌ؒͬͯΔͱΩϟογϡ͕ཷ·ͬͯ1$ͷ༰ྔΛѹഭ͠·͢
Ϙλϯ " Ϙλϯ " Ϙλϯ # Ϙλϯ " ଞͷϑΝΠϧ͔ΒγϯϘϧͬͯ͘Δͱ૿͑ͯհ Ϙλϯ
" γϯϙϧ ݩ͔Β͋Δ ૿͑Δ
γϯϘϧͷωʔϛϯάنଇॏཁ button Primary େΧςΰϦʔ தΧςΰϦʔ
ٙɾ࣭ίʔφʔ