なんでなん？XDデザインのフォント行間/文字送りとCSSの違い。

こんにちはSHIKAです。

始めてのLP改修作業に追われて連続更新が止まりそうでしたがピンチはチャンス。

困った経験をまとめりゃいいじゃんって事で今日はそんな話題。

間違ってる事も結構あるかもです。有識者のご意見アドバイスとかいただけたらめちゃくちゃ嬉しいです。

それは本題。

LP改修とかLP制作でデザインデータをAddobeXDで渡されたりするけどフォントサイズあわせても行間とか全く合わなくてイライラするぜこんちくしょーーー！って話です。

多分ね、どの業界でも暗黙の・・・とか。これくらい知っててよ・・・。とか色々あると思うんですよ。

色んな現場いってたりした経験からちょっとした業務の違いとか全く違う業務した時とかにさも”当たり前”のようにこれくらい知っといてよと雰囲気をだされるたびに”涙を流し続けた”わたくしですがおかげで人の常識なんてあてにならんと視野も広がったしメンタルも強くなった気もします。

ほんでまぁ今回は納期に追われる身なのでサクっと書きます。

指定されたデザインのフォントサイズとフォントファミリー一致してるのにデザインずれるのなんで！？

って話です。

”行送り”と”行間”ですね。

デザインデータを最初から指定してくれるなり、CSSと互換性だしてくれりゃいいのにXDのデータぱっと見ても初心者に毛の生えた私にはわかりづらい。

たとえばここでAVって書いてあるのが文字間隔なんですが。これはアダルトビデオの略ではなく”トラッキング”とかいうそうです。

でも、これ単位も何も書かれていないのです。

そしてCSSでどのプロパティを指定するの？ってのも分からない。

おじさんは頭を抱えて涙しました。

しかし泣き終えた後に冷静になって調べると・・・。

どうやら変換する計算式があるそうです。本当に情報に感謝です。

それではトラッキング値の変換方法。

”トラッキング数値 ÷ 1000”

これで出た値をCSSの「letter-spacing」に”em”で設定するそうです。

この場合であれば75÷1000=0.075　なのでcssには”letter-spacing : 0.05em ;”を設定すれば行間が合います。

この情報に気付いたのは頭を抱えつくした後でした。

そして次に”行送り”。画像で色が青になっている箇所です。

こちらは文字と文字の縦の余白を指定する値なのですが、

行送りの数値（px）÷ フォントサイズ（px）をCSSでline-heightに指定する事で実装可能。

だそうです。

今回の例ですと。

28÷15=1.8666...なので1.86。

line-heightについては単位なしで表記が良いとされているそうです。

なのでCSSにline-height : 1.86 ;と表記します。

それでは本日のまとめ。

〇XDにAVと書かれているのはトラッキングといって文字間隔を示すもの。

実装するには、CSSに「letter-spacing」”トラッキング数値 ÷ 1000”の値をに”em”で設定。

〇行送りは”文字と文字の縦の余白”を示すもの。

実装するには、行送りの数値（px）÷ フォントサイズ（px）をCSSでline-heightに指定する事で実装可能。

で、なんでSHIKAおじさんがこんな簡単な事にイライラしてるのか？馬鹿なの？キレキャラなの？って話なんですが。

まぁ喉元すぎればそんな大した事じゃないんですけど”通例”とか”常識”とかそれは共通認識ではないし共通認識なんだとしたらわかるようになってればいいのにって話なんですよね。

この思いで現場が変わるたびに何度マニュアルを作ってきたことか・・。

まぁ調べればわかる事なんで、だから皆調べろよっていうのも分かるんですけどね・・。

けど調べ方も”テクニック”や”ノウハウ”があって最初から”既に確率されていることだったらわざわざ時間かけて悩む必要もない事”なのになぁって思うんですよね。それで作業遅れたり納期送れるほうが依頼した側も困る訳ですし。

まぁ、このへんは賛否両論あるしチーム管理してた時は全部マニュアル化してたけど、メンバーの思考力を伸ばすって考え方ではマニュアル与えすぎもよくないって意見もあるのかもです。ただ、別に確率された事あらためて辿ることで鍛えなくてもよくね？とは思ったり。まぁ愚痴ですねｗ

SHIKAがただの文句いいのギアッチョさんなだけかもしれません。笑

荒木飛呂彦先生マジリスペクトです。

さて、今日はここまで。

あやうく連続更新記録が途絶えるところでしたが転んでもただでは起きません。良い勉強になりました。

結果何か学ぶたびに終わってみればいつも”ありがとうございます”って気持ちになるので、だったらイライラしなきゃいいのに毎回思うのですがまだまだ修行がたりません。器が小さいですね。それこそペットボトルの蓋くらいに・・。笑

それでは皆さま、今日も自然体で自由かつ豊かな暮らしを。