DotGothic16の使い方｜ゲーム風デザインにおすすめのGoogle Fonts

ゲーム風やサイバー風のWebサイトを作るとき、「フォント選び」に悩んだことはありませんか？

実は、フォントを変えるだけでもサイトの印象は大きく変わります。

私が運営しているFANELABでも、ゲームらしい世界観を演出するためにDotGothic16を採用しています。

今回は、Google Fontsで無料利用できる「DotGothic16」の特徴や導入方法、使い方をご紹介します。

DotGothic16とは？

DotGothic16は、Google Fontsで公開されている日本語対応フォントです。

名前のとおり、ドット絵やレトロゲームを思わせるデザインが特徴で、

  • ゲーム風サイト
  • サイバー風デザイン
  • レトロデザイン
  • ドット絵風UI
  • 個人開発サイト

などと非常に相性が良いフォントです。

しかもGoogle Fontsなので、無料で利用できます。

なぜゲームらしく見えるの？

DotGothic16は、昔のゲーム機で表示されていた文字をイメージしたデザインになっています。

一般的なゴシック体よりも角ばっており、文字の輪郭がはっきりしています。

そのため、

  • レトロゲーム
  • RPG
  • ドット絵
  • SF
  • サイバーパンク

のような世界観を自然に演出できます。

Google Fontsから導入する方法

HTMLの<head>に次のコードを追加します。（出てこない方はGoogleFontsから再度検索してみてください）

<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=DotGothic16&family=Tektur:wght@400..900&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">

あとはCSSで指定するだけです。

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

これだけで利用できます。

タイトルだけに使うのがおすすめ

DotGothic16は個性的なフォントなので、本文すべてに使うと少し読みにくく感じる場合があります。

おすすめは、

  • サイトタイトル
  • 見出し
  • キャッチコピー
  • ボタン
  • ロゴ

など、目立たせたい部分だけに使うことです。

例えば、

h1{
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

このように見出しだけ変更すると、本文とのメリハリが生まれます。

ネオンカラーとの相性が抜群

DotGothic16はネオンカラーとも相性が良く、

color:#00EAFF;

text-shadow:

0 0 5px #00EAFF,
0 0 15px #00EAFF,
0 0 30px #00EAFF;

を組み合わせるだけで、一気にゲームタイトルのような雰囲気になります。

FANELABでも、ネオンカラーと組み合わせることでサイバー感を演出しています。

ネオン文字の詳細はこちら👇

【コピペOK】CSSだけでネオン文字を作る方法｜ゲーム風・サイバー風デザインを作ろう！
CSSだけでネオン文字を作る方法を解説します。text-shadowを使った基本の光る文字から、ゲーム風・サイバー風デザインまで、コピペで使えるサンプルコード付きで紹介します。
FANELAB

グラデーション文字にも合う

さらに、

background:
linear-gradient(
90deg,
#00EAFF,
#8B5CF6,
#FF4DE3);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

を使うと、近未来ゲームのロゴのようなデザインになります。

CSSだけで表現できるため、画像を用意する必要もありません。

FANELABで採用した理由

FANELABでは、

  • ゲーム感
  • 遊び心
  • サイバー感
  • 親しみやすさ

を表現したいと考えていました。

一般的なゴシック体では少し堅い印象になってしまいますが、DotGothic16を使うことで「ゲームのスタート画面」のような雰囲気を演出できました。

サイト全体をこのフォントにするのではなく、タイトルや見出しだけに使用することで、読みやすさとのバランスも取っています。

他のフォントと組み合わせると読みやすい

本文にはシンプルなゴシック体を使い、見出しだけDotGothic16にするのがおすすめです。

例えば、

  • Noto Sans JP
  • Zen Kaku Gothic New
  • BIZ UDPゴシック

などと組み合わせると、見た目と読みやすさを両立できます。

DotGothic16がおすすめなサイト

このフォントは、特に次のようなサイトにおすすめです。

  • ゲーム紹介サイト
  • 個人開発サイト
  • AIサービス
  • ポートフォリオ
  • サイバー風デザイン
  • イベントサイト
  • レトロゲーム風Webサイト

世界観を重視したデザインとの相性が非常に良いフォントです。

まとめ

DotGothic16は、ゲーム風やサイバー風デザインを作りたい方にぴったりのGoogle Fontsです。

無料で利用でき、HTMLとCSSを数行追加するだけで簡単に導入できます。

特に、

  • タイトル
  • 見出し
  • キャッチコピー
  • ロゴ

などに使用すると、サイト全体の世界観を引き立ててくれます。

ゲームや近未来をイメージしたWebサイトを制作する際は、ぜひ一度試してみてください。

サイバー風Webデザインシリーズ

FANELAB（このブログ）で取り入れたデザインの工夫

サイバー風Webデザインの作り方｜FANELABで取り入れたデザインの工夫を紹介
FANELABで採用しているサイバー風デザインの作り方を紹介します。ネオンカラーやDotGothic16フォントなど、ゲーム風・近未来風デザインを制作するポイントを実例付きで解説します。
FANELAB

コピペOK、CSSだけでネオン文字を作る方法

【コピペOK】CSSだけでネオン文字を作る方法｜ゲーム風・サイバー風デザインを作ろう！
CSSだけでネオン文字を作る方法を解説します。text-shadowを使った基本の光る文字から、ゲーム風・サイバー風デザインまで、コピペで使えるサンプルコード付きで紹介します。
FANELAB

サイバーパンク風タイトルを作るテクニック

CSSでサイバーパンク風タイトルを作るテクニック【ゲーム風デザインを再現】
CSSでサイバーパンク風タイトルを作る方法を解説します。ネオンカラーやグラデーション、フォント選び、文字装飾など、ゲーム風・近未来風デザインを作るテクニックを紹介します。
FANELAB

コピペOK、CSSだけでガラス風UIを作る方法

【コピペOK】CSSでガラス風UI（Glassmorphism）を作る方法
CSSだけでガラス風UI（Glassmorphism）を作る方法を解説します。backdrop-filterを使った透明感のあるデザインや、ぼかし・枠線・影の付け方をコピペOKのサンプル付きで紹介します。
FANELAB

カラーコード付き、サイバーデザインおすすめの配色👇

【カラーコード付き】サイバー風デザインにおすすめの配色4選
サイバー風デザインにおすすめの配色を5パターン紹介します。カラーコード付きなので、ゲーム風・AI・近未来デザインのWebサイト制作にそのまま活用できます。
FANELAB

タイトルとURLをコピーしました