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.3k
スポンサーロゴサイズの統一
縦横比がバラバラなロゴを、大体同じぐらいのサイズに見えるようにする方法
Kite
August 28, 2016
Tweet
Share
More Decks by Kite
See All by Kite
個人からチームまで、情報・タスク管理の一元化はNotionにお任せ!
ixkaito
12
74k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5.3k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.8k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
4k
WordPress の今とこれから
ixkaito
1
1.9k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
15k
WordPress の今とこれから
ixkaito
4
2.6k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
410
ブラウザのデフォルトスタイルを見てみよう
ixkaito
3
1.5k
Other Decks in Design
See All in Design
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.8k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
360
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
930
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
0
270
高卒公務員から Webデザイナーになるまで
kinomidesign
0
130
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
850
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
240
Goodpatch Tour💙 / We are hiring!
goodpatch
31
910k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
600
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
320
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
740
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
120
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Speed Design
sergeychernyshev
32
1.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
192
56k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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[