fonts について
デジタルレイアウト向けのフォント選びを支援する、デザイナーや開発者向けのリファレンスです。Google Fonts をスタイルや用途別に分類し、組み合わせ方と Next.js の例を示します。
主な機能
- 01ビジュアルスタイル別のフォント一覧
- 02書体カテゴリ別の推奨
- 03職種別のフォント案
- 04見出しと本文の組み合わせ
- 05Next.js のフォント読み込み例
活用シーン
- 01エディトリアルレイアウトのフォント選定
- 02見出し用と本文用の書体の組み合わせ
- 03ポートフォリオの書体選び
- 04Next.js での Google Fonts 読み込み
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/fontsを入力して読み込まれたか確認します。
詳細
スキル：フォント
個性のあるタイポグラフィを選ぶためのリファレンスです。使われすぎているフォント（Helvetica、Arial、Roboto、Open Sans、Montserrat、Playfair Display、Poppins、Lato）は避けてください。
以下のフォントはすべてGoogle Fontsから無料で利用でき、next/font/googleで動作します。
雰囲気別
| 雰囲気 | フォント |
|---|---|
| エディトリアル／文学的 | Newsreader、Lora、EB Garamond、Cormorant、Spectral |
| ラグジュアリー／ファッション | Cormorant Garamond、Bodoni Moda、Libre Bodoni、Fraunces |
| モダンでクリーン | Space Grotesk、DM Sans、Plus Jakarta Sans、Manrope |
| 大胆／インパクト重視 | Bricolage Grotesque、League Spartan、Syne、Outfit |
| 遊び心のある | Rubik、Nunito、Comfortaa、Quicksand |
| テクニカル／未来的 | Space Mono、JetBrains Mono、Fira Code、IBM Plex Mono |
| 控えめ | Mulish、Chivo、Proza Libre、Work Sans |
セリフ体
| フォント | 用途 |
|---|---|
| Cormorant | コントラストの高いエレガンス、エディトリアルな見出し、ラグジュアリーな印象 |
| Cormorant Garamond | 洗練された威厳、上質なエディトリアル |
| Lora | エレガントな本文、ブログコンテンツ、小さなサイズでも読みやすい |
| EB Garamond | クラシックな書籍のタイポグラフィ、長文の読書 |
| Newsreader | 雑誌／エディトリアルのレイアウト、ジャーナリスティックな印象 |
| Spectral | 個性を備えた、バランスのよい本文 |
| Fraunces | 個性的なモダンな可変セリフ体、9ウェイト |
| Bodoni Moda | ディドン調の見出し、ファッション／ラグジュアリー |
| Libre Bodoni | クリーンなBodoniの代替フォント、ディスプレイ用途 |
| Libre Baskerville | 文学的な印象（Mrs Eavesの代替） |
| Young Serif | 温かみのある現代的な見出し |
| Instrument Serif | モダンで洗練されたセリフ体、エディトリアル |
| Alegreya | 個性的な字形、洗練されたポートフォリオ |
| BioRhyme | エディトリアルレイアウト向けのスラブセリフ体、7ウェイト |
サンセリフ体
| フォント | 用途 |
|---|---|
| Space Grotesk | 現代的なブランディング、幾何学的な個性 |
| DM Sans | ヒューマニストデザイン、Futuraの代替、特徴的な「G」 |
| Plus Jakarta Sans | モダンなUI、個性的な文字 |
| Manrope | クリーンな幾何学的サンセリフ体、7ウェイト |
| Outfit | 幾何学的なヒューマニスト、モダンなポートフォリオ |
| Bricolage Grotesque | 大胆な見出し、個性のある表現 |
| Syne | 触感のある独自性、クリエイティブなポートフォリオ |
| Chivo | 汎用性の高い定番フォント、9ウェイト |
| Work Sans | 画面表示に最適化、親しみやすくプロフェッショナル |
| Mulish | ヒューマニストと幾何学のハイブリッド、可変フォント |
| Epilogue | 温かみのある幾何学的デザイン |
| Proza Libre | 控えめな洗練、エディトリアル |
| League Spartan | 幅の狭い幾何学的デザイン、インパクトのある見出し |
| Inter | UI向け、優れた可読性（一般的になりつつあるため、控えめに使用） |
ディスプレイ
| フォント | 用途 |
|---|---|
| Bricolage Grotesque | 表現力豊かな見出し、大胆な個性 |
| Fraunces | 劇的なウェイト幅を持つ可変セリフ体 |
| Instrument Serif | モダンなエディトリアル見出し |
| Young Serif | 温かみのある現代的な見出し |
| Abril Fatface | 大胆なディドン調のディスプレイ |
| Rubik Glitch | 実験的／テックな美学 |
| Silkscreen | レトロなピクセル／ターミナルの美学 |
| Aboreto | 個性的なディスプレイスタイル |
| Red Rose | 表現力豊かな見出し |
アーキタイプ別
| 人物像 | 方向性 |
|---|---|
| ライター／編集者 | Newsreader、Lora、EB Garamond、Spectral |
| デザイナー | Space Grotesk、Bricolage Grotesque、Fraunces |
| 開発者 | Space Mono、JetBrains Mono、IBM Plex Mono |
| 戦略家 | Cormorant Garamond、Chivo、DM Sans |
| アーティスト | Syne、Rubik、Instrument Serif |
| ラグジュアリー／ファッション | Bodoni Moda、Cormorant、Libre Bodoni |
おすすめの組み合わせ
| スタイル | 見出し＋本文 |
|---|---|
| エディトリアル | Instrument Serif + DM Sans |
| モダン | Bricolage Grotesque + Space Grotesk |
| 文学的 | Cormorant + Spectral |
| テック | Space Mono + Inter |
| ラグジュアリー | Bodoni Moda + Manrope |
| クリエイティブ | Fraunces + Work Sans |
| ミニマル | Young Serif + Plus Jakarta Sans |
Next.js での使用方法
import { Space_Grotesk, Newsreader } from 'next/font/google';
const heading = Space_Grotesk({
subsets: ['latin'],
variable: '--font-heading'
});
const body = Newsreader({
subsets: ['latin'],
variable: '--font-body'
});
組み合わせのルール
- カテゴリにコントラストをつけます：セリフ体の見出し＋サンセリフ体の本文（またはその逆）
- 一方を主役、もう一方を補助役にします（視線を奪い合わないようにします）
- 視覚的な調和のため、可能であればエックスハイトを揃えます
- 1つのサイトで使用するフォントは最大3種類にします
コメント
Markdown 対応