Webフォントが今熱い！日本語の丸ゴシック体【無料】おすすめ4選

ホームページ制作において、サイトのイメージを左右するのは、使用するフォントと言っても過言ではありません。昨今では高速化レンタルサーバーの台頭により、Webフォントが手軽に無料で使用できるようになりました。本文の書体が丸ゴシック体を使用しているサイトも見られるようになるなど、いよいよWebフォント時代の到来を感じさせます。

丸ゴシック体を使用しているWebサイトは、温かく優しく、可愛いイメージになりますね。キッズ系のホームページと相性抜群です。

Webフォントの大きなメリットは、ユーザーのデバイス環境に左右されず、誰がどんな環境で閲覧しても同じフォントが表示されるということです。本記事では、そんなWebフォントのメリット・デメリット、おすすめの丸ゴシック体などを紹介いたします。

Zen Maru Gothicがかなり良い！

丸ゴシックとしてやや癖がありますが、Google Fontsの「Zen Maru Gothic」は、私的にはかなりクオリティが高いと感じます。角の深い丸みによってソフトでナチュラルな印象を与える丸ゴシック体です。独特なソフト感ですが、あらゆるシーンにマッチします。

ちょっと変わってるので、オリジナリティのあるホームページとなりますね。これが無料なんてすごい時代になってきましたね。

おすすめの丸ゴシック体

Zen Maru Gothicの他におすすめの丸ゴシックを紹介します。どれも完全無料で使用できます。ご自身のサイトに合った丸ゴシック体を見つけてください。

M PLUS Rounded 1c

多言語対応でバランスのいい丸ゴシック体。ThinからBlackまで7種類と太さも豊富にあり、割とスタンダードで使いやすい印象です。

源泉丸ゴシック

Noto Sansをベースとして作られた丸ゴシックフォント。視認性・可読性などが優れている「源ノ角ゴシック（Noto sans）」の良いところはそのままに、角を丸く処理されているので、ポップな場面にぴったりです。読みやすさ重視で汎用性が高く、すっきりとした印象を受けます。

キウイ丸

可愛らしくポップなデザインで、とても個性的です。Webでの使用を想定して制作されているので、ホームページで映える丸ゴシックとなっています。

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

Webサイトの場合、制作側が指定したフォントが、閲覧するユーザーのデバイスに入っていないと、そのフォントは表示されないのです。ですので、制作側はヒラギノゴシックなど、ディフォルトで入っているフォントを指定するなど工夫し、イメージ通りのフォントを指定できなかったのです。

しかしWebフォントが登場し始め、デバイスを問わず同じフォントが使えるようになりました。デザイナーにとって、自分の思った通りのフォントが誰にでも表示されるというのは、大きなメリットとなったのです。

ただし、日本語フォントは文字数が多いので、データの容量がかなり大きくなってしまいます。その結果、Webサイトの表示速度が遅くなってしまうというデメリットもありますが、Xサーバーなど、表示速度の高速化に取り組んでいるサーバーを選ぶことで、大幅に改善されます。

メリット・デメリット、どちらもあるので、Webフォントを採用するかは悩みどころでもあります。とは言っても最近のレンタルサーバーは高速なものが多いので、当スタジオでは積極的に取り入れています。

丸ゴシックどんなシーンで使う？

丸ゴシックは、優しくポップで親しみやすい印象を与えるため、カジュアルなシーンや子ども向けの制作物などにぴったりです。Webの場合は、保育園・幼稚園のホームページによくマッチします。

私は、児童養護施設のサイトに「Zen Maru Gothic」を使用しました。

丸ゴシックを使う場合、全体のデザインがスタイリッシュなものよりも、柔らかく温かいものの方がマッチします。また、フォーマルな文書や伝統的なコンテンツには、ミスマッチな印象を与えてしまいますので注意が必要です。

Webでの使い方（Google Fonts 例）

WebでGoogle Fontsの「Zen Maru Gothic」を使う場合を例に挙げて説明します。まずGoogle Fonts内の「Zen Maru Gothic」のページにアクセスします。PCでアクセスすると右上に表示されている「Get font」をクリックします。そして「Zen Maru Gothic」が選択されていることを確認して、「Get embed code」をクリックします。

続いて、使用したいフォントの太さを指定して、コードをコピーします。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap" rel="stylesheet">

400、500、700の太さを選択した場合は上記のコードになります。これをhead内に貼り付けます。指定するcssは以下の通りです。（bodyに指定した場合）

body {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
}

状況に応じてfont-weightを設定すれば、文字の太さに強弱が出て、サイト全体に奥行きが出ますね。

どのフォントがベストなのか？

結局は、使うシーンやサイトの雰囲気に合わせればいいかと思います。シンプルで汎用的なら「M PLUS Rounded 1c」や「源泉丸ゴシック」、可愛くポップなデザインなら「キウイ丸」といった具合です。

当スタジオは高品質なオリジナルデザインでの制作を強みとしていますので、オリジナル感のある「Zen Maru Gothic」をおすすめします。

ディーライズでは丸ゴシックを使用した、優しく楽しく温かいホームページ制作を得意としています。ホームページ制作の悩みや不安など、どんなことでもお気軽にご相談ください！