KumiFont Column
Zen Kaku Gothic Newをコーポレートサイトに使う実例
モダンで端正なZen Kaku Gothic New。コーポレートサイトで信頼感とテクノロジー感を両立させる実装手法を解説します。
Zen Kaku Gothic Newとは
Zen Kaku Gothic Newは、フォントデザイナー山田和寛氏らが手がけたゴシック体ファミリーの最新版です。Google Fontsから無料配信されており商用利用可能。Light、Regular、Medium、Bold、Blackの5ウェイトが用意されています。
「角(Kaku)」の名のとおり、角の処理がシャープで端正、線の太さが均一で現代的な雰囲気を持ちます。Noto Sans JPと比べるとより洗練された雰囲気を持ち、近年のテック系コーポレートサイトでの採用が増えています。
なぜコーポレートサイトに向くのか
理由は3つあります。1つめは、端正な造形が「プロフェッショナル」「信頼できる」という印象を作るから。鋭すぎず、丸すぎず、ちょうど良い緊張感を持っています。
2つめは、5段階のウェイトが見出しと本文の階層構築に十分な幅を持つこと。Light(300)を本文に、Bold(700)を見出しに、Black(900)をキービジュアルのコピーに、と使い分けられます。
3つめは、Noto Sans JPほど「定番感」が強くないため、わずかに差別化された印象を作れること。競合がNotoばかりのなかでZen Kakuを使うだけで「ちょっと洗練されている」サイトに見えます。
実装例: ヒーローと本文の組み立て
テック企業のトップページでは、ヒーローのキャッチコピーにZen Kaku Black(900)を48〜64pxで配置し、サブコピーにMedium(500)を18〜20pxで添える構成が王道です。背景は白かライトグレー、文字色は#0f172a(濃紺寄りの黒)にすると、シャープでクリーンな印象が完成します。
CSS例: font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 56px; letter-spacing: -0.02em; line-height: 1.3;
字間をマイナスに振ることで、文字が引き締まりブランド感が増します。サービス紹介ページの本文にはRegular(400)を16〜17pxで配置し、行間1.8、字間0.05emで読み疲れしない可読性を確保します。
採用前のチェックポイント
Zen Kaku Gothic Newを採用する前に確認したい点が3つあります。1つめは、ブランドガイドラインで「丸み」を許容しているか。Zen Kakuは直線的に見えて実はわずかな丸みを持つため、完全に直線的なブランドには合わない場合があります。
2つめは、競合サイトとの差別化。同業他社が既にZen Kakuを採用しているなら、選定の決め手としては弱まります。3つめは、Light(300)の細さがビジネス文書として読みやすいか。クライアントによっては「読みづらい」と感じる層がいるため、Regular以上を本文に当てるのが安全策です。
KumiFontでZen Kaku Gothic Newを見出しと本文の両方に当て、ウェイトを300・500・700・900で切り替えてみてください。サイトの性格に最もハマる組み合わせが見つかります。