ゲーム風やサイバー風の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でも、ネオンカラーと組み合わせることでサイバー感を演出しています。
ネオン文字の詳細はこちら👇
グラデーション文字にも合う
さらに、
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（このブログ）で取り入れたデザインの工夫
コピペOK、CSSだけでネオン文字を作る方法
サイバーパンク風タイトルを作るテクニック
コピペOK、CSSだけでガラス風UIを作る方法
カラーコード付き、サイバーデザインおすすめの配色👇
