2018.08.20
Webデザインで使用できるフォント徹底解説。デバイスフォント、Webフォント、画像データの違いと特徴
グラフィックデザイナーでWebデザインにもリーチを広げているような方によく起こる問題として、フォントのトラブルがあります。フォントはデザインにおいて非常に重要な要素であり、最も注意すべきポイントですが、Webデザインでは使用できるフォントに制限があります。
Webデザインで文字を扱う場合、その文字がどのように実装されるのかを把握したうえで、デザインやフォントを選択しなければなりません。ここをあいまいにしてしまうと、コーディングに大きな負荷がかかったり、最悪の場合実装不可能なデザインになってしまうのです。
この記事ではWebでの文字の表現方法を整理し、デザインをする際にどのようにフォントを選択すれば良いかをまとめました。
文字データ種類とフォントの一覧
先に文字データの種類使用できるフォントをまとめてみます。
Webにおける文字データの種類
| データの種類 | フォントの種類 | 特徴 |
|---|---|---|
| 画像データ | – | CSSでのホバーアニメーションで色や文字間などを変更できない。 修正・展開が手間。 フォントの選択は自由。 |
| テキストデータ | デバイスフォント | 多彩なCSSホバーアニメーションが可能。 修正・展開が容易。 フォントの選択はOSの違いを考慮する必要があり。游ゴシックやメイリオであれば幅広く対応。 |
| Webフォント | 多彩なCSSホバーアニメーションが可能。 修正・展開が容易。 OSの違いに関係なく使用可能。 和文フォントは非常に重い。 |
テキストデータで使用できるフォント
| フォントの種類 | 和欧 | フォント |
|---|---|---|
| デバイスフォント | 和文 | メイリオ |
| 游ゴシック 游明朝 | ||
| 欧文 | Arial | |
| Times New Roman | ||
| Webフォント | 和文 | Noto Sans CJK JP Noto Serif CJK JP |
| モリサワ TypeSquare | ||
| 欧文 | Google Fonts いろいろ |
それでは詳細を説明していきます。
文字データの種類
画像データ
JPEGやPNGなどの画像データとして文字を表示する方法です。ロゴマークなど、形が加工されておりテキストデータでは再現できない文字などを表示する場合に使用します。
ひと昔前はボタン風のリンクなど、装飾されたテキストにも画像が使用されていましたが、CSS3が登場し複雑なデザインをコーディングで実装できるようになった現在では、極力テキストデータで実装したほうが良いです。
テキストデータ
- RESULT
- HTML
- CSS
そうです、私が、テキストデータの文字です。
- コピー
<p>そうです、私が、テキストデータの文字です。</p> - コピー
- コピー
文字をドラッグして一文字ずつ選択できるのはテキストデータです。Webサイトにおいて読ませることを目的とした文字は、ボタンなどであっても極力テキストデータで実装したほうが良いです。理由は以下の通りです。
- 文字修正が容易
- スマートフォン対応が容易
- 同じデザインで文字が異なるボタンがたくさんある場合、実装が非常に楽
- 複雑でリッチなホバーアニメーションを実装できる
例えば以下のようなデザインのボタンを作る場合、画像データの場合は3つデータを作成しなければなりませんが、テキストデータの場合はひとつCSSを書けばそれで終わりです。また画像データの場合、ホバーアクションをCSSで実装しようとすると薄くする程度のことしかできず、もし色など変えようとするとホバー後の画像を作成する必要があります。テキストデータであれば、CSSのみで複雑なホバーアクションを実装できるので簡単ですし、何より表現が豊富です。
- RESULT
- HTML
- CSS
- コピー
<p class="sample01"><a href="#">もっと見る</a></p> <p class="sample01"><a href="#">今すぐ申し込む</a></p> <p class="sample01"><a href="#">すぐにでも会いに行く</a></p> - コピー
.sample01 a{ width: 180px; padding:15px; margin:0 0 10px; color:#ffffff; font-size: 15px; line-height: 120%; text-align: center; text-decoration: none; background: #1B73BA; display: block; position:relative; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; -webkit-box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3); -moz-box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3); box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .sample01 a:hover{ background:#ddd; letter-spacing:0.1em; } - コピー
また、かつては見出し要素などを凝ったデザインにするために画像を使用するケースなどがありましたが、それもスマートフォン対応のことを考えると現実的ではありません。
フォントの種類
どのようなデータにするかにより、使用できるフォントが異なります。デザインデータを作成する際に最も気を付けなければならないのがこれです。
画像データの場合、フォントは自由
最終的に画像として出力されるので、どのようなフォントでも使用可能です。デバイスフォントやWebフォントが存在しないフォントはもちろん、変形した文字や手書きの文字などなんでも実装可能です。
デバイスフォント
テキストデータで文字を実装する際に、閲覧者の端末内にあるフォントを使用して表示するのがデバイスフォントです。閲覧している端末内にフォントデータがあるので、表示が軽量という利点があります。使用できるフォントはいろいろとありますが、WindowsやMac、iPhoneなど閲覧環境によってインストールされいているフォントが異なるので、さまざまな環境で共通のものとなるとかなり限られてきます。
なおPCのフォントは初めからインストールされているものと、自分でインストールしたもの、ソフトウェアをインストールした際に一緒に入ったものなどがあります。デザイナーやコーダーはOfficeソフトやAdobeソフトをインストールしているため、一般ユーザーよりも多くの特殊なフォントがインストールされているので注意が必要です。自分の環境では表示できていても、一般ユーザーが見るとフォントが違って見えてしまうという問題が起りがちです。
オススメは以下です。
メイリオ
- RESULT
- HTML
- CSS
そうです、私が、メイリオです。
- コピー
<p class="sample02">そうです、私が、メイリオです。</p> - コピー
.sample02{ font-family:"メイリオ"; } - コピー
Windows、Mac、iPhoneに搭載されているフォントです。昔からあり最もよく使われがちですがあまり素敵なフォントではないです。なんだか丸っこくてかわいい印象があり、サイトのテイストによってはミスマッチになりえます。
游ゴシック
- RESULT
- HTML
- CSS
そうです、私が、游ゴシックです。
- コピー
<p class="sample03">そうです、私が、游ゴシックです。</p> - コピー
.sample03{ font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium"; } - コピー
Windows、Mac、iPhoneに搭載されているフォントです。綺麗なフォントながら最近のWindowsにもMacにも搭載されているので、近年Web制作業界内で急激に支持が増えたフォントです。特にこだわりが無ければこちらを使用するのがベターです。メイリオより上品な雰囲気があります。
ただし古いブラウザ（Internet explorer 11 以下）で上下の位置がズレて見えるバグがあるのと、WindowsとMacでウエイトが異なって見える問題があるので要注意です。ウエイトに関しては以下の記事の方法で対策できます。
https://www.tomotanuki.com/entry/yugothic-weight
游明朝
- RESULT
- HTML
- CSS
そうです、私が、游明朝です。
- コピー
<p class="sample04">そうです、私が、游明朝です。</p> - コピー
.sample04{ font-family: "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium"; } - コピー
デバイスフォントで明朝体を使用するならおすすめです。ただしAndroid端末にはいかなる明朝体フォントもインストールされていないため、CSSで「serif」を指定したとしてもゴシック体で表示されてしまいます。Androidで印象が大きく変わってしまうことを避けるなら、デバイスフォントで明朝体を選択するのはやめましょう。
Arial
- RESULT
- HTML
- CSS
Yes, I am Arial.
- コピー
<p class="sample05">Yes, I am Arial.</p> - コピー
.sample05{ font-family: Arial; } - コピー
どっしりとしたサンセリフ体です。Helveticaのコピーフォントなので使いやすいです。
Times New Roman
- RESULT
- HTML
- CSS
Yes, I am Times New Roman.
- コピー
<p class="sample09">Yes, I am Times New Roman.</p> - コピー
.sample09{ font-family: Times New Roman; } - コピー
Times紙の本文用に開発されたフォントですので、やや古風な雰囲気です。本文に使用するのに向いています。
和文フォントと欧文フォントを混合して使用する
CSSでフォントを指定する際、欧文フォントを先に、和文フォントを後に指定すれば、同じ文章のうち半角英数記号のみ欧文フォントに指定することが可能です。ただしIllustratorやInDesignの合成フォント機能のように、フォントごとにサイズやベースラインを微調整することはできないので、必ず見た目を確認してから使用しましょう。なお游ゴシックであれば英数字も比較的美しいので、和欧混合して使用しなくても十分です。游ゴシックを使用しておくのが無難でしょう。
- RESULT
- HTML
- CSS
メイリオのみ
初代準男爵、サー・ハンフリー・デービー（Sir Humphry Davy, 1st Baronet、1778年12月17日 – 1829年5月29日）は、イギリスの化学者で発明家。- コピー
<p class="sample10">メイリオのみ<br />初代準男爵、サー・ハンフリー・デービー（Sir Humphry Davy, 1st Baronet、1778年12月17日 – 1829年5月29日）は、イギリスの化学者で発明家。</p> - コピー
.sample10{ font-family:"メイリオ"; } - コピー
- RESULT
- HTML
- CSS
メイリオ + Arial
初代準男爵、サー・ハンフリー・デービー（Sir Humphry Davy, 1st Baronet、1778年12月17日 – 1829年5月29日）は、イギリスの化学者で発明家。- コピー
<p class="sample11">メイリオ + Arial<br />初代準男爵、サー・ハンフリー・デービー（Sir Humphry Davy, 1st Baronet、1778年12月17日 – 1829年5月29日）は、イギリスの化学者で発明家。</p> - コピー
.sample11{ font-family:Arial,"メイリオ"; } - コピー
なおCSSで指定可能なデバイスフォントは以下のページで確認できます。
https://w3g.jp/sample/css/font-family
Webフォント
テキストデータで文字を実装する際に、Web上にあるフォントデータを読み込んで表示するのがWebフォントです。どのようなOSでも同じフォントを表示することが可能なので、デザインのクオリティを高めることができます。
和文フォント
Webフォントの難点は和文、つまり日本語フォントです。和文は欧文などに比べ文字量が多く、フォントデータが非常に重いため、ページの読み込みがものすごく遅くなるという大きなデメリットがあります。表示速度の差で離脱率が大きくなるサイトでは使いにくいでしょう。
欧文フォント
和文フォントにくらべ、欧文フォントはデータサイズも軽く使い勝手が良いです。ただし、同じテキストに和文フォントと欧文フォントを混ぜて使用するのには注意が必要です。本文で和文フォントと織り交ぜて使用する場合、グラフィックソフトの合成フォント機能の様にサイズやベースラインまでの細かい調整はできないので、あまり美しくできません。欧文Webフォントを使用する際は、装飾や見出し、メニューなど、デザインの「差し」としてピンポイントで使用することをお勧めします。
オススメのフォントは以下です。
※Webフォントは設定が大変なのでサンプルは無しです。リンク先からご確認くださいm(‘∀’●)m
Noto Sans CJK JP
Googleが無料で提供している和文Webフォントです。完全無料でまともに使える和文WebフォントはGoogleのものくらいしかなく、かつフォントとしてもかなり美しいので、Webフォントを使用する必要がある場合はこちらを使用します。ただ重いのでそれが大きなデメリットです。
https://www.google.com/get/noto/#sans-jpan
使い方など
https://qiita.com/umeume66/items/01291353fc43c17da992
https://11neko.com/font-2/
Noto Serif CJK JP
Googleが無料で提供している和文Webフォントです。こちらは明朝体です。特徴は同上です。Androidでどうしても本文を明朝体にしたい場合はこちらを使用します。
https://www.google.com/get/noto/#serif-jpan
TypeSquare
日本の老舗フォントメーカーモリサワのWebフォントです。美しさは随一で種類も豊富。Webフォントのデメリットである速度の問題改善のために奮闘しており、Googleの和文Webフォントよりは表示速度も速いです。ただし使用は有料です（表示数制限のある無料プランもあります）。
https://typesquare.com/ja/service
Google Fonts
GoogleのWebフォントはたくさんあるので、特に欧文フォントなどはデザインテイストに合せて選ぶことができます。サイトの検索性も高くて本当に便利です。
https://fonts.google.com/
おすすめのデータ種類
上記を踏まえて、おすすめの文字データの選択方法は以下の通りです。
- 量の多い本文のフォントはデバイスフォント
- メニューやボタンなどのフォントも本文フォントに合わせる
- ロゴマークなどどうしてもテキストデータでは表現できない部分のみ画像データを使用
- Webフォントは重いので本文には使用せず、デザインによっては欧文フォントをポイントで使用
デザインの手順
そして、デザインの手順は以下の通りになります。Webフォント使用時にはフォントをダウンロードしてデザインデータを作成すると実装時に差が出ず大変良いです。
- 本文の和文フォントを決める
- 欧文フォントでこだわりたい場合、端末にあるものか、Webフォントがあるもののなかから選んでデザインする。
もしデバイスフォントにもWebフォントにもない欧文フォントを使用してしまうと、画像データとしてコーディングされたり別のフォントに変えられてしまうので注意！ - Webフォントを使用する場合、配信元からフォントデータをダウンロードし、PCにインストール。実際に使用するフォントでデザイン作業を行う
- 装飾的なものやロゴマークなどは画像として書き出す想定で特殊フォントを使用する
- コーダーに渡す際、文字がデバイスなのかWebフォントなのか、画像なのかを指示する。
まともなコーダーならメイリオや游ゴシックならそれはデバイスフォントだと判断します。
Webフォント使用でテキストデータ実装したい場合はその旨指示すると間違いないでしょう。
以上です。
たまに、デザイナーから支給されたデザインに、FuturaやCaslonが使用されていることがあり「使えるものならおれもつかいてえよ！！」と泣き叫びながら別のフォントに変更しています。当記事でそんな私のような悲しきコーダーを減らすことができれば幸いです。
