ブラウザ表現における超ミニマムな個人開発を考える【モバイルファーストで、一時的にPCサイトをサボる】
masa5714とある個人開発のサイトをリニューアル作業中。
月間2~3万PV程度の小規模な個人サイトのデータだが、アクセス解析をしたところ、PCユーザーは15%程度。レスポンシブ対応が怠すぎるので気が向いたときにPCサイトを作る方針で、一旦はPCサイトを捨てる。
捨てると言っても、PCからアクセスできない状態ではない。
PCサイトもスマホサイトのようなレイアウトになるということ。
アルさんのようなイメージ。
▼アル
しかし、超ミニマムな個人開発としてはちょっと気になる点がある。「部分的に微調整が必要になる可能性がある」ということ。これすらも放棄する超ミニマムな開発をしたい。
なお超ミニマムな開発とは、あくまでブラウザ表現を最小限にするという意味であり、コア機能をミニマムにするという意味では一切ない。コア機能はユーザー定着のための重要な要素なので、ここにはエグいぐらいの力を注ぐべき。（だと思います。）
なので、GUIを売りにする開発では向かない。
▼完成イメージ
まるで1枚画像で自動リサイズされているような動き。
好きか嫌いかは分かれるところですが、超ミニマムで段階的に開発することを考えれば、ぜひとも食わず嫌いせずに採用したいところ。（現在、この手法で開発していますが、仕方なく採用している状態です。PCサイトはスマホ版が完成してリリースした後にじっくり開発します。まずは提供できる状態を目指すようにしましょう。）
この完成イメージのように、どんなブラウザサイズでも、別途調整すら発生しないように、おおよそ閲覧に耐えうる開発を行っていく。
ちなみに同じようなことは既に先人たちによって擦られ続けてきたテーマなので、なにも新しいことではありません。
この手法の良いところは開発時にもある。
chrome://inspect でPCとスマホ端末を接続しておけば、Next.js標準のホットリロードでリアルタイムに実機確認しながら、PC版の表示も確認できる。レスポンシブ特有のブラウザサイズをぐりぐり変更しながら確認する必要がないので疲れない＾＾
masa5714開発環境
- Next.js
- Tailwind CSS
この構成で開発を進める前提。
ブラウザサイズを変更すると、
- width / height
- margin / padding
- border-radius
などの数値が存在するようなものを全て可変するようにする。
masa5714デザインデータ超大事
手抜きな可変を実現するためには、デザインデータが重要になる。
デザインデータをベースに値を決めていくことになるので、横幅サイズを慎重に決定する。
（理由： この横幅サイズを最小サイズとして考えるため。ブラウザのfont-sizeは10px相当が最小サイズ。375pxで制作したデザインで、320pxのデバイスで閲覧した場合、font-sizeがやや大きい状態になる。...と思う。）
当方では 375px とした。
2023年8月13日追記-->
デザインデータは360pxを推奨。
案外360pxのデバイスで閲覧するユーザーも多い。
<--追記終了
masa5714どうやって実現するのかを知る
globals.css の html,body に対して、
font-size を vw 単位で指定する。
html,body 以外の箇所の値の指定は rem 単位で指定する。
こうすることで vw をベースに rem で計算され、どのブラウザサイズにも耐えうる。
html,body の font-size を指定する
vw の計算は自分でやるとダルいので を活用する。
「viewport width」には デザインデータの横幅（今回は 375）
「size in px」にはデザインデータ内の各要素のサイズ（高さ60pxで描いたデザインなら 60など。）
ベースとなるfont-size を10px相当にする
globals.css にて、脳死で開発していきたいのでベースとなる font-size を 10px 相当の vw を指定しておく。今回は 375px のデザインデータをベースにするので、 font-size: 2.666vw を指定する。
これによってベースの値が 10px 相当になるので、仮に width: 16rem とすれば、 160px 相当が適用されることになる。もちろんブラウザサイズを変更すればそれに沿ってリサイズされる。
この10px相当の値はブラウザサイズによって変更いかなければならないので若干の調整が必要だが、かなり少ない調整でどうにかなる。
下記が例：
@media screen and (max-width: 428px) {
html,
body {
font-size: 2.666vw;
}
}
@media screen and (min-width: 429px) {
html,
body {
font-size: min(2.666vw, 16px);
}
}
428px以下のときは 2.666vw が 10px 相当になる。
429px以上のときは 2.666vw が 10px 相当になるが、最大値を 16px として固定。
たったこれだけで、冒頭で貼った完成イメージのような挙動が実現できる。
タブレット端末などの調整をする場合は、
このメディアクエリさえ調整すれば解決する...はず！（知らん）
masa5714Tailwind CSSで実装をする
実装をする際にTailwind CSSを活用するのだが、
初期値では rem の値がごちゃごちゃしてて、いちいち調べていい感じの値を選ぶのが面倒くさすぎる。
そこで、今回は tailwind.config.js の設定ファイルにて、
fontSize: {
10: '1rem',
12: '1.2rem',
14: '1.4rem',
16: '1.6rem',
20: '2rem',
24: '2.4rem',
28: '2.8rem'
},
font-sizeのテーマ設定を書いた。
text-10 と書けば 1rem が適用されるし、
text-28 と書けば 2.8rem が適用される。
width や height 、paddingなど、値を適用する系のやつは、
w-[12rem] や px-[0.8rem] などで記述する必要がある。記述がちょっと面倒ではあるが、レスポンシブ特有の微調整をすることを考えれば手間は小さい。
注意
border-radiusも rounded-[0.4rem] などを使って適用するようにしましょう。
line-heightは leading-[1.6] など、ここではremは必要ありません。