0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WEBコーディング前に確認したいフォントについて

Last updated at Posted at 2019-10-08

#おすすめフォント

フォント 自動カーニング デバイス デメリット
ヒラギノ MAC Windowsでは有料フォント
遊ゴシック MAC/Windowsどちらも IE11で崩れがある(都度調整がいるため回避策なし)
Noto Sans 全てのデバイス Webフォントなので重い
メイリオ Windows Macにはoffice入れるなりDLする必要あり
ない!

##ヒラギノデザインの場合
mac依存フォント windowsではだいたいメイリオにしてと言われる、(遊ゴシックよりは似てるからかな?)
これが困る。

この時点でデザイン時にカーニング(V/Aみたいなの)にオプティカルとか自動とか設定されていたら問題が発生する。

ヒラギノ 自動カーニングOK
メイリオ 自動カーニングできない

自動カーニングはCSSでのfont-feature-settingsでできますが、各フォントによりその情報がないとできません。

自動カーニングではなくきっちりと値を入力してほしい
(そもそもタイトル部分ではなく文章部分なら使わないほうがいいのかなとも思います。)
 
※ここでの問題はデザインと違うといわれること、(改行位置が違ったり最悪の場合カラム落ちしたり)

###ヒラギノで作成されたデザインをWindowsで見た場合
アウトラインで作成していただければデザインは見れる
そうでないとデバイス依存デザインになってしまう

windowsではメイリオと指定されているのに
何故デザイナー及びデザイン確認者はメイリオにフォントを変えてデザイン作成せず確認しないのだろうか?

####誰の責任?
もしmacで見て崩れが起きていればそれはコーダーの責任だけど
しかしwindowsで崩れがおきていればそれは崩れが起きる可能性があることを示唆する必要があります。
誰も確認していない状況がコーダーにはとにかくまずい(このデザインでいけますと発言したことと同義だと思う)ので、
コーディング開始前に伝えておいたほうがいいです。

ヒラギノ=メイリオではないのは皆わかっているはずなのに

##遊ゴシックデザインの場合
Windows7の場合手動でフォントをDLする必要がある
IE11で天地中央表示(flexbox)などした場合何故かズレが生じる
(おそらくAタグをflexboxしたらかな。。)
なので大抵はIE11のみメイリオに変更している。

###遊ゴシックで作成されたデザインを各OSで見た場合
Mac/Windowsどちらでも使えるフォントなので、デザインを見ることは可能

###誰の責任?
ヒラギノの時とほぼ同じなので省略。
Windows7のみ手動でフォントをDLする必要があること、
IE11のみ崩れが起きるのでメイリオに変更する必要があることを周知しておきたい。
ちゃんとWindows7のChromeで見た場合もここまで案件対象か確認もしておくことが望ましい

##WEBフォントデザインの場合
これならどのデバイスでも大丈夫。
だけどgoogleフォントは自動カーニングできなくなったので
デザイナー様はgoogleフォント使うのならカーニングは数値でお願いします。
自動で全ての文字ではないけど約物半角専用のWebフォントを先に読み込むことで解消させる方法もある
縦書きの場合、Webフォント自体や他にCSSプロパティを付与したことが原因でうまくいかないことがあるので縦書きの場合は作ってみないとわからない事が多々ある。

###有料フォント(タイトルなどの一部分でも)デザインの場合
デザイナー様やデザイナー様の所属する会社が所有していてもコーダーは持っていないことが多々あるので、
アウトライン化しておかないと今度は有料フォント所持依存デザインになってしまう

また有料フォントなのかWEBフォントなのか実際フォントを調べないといけない時間もかかる

TypeSquareやAdobeフォントもpv数に応じて有料になっていくので
これを制作関係者隅々まで周知させているかを徹底してほしい
(最終的にお客様が認知しているかどうか)
googlemapもそうだけど永久タダのほうがいいに決まっている。
有料になるPV数これくらいだから絶対大丈夫ですよ?
だれもそれだけリニューアルしても見に来ませんよってお客様に言える人がいるかどうか。

###どうしてそのフォントをベースフォントにしたの?
WEBは誰しもが同様にどのデバイスでも同じように見れる・または内容が伝わるように作成しているかと思います。
(そのためにwindows7のIEとも戦っている。)
WEBデザイナー様はデザイン確認者がOKを出せばそこでゴールとなり作業終了ではないと思いたいです。
とりあえずコンペで受かりたかったためキレイだけどデバイス依存フォント使っちゃいました。
といってくれるほうがコーディング作業の覚悟(見積もり増)もできる。

####デザイナー様へ
MacでWindows見れるようにしているのは必ずしもMacユーザー全員ではない
その恩恵はやはりMacから簡単にヒラギノフォントをWindowsに使用できたり(個人利用なら問題はないらしい)、
Microsoft officeを入れていればメイリオをMacで見れたりもする。
だけどそれは半分いたらいいほうだと勝手に思っている(windows7 のIE11もこれくらいいればいいのに)

私が主にWindowsを使っているのでヒラギノを例にだしましたが、ヒラギノやMacが悪いのではなく、
現状どのデバイスもなんか見やすく有名でカーニングができて、といったフォントは(おそらくこれからも)ないのだから、
どこかで(コーダーではなくもっともっと早い段階で)共有して落とし所をつけておくかだと思います。
最終的な確認で発覚し修正が多発することにならないように、
コーダーだけが防波堤になってしまうことがないように。

あとコーダーは英字のみのフォントはフォントサイズと高さ違うから上下のマージンちゃんと計算しないとダメですよー。
デザイナー様は計算が複雑になるから一行の場合行間いれないでくれたらすごく助かります。

ありがとうございました。

0
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?