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
スポンサーロゴサイズの統一
Search
Kite
August 28, 2016
Design
7
3.2k
スポンサーロゴサイズの統一
縦横比がバラバラなロゴを、大体同じぐらいのサイズに見えるようにする方法
Kite
August 28, 2016
Tweet
Share
More Decks by Kite
See All by Kite
個人からチームまで、情報・タスク管理の一元化はNotionにお任せ!
ixkaito
12
73k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5.2k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.7k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
3.9k
WordPress の今とこれから
ixkaito
1
1.8k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
15k
WordPress の今とこれから
ixkaito
4
2.6k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
390
ブラウザのデフォルトスタイルを見てみよう
ixkaito
3
1.5k
Other Decks in Design
See All in Design
PF_濵村ひろみ_202503
maru_design78
0
180
harutaka Vision Deck
zenkigenforrecruit
0
150
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
Echoes Boomerang
artcloudyu
PRO
0
250
私とデザインの10年
iflection
0
160
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
520
How to get a Tiger to Tulsa
mcduckyart
0
110
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.3k
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
線で考える画面構成
natsuume
1
880
株式会社バクタム 会社説明資料
bactum
0
250
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Designing for Performance
lara
610
69k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building an army of robots
kneath
306
45k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Faster Mobile Websites
deanohume
307
31k
Transcript
Grand Frontend Osaka 2016 / Kite มଶత$44τϦοΫ൪֎ฤ εϙϯαʔϩΰαΠζͷ౷Ұ
WordPress core contributor Ruby on Rails contributor Wocker developer Bathe
developer Frasco developer Web & graphic designer Programmer Kite KITERETZ inc. CEO & Funder ! kite.koga " ixkaito # ixkaito
εϙϯαʔϩΰαΠζͷ౷Ұ
༷ ॎԣൺ͕όϥόϥͳϩΰ
ߴ͞෯Ͱ߹Θͤͯɺಉ͡େ͖͞ʹݟ͑ͳ͍ ࣦഊྫ
ಉ͡େ͖͞ʹݟ͑ΔΑ͏ʹ͢Δʹɺ໘ੵ͕ಉ͙͡Β͍ʹͳΔΑ͏ʹ͢Δඞཁ͕͋Δ ࣦഊྫ
Ұ൪ԣͳ ॎͰΑ͍ ϩΰΛج४ʹɺൣғͰऔΕΔ࠷େ໘ੵΛٻΊΔ Γํ
ྫ 300 * 50 = 15,000px Γํ
x : y = 1.5 : 1 x y Γํ
x y x : y = 1 : 1
x * y = 15,000 1.5 * y * y
= 15,000 y = √10,000 y = 100px x * y = 15,000 1 * y * y = 15,000 y = √15,000 y ≒ 122.474487139px Γํ
Γํ 122px 100px x * y = 15,000 1.5 *
y * y = 15,000 y = √10,000 y = 100px x * y = 15,000 1 * y * y = 15,000 y = √15,000 y ≒ 122.474487139px
ެࣜ 短辺 = √(最大面積 ÷ 縦横比)
࣮ࡍϩΰʹΑͬͯృΓͭͿ͠෦ͷ໘ੵ͕ҧ͍·͢ͷͰɺ ࠷ޙࣗ͝ͷͰ֬ೝ͠ɺඍௐ͢Δ͜ͱΛΦεεϝ͠·͢ɻ ֮ॻ
࠷ޙʹ
,*5&3&5;JOD גࣜձࣾΩςϨπ Ͱɺ ຐ๏͍ʹͳΓ͍ͨਓΛืू͠·͢ɻ ϦϞʔτɺύʔτλΠϜܴɻ αΠτ͔Β IUUQLJUFSFU[DPN 'BDFCPPLϝοηʔδ͔Β IUUQGBDFCPPLDPNLJUFLPHB (JU)VC*TTVF
IUUQTHJUIVCDPNLJUFSFU[