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
200
出来ると嬉しい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.6k
デザイナー向けコーディング講座
oremega
4
1.8k
Other Decks in Design
See All in Design
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
370
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
560
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
430
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
360
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
佐藤千晶|ポートフォリオ
chimi_chia
0
180
portfolio.pdf
onof003
0
190
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.9k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
320
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Site-Speed That Sticks
csswizardry
11
900
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Building an army of robots
kneath
306
46k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
How to Think Like a Performance Engineer
csswizardry
27
2k
The Cult of Friendly URLs
andyhume
79
6.6k
Side Projects
sachag
455
43k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
For a Future-Friendly Web
brad_frost
180
9.9k
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༵