【pt/%/px】指定する単位による見えかたの違い比較【iOS】

今年入社しましたデザイナーの きの です

調べ物が好きです。
最近は、iOS向けのデザインを作るにあたり、pt や px・% による指定の違いをまとめていました。

結論としてはこうなります。

• 端末に関係なく同じ見かけの大きさにしたい > pt
• 見かけのサイズにあわせて大きさを変えたい > %

まとめた図は以下からご覧ください。

図でまとめました

pt や px が影響してくるのは端末ごとの解像度差です。また % は画面の広さに影響してきます。
なので今回は @2x を基準として同じ広さの @1x と広さの違う @2x を用意しました。
イメージとしては iPhone6 / 5 / 4 です。

• 赤：pt
• 黄：%
• 青：px

pt はどの場合でも見かけの大きさが変わらない

画面の広さがポイントで規定されていますので、サイズの指定にポイントを使用した場合は解像度や広さに影響を受けません。

% は画面の広さに影響を受ける

相対的な数値である% は、指定した基準となるハコに影響を受けます。
今回の場合横幅に対して 25 %と指定をしていますので、横幅が 640px の場合と 750px では 750px の方が大きく表示されます。

px は画面の解像度に影響を受ける

@1x では 1pt=1px のため、pt 指定でもpx 指定でも見かけの大きさは変わりません。
@2x では 1pt=2px となるため、px 指定は見かけ上半分の大きさとなります。

まとめたのは以上です

• 端末に関係なく同じ見かけの大きさにしたい > pt
• 見かけのサイズにあわせて大きさを変えたい > %

android や、 iPhone 6 Plus などの @3x を少し縮めているあいつらについては機会があれば追加したいと思います。
まずは基本ということで。

フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！

フェンリルの Facebook ページでは、最新トピックをお知らせしています。よろしければいいね！してください！