• CREATIVE

January 23.2019

Googleフォントを使ってみよう!日本語フォントとおすすめ英文フォント17選

こんにちは。デザイナーのしろくまです。

2018年10月Googleフォントに日本語が正式に採用されましたので、そのGoogleフォントを中心にWebフォントについてご紹介します。

Webフォントとは?

WebフォントはCSS3から導入された機能の一つです。

サーバー上に置かれたフォントや、インターネット上で提供されているフォントを呼び出し、表示する仕組みです。

従来、Webブラウザに表示されるフォントは端末にインストールされているフォントから文字を表示していたため、ユーザーの環境により使用されるフォンが左右される状況にありました。

そのため、ユーザーで表示されているフォントが制作者の意図しないものになっていることがありました。

しかし、Webフォントはサーバー上にあるフォントデータを読み込むことで、端末に左右されない特徴があるため、前述の問題を解決できます。

Webフォントを使用するメリット

・フォントが端末に左右されない。
・画像ではなく文字で表示することで、SEOが向上、メンテナンスの利便性もUPする。

Webフォントを使用するデメリット

・日本語対応フォントが少ない。
・有料の物がある。
・PVにより課金などプランも複雑。
・多くのフォントを使用しすぎると表示速度が遅くなる。

Webフォントの料金体系は無料のもの、有料のもの、最初は無料だがある一定の水準をこえたら有料になるものなど様々です。

また、英字フォントに比べ日本語フォントはまだ少ないのが現状です。

しかし、次々と新しいフォント、サービスが増えていっており、これからますます需要が高まると思われます。

ちなみにこのOzlink LABでは「Noto Sans CJK JP」を使用しています。

フォントを作業環境に導入する方法

デザイナーの方はデザイン時にフォントを自分の作業環境にインストールしておきたいですよね。

そこでダウンロードの方法をご紹介します。

Googleフォントをダウンロードする方法

フォント右上の「赤丸に+」をクリックします。

複数のフォントを選ぶことも可能です。

画面下に表示された黒いバーをクリックします。

CUSTOMIZEをクリックします。

デフォルトでは主にregularだけが選択された状態ですので、その他のウエイトや斜体なども使用したい場合はチェックを入れます

右上のダウンロードマークをクリックしフォントをダウンロードします。

Webフォント提供サービス

GoogleFont

GoogleFontはGoogle社から提供されているフォントです。

無料で商用利用も可能です。

▼日本語フォント


Noto Sans SC (weight:6種類)
Noto Sans JP (weight:6種類)

Noto Serif SC(weight:7種類)
Noto Serif TC(weight:7種類)
Noto Serif JP(weight:7種類)

M PLUS 1p(weight:7種類)
M PLUS Rounded 1c(weight:7種類)

Sawarabi Mincho (さわらび明朝) (weight:1種類)
Sawarabi Gothic (さららびゴシック) (weight:1種類)

Kosugi(小杉ゴシック) (weight:1種類)
Kosugi Maru(小杉丸ゴシック) (weight:1種類)

▼英字フォント

◯サンセリフ系

■Lato 
Lato
汎用性の高いシンプルな英字(10style)

■Roboto
Roboto
ノーマルに使えて、O Qなどが丸すぎないのでシャープな印象(12style)

■Oswald 
Oswald
縦長のサンセリフ体 (6style)
かっこよさもありつつ、硬すぎない印象で読みやすい

◯セリフ系 フォント

■Cinzel 
Cinzel
Qがのびるのが特徴(3style)

■Abhaya Libre
Abhaya Libre
ファッション系に似合いそうな高級感(5style)

■Playfair Display
Playfair Display
Abhaya Libreよりは縦長で少し癖がある(6style)

■Spectral
Spectral
かっちりとした中に現代的な印象(14style)

■Sorts Mill Goudy
Sorts Mill Goudy
文字のクセから「こだわり、嗜好性の高い商品」などに (2style)

◯かわいい

■Nunito
Nunito
丸みがかわいいフォント。ペット系のサイトなどに (14style)

■Pacifico
Pacifico
丸さと太さが元気がある(1style)

■Poiret One
Poiret One
細身がキャッチでかわいらしい(1style)

■Quicksand
Quicksand
キッズ系のサイトなどに (4style)

◯手書き風

■Amatic SC
Amatic SC
近年はやりの手書き感。ナチュラルな印象に(2style)

■Allura
Allura
あしらいに使うきれいめな筆記体文字(1style)

■Sacramento 
Sacramento
ユメカワな雰囲気にあう細い手書き文字(1style)

■Italianno
Italianno
高級感あるデザインに合いそうな文字(1style)

■Niconne
Niconne
丸みがほどよく、タイトルに(1style)

その他のWebフォント提供サービス

WebフォントはGoogle社以外からも提供されています。

代表的な2社をご紹介いたします。

Typesquare

typesquare.jpg
モリサワ社が提供するWebフォントサービス。有料と無料のプランがあります。

和文のフォントが豊富に揃っています。

印刷などでもポピュラーな「リュウミン」「新ゴ」「フォーク」はもちろん、デザイン書体、装飾書体なども揃っています。

「日本語」「欧文」「韓国語」「中国語」「タイ語」などがあります。

FONTPLUS

FONTPLUS
有料プランのみ。

和文フォントが豊富に揃っていてフォントワークス社、モリサワ社、大日本印刷社などのフォントがあります。全1885書体です。

フォントランキングを見るだけでも今の「流行り」を知ることができます。

※各サービスとも、規約やライセンスは必ず確認の上ご利用ください。

Webフォントでデザインに広がりを!

いかがでしたでしょうか?

使い勝手のいいお気に入りのフォントを見つけるとデザインも捗りますよね。

まだWebフォントを使ったことのない方はぜひ利用してみてください。