📷

ベゼル画像にスクショを当てはめて文字を加えたちょっと大きい画像を元のスクショと同じ縦横比にしたい

に公開
App Store Connect
idea

App Store Connectに出すスクショの画像で、ベゼルに当てはめたものを出すことがある。
手順は一般的に

  1. シミュレータ等でスクショを撮影
  2. 画像ソフトでベゼルの画像に1で撮影したスクショを当てはめる
  3. 文字などを加えて少し大きめの領域を書き出す
  4. 書き出したファイルの大きさはスクショの大きさになるように指定する

となる。
このとき、3の「少し大きめの領域」と「スクショの大きさ」は縦横比が同じものがよい。
その値を調べた。
似たようなのが複数あってもいらないので、適当に間を取った。

1320 × 2868px

iPhone 16 Pro Max

1320 2868
1430 3107
1540 3346
1650 3585
1760 3824
1870 4063
1980 4302
2090 4541
2200 4780
2310 5019
2420 5258
2530 5497
2640 5736

1290 × 2796px

iPhone 16 Plus

1290 2796
1505 3262
1720 3728
1935 4194
2150 4660
2365 5126
2580 5592

1284 × 2778px

iPhone 14 Plus

1284 2778
1498 3241
1712 3704
1926 4167
2140 4630
2354 5093
2568 5556

1242 × 2688px

iPhone 11 Pro Max

1242 2688
1449 3136
1656 3584
1863 4032
2070 4480
2277 4928
2484 5376

2064 × 2752px

iPad Pro 13 7th

2064 2752
2169 2892
2169 2892
2280 3040
2397 3196
2517 3356
2643 3524
2778 3704
2919 3892
3066 4088
3222 4296
3384 4512
3555 4740
3735 4980
3924 5232
4122 5496

2048 × 2732px

iPad Pro 13 1st-6th
iPad Air 13 6th-

2048 2732
2560 3415
3072 4098
3584 4781
4096 5464

ソースコード

以下のソースコードを使うと好きなデバイスで取得できる。

let h = 2048
let w = 2732

var seed = -1
for i in 2...min(h, w) {
    if h % i == 0 && w % i == 0 {
        seed = i
    }
}

if seed != -1 {
    let hStep = h / seed
    var wStep = w / seed
    var h2 = h
    var h3 = h
    var w3 = w

    print("|", h3, "|", w3, "|")
    while Double(h3) / Double(h) < 2.0 {
        h3 += hStep
        w3 += wStep
        if Double(h3) / Double(h2) > 1.05 {
            print("|", h3,"|", w3, "|")
            h2 = h3
        }
    }
}

ベゼルの画像はこちら

https://developer.apple.com/jp/design/resources/

Discussion