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
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.7k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
260
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
400
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
860
ポートフォリオ_webデザイナー
nami_webdesigner
0
130
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
190
アクセシビリティに取り組むメリット
magi1125
1
220
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
630
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
400
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
200
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Designing Experiences People Love
moore
142
24k
Automating Front-end Workflow
addyosmani
1370
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A designer walks into a library…
pauljervisheath
207
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Gamification - CAS2011
davidbonilla
81
5.4k
Unsuck your backbone
ammeep
671
58k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
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༵