Use an 8px-by-8px grid

はじめに

AppleのHuman Interface Guidelinesには、"Use an 8px-by-8px grid"という記載がある。
その対応策についての日本語の記事が見つけられなかったので、自分なりに探ってみた。
結果として、大した解決策を提示している訳ではないが、情報がないよりは良いと思う。

8px-by-8px gridとは

8の倍数でUIをレイアウトするグリッドを設定すること。以下のサイトがわかりやすい。
8の倍数でのブレークポイントとGrid Systemsの数学的アプローチ

iOSのスクリーンサイズ

しかし、現在（2019.4.8）主流のデバイスのスクリーンサイズは@1xで375*667ptである。Xのデバイスもそれぞれ8の倍数のスクリーンサイズとはなっていない。スクリーンサイズを改めて確認すると、iPhone 5までは、8の倍数だった(参考：The Ultimate Guide To iPhone Resolutions）。その名残で、今でも8px-by-8px gridを推奨しているのかもしれない。

対応策

対策としては、以下のサイトに記載されているように、基本的に8ptをベースにマージン等を設定して、あとは成り行きで良さそうだ。もっと良い方法があれば、ご教示ください。

Some screens have apparently difficult sizes to adjust for (the iPhone 6 is 375 x 667 points), but the solution is actually quite simple. Keep your padding and margin dimensions consistent and reduce/increase the size of the block element to fill the remaining space. It’s OK to have an oddly-sized element if it keeps the grid consistent. Keep in mind that your users will likely never see the actual measurements you use.
The 8-Point Grid