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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
inouenoa
June 06, 2016
Design
0
700
webデザイン基礎学
初心者向けのwebデザインに関する基礎的な解説をまとめました。
inouenoa
June 06, 2016
Tweet
Share
Other Decks in Design
See All in Design
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
380
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
140
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
1.1k
Treasure_Hunting
solmetts
0
240
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
130
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.4k
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
450
デザインするために「多様性」について考える
iflection
0
190
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
920
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは?~操作を減らし、成果を最大にするための設計~
ncdc
0
120
root COMPANY DECK / We are hiring!
root_recruit
2
26k
第18回サイゼミ
lw
1
3.3k
Featured
See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
GraphQLとの向き合い方2022年版
quramy
50
14k
How to Think Like a Performance Engineer
csswizardry
28
2.5k
AI: The stuff that nobody shows you
jnunemaker
PRO
2
270
Amusing Abliteration
ianozsvald
0
100
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
110
Abbi's Birthday
coloredviolet
1
4.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
The Curse of the Amulet
leimatthew05
1
8.7k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
290
Transcript
ͳΔ΄Ͳʂ ͕͜͜μϝͩͬͨ - 今日からわかる Web デザイン基礎学 -
σβΠϯͬͯͳʹʁ ̍ݶ
ҹͱXFCσβΠϯͷҧ͍ ҹ 8FCαΠτ
ཧʹ͍ۙΑΓ๛͔ͳදݱ͕Մೳɻ छྨͷ৭Ͱදݱ͢ΔͨΊɺ ඒ͍͠ҹʹߴղ૾ͷσʔλ͕ඞཁʂ σΟεϓϨΠͰͷද͕ࣔલఏɻ छྨͷ৭Ͱදݱ͢ΔͨΊɺ ߴղ૾ͷσʔλ͕ෆඞཁʂ Ճ๏ࠞ৭ ݮ๏ࠞ৭ ৭Λ͍ͯ͘͠ʹͭΕɺ ৭͕ࠇʹ͍͍ۙͮͯ͘ɻ
৭Λ͍ͯ͘͠ʹͭΕɺ ৭͕നʹ͍͍ۙͮͯ͘ɻ ˠEQJ ˠEQJ ҹͱXFCσβΠϯͷҧ͍
w ݟͤΔ w ΞΫγϣϯΛىͯ͜͠Β͏ w ୳ͯ͠Β͏ w ݟͤΔ ҹ 8FCαΠτ
ͪ͜Β͕ൃ৴ଆͰ͋Γɺ λʔήοτड͚औΔ͚ͩɻ ͪ͜Β͕ൃ৴ଆͰ͋Δ͕ɺ λʔήοτʹߦಈΛىͤ͜͞ͳ͍ ͱΓཱͨͳ͍ɻ ໌֬ͳҧ͍ ҹͱXFCσβΠϯͷҧ͍
8FCαΠτσβΠϯͷׂ ຬ Γ͍ͨ ൺֱ͍ͨ͠ Θ͔Βͳ͍ ௐΔ Ϣʔβʔ cc αΠτ͕ఏڙͨ͠ Ձ
తɾඪ
8FCαΠτσβΠϯͷׂ Γ͍ͨ ൺֱ͍ͨ͠ Θ͔Βͳ͍ ௐΔ Ϣʔβʔ ར༻γʔϯςʔϚʹԊͬͨ ໎Θͤͳ͍αΠτ࡞Γ͕େ ͦΕͬͪͩ͜Αʂ ͋Ε͜͜ʂ
༠ಋͯ͋͛͠Δ
จࣈΛѻ͏ྗ ݶ
จࣈ͕༩͑ΔΠϝʔδ ͍Ζʹ΄ͱ ͍ Ζ ʹ ΄ ͱ ͍Ζʹ΄ͱ
͍Ζʹ΄ͱ ͍ Ζ ʹ ΄ ͱ ͍Ζʹ΄ͱ ϑΥϯτͷछྨ จࣈͷαΠζ ߦؒɾΞΩ ͍͔ͭ͘ͷϧʔϧ จࣈ͕༩͑ΔΠϝʔδҙ֎ͱڧ͍ʂ Θ͔Βͣ༻͍ͯ͠Δͱతͱҧͬͨํʹʜ
ϑΥϯτ͕༩͑ΔΠϝʔδ ໌ேମ ηϦϑ ΰγοΫମ αϯηϦϑ ༏խ͞ɺ্͞ɺߴڃײɺ৴པײ ྗڧ͞ɺઆಘྗɺ҆৺ײɺ͠Έ͢͞
SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺Α͞ɻ )0.& 4)01 $0/$&15 SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺Α͞ɻ )0.&
4)01 $0/$&15 ϑΥϯτ͕༩͑ΔΠϝʔδ /( 0,
αΠζ͕༩͑ΔΠϝʔδ େ͖͍จࣈ খ͍͞จࣈ ҆৺ײɺେ͞ɺ૽͕͠͞ɺେ͞ɺ ͠Έ͢͞ɺಡΈ͢͞ ߴڃײɺرগײɺ੩͚͞ɺ্͞ɺ ಡ·ͤ͢͞
αΠζ͕༩͑ΔΠϝʔδ SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺Α͞ɻ )0.& 4)01 $0/$&15 େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯ ϙΠϯτͳͲΛ·ͱΊͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ
SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺Α͞ɻ )0.& 4)01 $0/$&15 େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺଟ͍ͱࢥ ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯτͳͲΛ·ͱ Ίͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ /( 0,
ߦؒͱߦૹΓ͕༩͑ΔΠϝʔδ ͜ΕΒΛ·ͱΊͯ จࣈΈͱ͍͏ɻ 8FCαΠτͰअಓ ߦ͕ؒڱ͍ɺߦૹΓ͕খ͍͞ ߦ͕͍ؒɺߦૹΓ͕େ͖͍ ٸ͍Ͱ͍Δɺใ͕ଟ͍ɺಡ·ͤͳ͍ ༏խɺใ͕গͳ͍ɺಡΜͰ΄͍͠
ߦؒͱߦૹΓ͕༩͑ΔΠϝʔδ SHARP ࠓ · Ͱ ମ ݧ ͠ ͨ ͜
ͱ ͷ ͳ ͍ ɺ ੜ · Ε ͨ ͯ ͷ ৺ Α ͞ ɻ )0.& 4)01 $0/$&15 େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺Α͞ɻ )0.& 4)01 $0/$&15 େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺଟ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯτͳͲΛ·ͱΊͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀ ߟʹͳ͍ͬͯͩ͘͞͞ɻ /( 0,
ઈରʹࣦഊ͠ͳ͍ ৭࠼બͼͷϋπʔ ݶ
৭͕༩͑ΔΠϝʔδ ੜ໋ɾ׆ಈతɾతɾিಈతɾഁյɾྗ Ոఉɾࣄɾࣗ༝ɾஆ͔͍ɾਂ͍ܙɾਪྗ ح৺ɾ্৺ɾࣝɾɾܰշɾΧδϡΞϧ Ժ͔͞ɾௐɾࣗવɾฏɾόϥϯεɾڠௐ ฏɾ҆શɾྫྷ੩ɾ࣮ɾਗ਼ܿɾए͍ɾ͔ ਫ਼ਆɾݽಠɾؾɾݫॗɾਸߴɾӉ ߴوɾ༏խɾັྗతɾඇݱ࣮తɾྶతɾਆൿ ਗ਼ܿɾܿ͞ɾඒ͠͞ɾ७ਮɾਆɾఱࠃ ௐɾ༕ᓔɾෆ҆ɾաڈɾബ҉͍ɾࢥ͍ग़
҉ҋɾࢮɾڪාɾѱɾɾߴڃײɾஉੑత ྫྷͨ͞ɾۚଐɾચ࿅ɾߗ͍ɾ্ ޭɾߴڃɾɾɾً͖ɾ߽՚ ৭͜ΜͳʹϞϊͷΠϝʔδΛม͑ͯ͠·͏ʜ
৭͕༩͑ΔΠϝʔδ ໌ ࠼ ৭૬ ʰ̏ଐੑʱ
ઈରࣦഊ͠ͳ͍৭ͷ૬ੑ ৭બͼηϯεʁΜͳ͜ͱͳ͍Αʂ ϕʔεΧϥʔ ิ৭ ΞΫηϯτ
ઈରࣦഊ͠ͳ͍৭ͷ૬ੑ $36/$) ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ $)&$, ࢲͨͪͷࣄςΫϊϩδʔΛ௨ͯ͡ੈքΛΑΓྑ͘͢Δ͜ͱͰ͢ɻ ࢲͨͪΫϥϯνλΠϚʔςΫϊϩδʔͷେ͖ͳՄೳੑΛ৴͡ɺ ਓʑ ʹຊʹศརͱײ͍͚ͯͨͩ͡ΔΑ͏ͳՁ͋ΔαʔϏεΛੈքத ʹఏڙ͍͖͍ͯͨ͠ͱߟ͍͑ͯ·͢ɻ
ΫϥυεϚʔτϑΥϯɺΫϥυϑΝϯσΟϯάͳͲͷΤίγ εςϜʹΑͬͯςΫϊϩδʔΛऔΓר͘ڥܶతʹมΘΓ·ͨ͠ɻ $36/$) ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ $)&$, ࢲͨͪͷࣄςΫϊϩδʔΛ௨ͯ͡ੈքΛΑΓྑ͘͢Δ͜ͱͰ͢ɻ ࢲͨͪΫϥϯνλΠϚʔςΫϊϩδʔͷେ͖ͳՄೳੑΛ৴͡ɺ ਓʑ ʹຊʹศརͱײ͍͚ͯͨͩ͡ΔΑ͏ͳՁ͋ΔαʔϏεΛੈքத ʹఏڙ͍͖͍ͯͨ͠ͱߟ͍͑ͯ·͢ɻ ΫϥυεϚʔτϑΥϯɺΫϥυϑΝϯσΟϯάͳͲͷΤίγ εςϜʹΑͬͯςΫϊϩδʔΛऔΓר͘ڥܶతʹมΘΓ·ͨ͠ɻ /( 0, $36/$) ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ $)&$, ࢲͨͪͷࣄςΫϊϩδʔΛ௨ͯ͡ੈքΛΑΓྑ͘͢Δ͜ͱͰ͢ɻ ࢲͨͪΫϥϯνλΠϚʔςΫϊϩδʔͷେ͖ͳՄೳੑΛ৴͡ɺ ਓʑ ʹຊʹศརͱײ͍͚ͯͨͩ͡ΔΑ͏ͳՁ͋ΔαʔϏεΛੈքத ʹఏڙ͍͖͍ͯͨ͠ͱߟ͍͑ͯ·͢ɻ ΫϥυεϚʔτϑΥϯɺΫϥυϑΝϯσΟϯάͳͲͷΤίγ εςϜʹΑͬͯςΫϊϩδʔΛऔΓר͘ڥܶతʹมΘΓ·ͨ͠ɻ
શͯΛۦͯ͠ࢹૢ࡞ ݶ
ࢹҠಈͷେݪଇ 'ͷ๏ଇ
;ͷ๏ଇ ࢹҠಈͷେݪଇ
ࢹҠಈͷେݪଇ δϟϯϓΛۦͯ͠ɺ ϢʔβʔΛ༠ಋ͢Δ͜ͱ͕Ͱ͖Δ ਓؒͷେ͖͍ͷ ͱ৭ͷ͍͍ͭͯΔͷʹԠ͍͢͠ʂ ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋
͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋
ࢹҠಈͷେݪଇ େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ
େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ େਓͱҧ͏༷ ͷͪΌΜͷ͓ ஂɺͲͷ༷ʹऔΓ ѻ͏ͷ͔ށͬͯ ͍Βͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻ ͦ͜Ͱɺৗͷ͓ खೖΕํ๏͔Β͓ ચ୕ʹ͍ͭͯɺ ͪΐͬͱͨ͠ϫϯ େਓͱҧ͏༷ ͷͪΌΜͷ͓ ஂɺͲͷ༷ʹऔΓ ѻ͏ͷ͔ށͬͯ ͍Βͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻ ͦ͜Ͱɺৗͷ͓ खೖΕํ๏͔Β͓ ચ୕ʹ͍ͭͯɺ ͪΐͬͱͨ͠ϫϯ େਓͱҧ͏༷ ͷͪΌΜͷ͓ ஂɺͲͷ༷ʹऔΓ ѻ͏ͷ͔ށͬͯ ͍Βͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻ ͦ͜Ͱɺৗͷ͓ खೖΕํ๏͔Β͓ ચ୕ʹ͍ͭͯɺ ͪΐͬͱͨ͠ϫϯ େਓͱҧ͏༷ͷͪΌΜͷ͓ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށͬ ͍ͯΒͬ͠ΌΔํɺଟ͍ͱࢥ͍·͢ɻͦ͜Ͱɺৗͷ͓खೖΕํ๏͔ Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯτͳͲΛ·ͱΊͯ͝հ ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ /( 0,
5)"/,:06