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
850
グラフィックデザイナーさん向け Webについて学習するときに押さえておくべき点
グラフィックデザイン専門の制作会社さんにて、今後Webの仕事を広げていく上で知っておくべき”さわり”程度の内容をレクチャーするためのスライド
Koji Kuno
July 25, 2017
Tweet
Share
More Decks by Koji Kuno
See All by Koji Kuno
unitoneが楽しくなるまでの道のり
oleindesign
0
82
WordPress 6.5 の新機能紹介
oleindesign
0
110
How to deal with WordPress themes in the future
oleindesign
0
1.6k
WordPress(再)入門 - 運用・学習編
oleindesign
0
190
WordPress(再)入門 - カスタマイズ編
oleindesign
0
210
WordPress(再)入門 - コンテンツ作成方法編
oleindesign
0
190
WordPress(再)入門 - テーマ・プラグイン編 / introduction-to-wordpress-again-theme-plugin
oleindesign
0
220
WordPress(再)入門 - 基本設定編 / introduction-to-wordpress-again-basic-settings
oleindesign
0
410
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
940
Other Decks in Design
See All in Design
portfolio_YumiYasuda
yum0418
0
290
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
640
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.3k
Saudade typeface
tiagoporto
0
330
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
760
私とデザインの10年
iflection
0
160
PF_濵村ひろみ_202503
maru_design78
0
180
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
AI時代に淘汰されないデザインのしごと
akinen
1
140
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GitHub's CSS Performance
jonrohan
1031
460k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Docker and Python
trallard
44
3.5k
How GitHub (no longer) Works
holman
314
140k
Statistics for Hackers
jakevdp
799
220k
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 άϥϑΟοΫྗʴίʔσΟϯάྗʹॏๅ͞ΕΔ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ