どんなスマートフォンでも画面崩れを起こさないために

こんにちは。Synergy Marketing の西岡壮太郎です。
FAVTOWN というサービスの開発を担っています。
今回は BtoB サービスを作ってきた開発者が、BtoC サービスを作って知ったスマートフォン対応についてお話します。

FAVTOWN について

FAVTOWN とは 「ふるさと（生まれ育った地元や、住んだことのある愛着のある場所）を離れてがんばるひとを応援したい」 というサービスです。
「ふるさとを離れた個人」が利用する BtoC サービスであるため、利用者は主にスマートフォンで訪問します。実際に FAVTOWN wakayama に利用いただいているユーザーの 90%超はスマートフォンで閲覧しています。

デザインの再現性

スマートフォンにも様々な画面サイズがあります。画面幅に注目すると、iPhone SE（第2世代）/（第3世代）の画面幅は 375px、iPhone 15 Plus の画面幅は 430px です。デバイス間で 55px、約 15%の幅の違いがあることとなり、この違いがデザインに大きな影響を及ぼします。

例えば、px などの絶対値でサイズを指定した場合、iPhone SE では適切に配置されていた要素が iPhone 15 Plus では想定より小さくなることや、画面全体のバランスが崩れることがあります。

このような問題を防ぐためには、画面幅の違いを考慮したデザインの再現性が特に重要です。
FAVTOWN では「異なる画面幅でも全く同じ内容を表示する」という方針を採用しました。この実装方法をご紹介します。

px でのサイズ指定をやめる

これまで px で指定していたサイズ指定をすべて rem に変更しました。

rem とは html 要素のフォントサイズを基準にした相対単位です。例えば html 要素のフォントサイズが 16px に設定されている場合、1rem は 16px に相当します。
FAVTOWN では以下のサイズを指定しています。

html {
  font-size: calc(100vw * 16 / 375);
}

画面幅（100vw）を 375 で割って 16 を掛けたものになっています。
px 換算すると、各画面サイズで以下の値が設定されています。

画面幅が 375px の場合は 1rem=16px
画面幅が 430px の場合は 1rem=18.347px
画面幅が 350px の場合は 1rem=14.933px

※375px を基準としているのは画面幅 375px でデザインファイルを作成しているためです。画面幅 390px でデザインファイルが作成されている場合には calc(100vw * 16 / 390); としてください。

html に相対的なフォントサイズを指定し、フォントや要素の高さ、 margin、padding などを rem で指定します。これにより様々な画面幅で同様の内容を表示することができます。
つまり iPhone SE でも iPhone 15 Plus でもバランスの取れたデザインが表示されます。

button {
  font-size: 1rem; /* 画面幅375pxの時は16px、画面幅430pxの場合は18.347px */
  padding: 2rem; /* 画面幅375pxの時は32px、画面幅430pxの場合は36.694px */
  margin: 1.5rem; /* 画面幅375pxの時は24px、画面幅430pxの場合は27.5205px */
}

rem をもっと使いやすくする

画面幅に相対的なサイズ指定をできるようになりましたが、1 つ問題が残っています。
それは px でサイズ指定されたデザインファイルを rem を使った実装に変える手間です。

デザインファイルが画面幅 375px かつサイズ指定が px で行われていた場合は、px を rem に変換する必要があります。前述の通り html のフォントサイズを font-size: calc(100vw * 16 / 375); と指定していると以下のような計算が必要です。

8px でサイズ指定されている要素 = 0.5rem
6px でサイズ指定されている要素 = 0.375rem
17px でサイズ指定されている要素 = 1.0625rem

このような計算を都度行うことはとても面倒です。
ですのでよく使う rem サイズは CSS カスタムプロパティ（変数）として登録しておきましょう。

:root {
  --size-1px: 0.0625rem; /* 1px */
  --size-2px: 0.125rem; /* 2px */
  --size-4px: 0.25rem; /* 4px */
  --size-6px: 0.375rem; /* 6px */
  --size-8px: 0.5rem; /* 8px */
  /* 他の変数定義が続く... */
}

button {
  font-size: var(--size-18px); /* 1.125em */
  padding: var(--size-4px); /* 0.25rem */
  margin: var(--size-2px); /* 0.125rem */
}

これでデザインファイルの px 指定が考慮され、計算が不要で rem での実装を行うことができるようになりました。

1rem の最大、最小サイズを指定する

PCやタブレットで表示した場合に画面が崩れないように、 1rem の最大と最小のサイズを指定します。

ここまで html 要素に指定するフォントサイズは font-size: calc(100vw * 16 / 375); と指定しました。ただしこの設定のままフル HD の画面幅（1980px）で画面を表示すると 1rem のサイズは 84.48px となってしまい画面レイアウトが崩れてしまいます。

画面幅 300px ~ 500px で閲覧した時のみ 1rem のサイズを相対的なサイズとし、それ以外の画面幅では 1rem あたりのサイズは絶対値とします。

html {
  font-size: calc(100vw * 16 / 375);
}

@media (max-width: 300px) {
  html {
    font-size: 12px;
  }
}

@media (min-width: 501px) {
  html {
    font-size: 21px;
  }
}

これにより、PC やタブレットなどスマートフォン以外のデバイスで閲覧した場合でも、画面が崩れず表示できます。

まとめ

デザイナーからの 「iPhone13 Plus で確認すると文字が小さい」 という指摘からこのような実装を行いました。

もちろん余白などを px などの絶対値で指定した場合でも適切なサイズを指定していれば問題無いでしょう。しかし、 iPhone SE 、最新の iPhone やそれらの Plus、ProMax、Android 端末で適切に表示できるスタイルを考える、確認するということはとても時間の取られてしまう内容です。
そのために作成されたデザインを常にどのような端末でも同じ様に再現するという取り組みを行いました。

この内容が、同様の課題に直面している他のエンジニア方々のお役に立てば幸いです。