✅【初心者向け】letter-spacingとline-heightに適切な単位を指定しよう！カンプ（AdobeXD・Figma）から読み取る方法まで解説！

WebWeb制作では、文字の見た目がとっても大事！📝
特にCSSでよく使う

• letter-spacing（文字間）
• line-height（行間）
  は、サイトの読みやすさ・可読性に直結します！

この記事では、

デザインカンプ（AdobeXD・Figma）を見るときの注意点
をわかりやすく解説します！✨

適切な単位の指定方法

なぜその単位がベストなのか

---

まず基本をおさらい！letter-spacingとline-heightとは？🧐

✅ letter-spacingとは？

文字と文字の間の間隔を設定するCSSプロパティです！

例えば、文字同士がギュウギュウに詰まっていると読みにくいですよね？
letter-spacingを使うと、適度な余白を作って読みやすくすることができます✨

---

✅ line-heightとは？

行と行の間隔を設定するCSSプロパティです！

これが適切じゃないと、文章が詰まりすぎたり、逆にスカスカすぎたりしてしまいます💦
line-heightを調整することで、快適に読める文章レイアウトが作れます！

---

適切な単位はこれ！🎯

【letter-spacing】は「em」で指定するのがオススメ！

letter-spacing: 0.05em;

📝 ポイント

• emは「現在のフォントサイズ」を基準にした単位です。
• つまり、フォントサイズが変わっても、文字間のバランスが崩れない！✨
• どんなデバイスでも自然な見た目になります！

---

【line-height】は「単位なし（数値だけ）」で指定するのがオススメ！

line-height: 1.6;

📝 ポイント

• 単位なし（例: 1.6）で指定すると、フォントサイズに対して倍率で間隔を決められます。
• これもまた、フォントサイズが変わったときに自然な行間を保てるんです！✨

たとえば—

• フォントサイズが16pxなら、16px × 1.6 = 25.6pxの行間
• フォントサイズが20pxなら、20px × 1.6 = 32pxの行間

というように、自動でいい感じに間隔が調整されます🎯

---

なぜこの単位が適切なの？🤔

letter-spacingに「em」が向いている理由

• ✅ フォントサイズに比例して、自然な文字間になる！
• ✅ 画面サイズ（PC・スマホ）やデザイン変更にも強い！
• ✅ 小数点指定ができて、微調整もしやすい！

💬 たとえば、PCでは大きめ、スマホでは少し小さめの文字サイズにしても、文字間のバランスが保たれるので安心！

---

line-heightに「単位なし」が向いている理由

• ✅ 文字のサイズに合わせて行間が自動調整される！
• ✅ 余計なpxやem単位を書かなくて済むので、CSSがシンプル！
• ✅ メディアクエリ（レスポンシブ対応）でも手間が減る！

💬 逆に、pxやemでline-heightを指定すると、フォントサイズを変更したときに行間が合わなくなるので、管理がとても面倒になります💦

---

✅ デザインカンプからどう読み取る？【AdobeXD・Figma編】

コーダーは、実際にデザインカンプ（AdobeXDやFigma）を見ながらCSSを書いていきます！

ここで、カンプから正確にletter-spacingとline-heightを読み取ることが大事です。👀

---

【AdobeXDの場合】

AdobeXDでテキストを選択すると、CSSの書き出しにこんな表記がされます👇

font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/32px var(--unnamed-font-family-yu-gothic);
letter-spacing: 1.6px;

✅ ポイント！

• var(--unnamed-font-size-16) ➔ 16px
• /32px ➔ 行間32px（line-height）
• letter-spacing ➔ 「letter-spacing ÷ フォントサイズ」でemに変換！

このように、AdobeXDでは
行間がpx単位で表記される
のが特徴です。

✅ 具体例

例1）

• フォントサイズ：16px
• line-height：32px
• letter-spacing：1.6px

なら…

line-heightの場合

32 ÷ 16 = 2

line-height: 2;

letter-spacingの場合

1.6 ÷ 16 = 0.1

なので！

letter-spacing: 0.1em;

と書きます。

---

【Figmaの場合】

Figmaでテキストを選択すると、情報パネルにこう出ます👇

項目	値
フォント	Kosugi Maru
太さ	400
サイズ	18px
行間	200%
文字間隔	20%

✅ ポイント！

• フォントサイズ ➔ 18px
• 行間 ➔ 200%（倍率で指定されている！）
• 文字間隔 ➔ 20%（フォントサイズに対する比率！）

Figmaはパーセンテージ表記が多いのが特徴です！

---

✅ カンプをもとにCSSをどう書く？【具体例】

例えばFigmaにこう書かれていたら👇

| フォント | Kosugi Maru | | 太さ | 400 | | サイズ | 18px | | 行間 | 200% | | 文字間隔 | 20% |

これをCSSに落とし込むにはこう考えます！

---

🎯 1. フォントファミリー・サイズ・太さを指定

font-family: 'Kosugi Maru', sans-serif;
font-size: 18px;
font-weight: 400;

---

🎯 2. line-height（行間）を設定

行間200% ➔ フォントサイズの2倍の高さ。

なのでCSSでは単位なしでこう書きます！

line-height: 2;

✅ 単位を付けないのがポイント！（line-height: 2;とだけ書く）

---

🎯 3. letter-spacing（文字間）を設定

文字間隔20% ➔ フォントサイズの20%の幅だけ空ける。

計算すると

• 18px（フォントサイズ）× 0.2 = 3.6px

これを「em」に直すと

• 3.6 ÷ 18 = 0.2em

なのでCSSではこう！

letter-spacing: 0.2em;

---

✅ まとめたCSSはこうなる！

font-family: 'Kosugi Maru', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 2;
letter-spacing: 0.2em;

これでカンプ通り、しかも崩れにくいコーディングができます！✨

【まとめ】適切な単位を使えばデザインが美しくなる！

• ✅ letter-spacingは「em」で指定！（フォントサイズに応じた自然な文字間に）
• ✅ line-heightは「単位なし」で指定！（フォントサイズに比例した自然な行間に）

このルールを守るだけで、読みやすくて美しいサイトが作れるようになります🌸

CSSを書くときに、ぜひ意識してみてくださいね✨

---

✨おわりに

文字の細かい設定は地味に見えて、実はとても大事なポイントです！
ぜひ今日から、letter-spacingとline-heightを適切な単位でスマートに設定してみましょう🖋️🚀

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです！