PCでElementorの編集をしている時、見出しをかっこよく大きめに設定したとします。 しかし、いざスマホで確認してみると、「文字が巨大すぎて画面からはみ出している」「変なところで改行されて読みにくい」といった経験はありませんか？
これは、PC用のフォントサイズがスマホにもそのまま引き継がれてしまっていることが原因です。
今回は、スマホ表示で文字サイズを適切に調整する基本のやり方と、画面幅に合わせて自動で文字が伸縮する魔法の単位（vw）の使い方を分かりやすく解説します！
【基本】スマホ専用の文字サイズを設定する
一番確実で簡単な方法は、Elementorの標準機能を使って「PC」「タブレット」「スマホ」それぞれに別々の数値を設定することです。
⚫︎ 設定手順
-
調整したい見出しやテキストエディタウィジェットを選択します。
-
左パネルのスタイルタブを開き、書体（タイポグラフィ）の横にある鉛筆アイコンをクリックします。
-
サイズの項目のすぐ横に、PCのマーク（デバイスアイコン）があります。これをクリックしてください。
-
アイコンがモバイル（スマホ）に切り替わったら、スマホで見た時にちょうど良い数値（例：20など）を入力します。
これだけで、PCの時は大きく、スマホの時は小さく表示されるようになります。設定する際は、必ず画面下のレスポンシブモードでスマホ画面に切り替えながら、実際の見た目を確認して調整しましょう。
脱初心者！フォントの「単位（px・em・rem・vw）」を理解しよう
サイズ入力欄の横に、「px」「em」「rem」「vw」といったアルファベットが並んでいるのを見たことがありますか？ これらは文字の大きさを決める単位です。ここを使い分けると、一気にプロのWebデザインに近づきます。
-
px（ピクセル）： 絶対的なサイズです。24pxと指定すれば、どんな画面で見ても常に24pxです。分かりやすい反面、画面サイズに柔軟に対応できないのが弱点です。
-
em（エム）： 親要素（その文字が入っている箱）のサイズを基準にします。親が16pxで、子を2emにすると、2倍の32pxになります。少し計算が複雑になりがちです。
-
rem（レム）： Webサイトの大元（ルート）のサイズを基準にします。最近のWeb制作ではpxよりもこのremを使うのが主流ですが、HP制作を始めたての方はまずpxで慣れてからで大丈夫です。
-
vw（ビューポート・ウィズ）：今回の主役！ 画面の横幅に対する割合（1vw ＝ 画面幅の1%）でサイズが決まります。画面が広くなれば文字も大きくなり、画面が狭くなれば文字も小さくなる、魔法のような単位です。
【応用】魔法の単位「vw」を使って自動伸縮させよう
「PC・タブレット・スマホ、それぞれにサイズを入力するのが面倒くさい！」 「画面の幅に合わせて、滑らかに文字サイズを変えたい！」
そんな時は、単位を「vw」に変更してみましょう。
⚫︎ vwのおすすめの使い方
LPのファーストビューにある大きなキャッチコピーなどに最適です。 単位を「vw」にし、数値を4や5などに設定して、ブラウザの画面幅をマウスで伸び縮みさせてみてください。 まるでゴムのように、画面幅に合わせて文字が自動で大きくなったり小さくなったりするのが分かるはずです。
⚫︎ vwを使う時の注意点
画面幅に比例するため、スマホなどの極端に狭い画面で見ると、文字が小さくなりすぎて読めなくなることがあります。 スマホ表示の時だけは単位をpxに戻して固定のサイズを指定するか、少し大きめのvw値を設定し直すのが綺麗に見せるコツです。
まとめ
スマホの文字サイズがおかしい時は、タイポグラフィのデバイスアイコンをモバイルに切り替えて数値を入力
-
基本の単位は分かりやすいpxでOK
-
画面幅に合わせて自動で文字を伸縮させたい大きな見出しにはvwが便利！
文字サイズは、サイトのユーザビリティに直結する一番大切な要素です。 レスポンシブ設定と単位の仕組みを理解して、どのデバイスで見ても美しいサイトを作りましょう！
Elementor でのレスポンシブデザインについて過去の記事はこちら
