脱Noto Sans？！Webデザインで使えるZen Kaku Gothicと参考サイト20選
公開日 :
- デザイン
こんにちは！アンドエイチエーのデザインチームです。
Webデザインをする際、「日本語の文章はゴシック体で読ませやすく」を意識するとついついNoto Sans JPに固めがちではないでしょうか？
Noto Sans JPはウェイトも豊富でバランスも良く、万能とも言えるWEBフォントです。
ただ、限られたWEBデザインのフォント選びの中でも、サイト全体に少し違った表情を持たせたくなる場面は来るもの・・・。
今回はそんな場面でNoto Sans JPに次ぐ選択肢となりうるゴシック体フォント、Zen Kaku Gothic（NewとAntiqueの二種類）について詳しく解説したいと思います！
目次
Zen Kaku Gothicとは
すっきりとして読みやすい書体
Zen Kaku Gothicは、少し小ぶりで読みやすく、すっきりとした上品さも感じられる日本語フォントです。長い文章でも読んでいて苦にならない絶妙なバランスが特徴。
Zen Kaku Gothicには、「Zen Kaku Gothic New」と「Zen Kaku Gothic Antique」の二種類があり、カタカナとひらがなの作りに差があります。
Zen Kaku Gothic Newのダウンロードはこちら
Zen Kaku Gothic Antiqueのダウンロードはこちら
Webフォントとして利用可能
Googleが提供する無料のWebフォントサービスGoogle Fonts、そしてAdobeが提供するフォントサービスAdobe Fontsに対応しており、Webフォントとして使用することができます。
ウェイトが豊富
ウェイトもそれぞれ5つ（Light・Regular・Medium・Bold・Black）が用意されているため、デザインに合わせて柔軟に対応させることが可能です。
数字は細身
全体的にこぶりなZen Kaku Gothicですが、数字はさらに細身なことも特徴です。
数字と日本語の横幅を近づけたい場合は他の欧文フォントと組み合わせて使うことも検討してみましょう！
例えばRobotoや、Outfitといったフォントと組み合わせることで数字にもう少し存在感が出てきますね。
Zen Kaku Gothic NewとZen Kaku Gothic Antiqueの違い
Zen Kaku GothicにはNewとAntiqueの二種類がありますが、漢字・アルファベット・数字は共通しており、ひらがなとカタカナにそれぞれ違いがあります。
Zen Kaku Gothic Newの特徴
Antiqueと比べてひらがなとカタカナが少し小ぶりに作られています。
文字自体のクセが少ないことで現代的、かつモダンな印象を与えてくれます。
説明テキストや資料といった整然と情報が並ぶような文章とも相性が良く、読みやすさと親しみやすさを両立できる強みを持っています。
Zen Kaku Gothic Antiqueの特徴
ひらがな、カタカナともに細部に緩急と角度が付き、サイズ感は漢字に対してほぼ同じくらいの幅と高さとなっています。
わずかに手書きを感じさせるナチュラルさと、原稿用紙に書かれたような幅と高さの統一感から、メッセージ性のある文章やレトロなデザインにも合うのが特徴です。
Zen Kaku Gothicが使われているサイト事例20選
それでは実際にZen Kaku Gothic Newと、Zen Kaku Gothic Antiqueが使われている事例を20サイト紹介します。
できるだけ様々なジャンル、印象のサイトをまとめてみました。組み合わせで使われている欧文フォントも記載していますので制作時の参考にもしてみてください！
コーポレートサイト編
株式会社ペンマーク
- 使用フォント：Zen Kaku Gothic New / Roboto
- サイトの印象：シンプル・親しみやすい
下原自動車株式会社｜和歌山県新宮市にある自動車鈑金・塗装・整備の会社
- 使用フォント：Zen Kaku Gothic New / Jost
- サイトの印象：清潔感・信頼感・親しみやすい
ふくおか相続税相談室 ほっと！
- 使用フォント：Zen Kaku Gothic New / Outfit
- サイトの印象：ポップ・やさしい・読みやすい
社会福祉法人 共働学舎 – 東京都町田市｜障害を持つ人のための授産施設
- 使用フォント：Zen Kaku Gothic New / Darumadrop One / つなぎゴシック
- サイトの印象：やさしい・ナチュラル・親しみやすい
株式会社HA-RU｜島根のダクト・保温工事
- 使用フォント：Zen Kaku Gothic New / Archivo
- サイトの印象：清潔感・信頼感・親しみやすい
双葉金属 | 0.5ミリで動かせ世界。
- 使用フォント：Zen Kaku Gothic Antique / Proxima Nova
- サイトの印象：誠実・メッセージ性
学校法人長尾学園 長尾幼稚園
- 使用フォント：Zen Kaku Gothic Antique / Montserrat
- サイトの印象：ポップ・やさしい・親しみやすい
https://www.nagaoyouchien.com/
リクルートサイト編
高野総合会計事務所 リクルート
- 使用フォント：Zen Kaku Gothic New / Qwitcher Grypen
- サイトの印象：若々しい・清潔感・誠実
https://recruit.takanosogo.com/
メディアサイト編
Harmonies with KUMON | 子育て家族の毎日に、新しい発見を届ける
- 使用フォント：Zen Kaku Gothic New / Poppins
- サイトの印象：やさしい・読みやすい・ナチュラル
https://harmonies.kumon.ne.jp/
食と神戸
- 使用フォント：Zen Kaku Gothic New / Barlow
- サイトの印象：ナチュラル・読みやすい・やさしい
So, Coffee? | UCC Coffee Journal
- 使用フォント：Zen Kaku Gothic New / Cabin
- サイトの印象：ナチュラル・読みやすい・清潔感
仙台で暮らす、湖山で働く。 | 湖山医療福祉グループ
- 使用フォント：Zen Kaku Gothic New / Ultra
- サイトの印象：元気・インパクト・ポップ
https://www.koyama-sendai.org/
サービスサイト
写真でオリジナルカレンダー&パネル＆透明トレカ作成 | PDAY
- 使用フォント：Zen Kaku Gothic New / Josefin Sans
- サイトの印象：ポップ・かわいい・落ち着き
名古屋のラーメン店・中華料理店 萬珍軒
- 使用フォント：Zen Kaku Gothic New / Roc Grotesk / Zen Old Mincho
- サイトの印象：格式高い・和風・高級感
WALLPAPER MAGIC｜多摩・武蔵野地区の〝壁紙〟セレクト・施工店
- 使用フォント：Zen Kaku Gothic Antique / 解ミン 宙 B
- サイトの印象：レトロ・ナチュラル・親しみやすさ・ポップ
コミュニティサイト編
City Lab Tokyo
- 使用フォント：Zen Kaku Gothic New / Montserrat
- サイトの印象：落ち着き・親しみやすさ
プロモーションサイト編
ハナレグミ 公式サイト
- 使用フォント：Zen Kaku Gothic New / EB Garamond / OSWALD / Shippori Mincho
- サイトの印象：ナチュラル・落ち着き・親しみやすさ
ロゴスランド：LOGOS LAND
- 使用フォント：Zen Kaku Gothic New / Korolev Rounded
- サイトの印象：元気・にぎやか・ポップ
ユサンチェ | 旬の素材と乳酸菌の力を毎日の食卓へ。 | やまや
- 使用フォント：Zen Kaku Gothic New / Shippori Mincho
- サイトの印象：落ち着き・シンプル・やさしい
きっと明日も、ハレ、クラレ | クラレキャンペーンサイト
- 使用フォント：Zen Kaku Gothic New / Noto Serif JP / Roboto
- サイトの印象：若々しい・清潔感・親しみやすい
まとめ
いかがでしたでしょうか？
Zen Kaku Gothicが使われることでサイト全体に親しみやすさや、信頼感、清潔感といった印象が強くなる傾向を感じていただけたかと思います。
もちろん組み合わせるフォントによって高級感や、レトロ、和のテイストなどに混ざっても邪魔することなく、むしろサイトのメッセージ性を引き立てる役割も担ってくれる心強いフォントです！
ぜひ日本語フォント選びの際にはZen Kaku Gothicという選択肢も候補に入れてみてくださいね。
それではまた！
