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
Project Design #03
Search
Masateru YOSHIMURA
July 07, 2020
Design
0
1.2k
Project Design #03
Masateru YOSHIMURA
July 07, 2020
Tweet
Share
More Decks by Masateru YOSHIMURA
See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
360
Digital Design 2022-01
mathatelle
0
250
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
130
Multiple pages
mathatelle
0
680
How to design the individual page
mathatelle
1
89
CodePen: Making your portfolio 2021
mathatelle
0
130
single page
mathatelle
0
860
How to optimize images for Better Web Design
mathatelle
0
2.1k
Other Decks in Design
See All in Design
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
Masked shaman-Storyboard 2025
ashley0521
0
160
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
Rayout Pattern 01
one0
0
1.5k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
The Pragmatic Product Professional
lauravandoore
32
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Designing for humans not robots
tammielis
250
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The Cult of Friendly URLs
andyhume
78
6.2k
YesSQL, Process and Tooling at Scale
rocio
171
14k
How STYLIGHT went responsive
nonsquared
98
5.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
ϓϩδΣΫ τ ɾ σβΠϯԋश
ࠓͷतۀͰɺ Έͳ͞Μʹఏग़ͯ͠Βͬͨ ϦαʔνγʔτΛ׆༻͠·͢ɻ
͜Ε·Ͱͷ;Γ͔͑Γ Ϧαʔνγʔτͷڞ༗ ϦαʔνγʔτΛಡΉ ࠓճͷतۀͷྲྀΕ
͜Ε·Ͱͷ;Γ͔͑Γ
ςʔϚɿΦʔϓϯΩϟϯύε
৽ܕίϩφΟϧεײછͷӨڹʹΑΓ ݄ݱࡏɺେֶͰͷΦʔϓϯΩϟϯύε͕ ࣮ࢪͰ͖ͳ͍ঢ়گʹ͋Γ·͢ɻ ߴߍੜอޢऀʹେֶͷ͜ͱΛͬͯΒ͑Δ وॏͳػձ͕ࣦΘΕ͍ͯ·͢ɻ ղܾ͍ͨ͠՝
ͦ͜Ͱɺ ͜Ε·ͰͷΦʔϓϯΩϟϯύεͷΘΓͱͳΔ اըΛཱҊ͍ͯͩ͘͠͞ɻ
ΞΠσΞΛੜΈग़ͨ͢Ίʹɺ ·ͣɺௐΔɻ
w ΞΠσΞͷछΛݟ͚ͭΔͨΊʹɺϦαʔνෆՄܽɻͳͥͳΒɺ w ͙͢ු͔ͿΞΠσΞɺ͢Ͱʹ୭͔ʹΑ࣮ͬͯߦ͞Ε͍ͯΔɻ w ͙͢ු͔ͿΞΠσΞɺ͍͍ͩͨͭ·Βͳ͍ɻ w طଘͷΞΠσΞΛେྔʹΠϯϓοτͯ͠ɺͦΕΒΛࠞͥ߹Θͤ Δ͜ͱͰɺ৽͍͠ΞΠσΞΛੜΈग़͢͜ͱ͕Ͱ͖Δɻ w
େྔʹΠϯϓοτΛ͢ΔͨΊʹɺେྔʹϦαʔνΛ͢Δඞཁ ͕͋ΓɺࠓճͦΕΛνʔϜʢडߨੜશһʣͰߦ͏ɻ ϦαʔνΛ͢Δཧ༝
w ͜Ε·ͰͷΦʔϓϯΩϟϯύεͷ࠵͠ͲͷΑ͏ͳͷ͔ w ͳͥͦͷΑ͏ͳ࠵͠Λ͍ͯͨ͠ͷ͔ w ݱࡏɺࣗͷେֶͲͷΑ͏ʹ͍ͯ͠Δ͔ w ଞͷେֶͲͷΑ͏ʹ͍ͯ͠Δ͔ w ྨࣅͷ՝ʢ࠾༻׆ಈ͕Ͱ͖ͳ͍اۀɺϥΠϒ͕Ͱ͖ͳ͍ϛϡʔδγϟϯͳͲʣͰ
ͲͷΑ͏ʹ͍ͯ͠Δ͔ w ྨࣅͷཁҼʢίϩφΠϧεʣͷӨڹΛड͚͍ͯΔͱ͜Ζ͕ੜΈग़͠ ͨΞΠσΞʹͲͷΑ͏ͳͷ͕͋Δ͔ʢྫ͑ςΠΫΞτʣ Ϧαʔνͷ༰
ͨ͘͞ΜௐͨΒɺͦΕΛ·ͱΊΑ͏ɻ ·ͱΊΔͱɺ୭͔ͱڞ༗Ͱ͖ΔΑ͏ʹͳΔɻ ڞ༗͢Δͱɺ͞ΒʹΞΠσΞͻΖ͕Δɻ ࣍ͷϖʔδͷΑ͏ʹϦαʔνͨ͠ͷΛ ·ͱΊ͍ͯ͜͏ɻ͜ΕΛϨϙʔτͱͯ͠ ఏग़ͯ͠Β͍·͢ɻ
খࢢͷߴߍੜ͕ςΠΫΞτͷใΛ·ͱΊͨ αΠτΛ։ઃ Ҫ৽ฉ݄ ৽ܕίϩφΠϧεͷײછ֦େͰɺҿ৯ళ͕ۤڥʹཱͨ͞ΕΔதɺখࢢ ͷएڱߴ̏ͷଜٶࣚᣦ͞Μʢ̍̓ʣ͕ɺಉࢢͳͲͷ৯ςʔΫΞτ ൢใΛ·ͱΊͨαΠτΛωοτ্ʹ্ཱͪ͛ͨɻ ײછ֦େͰ֎ग़ࣗॗ͕ٻΊΒΕΔதɺҬࢢຽͷखॿ͚ʹͳΔ͜ͱ͕ Ͱ͖ͳ͍͔ͱߟ͍͑ͯͨɻͦΜͳ࣌ʹςʔΫΞτใΛ·ͱΊͨαΠτ ͕͋Δ͜ͱΛΓɺখ൛Λ࡞Ζ͏ͱࢥཱ͍ͬͨɻ ʮϑΣΠεϒοΫʯʹʮ৯ͷ·ͪখςΠΫΞτใʯΛ։ઃɻਫ਼
ళͷหൢചɺίϝͷྉແྉαʔϏεͳͲܭ̍̏݅Λܝࡌ͍ͯ͠Δɻ ͜ͷαΠτΛΓɺٳۀΛऔΓΊͯ࣋ͪؼΓΛ࢝Ίͨҿ৯ళ͋Δͱ͍ ͏ɻαΠτΛ௨ͯ͡ʮΠϯελϯτ৯ͱҧ͏ɺ৯ͷ·ͪখͳΒͰ ͷྉཧ৯ࡐ͕͋Δ͜ͱΛൃ৴͍ͨ͠ʯͱྗڧ͘ޠͬͨɻ ᶃλΠτϧΛ͚ͭΔ ᶄཁ͢ΔʢจࣈҎʣ ᶆҾ༻ݩΛࣔ͢ 8FCαΠτͰ͋Ε63-ɺ ৽ฉࡶࢽͰ͋Εൃߦॻ͘ ᶅࣸਅεΫγϣΛͦ͑Δͱ Θ͔Γ͘͢ͳΔ
ͦͷ༰ʹಠࣗੑ͋Γ·͔͢ʁ ൃݟ۩ମతʹ·ͱΊ·͠ΐ͏ɻ Ҿ༻దʹ͍ࣔͤͯ·͔͢ʁ 8FCͷ߹63-Λهࡌ͍ͯͩ͘͠͞ɻ
ϦαʔνγʔτຕҎ্ w ຕ࠷Ͱຕͱ͍͏͜ͱͰ͢ɻ w දࢴෆཁͰ͢ɻ w ϑΝΠϧܗࣜ1%'Ͱ͢ɻͦͷଞͷ ܗࣜड͚͚·ͤΜɻ
͜Ε·Ͱͷ;Γ͔͑Γ ͓͠·͍
Ϧαʔνγʔτͷڞ༗
ΈΜͳͷϦαʔνγʔτΛμϯϩʔυ .PPEMFͷϦϯΫΛΫϦοΫ͢ΔͱɺҎԼͷը໘͕։͖·͢ɻ " #ͭͷ1%'ʹ·ͱΊ͍ͯ·͢ɻ ྆ํΛμϯϩʔυͯ͠ಡΜͰ͍ͩ͘͞ɻ
ϑΟʔυόοΫɿ Ϧαʔνγʔτͷॻ͖ํʹ͍ͭͯ
None
λΠτϧ༰Λཁ͢Δɿंத͔ΒࢀՃͰ͖ΔΠϕϯτʮͨΒ͘͘Δ·αϑΝϦύʔΫʯ Ҿ༻ݩΛࣔ͢ɿ 8FCαΠτͰ͋Ε63-ɺ ৽ฉࡶࢽͰ͋Εൃߦॻ͘ ޡࣈࣈ ࣄલʹνΣοΫ͠Α͏ ʷͨͨ͘ ̋ͨΒ͘
ΞΠσΞͷݩΛ্ࣔͨ͠Ͱɺ৽͍͠ΞΠσΞΛϝϞΛ͢Δ wυϥΠϒεϧʔܕͷΦʔϓϯΩϟϯύε wυϥΠϒΠϯγΞλʔ෩ͷΦʔϓϯΩϟϯύε # ˢ͜ͷΑ͏ʹϝϞ͓ͯ͘͠
ϝϞΛ·ͱΊΔɹ˞ϖʔδҎ্ͷ1%'ʹͯ͠ఏग़