Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
出来ると嬉しいWebデザイナーのコーディング
Search
Tetsuhiro Sato
July 10, 2013
Design
0
190
出来ると嬉しいWebデザイナーのコーディング
AWDD#4 (
http://atnd.org/event/awdd04
) で発表に使用したスライドです。
Tetsuhiro Sato
July 10, 2013
Tweet
Share
More Decks by Tetsuhiro Sato
See All by Tetsuhiro Sato
oremega
oremega
1
1.1k
初心者向けざっくりHTML/CSSコーディングハンズオン資料
oremega
2
2.4k
デザイナー向けコーディング講座
oremega
4
1.8k
Other Decks in Design
See All in Design
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.6k
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Minuto de Aventura
olgastoryboard
0
170
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
130
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
370
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
280
ZOZO CDO Office Design
zozodevelopers
PRO
1
350
root COMPANY DECK / We are hiring!
root_recruit
1
14k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
250
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.8k
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
280
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
Featured
See All Featured
Navigating Team Friction
lara
183
14k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
BBQ
matthewcrist
85
9.3k
Designing for Performance
lara
604
68k
Music & Morning Musume
bryan
46
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Teambox: Starting and Learning
jrom
132
8.7k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Transcript
ग़དྷΔͱخ͍͠ 8FCσβΠφʔͷίʔσΟϯά AWDD #4 ࠤ౻༟ AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10
137݄11༵
ࣗݾհ AWDD #4 ΞϥΠυΞʔΩςΫπגࣜձࣾ ࠤ౻༟5FUTVIJSP4BUP େֶଔۀޙʹ੍࡞ձࣾΛࣾܦݧ͠ɺ ݱࡏɺΞϥΠυΞʔΩςΫπגࣜձࣾͰ 8FCσβΠφʔͱͯ͠ΞϓϦɺαʔϏεʹ ܞΘ͍ͬͯ·͢ɻ झຯணɾςχε
!PSFNFHB AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 137݄11༵
͜ͷηογϣϯͷྲྀΕ AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ ίʔσΟϯάͷϝϦοτͱεΩϧηοτ
ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ ͜ͷεϥΠυޙγΣΞ͠·͢ɻ 137݄11༵
σβΠφʔͱͯ͠ίʔσΟϯά Λ֮͑ͨྲྀΕ AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 1 AWDD #4
1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 20 100
over 3 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 20 100 over 3
AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 )5.-ϝʔϧͷ੍࡞Ͱ UBCMFίʔσΟϯάΛ֮͑ͨ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 UBCMFίʔσΟϯά <table border=4 width=250 align=center>
<tr bgcolor="#cccccc"> <th><br></th> <th>ྻ-A</th> <th>ྻ-B</th> <th>ྻ-C</th> </tr> <tr align=center> <td>ߦ-1</td> <td>A1</td> <td>B1</td> <td rowspan=2>C1-C2</td> </tr> <tr align=center> <td>ߦ-2</td> <td>A2</td> <td>B2</td> </tr> <tr align=center> <td>ߦ-3</td> <td>A3</td> <td colspan=2>B3-C3</td> </tr> </table> ྻʔA ྻʔB ྻʔC ߦ-1 A1 B1 C1-C2 ߦ-2 A2 B2 C1-C2 ߦ-3 A3 B3-C3 B3-C3 AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ͜ͷϧʔϓΛ܁Γฦ͢͜ͱͰ ͷαΠΫϧ͕Ͱ͖Δɻ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ͜ͷࠒʹͳΔͱ9)5.- $44Ͱ ίʔσΟϯάΛ͢ΔΑ͏ʹͳΔ AWDD #4
1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 9)5.-ɿจॻߏ $44ɿ০ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 Ұ௨Γͷ͜ͱ ग़དྷΔΑ͏ʹͳ͖ͬͯͨɻ ͔͠͠ AWDD #4
1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ ͕ࣗͲΕ͘Β͍Ͱ͖Δͷ͔ Α͔͘Βͳ͍ʁ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ηϛφʔʹߦ͘Α͏ʹͳΔɻ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ࣗ ʮશવग़དྷͯͳ͍͡ΌΜʂʯ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ొஃऀΛ5XJUUFSͰϑΥϩʔͯ͠ɺ ใΛಘΔɻ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ͞ΒʹɺηϛφʔͰΓ߹ͬͨਓͨͪʹ ࣭͢ΔΑ͏ʹͳͬͨɻ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ͜͜·ͰΛ·ͱΊΔͱ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ࣄͱͯ͠ ʮΒͳ͚ΕͳΒͳ͍ঢ়گʯ ͜Ε͕Ұ൪ͷۙಓʂ AWDD #4
1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ʮָ͍͠ʯ ͱࢥ͑Δ͜ͱ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 20 100 over 3
AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ϥϯσΟϯάϖʔδͷ੍࡞Λ ͍ͯ͠·ͨ͠ɻ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 σΟϨΫλʔ͕͍ͳ͍ͷͰɺɺɺ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
Coding AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 Direction Design AWDD #4
1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 Ұ؏੍ͨ͠࡞Λߦ͑ΔͷͰɺ ϫϯετοϓͰࣄ͕ߦ͑ͨɻ AWDD #4 1.σβΠφʔͱͯ͠ίʔσΟϯάΛ֮͑ͨྲྀΕ
137݄11༵
ίʔσΟϯάͷϝϦοτͱ εΩϧηοτ 2 AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4
2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ϝϦοτͬͯͳʹʁ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ίʔσΟϯά͕Θ͔Δ͜ͱͰ ߏతͳσβΠϯ͕ߦ͑Δ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 KTDTTͰදݱ͞ΕΔ ಈ͖ͷ͋ΔσβΠϯ͕ఏҊͰ͖Δɻ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ؙ֯ɺάϥσʔγϣϯɺ ಁաɺυϩοϓγϟυͳͲͷ දݱͷબ͕Ͱ͖Δɻ AWDD #4
2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ AWDD#4 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ٯʹ σϝϦοτʁ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ίʔσΟϯά͕Ͱ͖ΔͷͰɺ γϯϓϧͳߏʹͳΔΑ͏ʹ σβΠϯ͕ͪ͠ɻ ݸਓࠩ͋Γ AWDD
#4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ͔͠͠ ٯʹݴ͑ίʔσΟϯά͕ Θ͔Δ͜ͱͰ AWDD #4
2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ίʔμʔͱ ʮڞ௨ݴޠʯ ͰͤΔɻ AWDD #4
2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ίʔμʔʹίʔσΟϯάͷઆ໌͕ ͪΌΜͱͰ͖Δɻ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ͡Ό͋ɺ εΩϧηοτͬͯͲ͏ͳΔͷʁ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 Design WebDesign Coding Direction Programming
Marketing Planning AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 Design ? ? ͍ۙ ԕ͍
ԕ͍ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 Design Coding UI/UX ͍ۙ ԕ͍
ԕ͍ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ·ʙ ʮίʔσΟϯάͯ͠ΈΑ͏ͥʂʯ AWDD #4 2.ίʔσΟϯάͷϝϦοτͱεΩϧηοτ
137݄11༵
ϞχϓϥͰߦͳ͍ͬͯΔ͜ͱ 3 AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ
137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 20 100 over 3
AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 Ϟχϓϥ'*/% AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ৽نϢʔβʔ͕ҎલΑΓ ഒ ʹͳΓ·ͨ͠ɻ AWDD #4
3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 ϥϯσΟϯάϖʔδͷ੍࡞ AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 3.ϞχϓϥͰ͓͜ͳ͍ͬͯΔ͜ͱ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 ࣄͱͯ͠ ͜Ε͕Ұ൪ͷۙಓʂ ·ʙ
ʮίʔσΟϯάͯ͠ΈΑ͏ͥʂʯ ʮָ͍͠ʯ ͱࢥ͑Δ͜ͱ ʮΒͳ͚ΕͳΒͳ͍ঢ়گʯ 137݄11༵
AWDD #4 ग़དྷΔͱخ͍͠ WebσβΠφʔͷίʔσΟϯά 2013.7.10 AWDD #4 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ 137݄11༵