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
Koji Kuno
July 25, 2017
Design
1
800
グラフィックデザイナーさん向け Webについて学習するときに押さえておくべき点
グラフィックデザイン専門の制作会社さんにて、今後Webの仕事を広げていく上で知っておくべき”さわり”程度の内容をレクチャーするためのスライド
Koji Kuno
July 25, 2017
Tweet
Share
More Decks by Koji Kuno
See All by Koji Kuno
WordPress 6.5 の新機能紹介
oleindesign
0
17
How to deal with WordPress themes in the future
oleindesign
0
1.3k
WordPress(再)入門 - 運用・学習編
oleindesign
0
84
WordPress(再)入門 - カスタマイズ編
oleindesign
0
130
WordPress(再)入門 - コンテンツ作成方法編
oleindesign
0
99
WordPress(再)入門 - テーマ・プラグイン編 / introduction-to-wordpress-again-theme-plugin
oleindesign
0
120
WordPress(再)入門 - 基本設定編 / introduction-to-wordpress-again-basic-settings
oleindesign
0
250
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
440
超入門サイトエディター / Easiest-introduction-of-Site-Editor
oleindesign
0
200
Other Decks in Design
See All in Design
Portfolio 2023.07.28
helemarudesu
0
570
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
Wishing Star Comic
torije
2
1.1k
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
Web 組版の課題とその解法
yamatoiizuka
0
110
実務のための マイクロ インタラクション入門
shingo2000
0
350
Designing UIs without a UI designer
strongeron
0
110
root Design Partnership Policy
root_recruit
0
3.9k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Code Review Best Practice
trishagee
54
15k
How STYLIGHT went responsive
nonsquared
92
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Infographics Made Easy
chrislema
237
18k
Designing Experiences People Love
moore
136
23k
Faster Mobile Websites
deanohume
297
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Designing for Performance
lara
601
67k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Transcript
8FCʹֶ͍ͭͯश͢Δͱ͖ʹ ԡ͓͖͑ͯ͘͞ άϥϑΟοΫσβΠφʔ͞Μ͚
ࣗݾհ͍ͤͯͩ͘͞͞ʂ 0MFJO%FTJHOද ٱߊ࢘ʢ͘ͷ͜͏͡ʣ ܦྺɿذෞੜ·ΕɻେֶۚɻάϥϑΟο ΫσβΠϯઐֶߍଔۀˠࠂཧళ੍ ࡞෦ʹब৬ˠϩϯυϯʹ̎ཹֶˠҹձ ࣾฤू෦ʹब৬ˠϑϦʔϥϯεͱͯ͠ಠཱɻ 8PSE1SFTTϢʔβʔͷͨΊͷҬίϛϡχςΟɺ 8PSE#FODIذෞͷϞσϨʔλʔͱͯ͠׆ಈ͍ͯ͠·͢ɻ
ΞδΣϯμ ᶃ 8FCͬͯԿʁ ᶄ ΠϯλʔωοτͷΈͱʁ ᶅ άϥϑΟοΫσβΠϯͱ8FCσβΠϯͷҧ͍ͱʁ ᶆ 8FCαΠτ੍࡞ͷྲྀΕͱʁ ᶇ
8FCαΠτΛೲͨ͠ޙʹඞཁͳ͜ͱͱʁ ᶈ ·ͱΊ
8FCͬͯԿʁ
888ͱ w 8PSME8JEF8FCͷུ w ᥨͷ্ʹுΓ८Β͞ΕͨٿنใωοτϫʔΫ
Πϯλʔωοτͱ w ༷ʑͳॴʹ͋ΔҟͳΔίϯϐϡʔλΛͭͳ͗߹Θͤͨ ωοτϫʔΫࣗମͷ͜ͱ w ϗʔϜϖʔδ&$αΠτͷΑ͏ͳ8FCΞϓϦέʔγϣϯ ΛؚΜͩ888&ϝʔϧαʔϏεɺαʔόʔͱΫϥΠΞ ϯτؒͰͷϑΝΠϧసૹͳͲΛར༻Ͱ͖ΔͰ͋Δ
ݱࡏͷΠϯλʔωοτར༻ڥ Πϯλʔωοτ ࣸਅ Իָ ө૾ ςΩετ ύιίϯ ςϨϏ ΧʔφϏ εϚʔτϑΥϯ
ܞଳి ήʔϜػ
ΠϯλʔωοτͷΈͱʁ
αʔόʔͬͯͳʹʁ w Πϯλʔωοτ্ͷσʔλΛஔ͍͓ͯ͘ॴ w ಠࣗͰ༻ҙͨ͠ΓɺϨϯλϧͨ͠Γ͢Δ͜ͱ͕Ͱ͖Δ w Ϣʔβʔ͔Βͷཁٻ͕αʔόʔʹಧ͖ɺඞཁͳใΛૹ Γฦ͢͜ͱʹΑͬͯɺϢʔβʔଆͰΣϒαΠτΛදࣔ ͢Δ͜ͱ͕Ͱ͖Δ
υϝΠϯͱ w Πϯλʔωοτ্ͷॅॴͷΑ͏ͳͷ w ಠࣗʹऔಘͨ͠υϝΠϯΛαʔόʔʹඥ͚ͮΔ͜ͱʹΑͬ ͯɺυϝΠϯೖྗˠαʔόʔʹΞΫηεˠΣϒαΠτ දࣔ͞ΕΔɹͱͳΔ w DPNOFUPSHJOGPCJ[NFͳͲͳͲ
IUUQͱIUUQTͷҧ͍ w IUUQ)ZQFSUFYU5SBOTGFS1SPUPDPMͷུ w IUUQZBIPPDPKQͱZBIPPDPKQʹIUUQͰ௨৴ͯͩ͘͠ ͍͞ɺͱ͍͏໋ྩʹͳΔ w IUUQT)551PWFS44-5-4ͷུ w IUUQͷ௨৴Λ҉߸Խͯ͠ߦ͍·͢Αͱ͍͏ҙຯ
ͳΜͰ࠷ۙIUUQT͕ਪ͞ΕΔͷ͔ w ୈҰʹηΩϡϦςΟڧ͕૿͢ w (PPHMF͕ΣϒαΠτΛධՁ͢Δج४ͷ̍ͭͩͱެද͠ ͔ͨΒʢ)5514FWFSZXIFSFఏএʣ w IUUQTΛར༻͢Δʹূ໌ॻ͕ඞཁ w αʔόʔબͼͷࡍʹߟྀ͢Δඞཁ͕͋Δ
w ࠓޙ৽ઃ͢ΔΣϒαΠτIUUQTͰ࢝Ίͨํ͕ྑ͍
άϥϑΟοΫσβΠϯͱ 8FCσβΠϯͷҧ͍ͱʁ
୯Ґͷҧ͍ w άϥϑΟοΫʢ%51ʣͷ߹جຊ୯ҐϛϦϝʔτϧ w 8FCͷ߹QYʢϐΫηϧʣ
Χϥʔͷҧ͍ w %51$.:, w 8FCσβΠϯ3(# w ҹ̐৭ʹՃ͑ͯಛ৭ͳͲ༻͍Δ͕ݟ͑ํجຊత ʹಉ͡ w ϢʔβʔͷϞχλʔʹઃఆͯ͋͠ΔϓϩϑΝΠϧͰ৭࠼
ڥ͕େ͖͘ҟͳΔ
ମݧͷҧ͍ w ҹࢴͷ࣭ײഩԡ͠Ͱͷ৮ײͳͲΛମݧͰ͖Δ w 8FCΞχϝʔγϣϯϜʔϏʔɺޮՌԻԻָͳͲෳ ͷײ֮ʹ͑ΒΕΔ w ҹ͑ΒΕΔϝοηʔδͷྔ͕ཧతʹ੍ݶ͞Ε Δ w
8FCใྔͷ੍ݶཧతʹͳ͍͕ɺޮՌతʹૌٻ͠ ͳ͍ͱλʔήοτʹڹ͔ͳ͍
ίετόϥϯεͷҧ͍ w ҹޮՌଌఆˠमਖ਼ˠҹˠ w 8FCޮՌଌఆˠमਖ਼ˠޮՌଌఆˠमਖ਼ɾɾɾ w ͦΕͧΕඞཁͳίετʹҧ͍͕͋Δ w εϐʔυײʹҧ͍͕͋Δ w
8FCΫϥΠΞϯτ͕ίετΛΠϝʔδ͍͠ ʢҹʹൺͯʮ؆୯Ͱ͠ΐʁʯͱࢥΘΕ͍ͯΔͱ͜Ζ͕͋ΔͷͰݟੵΓ ༰Λཧղͯ͠Β͑ͳ͍࣌ͪΒ΄Βʣ
λʔήοτͷҧ͍ w ҹͰૂ͑Δλʔήοτͱ8FCͰૂ͑Δλʔήοτ େ͖͘ҧ͏ w ΫϥΠΞϯτͷϏδωεαʔϏεͷ༰छྨʹΑͬ ͔ͯͬ͠Γͱ͍͚Δඞཁ͕͋Δ
8FCαΠτ੍࡞ͷྲྀΕͱʁ
ώΞϦϯά w ΫϥΠΞϯτ͔ΒώΞϦϯάΛߦ͏ w άϥϑΟοΫσβΠϯ੍࡞ͷ༷ΛܾΊΔஈ֊Ͱಉ༷ ͷ͜ͱΛߦ͏ͣ w ղܾ͍ͨ͠Λ໌֬ʹͯ͠ɺํ๏Λߟ͑Δ w ඞͣ͠8FC͕࠷దͳ͑ͱݶΒͳ͍
ཁ݅ఆٛ w 8FC੍࡞ʹඞཁͳཁ݅ఆٛΛߦ͏ w ͜ͷஈ֊ͰܾΊΔ͜ͱΛ͓Ζ͔ͦʹ͢ΔͱɺϓϩδΣΫ τͷޙʹ่Εͯ͘Δ͜ͱ͕ଟ͍
ϫΠϠʔϑϨʔϜ w άϥϑΟοΫσβΠϯͰݴ͏ɺαϜωΠϧ w ͜ͷஈ֊Ͱը໘ߏΛ͔ͬ͠Γͱ٧Ί͓ͯ͘͜ͱ͕ඞཁ w ͜ͷઌͷఔͰߏ෦ͷมߋΛࢪ͢߹ɺ͕૿͑ ͯ࠷ऴతͳίετ͕Ε্͕Δ͜ͱʹͳΔ
ϫΠϠʔϑϨʔϜΛ࡞ΔΞϓϦ "EPCF9% 4LFUDI
σβΠϯ੍࡞ w *MMVTUSBUPS͘͠1IPUPTIPQ͕ओྲྀ w ઌ΄Ͳͷ"EPCF9%4LFUDIͰ݁͢Δ͜ͱͰ͖Δ w ϏδϡΞϧσβΠϯ͚ͩͰͳ͘ɺ͘ϢʔβʔମݧΛσ βΠϯ͢ΔΠϝʔδ͕ඞཁʢϗόʔ֤෦ΞχϝʔγϣϯͳͲͷಈ͖ͷ ࢦࣔඞཁʣ w
ϨΠϠʔ໊Λ͔ͬ͠Γͱ͚ͭͯɺσʔλΛ୭͕ݟͯΘ ͔Γ͘͢࡞ΔบΛ͚ͭΔ
ίʔσΟϯάɾ࣮ w )5.-$44+BWB4DSJQUͰίʔσΟϯά w $.4ʢ$POUFOUT.BOBHFNFOU4ZTUFNʣ Λ͏߹ʹɺͦΕʹͬͨ ఔ͕ൃੜ͢Δ߹͕͋Δ w දతͳ$.4ʹɺ8PSE1SFTT.PWBCMF5ZQFɺ DPODSFUFͳͲ͕͋Δ
w 8PSE1SFTTੈքதͷΣϒαΠτͷҎ্ΛΊΔγΣ ΞɻຊࠃͰ$.4γΣΞҎ্ͱѹతɻ
࣮ػςετ w ࣮ࡍʹར༻͢Δαʔόʔ͘͠ςεταʔόʔʹͯಈ ࡞֬ೝ w ରԠ͢ΔϒϥβσόΠεͰͷ࣮ػ֬ೝ w ݹ͍ϒϥβʹରԠ͢Δʹผίετ͕ඞཁͱߟ͑Δํ ͕ϕλʔ w
༷͕͔ͬ͠Γݻ·͍ͬͯͳ͍ͱςετͳ͊ͳ͊ʹͳͬ ͯ͠·͏
ೲ w ೲܗ༷ࣜʑ w ͲΜͳঢ়ଶͰೲ͔डͷλΠϛϯάͰඞܾͣΊΔ ˠޙ͔Βʮ͋Εͬͯʯ͕૿͑ͯ͘Δͱݟੵ่յ w ΣϒαΠτೲ͔ͯ͠Β͕ελʔτ
8FCαΠτΛೲͨ͠ޙʹ ඞཁͳ͜ͱͱʁ
ΣϒαΠτ੍࡞͕ऴྃͨ͠Β ࣍ΣϒαΠτӡӦͷ։࢝
͜Μͳ͜ͱ͕ඞཁʹͳΔ͔ʁ w 4/4ʢ5XJUUFSGBDFCPPLJOTUBHSBN-*/&ʣͷӡ༻ɾӡ༻ ߦɾӡ༻ΞυόΠε w ΞΫηεղੳʹΑΔ࣍ͷΞΫγϣϯબఆ w ผഔମ͔Βͷ13 w ϦεςΟϯάࠂग़ߘ
w ϥϯσΟϯάϖʔδ੍࡞ w ΦϯυϝσΟΞͷҭɾӡ༻
ΣϒαΠτΛ࡞ͬͨ ʹ ์͓͍ͬͯͯ0,
ٻΊΔ݁ՌΛಘΔͨΊʹ ʑվળΛ͍ͯ͘͠ͷ͕ ΣϒαΠτӡӦ
·ͱΊ
8FC੍࡞ຊʹΓͩ͘͞Μ w σΟϨΫγϣϯʢσΟϨΫλʔͷࣝʹఏҊͰ͖Δ෯ʣ w σβΠϯ੍࡞ ɾ੍࡞εϐʔυඞਢˠίετҙࣝ ɾ6*69ͷֶशকདྷతʹ͔ܽͤͳ͍ ɾݟͨΛ࡞Δ͚ͩͰະདྷͳ͍ˠʑࢼߦࡨޡ w ϑϩϯτΤϯυ
ɾ)5.-$44+BWB4DSJQUͷཧղσΟϨΫλʔɾσβΠφʔ ͱʹඞཁˠσβΠϯͷ࣮ݱํ๏ΛΠϝʔδ͢Δඞཁੑ
w όοΫΤϯυ ɾ8FCαʔϏεΛӡӦ͢Δ߹ʹαʔόʔͳͲͷࣝ ඞཁʹͳͬͯ͘Δ w ӡ༻ ɾΞΫηεղੳ ɾϚʔέςΟϯά ɾ4/4ʹؔ͢Δࣝ ɾϥΠςΟϯά
ɾΫϥΠΞϯτ͕ʑΉٙʹ͑Δྗʢࣝʣ
8FCຐ๏ͷಓ۩Ͱͳ͍ ཧ อक ӡ༻ w ʮਓྗʯΛ͔͚Δ͔ɺʮ͓ۚʯ Λ͔͚Δ͔ w ์͓͍ͬͯͯརӹΛੜΈग़͠ ͯ͘ΕΔຐ๏ͷಓ۩Ͱͳ͍
w ʮ̍ͭͷళฮʯʮҰਓͷࣾһʯ ΛҭͯΔɺͱߟ͑Α͏
ʮάϥϑΟοΫσβΠϯ͕Ͱ͖Δʯ ͱ͍͏ڧΈΛੜ͔͢ w άϥϑΟοΫσβΠϯͱ8FCσβΠϯڞ௨͢Δ෦ ଟ͍͕ߟ͑Δ͜ͱ͕ҧ͏෦͋Δ w ଟ֯తͳࢹΛ͍࣋ͬͯΔͱ͍͏ϝϦοτΛੜ͔͢ w άϥϑΟοΫྗʹΞχϝʔγϣϯΛՃ͑ͨΓετʔϦʔ Λఴ͑Δˠಈը੍࡞ؔ࿈ʹਐग़ՄೳʢαΠωʔδʣ
w άϥϑΟοΫྗʴίʔσΟϯάྗʹॏๅ͞ΕΔ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ