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
91
WordPress 6.5 の新機能紹介
oleindesign
0
130
How to deal with WordPress themes in the future
oleindesign
0
1.7k
WordPress(再)入門 - 運用・学習編
oleindesign
0
230
WordPress(再)入門 - カスタマイズ編
oleindesign
0
260
WordPress(再)入門 - コンテンツ作成方法編
oleindesign
0
210
WordPress(再)入門 - テーマ・プラグイン編 / introduction-to-wordpress-again-theme-plugin
oleindesign
0
230
WordPress(再)入門 - 基本設定編 / introduction-to-wordpress-again-basic-settings
oleindesign
0
470
WordPress(再)入門 - 基礎知識・環境編
oleindesign
2
1k
Other Decks in Design
See All in Design
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
370
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2.5k
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
620
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
870
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
170
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
0
180
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
1
350
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
270
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
320
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
1.2k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
710
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.4k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
SEO for Brand Visibility & Recognition
aleyda
0
4.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
24
Automating Front-end Workflow
addyosmani
1371
200k
Making Projects Easy
brettharned
120
6.5k
[SF Ruby Conf 2025] Rails X
palkan
0
650
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
2
270
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
150
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 άϥϑΟοΫྗʴίʔσΟϯάྗʹॏๅ͞ΕΔ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ