.png)
Wix Studioのタブレット文字サイズはいくつが正解？文字が極端に小さくなる悩みとデバイス別の推奨フォントサイズの決め方
- 3 時間前
- 読了時間: 9分
Wix Studioでサイトを作っていて、PC表示ではきれいに見えるのに、タブレットに切り替えた途端に文字が読めないほど小さくなっていた、という経験はありませんか。
実際に「タブレット表示だと本文が9pxくらいになってしまう」というつまずきは、Wix Studioを使い始めた方からよく聞く悩みです。
この記事では、Wix Studioのタブレット文字サイズがなぜ極端に小さくなるのか、その原因から、見やすい推奨サイズ、そしてPC・タブレット・スマホをまたいだデバイス別のフォントサイズの決め方までを、実際の制作現場の考え方にそって整理します。
数値の目安がわかれば、どのデバイスで見ても読みやすいサイトに近づけられます。
Wix Studioでタブレット表示の文字が9pxなど極端に小さくなる原因
まず押さえておきたいのは、Wix Studioのタブレットで文字が小さくなるのは不具合ではなく、レスポンシブデザインの仕組みが働いた結果だということです。
Wix Studioはレスポンシブデザイン、つまりPC・タブレット・スマホという画面サイズの違いに合わせて、レイアウトや文字の大きさが自動で変わる作りになっています。
この「自動で変わる」部分がポイントです。
PCで整えたレイアウトを、Wix Studioが狭いタブレットの画面幅に収めようとして要素を縮小するため、本文の文字サイズが意図せず9px程度まで小さくなってしまうことがあります。
PCのモニターで作業していると、この縮小には気づきにくいのが厄介なところです。
編集画面はPC表示が基準になっているため、PCではちょうどよく見えていても、タブレットに切り替えると初めて「こんなに小さかったのか」と気づくケースが少なくありません。
大事なのは、Wix Studioではデバイスごとに文字サイズを別々に設定できるという点です。
PCで18pxに設定していても、タブレット表示に切り替えて別の数値を指定すれば、タブレットだけ文字を大きくできます。
裏を返せば、デバイス別に見直さない限り、タブレットの小さすぎる文字はそのまま公開されてしまうということです。
だからこそ、各デバイスの表示に切り替えて一つずつ確認する作業が欠かせません。
結論：タブレットの文字サイズは14〜16pxが見やすい理由と直し方
結論から言うと、Wix Studioのタブレットの文字サイズは、本文でおおよそ14〜16pxに設定すると読みやすくなります。
デバイス別に推奨サイズを決めて設定していけば、文字が極端に小さくなるのを防げます。
なぜ14〜16pxなのか。
これは制作現場で数多くのサイトを手がける中で、タブレットの画面幅と閲覧距離のバランスから、この範囲が最も自然に読めると経験的にわかっている数値です。
9pxのように小さすぎると読むのに苦労し、逆にタブレットで大きくしすぎると1行に入る文字数が減って間延びした印象になります。
14〜16pxはその中間で、多くのサイトで無難に機能する目安になります。
直し方の手順はシンプルです。
編集画面の上部にある表示切り替えで「タブレット」に切り替える。
文字が小さくなっている段落（本文）を選択する。
フォントサイズを14〜16pxの範囲で指定する。9pxなど極端な値になっていたら、まずは14pxあたりから試す。
同じタブレット表示のまま、ボタンの大きさや横幅も読みやすく整える。
PC表示に戻し、PCとタブレットがそれぞれ別々に整っていることを確認する。
ここで覚えておきたいのは、タブレットで文字サイズを変えてもPCの見た目には影響しない、ということです。
Wix Studioはデバイスごとに独立して設定できるため、タブレットだけを安心して調整できます。
PCで4行に収まっていた見出しが、タブレットでは2行になるよう整える、といった具合に、デバイスごとに最適な形へ寄せていくのがコツです。
ここまでで基本の直し方はつかめますが、「自社サイトのどこをどう直せばいいか判断がつかない」という場合は、無理に一人で抱え込まず専門家に見てもらうのも一つの手です。
PC本文18px・スマホ12〜14pxまでデバイス別の推奨フォントサイズ一覧
タブレットの14〜16pxだけを覚えても、PCやスマホとの兼ね合いがずれると全体のバランスが崩れます。
ここでは本文（段落）を基準にした、デバイス別の推奨フォントサイズの目安を一覧にまとめます。
デバイス | 本文の推奨フォントサイズ | ひとことメモ |
PC（デスクトップ） | 18px程度 | 閲覧距離が遠いぶん、少し大きめが読みやすい |
タブレット | 14〜16px | 小さくなりすぎるので要チェック。最初に見直したい |
スマホ | 12〜14px | 画面が近いので小さめでも読める。詰まりすぎに注意 |
この表はあくまで本文を対象にした目安です。
実際の見え方はフォントの種類や行間、文字色とのコントラストによっても変わるため、数値を当てはめたら必ず各デバイスの表示で確認してください。
特にスマホは、横幅を実機で確かめながら決めるのがおすすめです。
編集画面のプレビューだけで判断すると、実際のiPhoneなどで見たときに詰まって見えたり、逆に間延びして見えたりすることがあります。
手元の端末で開いて、指でスクロールしながら読みやすさを体感すると、最適な値が見つけやすくなります。
なお、これらの数値は「絶対にこうしなければいけない」というルールではなく、多くのサイトでうまくいきやすい出発点です。
ブランドの雰囲気やターゲット層によっては調整の余地があるので、まずはこの目安から始めて、自社サイトに合わせて微調整していくとよいでしょう。
ブレイクポイントと文字サイズの関係を知ると設定がラクになる
デバイス別に文字サイズを設定していく上で、あわせて理解しておきたいのが「ブレイクポイント」です。
これがわかると、なぜタブレットとスマホで別々に文字サイズを設定するのかが腑に落ちます。
ブレイクポイントとは、画面の横幅がどこからどこまでを、どのデバイス扱いにするかという境界のことです。
Wix Studioでは、おおよそ次のように区切られています。
デバイス | 画面幅の目安 |
モバイル | 320〜750px |
タブレット | 751〜1000px |
デスクトップ | 1000pxより広い範囲 |
この境界ごとに、レイアウトや文字サイズを別々に設定できる、というのがレスポンシブデザインの基本です。
つまり、閲覧者の画面幅が751〜1000pxならタブレット用に設定した文字サイズ、320〜750pxならモバイル用に設定した文字サイズが適用される、という仕組みになっています。
タブレットの制作幅としては、デフォルトの768pxで作ることが多いです。
この幅を基準に文字サイズやレイアウトを整えておけば、タブレットのブレイクポイントの範囲で大きく崩れることを防ぎやすくなります。
ブレイクポイントを意識すると、「どのデバイスの、どの幅を想定して文字サイズを決めているのか」がはっきりします。
なんとなく直すのではなく、境界ごとに区切って考えることで、文字サイズの設定作業そのものがぐっとやりやすくなります。
見出しや英語表記でフォントサイズを変えるときの考え方
ここまでは本文（段落）を基準に推奨サイズを見てきましたが、見出しや英語表記になると考え方が少し変わります。
本文の14〜16pxという目安を、そのまま見出しや英字に当てはめると不自然になることがあるからです。
見出しは、本文よりも大きく設定するのが基本です。
見出しは内容の切れ目やページの階層を伝える役割があるため、本文と同じサイズだとメリハリがなくなり、どこが見出しなのかが伝わりにくくなります。
デバイスごとに本文サイズを決めたら、それに対して見出しは一段階以上大きく、という相対的な考え方で設定すると整えやすくなります。
英語表記も注意したいポイントです。
同じフォントサイズでも、日本語と英語では見た目の大きさや占める幅の印象が変わります。
英字のロゴやキャッチコピーは、日本語本文と同じ数値にすると小さく見えたり、逆に主張が強すぎたりすることがあるため、実際の表示を見ながら微調整するのがおすすめです。
つまり、デバイス別の推奨フォントサイズ（タブレット14〜16px、PC18px、スマホ12〜14px）はあくまで本文の基準値であり、見出しや英語表記はその基準からどれくらい変えるか、という視点で決めるのが実務的です。
すべての要素を一律の数値で揃えるのではなく、役割に応じてサイズを使い分けることで、読みやすさとデザインの完成度が両立します。
ここまでの内容を自社サイトに落とし込もうとすると、要素ごとの調整に思いのほか時間がかかるものです。
「デバイス別に整えたいけれど手が回らない」「プロの目で仕上げてほしい」という場合は、お気軽にご相談ください。
よくある質問（FAQ）
Q. Wix Studioでタブレットの文字サイズは何pxにすればいいですか？
A. 本文（段落）でおおよそ14〜16pxが目安です。
9pxなど極端に小さくなっている場合は、まず14px程度から試して、実際のタブレット表示で読みやすさを確認してください。
Q. なぜタブレット表示だけ文字が9pxのように小さくなるのですか？
A. Wix StudioがPCで作ったレイアウトを狭いタブレット幅に収めようと要素を縮小するためです。
不具合ではなく、レスポンシブデザインが働いた結果なので、タブレット表示に切り替えて手動で文字サイズを直せば解決します。
Q. PCの文字サイズを変えるとタブレットやスマホの文字も一緒に変わりますか？
A. いいえ。
Wix Studioはデバイスごとに独立して文字サイズを設定できます。
PCを18pxにしても、タブレットやスマホの表示には影響しないので、それぞれ別々に調整してください。
Q. PC・タブレット・スマホの推奨フォントサイズをまとめて教えてください。
A. 本文を基準にすると、PC18px程度、タブレット14〜16px、スマホ12〜14pxが目安です。
フォントの種類や行間によって見え方が変わるため、各デバイスで確認しながら微調整してください。
Q. ブレイクポイントの画面幅の区切りはどうなっていますか？
A. おおよそモバイルが320〜750px、タブレットが751〜1000px、それより広い範囲がデスクトップです。
この境界ごとにレイアウトや文字サイズを別々に設定できます。
Q. タブレットの制作幅は何pxで作ればいいですか？
A. デフォルトの768pxで作ることが多いです。
この幅を基準に整えておくと、タブレットのブレイクポイント（751〜1000px）の範囲で崩れにくくなります。
Q. 見出しや英語表記も本文と同じ14〜16pxでいいですか？
A. 見出しは本文より一段階以上大きくするのが基本です。
英語表記は同じ数値でも見た目の印象が変わるため、実際の表示を見ながら本文とは別に微調整するのがおすすめです。
Q. スマホの文字サイズはプレビューだけで決めても大丈夫ですか？
A. 実機での確認をおすすめします。
編集画面のプレビューだけでは詰まり具合や横幅の印象が実際と異なることがあるため、iPhoneなどの手元の端末で開いて読みやすさを確かめると失敗が減ります。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
