Studioの単位はどれを選ぶ？px・%・vw・remの使い分け

Studioでボックスの幅や文字サイズを設定するとき、「px」や「%」といった数値の単位があると思いますが、なんとなくpxのまま設定している方も多いのではないでしょうか。

単位はどれを選んでも見た目が同じに見えることがありますが、そうするとスマートフォンで見たときに文字が大きすぎて画面からはみ出してしまう、といったことが起こりがちです。

本記事では、Studioで使える単位と、それぞれのメリットとデメリットと使い分けについて解説します。

まずは「なんとなくpx」をやめよう

具体的な解説に移る前に、単位には「固定されるもの」と「変化するもの」の二種類があることを押さえておきましょう。

例えばpxは「固定されるもの」で、画面の大きさが変わっても、指定した値がそのまま保たれます。
同じ大きさのままなので扱いやすいのですが、裏を返せばどんな画面幅でも同じ大きさのまま、ということでもあります。

一方％やvw、remは「変化するもの」で、親要素や画面幅に応じて大きさが変わります。

冒頭の「スマホで文字がはみ出した」というのは、この違いを意識せずに固定の単位を使ってしまったことが原因です。

パソコンの大きな画面でちょうど良いサイズをpxで設定すると、その数値がスマートフォンの狭い画面でもそのまま適用されてしまい、結果大きすぎてはみ出してしまうというわけです。

一方で全てを％で設定してしまうとスマートフォンで小さくなりすぎて見づらいといった問題も出てきます。

大切なのは「なんとなくpx」にしないで、「画面幅に合わせて変化させたいのか、それとも固定にしたいのか」を意識すること。

そこを意識していれば、後からレスポンシブで悩まなくて済むようになります。

studioで使える4つの単位

それでは、Studioで実際に使える4つの単位について、それぞれのメリット・デメリットを比較する形で解説していきます。

px(ピクセル)

px（ピクセル） は、画面の大きさに関わらず一定のサイズを保つ、固定の単位です。

メリットは、予測しやすく意図した通りに配置できること。

「20px」と決めれば、どんな時でも「20px」で表示されるので、細かい調整がしやすく枠線やアイコンのようにサイズを変えたくない要素に向いています。

デメリットは、画面幅が変わっても大きさが変わらないこと。

大きな見出しや幅の広い要素をpxで固定すると、狭い画面ではみ出す原因になります。

%(パーセント)

%（パーセント） は親要素のサイズを基準にした相対的な単位です。

メリットは、親に合わせて伸縮するためレスポンシブに強いこと。

「50%」にすると、親要素の半分の幅を、画面サイズが変わっても保ってくれます。

デメリットは、「何に対する%なのか」が親要素次第で変わるため直感的に分かりにくいこと。

親のサイズを変えると、子のサイズも連動して変わるので、入れ子が深くなると親の80％の40％の70％…といったように実際のサイズはどうなるかが分かりにくくなります。

また、％は良くも悪くも親要素次第なので、親が「px」で固定幅になっていたら、「%」を選んでも結局は固定幅になってしまいます。

vw(ビューポート幅)

vw（ビューポート幅） は画面の横幅を基準にした単位で、1vwが画面幅の1%にあたります。

メリットは、画面幅に連動するため大きなキャッチコピーやヒーロー部分など、画面いっぱいに見せたい要素と相性が良いこと。

小さな画面でも改行させたくない文字などに効果的です。

デメリットは、画面が極端に広い、あるいは狭いとサイズも極端になってしまうこと。

サイト制作では画面幅1980pxや1280pxを基準にデザインしていくのが一般的ですが、vwではそれより広がると、どこまでも大きくなってしまいます。

親要素が絶対に画面幅の「％」みたいなものなので分かりやすいのですが、画面幅はこちらから決められないので予測が出来ないといった感じです。

rem(レム)

rem（レム） は、サイトの基準となる文字サイズを起点にした相対的な単位です。

Studioでは16pxが基準となっており、1remが16px、2remが32pxといった形で対応します。

メリットは、基準の文字サイズを軸にサイト全体で一貫した大きさを保てること、そしてアクセシビリティに配慮しやすいこと。

ユーザーがブラウザの文字サイズ設定を変えたときにも、それに応じて相対的に変化してくれるので、サイトの文字が小さくて見づらいといった問題も起きにくいです。

デメリットは、「基準に対する相対値」という考え方が、最初は少しとっつきにくいこと。

慣れてしまえば文字サイズの管理が楽になる単位なのですが、基準が16pxだから、20pxにするには1.25remで…といったように逆算して設定しなければならず、最初はややこしく感じると思います。

迷ったときの使い分けのヒント

単位のメリット・デメリットを比較してみて、どの単位も万能ではないことが分かったと思います。

なので、最後に実際にどの単位を選ぶかで迷ったときの、使い分けのヒントについてお話ししておきます。

まず、文字サイズはremを軸に考えるのがおすすめです。

サイト全体で一貫した大きさを保ちやすく、ユーザーの文字サイズ設定にも対応できるため、本文や見出しの基本はremにしておくと安心です。

ただ、文字の場合は画面サイズが小さくなって入りきらなくなったとしても、文字のボックスサイズさえ可変にしておけば自動的に改行されるので、pxで設定しても大きな問題は起こらないと思います。

次に、レイアウトに関する設定はpxや%を使い分けるのが良いでしょう。

サイズを変えたくない要素はpx、親に合わせて伸縮させたい要素は%という感じです。

PCサイズだけで考えていると判断が難しいと思うので、タブレットやスマホサイズに切り替えてみて、はみ出したりレイアウトが崩れてしまうかをチェックしつつ考えていくと良いでしょう。

そして、画面幅いっぱいに大きく見せたい要素にvw（vh）を使います。

ただしStudioの場合、記事の執筆時点（2026年7月）では最大幅や最小幅の設定ができないので、特徴の時にお話ししたように、vwを使うと大きくなりすぎる場合があります。

なので、基準となるパソコンサイズではpxを使っておき、タブレットやスマホサイズでvwを使うと大きくなりすぎる心配がないのでオススメです。

もちろん、あくまでも考える目安なので、絶対に守る必要はありませんが、考え方が分からずに何となくで設定してしまっていたという人は、この基準で選んでおくと意図しないデザインの崩れなどが起きにくくなります。

まとめ

単位は自分自身の環境だと正しく表示されているように見えたりするので、軽視されがちな設定ですが、画面幅が変わってもサイトが正しく表示されるかどうかを決める大切な要素です。

ぜひ、次回Studioでサイトを制作するときは、「何となくpx」ではなく、意図を持って単位を狙って使いこなして見てください。