🍆

スマホサイズしか考慮しない怠惰な開発を実現する【Next.js + Tailwind CSS】

2023/02/05に公開・約3,400字

Next.js

Tailwind CSS

怠惰な開発

tech

PCサイズも用意するの面倒だと思いませんか？
脳死開発ができるように工夫してみましょう。

実現するもの

例：

実際には下記のようにPCサイズ時にはモバイルっぽいビューにするなどの調整が必要をするのが好ましいでしょう。（この記事では下記の動きについては扱いません。）

最近、僕が気に入っている怠惰な開発手法です。
まるで１枚画像のようにブラウザサイズに応じて全ての要素が可変してくれます。
デバイスサイズ毎に見た目が違うということが起きにくく、まるで一枚画像のような表示ができるため、考慮すべき点がかなり減ります。

ブラウザサイズをぐりぐり動かしながら動作チェックをする必要がないので、かなり怠惰な実装が可能となります。今表示されている見た目がスマホでも、タブレットでも、パソコンでも同じものが表示されるのです。

個人開発規模の「とりあえず作って公開したい！超スモールで！」という場合に有効的ではないでしょうか。

2023年3月1日追記 -->
大々的に告知するつもりはありませんでしたが、この記事を見ている方限定でプライベートなプロジェクトのURLを貼っておきます。記事で紹介した内容の怠惰なビューを取り入れています。
https://mintbox.jp/
<-- 追記終了

仕組みを簡単に説明

簡単に説明すると、ルートのフォントサイズを 10px 相当（2.667vw）のサイズとしています。全ての要素のプロパティ（width / height / margin等）で rem 単位を使用して実装します。ブラウザサイズが変化したときも、これらのプロパティの値がフォントサイズ基準で動きます。

375pxのブラウザサイズのとき、1rem = 10px 相当として換算されます。
ブラウザサイズがそれよりも大きいときは 10pxよりも大きくなりますし、小さいときは10pxよりも小さくなります。（※ただし、font-sizeに関しては10pxよりも小さくなりません。）

ブラウザサイズによって可変するため、まるで一枚画像のような挙動を実現できるわけです。

ということでやってみましょう！

開発環境の構成

Next.js
Tailwind CSS
を使って開発環境を構築しています。

デザインデータを確認しよう

この手法ではデザインデータのサイズが基準となります。

上記リンクからVWの値を算出します。
デザインデータで用意したサイズが 375px の場合、「viewport width」に 375 を入力します。「size in px」は 10 を入力して計算を実行します。

すると、 2.667vw という値が出てきました。
この 2.667vw をルートのフォントサイズとして使用します。

※ 375px のブラウザサイズのとき、フォントサイズが 10px = 1rem という扱いになります。

※ デザインデータのサイズが実装時の最小サイズという扱いになります。デザインデータを用意する際は対応したいデバイスサイズの最も小さいものを用意しておきましょう！それより下のサイズは非推奨サイズとして実装されることになります。

タブレットやパソコンのサイズでも使う場合
タブレット、パソコンのサイズを作る場合には、想定した一番小さいデバイスサイズでデザインをしましょう。基準とするサイズ毎に vw の値をメディアクエリで変更するだけで対応できます。750pxでデザインを作ったのであれば1.333vw、1024pxでデザインを作ったのであれば0.977vwにメディアクエリで適用するだけです。あとはそれぞれのサイズで許容するフォントサイズの上限を制御すれば、想定したデザイン通りの見た目で、ほとんどのデバイスで快適に閲覧できる環境が出来上がります。想定外がほとんど存在しない怠惰な実装が可能です。

Next.js

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  font-size: 2.667vw;
}

/* タブレットサイズ以降（768px以上） */
@media screen and (min-width: 768px) {
  html,
  body {
    font-size: min(2.667vw, 14px);
  }
}

/* PCサイズ（1024px以上） */
@media screen and (min-width: 1024px) {
  html,
  body {
    font-size: min(2.667vw, 16px);
  }
}

たったこれだけで準備が完了です。

スマホサイズのときは 2.667vw が適用される。
タブレットサイズのときは 2.667vw が適用されるが最大値 14px として制御。
PCサイズ以降のときは 2.667vw が適用されるが最大値 16px として制御。

※14pxや16pxまで大きくなるので、ブラウザサイズによっては若干見た目が希望通りのものからかけ離れる場合があるかもしれません。しかし、僕が試した限りではほとんど影響が出ないレベルだと感じています。

width や height などのCSSを適用してみる

example.tsx

export default function GlobalHeader() {
  return (
    <header className="flex flex-row justify-between h-[5.7rem] border-b-[0.1rem] border-[#333]">
      <button className="block px-[1.8rem]">
        <IconMenu className="w-[2.4rem]" />
      </button>
      <h1>
        <Link href="/" className="flex h-full">
          <ServiceLogo className="w-[12.4rem]" />
        </Link>
      </h1>
      <button className="block px-[1.8rem]">
        <span className="block w-[2.4rem] rounded-full bg-white">
          <IconPerson className="w-[2.4rem] fill-black" />
        </span>
      </button>
    </header>
  );
}

例えば、こんな感じでビューを実装できます。
1rem が 10px として動きます。（ブラウザサイズ375pxのとき）
なので、 h-[5.7rem] としている箇所は 375pxサイズのときに 57px になる想定です。もっと大きなブラウザサイズになれば、ブラウザサイズに応じて勝手に大きくなってくれます。

デザインデータをほぼ実寸で採寸でき、かなり怠惰な開発が可能となります。

注意点

フォントサイズは 10px 以下にはならないので予め理解しておきましょう。
border-radius も rounded-[0.4rem] を使用して実装しましょう。
line-height は rem を使わずに leading-[1.6] と実装しましょう。

Discussion

ログインするとコメントできます