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.
→
allweb
June 12, 2014
Design
0
180
Webデザインのココ! 押さえておこう
2014/6/12 開催 ハッピーデジタル主催 @マイコミ
allWebクリエイター塾 大本あかね
allweb
June 12, 2014
Tweet
Share
More Decks by allweb
See All by allweb
ウェブマスターツールの教科書出版記念セミナー
allweb
0
210
上位表示のための 最低限やるべき4つのこと
allweb
0
260
デザイニングインブラウザ
allweb
2
990
SwapSkillsFree(7) Facebookで理解する、いいね!が広がるOGPの仕組み
allweb
0
440
なんでWebでもゲーミフィケーションが必要なのか?
allweb
1
890
Other Decks in Design
See All in Design
デザインを信じていますか
sekiguchiy
1
960
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
850
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
290
デザインするために「多様性」について考える
iflection
0
190
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
3.3k
root COMPANY DECK / We are hiring!
root_recruit
2
26k
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
130
Drawing for Animation
lynteo
2
190
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
2026年の勢い / Momentum for 2026
bebe
0
350
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
1
260
AIでデザインをつくる:基礎編
kenichiota0711
3
2.5k
Featured
See All Featured
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
120
Become a Pro
speakerdeck
PRO
31
5.8k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Accessibility Awareness
sabderemane
0
52
What's in a price? How to price your products and services
michaelherold
247
13k
Tell your own story through comics
letsgokoyo
1
810
30 Presentation Tips
portentint
PRO
1
220
Speed Design
sergeychernyshev
33
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
220
Transcript
8FCσβΠϯͷίίʂ ԡ͓͑ͯ͜͞͏
http://all-web.org/
None
ΞδΣϯμ ❖ 8FCσβΠϯͱʁ ❖ $44Ͱ࡞ΔσβΠϯ ❖ ঁࢠ͚ͷσβΠϯϝιου
WebσβΠϯͱʁ 1SJOU 8FC
1IPUPTIPQ
ւ֎Ͱಉ͜͡ͱΛ
εϚϗੜ
ϨεϙϯγϒWebσβΠϯ
WebͰͷσβΠϯ
σβΠϯʹUI
σβΠϯʹUI ❖ ใઃܭ ❖ ૢ࡞ੑ ❖ ΤϞʔγϣϯʢײʣ ❖ ετʔϦʔςϦϯά ❖
ίϯςΩετઃܭɹɹ 6*ϢʔβʔΠϯλʔϑΣΠε
Googleॏཁͱ
https://developers.google.com/speed/pagespeed/insights/
None
Googleॏཁͱ ❖ ϐϯνΠϯΞτͤ͞Δ 6*εϐʔυ͕ૣͯ͘ Λͤͯ͞அ͢Δ http://all-web-blog.blogspot.jp/2014/05/google.html BMM8FCΫϦΤΠλʔक़ͷϒϩάͰ༁͍ͯ͠·͢ ʴ ˎˎඵ
ϞόΠϧϑΝʔετ
None
มԽ͢Δ։ൃπʔϧ ❖ खॻ͖Ͱ6*Λ࡞ ❖ ϢʔβʔಋઢΛઃఆ͢Δ
https://prottapp.com/
CSSͰ࡞ΔσβΠϯ http://codepen.io/heero/pen/wylhv
http://codepen.io/heero/pen/wylhv
CSSઃܭ͕ॏཁ ❖ σβΠϯ$44Ͱʂ ❖ 4B44ͳͲ͏લʹઃܭํ๏Λֶ΅͏ ❖ σβΠϯ࣮͕Ͱ͖Εݴ͍༁Ͱͳ͍ʂ ❖ ύϑΥʔϚϯεʹྀ͢Δ
ঁࢠ͚ͷσβΠϯϝιου σβΠϯͷཁૉͬͯͳʹʁ ʁ
ঁࢠ͚ͷσβΠϯϝιου ΧϥʔɺϨΠΞτɺݟͨɹͳͲͳͲ σβΠϯͷཁૉͬͯͳʹʁ
ϨΠΞτ ͳΜͷͨΊʹඞཁ ʁ
None
None
ϨΠΞτ ❖ ݟ͘͢͢Δ ❖ ใΛૣ͘ήοτͰ͖Δ
None
ϨΠΞτ ❖ άϦοτΛἧ͑Δ
None
Before After
ݟͨ
ҹͰਓߦಈ͢Δ
20ʙ40ࡀΛλʔήοτ
ڝ߹
λʔήοτʹΑͬͯมԽ
ঁੑ͚ ❖ Χϥʔ ❖ λΠϙάϥϑΟʔ ❖ ࣸਅ ɹɹɹɹɹɹɹɹɹͳͲ
None
None
None
None
σβΠϯͯ͠Έ·ͨ͠ʢসʣ
amzon WOMAN
λʔήοτ৭ͳͲ࠷ޙʹ ❖ ใઃܭ ❖ ૢ࡞ੑʢ6*ʣ ❖ Ϣʔβʔಋઢʢΰʔϧઃఆʣ ΣϒαΠτʢใऔಘʣతΛ࣋ͬͯ͘Δഔମ
·ͱΊ ❖ 8FCͱ͍͏σόΠεΛཧղ͠Α͏ ❖ ࣌ʹ߹੍ͬͨ࡞ϑϩʔΛมߋ͍ͯ͜͠͏ ❖ λʔήοτʹ߹ΘͤͨదͳσβΠϯΛߦ͓͏
པΒΕΔ8FC୲ऀʹͳΔ ɹ(PPHMFΣϒϚελʔπʔϧʮ߈ུʯڭຊ ɹݕࡧΤϯδϯ্Ґදࣔݕࡧྲྀೖͷ૿ՃʹඞਢͷπʔϧΛ͍͜ͳͤʂ
None