日本語Webフォントを使い倒そう！モリサワ・Adobe・フォントワークスのWebフォント使い方・価格＆イケてるデザイン15選！
-
-
-
はてな -
-
日本語Webフォント、皆さんは使っていますか？費用面や、表示速度などといった導入障壁もあって、まだ迷っている方も多いのではないかと思います。Webフォントの魅力は、デザイン性やSEOだけではありません。他にも編集が簡単なため、作業効率が一段と向上するなど、様々な魅力があります。
今回はデザイン界隈では最も使用率の高い、モリサワ、Adobe、フォントワークスが提供している日本語Webフォントの使い方をまとめてみました。
■目次
- １，Webフォントの基本的な使い方
- ２，モリサワWebフォントサービスの価格・使い方について
- ３，AdobeWebフォントサービスの価格・使い方について
- ４，フォントワークスWebフォントサービスの価格・使い方について
- ５，日本語Webフォントの使い方がおしゃれなサイトを紹介
Webフォントの基本的な使用方法について
設置は基本的に３社とも、とても簡単です。管理画面から発行されるJavaScriptタグをHTML内に貼り付け、Webフォントを適用したい箇所にCSSでfont-family:要素を追加させるだけ。
下記のようなイメージです。
■HTML
<div class="webfont">Webフォント適用箇所</div>
■CSS
.webfont {
font-family: リュウミン L-KL;
}
たったこれだけ！これなら簡単に導入できそうですよね？
それではこれから各社のWebフォントの使い方をご紹介していきます。
モリサワWebフォントの価格・使い方
デザイナーにはお馴染みモリサワ。フォントの種類も豊富でデザインの幅も広がり、クライアントへの提案にも心強い味方になってくれますよね。
まだモリサワを導入していない方へ、その気になる特徴・利用条件や使用方法について紹介しましょう。
MORISAWA PASSPORTプランなら年間1000万PVまで使い放題！
モリサワWebフォントのプラン別の比較表になります。
| 無料 | 有料プラン① | 有料プラン② | MORISAWA PASSPORTプラン | |
|---|---|---|---|---|
| 料金 | ￥0 | ¥2,160 / 月 | ¥4,320 / 月 | ライセンス契約費用になります |
| PV数の上限 | 1万 PV / 月 | 25万 PV / 月 超過10万PVごとに¥540 加算 |
100万 PV / 月 超過10万PVごとに¥540 加算 |
1,000万PV / 年 月での超過は加算なし |
| 使用可能書体数 | 1 | 3 | 全書体 | 全書体 |
| 使用可能ドメイン数 | 1 | 2 | 5 | 制限なし |
利用可能書体数、利用可能ドメイン数に制限が無いので嬉しいですね！
無料プラン、及び有料プランでは書体数、使用ドメイン数に制限があるのでMORISAWA PASSPORTプランは優遇されていることが分かります。
ただし1契約者につき1,000万PV／年を超過するとフォントの配信は停止するので注意が必要です。
ちなみにどのフォントが使用できるか？
明朝体・ゴシック体・丸ゴシック・筆書体・UD書体で調べてみました。
| 明朝体 | リュウミン、黎ミン、太ミン、見出ミン、秀英明朝、秀英初号明朝、秀英横太明朝、凸版文久明朝、光朝、A1明朝、リュウミン 小がな、リュウミン オールドがな、秀英3号、秀英5号、アンチックAN、ヒラギノ明朝、本明朝、ナウ（明朝）、TB横太明朝 M、TB新聞明朝 L、築地、小町、良寛、行成、弘道軒 他 |
|---|---|
| ゴシック体 | 新ゴ、ゴシックMB101、中ゴシックBBB、太ゴ、見出ゴ、秀英角ゴシック金、秀英角ゴシック銀、ネオツデイ、ハッピーN、わんぱくゴシックN、タイプラボN、墨東N、ゼンゴN、ヒラギノ角ゴ、こぶりなゴシック、ナウ（ゴシック）、TBゴシック、TB新聞ゴシック M 他 |
| 丸ゴシック | じゅん、新丸ゴ、ソフトゴシック、秀英丸ゴシック、丸ツデイ、丸アンチック、キャピーN、ららぽっぷ、ヒラギノ丸ゴ、TB丸ゴシック DB、TBシネマ丸ゴシック M、TBちび丸ゴシック |
| デザインフォント | フォーク、丸フォーク、カクミン、解ミン 宙、解ミン 月、モアリア、シネマレター、トーキング、タカモダン、竹、トンネル、明石、徐明、那欽、くもやじ、ハルクラフト、プリティー桃、はるひ学園、すずむし、ほなみ、G2サンセリフ、ぶらっしゅ、ぽっくる、漢字タイポス、TBカリグラゴシック、サン-M |
| 筆書体 | 正楷書CB1、新正楷書CBSK1、欧体楷書、楷書MCBK1、教科書ICA、角新行書、隷書E1、陸隷、勘亭流、ひげ文字、欧体楷書 藤かな、篠、羽衣、TB古印体、日活正楷書体、花胡蝶、花蓮華、花牡丹-DB |
| UD書体 | UD黎ミン、UD新ゴ、UD新ゴNT、UD新丸ゴ、UD新ゴ コンデンス、ヒラギノUD角ゴ、UDタイポス |
使いたいフォントは見つかりましたか？全書体はありませんがリュウミン、新ゴなどお馴染みの書体はもちろん、デザイン書体で最近発表された「すずむし」といった、特徴的で可愛らしいフォントまで使用できます！
個人的には手書き感、リズミカルなイメージが特徴的な「タカハンド」でお馴染みのタカ書体がまだ使えないのが残念で、リリースされるのが待ち遠しいです。
モリサワフォントを導入しよう
モリサワWebフォントを使用するには、まず「Webフォント TypeSquare [タイプスクウェア]」にアクセスします。
手順1.タイプスクエアサイトにログインし、Webフォントを使用するサイトのドメインを登録
弊社ではテストサーバのドメインも登録しています。クライアントにプレゼンするときもイメージを伝えやすくなります。
手順2.HTMLファイルの＜/head＞タグ内にプラン専用タグ（JavaScript）を埋め込む
プラン専用タグ（JavaScript）をコピーして、
＜/head＞タグ内にペーストします。
※注意…DWを使用してコーディングされる方は、ローカル環境でリアルタイムプレビューを使用する際、確認時にjsを読み込みますが、環境によってはものすごく時間がかかることがあるのでコメントアウトなどしておくといいです。
手順3.該当箇所のCSSにモリサワ指定のフォントを設定
＜例＞
リュウミンLを適用させたい場合
手順5.フォントCSSを適用します。
フォント一覧よりCSSをコピーをクリックでコピー出来るのでCSSに貼り付けて下さい。
マイフォント機能が便利！
またお気に入りのWebフォントがあれば「マイフォント」機能のフォルダを作成してまとめておきましょう。
再度探す手間が省けるので便利です！
手順1.「マイフォントに追加」をクリックします。
手順2.「新規フォルダ作成」をクリックして新しいフォルダを作成します。
手順3.気に入ったフォントがあったら「マイフォントに追加」をクリックします。
５，日本語Webフォントの使い方がおしゃれなサイト15選
最後に私の独断と偏見で、日本語Webフォントを上手く活用したオシャレなサイトをご紹介します！
ゴシック体がおしゃれ！
COGY
使用フォント：アクシス
株式会社アイセイ薬局
使用フォント：UDフォント
たてよこWebアワード
使用フォント：FOT-筑紫ゴシック
http://tategaki.github.io/awards/
バンケットハウス
使用フォント：M+ FONTS
丸ゴシック体
プチココン(Petit Cocon)
使用フォント：FOT-筑紫A丸ゴシック
ミスターリード
使用フォント：ヒラギノ丸ゴシック
ほほえみ保育園
使用フォント：新丸ゴシック
http://hoiku.medical-jiyukai.jp/
明朝体がおしゃれ！
株式会社 万
使用フォント：りょう Display PlusN
東京消防庁
使用フォント：UD黎ミン
きづき
使用フォント：秀英明朝
ヒメアノ～ル
使用フォント：FOT-筑紫明朝
http://www.himeanole-movie.com/
イチエ建匠
使用フォント：A1明朝
デザインフォントがおしゃれ！
佐野産婦人科
使用フォント：はるひ学園
http://sanolc-around.com/service.html
金沢の坂道
使用フォント：丸明オールド
コクア歯科クリニック
使用フォント：フォーク
まとめ
今回は代表的な３社のWebフォントの使い方や特徴をまとめてみましたがいかがでしたでしょうか？
Webデザイナーなら誰もが一度は「もっとかっこいいプレーンテキストがあればなぁ」と思ったことがあるのではないかと思います。
導入は意外に簡単ですし、せっかく登録しているなら使えるシーンでは積極的に活用していきたいですよね！2017年は日本語Webフォントを使い倒しましょう！
-
-
-
はてな -
-