最近は以前に比べてWebフォントを使用しているWebサイトを多く見かけるようになりました。

無料で使えるGoogleフォントや、AdobeCCに加入しているユーザーが使用できるAdobeフォント等のWebフォントサービスは、手軽に導入でき、ますますWebデザインの幅が広がってきています。

今まで画像として表示することしかできなかったフォントが使用できるようになり、テキストの変更が容易にできることやSEOに強いこともWebフォントを使うメリットです!

皆様はWebフォント使用していますか?
フォントはデザインをする上でとても重要で、使用するフォントによって企業や商品のイメージは大きく変わってきます。

今回は当社デザイナーがおすすめするWebフォントについてご紹介いたします。

Webフォントとは?

WebフォントとはCSS3から策定された技術で、インターネット上で提供されているフォントを呼び出し使用することができます。

あらかじめWebサーバーやクラウドサーバー等に置かれたフォントサーバーからフォントデータを読み込み、サイトの文字を表示します。

Webフォントのメリット

01ユーザーにイメージ通りの印象を与えることができる

Webフォントはユーザーの閲覧している環境に依存しないので、すべてのユーザーに同じ印象を与えることができます。

02SEOに強い

Webフォントは文字情報として認識されるので、画像を作成して配置するよりSEOに効果的です。

03レスポンシブデザインに対応

PCやスマホ、タブレット等、ユーザーの閲覧環境はさまざまです。
画像で作成した場合、端末によって作りなおさなければいけないが、Webフォントの場合はテキストとして折り返しで対応できるのでレスポンシブデザインと相性がいいです。

04テキストの修正が簡単にできる

テキストの修正をしたい場合も画像の場合は作り直す必要がありますが、Webフォントを使用すればテキストの修正や更新が簡単にできます。

05簡単に導入することが出来る

無料で使用できるGoogleフォントやAdobe CC会員なら使用できるAdobeフォントは簡単にWebフォントを導入することができます。

Webフォントのデメリット

01フォントデータの容量が大きく、表示速度が遅い

以前に比べるとだいぶ改善されてきていますが、Webフォントはシステムフォントに比べるとフォントファイルは容量が大きく表示速度が遅いです。

02費用が発生する場合がある

GoogleフォントやAdobeフォント等、無料で使用することができるサービスが多いですが、Webフォントサービスによっては使用する際にコストがかかってしまうものもあります。

03OSやブラウザによってテキストがずれる場合がある

使用するフォントによりますが、閲覧しているOSやブラウザでテキストのベースラインがずれてしまうことがあります。

当社デザイナーおすすめWebフォント

当社デザイナーにアンケートを取り、GoogleフォントやAdobeフォントで使用できるおすすめのWebフォントを教えていただきました!
デザイナーのコメントと共に紹介しますので自身のサイトにピッタリなWebフォントを見つけてください!!

日本語Webフォント 01

Noto Sans Japanese / 源ノ角ゴシック

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

GoogleとAdobeが共同で開発したオープンソースフォント。ウェイト数も富んでおり、フリーフォントとは思えないクオリティのフォントです。GoogleはNoto Sansという名前で、Adobeは Source Sans Hans (源ノ角ゴシック)という名前で出しています。 Extlalightでも安定の可読性で、大変使いやすいです。(以下略)

引用元: 無料で使える!日本語フリーフォント投稿サイト - FONT FREE Source Han Sans
デザイナーコメント

読みやすくクセがないのでいろいろなデザインで使用してるゴシック体フォントです。

角ばった力強いフォントで目を引きたいテキストに使用しています。

日本語Webフォント 02

Noto Serif Japanese / 源ノ明朝

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

源ノ明朝は小塚明朝をベースにアレンジした、明朝体フォントです。ウェイトも7つあり豊富で、 柔らかく、優しい印象の明朝体です。源ノ角ゴシックとの対のフォントで、こちらもGoogleとAdobeが共同で開発したオープンソースフォントです。源ノ角ゴシックと同様に、デジタルデバイスに最適化されており、文字が潰れないように線が太めであったりとの工夫がされています。 名前もとてもシブくて、ネットでは「武将の名前のよう」と話題にもなりました。Adobeさんの源ノ明朝公式サイトもデザインが素敵です。(以下略)

引用元: 無料で使える!日本語フリーフォント投稿サイト - FONT FREE 源ノ明朝
デザイナーコメント

シンプルな明朝体でウェイトの種類も豊富なので幅広い業種に使いやすい。

日本語Webフォント 03

FOT-筑紫明朝 Pr6N

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

本格的な長文本文用明朝体として、活字、写植時代の本質を踏襲し、明朝体とはどうあるべきかを最大限に考慮した書体です。オフセット印刷においても活字のようなインクの溜まりが見えてくるような独特な雰囲気を持っています。フトコロの広い漢字・仮名の明朝体とは一線を画し、文字そのものが内在する空間の強弱と線質が持つ伸びやかさを残しています。文字を組んだとき、リズミカルな心地よい可読性を醸し出します。

引用元: Adobe Fonts FOT-筑紫明朝 Pr6N 説明
デザイナーコメント

漢字とひらがな、カタカナが並んだ時のバランスが美しいフォント。力強さはないですが、静かな雰囲気を演出するのにすごく適しています。

日本語Webフォント 04

FOT-筑紫A丸ゴシック Std

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

デジタルフォントの標準的な丸ゴシック体とは一線を画す書体です。現代の感覚で味わい深い丸ゴシック体を設計しました。ふところの広い現代風なデザインではなく、ふところを絞ったデザインの丸ゴシック体です。「漢字」は幾何学的な直線処理ではなく、温かみのある丸みを帯びたラインを意識して設計しています。「かな」はニュートラルなデザインです。文字を組んだときの書風は格別です。(以下略)

引用元: Adobe Fonts FOT-筑紫A丸ゴシック Std 説明
デザイナーコメント

丸ゴシック体ですが可愛くなりすぎず上品なイメージで使用できるのが好きです。

日本語Webフォント 05

VDL ロゴJrブラック

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

「ロゴJrブラック」は、「ロゴJr」のイキイキしたフォルムを活かしながら、「太さの限界」に挑戦して生まれた、超極太ゴシック体です。造形の美的バランスと文字としての可読性を保ちながら、自由奔放なイメージの「かな」が、誘目性を極めています。 ATypeI Letter.2 コンペティション入賞(2011年) ニューヨーク TDC2 審査委員賞受賞(2008年)

引用元: Adobe Fonts VDL ロゴJrブラック 説明
デザイナーコメント

ポップに目立たせたい時に使用しています。

日本語Webフォント 06

ニタラゴルイカ-06

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

末端を水平・垂直に処理したクールな「かな文字」と、落ちついた雰囲気の「漢字」が、スマートな文字組イメージを創り出し、大きめにデザインされたカタカナが、見やすさ読みやすさを向上させます。

引用元: Adobe Fonts ニタラゴルイカ-06 説明
デザイナーコメント

バランスが良く読みやすいフォント。見出し等目立たせたい箇所に使用しています。

日本語Webフォント 07

ABキリギリス

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

切り文字のような、イラストのような。不揃いの自由な線とカーブで、あえて文字の統一感は持たせず、手描きの荒っぽさを残した書体。
このフォントには、新聞社、出版社、国語研究所等の使用頻度表から選んだ、ベスト1,000の漢字に両仮名および約物を加えた計206文字が含まれます。
デザイン:七種泰史

引用元: Adobe Fonts ABキリギリス 説明
デザイナーコメント

少しクセのある可愛らしいフォントです。印象に残るフォントなので見出しや目立たせたい箇所に使っています。

日本語Webフォント 08

Yomogi

Webフォントで企業のイメージを伝えよう!おすすめのWebフォント16選
あいうえお アイウエオ ABCDEFG abcdefg 1234567890

Yomogiは極細で個性が強く、それでいて可読性の高い手書き風フォントです。JIS第一・第二水準すべての漢字とIBM拡張文字が使えます。
頼りなさそうな見た目でも強い存在感と親しみやすさ・かわいらしさを兼ね備えた、縦書き対応の等幅フォントです。(以下略)

引用元: Github satsuyako/YomogiFont このフォントについて
デザイナーコメント

手書きの柔らかい雰囲気のフォント。個性的ですが読みやすく存在感があります。親しみやすいので子どもや女性向けの商材のサイトに使いやすいフォントです。

欧文Webフォント 01

Roboto

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves.(以下略)

引用元: Google Fonts Roboto About Roboto

【和訳】
Robotoには2つの性質があります。機械的な骨組みを持っており、形は主に幾何学的です。さらに、このフォントの特徴は親しみやすい曲線です。

デザイナーコメント

可読性が高く、ウェイトの種類が多く使いやすい。

欧文Webフォント 02

Trajan

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

While designing Trajan, Carol Twombly was influenced by the style of carved letters produced by the Romans during the first century AD. Twombly completed the design, adding numerals and punctuation, as well as a bolder version to allow for text emphasis. Most importantly, her interpretation of the ancient style resulted in a font family whose clarity and beauty come across in modern printed materials.

引用元: MyFonts Trajan About This Font Family

【和訳】
Trajanをデザインしている途中、Carol Twomblyは紀元1世紀にローマ人によって作られた彫刻文字のスタイルに影響を受けました。 Twomblyはデザインを完成させ、数字と句読点を追加し、テキストを強調できるように太字にしました。

デザイナーコメント

綺麗目な文字なのでビジネス系の信頼感のあるデザイン等に使用しています。

欧文Webフォント 03

Futura PT

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

Futura was designed for Bauer company in 1927 by Paul Renner. This is a sans serif face based on geometrical shapes, representative of the aesthetics of the Bauhaus school of the 1920s-30s. Issued by the Bauer Foundry in a wide range of weights and widths, Futura became a very popular choice for text and display settings.(以下略)

引用元: Paratype Futura PT

【和訳】
Futuraは、1927年にPaulRennerによってBauer社のためにデザインされました。 これは、1920年代から30年代のバウハウス派(ドイツの美術学校)の美学を代表する、幾何学的形状に基づくサンセリフ体です。 Bauer Foundryによって幅広い種類の太さで発行されたFuturaはディスプレイ設定や書式設定でとても人気になりました。

デザイナーコメント

モダンでかっこいいので、タイトルに使うことが多いです。

欧文Webフォント 04

Century Gothic

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

Century Gothic™ is based on Monotype 20th Century, which was drawn by Sol Hess between 1936 and 1947. Century Gothic maintains the basic design of 20th Century but has an enlarged x-height and has been modified to ensure satisfactory output from modern digital systems.(以下略)

引用元: MyFonts Century Gothic About This Font Family

【和訳】
CenturyGothic™は、1936年から1947年にSol Hessによって描かれた「Monotype20th Century」を基にデザインされました。 20世紀の基本デザインを維持していますが、エックスハイト(欧文フォントの小文字xの高さ)が高く設定されており、現代のデジタルデバイスで読みやすいように変更されています。

デザイナーコメント

直線と円弧のバランスがスタイリッシュで、シンプルだからこそ何にでも合う。「個性がないように見えて他を立てることができる紳士的なフォント」という印象を持っています。

欧文Webフォント 05

DIN 2014

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

DIN 2014 is a contemporary version of a well-known DIN typeface. The Regular performs well in long text settings, while Light and Bold faces are extremely legible at large sizes. Type family spans 18 faces: 6 Upright with the matching Italics of normal width and 6 Narrow ones. The typeface was designed by Vasily Biryukov and released by Paratype in 2015.

引用元: Paratype DIN 2014

【和訳】
DINは有名なDIN書体の現代版です。 長文で使用されることが多く、細字から太字まで可読性が高いです。 2015年に書体はVasily BiryukovによってデザインされParatype社によってリリースされました。

デザイナーコメント

数字が綺麗に見えるので好きです。

欧文Webフォント 06

All Round Gothic

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

Originally designed in 2012 by Ryoichi Tsunekawa, All Round Gothic is a font family inspired by classic sans serif fonts such as Avant Garde Gothic and Futura. All Round Gothic is a structured geometric sans, but also creates a sweet and cute atmosphere by removing unnecessary stems.(以下略)

引用元: Dharma Type All Round Gothic

【和訳】
All Round Gothicは、2012年にRyoichi Tsunekawaによってデザインされたフォントです。 「Avant Garde Gothic」や「Futura」等のクラシックなサンセリフ体からインスパイアされました。 はっきりとした直線と曲線によって構成されたサンセリフ体ですが、不要な直線部分を削ることで甘くてかわいい雰囲気を作り出しています。

デザイナーコメント

単純なデザインかもしれませんが、見やすいながらも綺麗に整えられた汎用性の高いフォント。

欧文Webフォント 07

Quicksand

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

Quicksand is a display sans serif with rounded terminals. The project was initiated by Andrew Paglinawan in 2008 using geometric shapes as a core foundation. It is designed for display purposes but kept legible enough to use in small sizes as well. In 2016, in collaboration with Andrew, it was thoroughly revised by Thomas Jockin to improve the quality. In 2019, Mirko Velimirovic converted the family into a variable font.

引用元: Google Fonts Quicksand About Quicksand

【和訳】
Quicksandは角が丸くなっているディスプレイサンセリフフォントです。 この計画は、2008年にAndrew Paglinawanによって開始され、幾何学的形状を基として使用しています。 ディスプレイ用にデザインされていますが、小さいサイズで使用しても読みやすくなっています。

デザイナーコメント

読みやすく丸く柔らかい印象のフォントなので温かみのあるデザインに合わせやすいです。

欧文Webフォント 08

Shelby

Let's communicate a corporate image by Web fonts!
16 Web fonts that popular with designers
ABCDEFG abcdefg 1234567890

Shelby is friendly and casual; a monoline, semi-connected script typeface based on hand lettering. It has the natural appearance of handwriting, yet can be used to create appealing headlines, logos and eye catching call-outs.(以下略)

引用元: Laura Worthington SHELBY

【和訳】
Shelbyはカジュアルで使いやすいフォントです。強弱のない一筆書きは手書き文字に基づいています。 手書きの自然な見た目で目立たせたい見出し、ロゴ、キャッチコピーに使用できます。

デザイナーコメント

バランスが綺麗な筆記体なのでタイトルのあしらい等に使用しています。

イメージに合ったWebフォントは見つかりましたでしょうか?

今回紹介したWebフォント以外にも、たくさんの種類のフォントがWebフォントサービスにはあります。

フォントの見た目だけでなく、フォントの成り立ちやデザイナーの制作意図等から自社のイメージにピッタリなフォントを見つけてみるのも面白いと思います。

PAGE TOP