UTAGEとCanvaでフォントサイズを統一する方法

UTAGEのスマホ表示（モバイルビュー）における
画像の文字とテキストの文字サイズのギャップを埋めるための
具体的な設定値と計算方法を回答します。

結論から言うと、スマホでの見た目を揃えるには
「Canvaで作る文字サイズを、UTAGEで設定する数値の約2.8〜3倍にする」
のが黄金比（目安）です。

これは、スマホの画面幅（約375〜390px）に対して、
Canvaの画像（通常横幅1080pxなど）が約1/3のサイズに
縮小されて表示されるためです。

今回は見本のページも最後に貼り付けてあります
実際、今ご覧の端末で比較してみてください。

以下に、そのまま使える設定目安の表と手順をまとめました。

1. 【推奨】スマホ表示を統一するための設定値リスト

UTAGEの「スマホ設定」とCanvaのフォントサイズの組み合わせ目安です。

※Canvaのキャンバスサイズが「横幅 1080px」の場合を想定しています。

テキストの種類	UTAGE設定 (スマホ)	Canva設定 (横幅1080px時)	見た目の印象
大見出し (Head)	24px 〜 28px	68px 〜 80px	インパクト大
中見出し (Sub)	20px 〜 22px	56px 〜 62px	読みやすい見出し
本文 (Body)	16px	45px 〜 48px	標準・可読性重視
注釈・小文字	12px 〜 14px	34px 〜 40px	補足情報

2. 具体的な調整手順

優先順位の高い「スマホでの統一感」を出すために、以下の順序で設定してください。

手順①：UTAGEで「スマホ用」の文字サイズを固定する

UTAGEの編集画面で、各パーツ（ヘッド・サブヘッド・本文）の「スマホ」タブを選択し、上記の推奨値（例：本文16px）を入力します。

• ヘッド：24px
• サブヘッド：20px
• 本文：16px

手順②：Canvaで画像を作成する

UTAGEで決めたサイズを元に、「× 2.8」 または 「× 3」 程度のサイズで文字を入れます。

• 「UTAGEの本文と合わせたいな」と思ったら、16px × 3 = 48px くらいでCanvaに入力します。

手順③：実機で確認して微調整（重要）

PC上のプレビューと実際のスマホでは、文字の太さ（ウェイト）によって「画像の文字の方が細くて小さく見える」ことがあります。

• Canvaの文字は、**少し太めのフォント（Boldなど）**を選ぶと、UTAGEのブラウザ文字と馴染みやすくなります。

3. PC用の設定（参考）

スマホの設定が終わったら、PC用の設定は別途行います。PCは画面が広いため、スマホより大きく設定するのが一般的です。

• 大見出し (Head): 32px 〜 40px
• 中見出し (Sub): 24px 〜 28px
• 本文 (Body): 16px 〜 18px
  • ※本文はPCもスマホも16pxで統一することが多いです。

この基準で設定していただくと、画像とテキストが切り替わる部分でも違和感が少なく、プロっぽい仕上がりになります。