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
350
Digital Design 2022-01
mathatelle
0
250
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
120
Multiple pages
mathatelle
0
670
How to design the individual page
mathatelle
1
81
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
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
260
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
510
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
380
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.9k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
150
portfolio
amitnk
1
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
200
Night Shift (beginning sequence)
cpineda57
0
930
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
400
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.5k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
170
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
GitHub's CSS Performance
jonrohan
1030
460k
Docker and Python
trallard
42
3.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Faster Mobile Websites
deanohume
305
30k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Mobile First: as difficult as doing things right
swwweet
222
9k
Automating Front-end Workflow
addyosmani
1366
200k
Optimizing for Happiness
mojombo
376
70k
Writing Fast Ruby
sferik
628
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Practical Orchestrator
shlominoach
186
10k
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%'ʹͯ͠ఏग़