デバイスフォントの特性をしっかり理解しよう！ブラウザに表示できるフォントは限られている

どうも、Tommy(@SitommyBlog)です。

デザインと言えば、『文字の間隔の調整』は必須ですよね。

Webではそれが裏目にでるケースがあります。それについて、共有していこうと思います。

印刷物とWebの違い

印刷物のデザインでは、文字間や行間を細部に渡って調整します。

文章・デザイン全体のバランスを意図しながら、文字をより読みやすく工夫をするのがデザイナーの仕事でもあります。

もちろん、Webデザイナーも考え方は同じですが、印刷物と大きな違いがあります。

それは、ユーザーの閲覧環境によって最終的な見栄えが変わってくるということです。

ユーザーの閲覧環境というのは、『デバイス・OS・ブラウザの種類・ブラウザの設定』などを言います。

なので、Webでは『文字間・行間を再現することは限界がある』ということを知っておきましょう。

消して出来ないわけではないので、勘違いしないでください。

デザイン通りにならないこともある

デザイナーが、PhotoshopやIllustratorなどで文字の間隔調整をしても全く同じようにWebで表現することは困難になってきます。

デバイスフォントの文字同士の間隔や1行の文字数や改行位置、行数を厳密に指定することは出来ません。

見出し部分以外のテキストはなるべく閲覧環境が多少変わっても問題ないような設計にしておくことを心がけましょう。

見出し部分など凝ったテキストで表示したい場合は、画像等にして出力するしかないでしょう。

ただ、なるべくテキスト化にすることで、データが軽くなりロードの読み込みが早くなりますし、SEO上テキストの方がメリットが大きいです。

Webデザイナーは、ある程度Webの性質を知っておかないと仕事に支障で出てきます。

現場ではよく、デザイナーvsマークアップエンジニアとなってしまうことがあります。

デザイナーからしたら、「マークアップ（コーディング）のプロなら出されたデザインを再現しろよ！」と思う人も多いです。

私は、両方携わるのでどちらの気持ちもわかりますがどちらかというとマークアップチームよりにはなってしまいます。

そもそも、『Webデザイナー』と名乗る以上、Web知識は必須だと思っています。

なので、私と同じデザインもやりたい方やWebデザイナーを目指している方は、ある程度は理解した方が自分自身のためでもあります。

ただ、デザイナーからの意見を言わせてもらうと、マークアップを意識しすぎるとデザインも単調になりやすかったりします。

私がデザインする際は、まずマークアップは意識せずデザインをします。

そこから、自分自身ならこうやってコーディングを組むかな、など考えます。

基本的に、組めないデザインはないというスタンスではいるので。

すみません、少し矛盾している部分もありますが、私がデザインをする際は、私自身組めないデザインはしないということと、どうしてもデザインに凝りたい場合は相談します。

予め相談することで、揉めることを極力少なくしております。

キャンペーンページやランディングページは別として考えましょう！

先ほど、画像化することはあまりオススメしないと言いましたが、キャンペーンページ（通称：CP）やランディングページ（通称：LP）みたいな特設サイトはまた別として制作していきます。

もちろんテキストにできるのであればそれにこしたことはないですが、特設サイトということもあって『特別感』を全面に出す必要があります。

こういったページで特別感を出すためには、やはりテキストなどにも装飾は必要になってきますので画像として切り出すことももちろんします。

ランディングページに関しては、検索から直接ランディングページに飛んでもらうというものではなく、SNSや何かしらの媒体を使って「こういう商品がありますので購入しませんか？」と促すページになるので、あまりSEOを気にしなくてもいいんです。

そのため、画像をメインにコーディングを組むケースが多いです。

まとめ

デバイスフォントで表示する部分は文字詰めや行数指定は避け、画像化のデメリットをしっかり把握し何のための文字組みかを考えましょう。

また、画像にするのであれば、文字詰めには細心の注意を払って調整しましょう。

CSSの指定で、『letter-spacing』というプロパティーがあります。

こちらの値を調整すると文字間隔の調整が出来ます。

また、『line-height』というプロパティーで行間も調整することが出来ます。

ただ、Photoshopでデザインと同じような間には出来ませんのでデザイナーは知っておくと良いでしょう。

コーディングする人は、プロパティーで調整できるものはちゃんとしておきましょう。