商用利用できる手書き風の日本語Webフォントは、Google Fontsなら「Klee One」「Zen Kurenaido」「Yomogi」、Adobe Fontsなら「TA-神戸」「AB-手紙」などが代表的です。手書き風フォントは、サイトに温かみや親しみやすさを加えられる一方、日本語では選択肢が少なく、使い方を誤ると読みにくくなります。この記事では、Web制作会社の実務目線で、2つのサービスで使える手書き風の日本語書体と、それぞれが向いている場面、設定手順、失敗しないための注意点をまとめて解説します。
手書き風の日本語Webフォントが少ない理由
手書き風の日本語Webフォントが少ないのは、日本語フォントの制作に膨大な文字数が必要だからです。英語フォントはアルファベットと記号で100文字前後あれば成立しますが、日本語はひらがな・カタカナに加え、常用漢字だけで2,136字あります。一般的な日本語フォントは7,000字以上を収録しており、1文字ずつ手書きの揺らぎを表現するには大きな手間がかかります。
Google Fontsの日本語書体のうち手書き系は約1割
Google Fontsの公式データを確認すると、2026年9月時点で日本語対応の書体は68種類。そのうち「Handwriting（手書き）」に分類されているのは7種類で、変体仮名専用の書体を除くと実用的に使えるのは5種類ほどです。ほかの分類にも手書き風の書体が含まれているため、この記事ではそれらも含めて紹介します。
画像にする方法との違い
手書き文字は、デザインソフトで作って画像として貼る方法もあります。ただし画像にすると、文言を変えるたびに画像を作り直す必要があり、検索エンジンや読み上げソフトにも文字として伝わりません。Webフォントなら、テキストのまま更新できるので、お知らせの見出しやキャンペーン文言など頻繁に変わる箇所でも運用が楽になります。
手書き風フォントが効果を発揮する場面
手書き風フォントは「人の気配」や「やさしさ」を伝えたい、短い文字に使うと効果的です。反対に、正確さや信頼感が求められる情報に使うと逆効果になります。
向いている場面
スタッフ紹介のひとことコメント、飲食店の「店長のおすすめ」、保育園や学習塾のキャッチコピー、採用サイトの社員インタビューの見出し、商品写真に添える手描き風の注釈などが代表例です。制作の現場では、写真の上に手書き風の文字を重ねるだけで、ストックフォトのような硬さが和らぎ、サイト全体の温度感がぐっと上がります。
向いていない場面
本文の長い文章、料金表、会社概要、利用規約、フォームの入力欄などには使わないでください。手書き風書体は文字の形が不ぞろいなため、長文では目が疲れ、数字や記号も読み間違えやすくなります。士業や金融などの信頼性が重視される業種では、ワンポイントに留めるのが安全です。
Google Fontsで使える手書き風日本語フォント6選
Google Fontsの書体は、すべて無料で商用利用でき、クレジット表記も不要です（SIL Open Font License）。ここでは漢字まで収録していて実用的に使える6書体を紹介します。
Klee One｜教科書のような読みやすい手書き
鉛筆やペンで丁寧に書いたような書体で、フォントワークスが制作しています。楷書に近い字形で、手書き風のなかでは最も読みやすく、少し長めの文章にも使えます。ウェイトは400・600の2種類あり、見出しとコメントで太さを使い分けられるのも利点です。教育機関や採用サイト、医療・福祉など「親しみやすいが幼すぎない」印象にしたいときの第一候補です。
Zen Kurenaido｜ボールペンで書いた大人の文字
ボールペンでさらっと書いたような、細身で落ち着いた書体です。右上がりの自然な字形で、メモや手紙のような雰囲気が出ます。ウェイトは1種類。雑貨店やカフェの紹介文、ブログのひとことコメントなど、大人向けのナチュラルなデザインと相性がよい書体です。
Yomogi｜細ペンのかわいらしい文字
細いペンで描いたような、ゆるくかわいらしい書体です。線が細いため、背景が写真の場合は文字が埋もれないよう、白い帯を敷くか文字サイズを大きめにしてください。美容サロン、ハンドメイド作品の紹介、キッズ向けイベントなどで活躍します。ウェイトは1種類です。
Slackside One｜ゆるく右上がりの走り書き
マニアックスデザインによる、力の抜けた走り書き風の書体です。右上がりの勢いがあり、楽しげな雰囲気を出せます。くせが強めなので、キャッチコピーや吹き出しの中など、ごく短い文字に使うのがおすすめです。ウェイトは1種類です。
Hachi Maru Pop｜丸文字のポップ体
学生のノートに書かれるような、丸くて元気な「丸文字」です。一目で楽しい雰囲気が伝わるため、子ども向けサービス、学園祭やイベントの告知、SNS用のバナーに向いています。企業のコーポレートサイトで使うと幼い印象になりやすいので、用途は選んでください。
Yusei Magic｜油性マーカーの太い文字
油性マーカーで書いたような、太くてはっきりした書体です。手書き風のなかでは視認性が高く、POP広告のような見出しに向いています。スーパーや飲食店の「本日のおすすめ」、セール告知など、目立たせたい短い文字で力を発揮します。
和風・筆文字系の手書きフォント
ペン字ではなく「筆で書いた手書き文字」の雰囲気がほしい場合は、Google Fontsの筆文字系書体が使えます。和食店・旅館・神社仏閣・和菓子店などのサイトで重宝します。
Yuji Syuku・Yuji Boku・Yuji Mai
衣田フォント工房による筆文字の3書体です。Yuji Syukuは端正な楷書風で読みやすく、Yuji Bokuは力強くのびやか、Yuji Maiは払いが優雅で上品な印象です。いずれも1ウェイトで、見出しや店名のロゴ風表示に向いています。
変体仮名の装飾用書体
Yuji Hentaigana AkariとYuji Hentaigana Akeboneは、そば屋の暖簾などで見かける「変体仮名」を表示するための書体です。通常の漢字やかなの文章を組む用途ではなく、老舗の屋号を雰囲気よく見せたいときなど、ごく限られた装飾に使います。
Adobe Fontsで使える手書き風日本語フォント
Adobe Creative Cloudを契約している場合は、Adobe Fontsの手書き風書体もWebフォントとして使えます。Google Fontsに比べて本物のペン字に近い書体が多く、表現の幅が広がります。印刷物とデジタルの両方で商用利用が認められています。
Adobe Fontsの書体は、公式サイト（fonts.adobe.com）の各書体ページで、好きな文章を入力して見た目を確認できます。この記事の見本画像は、Google Fontsの書体のみ掲載しています。
TA-礼筆｜丁寧なペン字
ペン習字のお手本のような、整った手書き書体です。崩しすぎていないため読みやすく、お礼状風のメッセージや、代表あいさつの署名部分などに使うと誠実な印象を与えられます。
TA-神戸・TA-おおにし｜書き手の温度が伝わるペン字
どちらも実際のペン字をもとにした書体です。TA-神戸は筆圧の強弱まで感じられるリアルな手書きで、あたたかい人柄を伝えたいスタッフ紹介に向きます。TA-おおにしはインクペンで書いたような味わいがあり、手書き感が強いのに読みやすいバランスが魅力です。
TA-雅｜しっとりした大人の手書き
丁寧に書かれた、情緒のあるペン字書体です。ブライダル、旅館、アロマやエステなど、落ち着いた上質さを演出したいサイトの見出しやキャッチコピーによく合います。
AB-手紙｜便箋に書いたような文字
名前のとおり、便箋に手紙を書いたような自然な手書き書体です。お客様の声の紹介や、店主からのメッセージ欄に使うと、読み手に語りかけるような距離の近さが生まれます。
Google FontsとAdobe Fontsの違い
どちらのサービスを使うかは「費用」と「サイトの運用期間」で決めるのが基本です。無料で長く安定して使いたいならGoogle Fonts、表現力を優先し、Creative Cloudを継続契約する前提ならAdobe Fontsを選びます。
| 項目 | Google Fonts | Adobe Fonts |
|---|---|---|
| 料金 | 無料 | Creative Cloudの契約が必要 |
| 商用利用 | 可（クレジット表記不要） | 可（契約期間中） |
| 手書き風日本語書体の数 | 少なめ（10書体前後） | 多い（ペン字・筆文字とも豊富） |
| Webでの使い方 | 埋め込みコードを貼るだけ | Webプロジェクトを作成してコードを発行 |
| 契約終了時 | 影響なし | Webでの配信が止まり表示が切り替わる |
| 自社サーバーへの設置 | 可 | 不可（Adobeのサーバーから配信） |
| 制作会社の視点 | クライアント納品サイトの標準 | 契約者と運用者が同じ自社サイト向き |
制作会社として特に注意しているのが「契約終了時」の行です。Adobe FontsのWebフォントは契約アカウントにひもづくため、制作会社のアカウントでクライアントのサイトに設定すると、制作会社との契約が終わった時点でフォントが表示されなくなるおそれがあります。納品するサイトでは原則Google Fontsを使い、Adobe Fontsを使う場合はクライアント自身のアカウントで設定するようにしています。
手書き風フォントをサイトに設定する手順
手書き風フォントは見出しなどの一部にだけ使うため、使う文字を絞り込んで軽く読み込むのがコツです。Google FontsのKlee Oneを見出しに設定する例で説明します。
ステップ1｜実際の文言でプレビューする
Google Fontsで書体の詳細ページを開き、プレビュー欄にサイトで使う文言を入力します。手書き風書体は漢字の形に個性が出やすいため、店名や社名に含まれる漢字が意図どおりに見えるか、必ず実際の文字で確認してください。
ステップ2｜埋め込みコードを取得する
「Get font」から「Get embed code」を開き、使うウェイトだけを選んでコードをコピーします。見出しにしか使わない場合は、URLに「&text=」を追加して、表示する文字だけを読み込む方法も有効です。
<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=Klee+One:wght@400;600&display=swap" rel="stylesheet">ステップ3｜使う場所だけにクラスで指定する
本文全体ではなく、手書き風にしたい要素にだけクラスを付けて指定します。こうしておくと、あとで書体を変えたくなったときもCSSを1か所直すだけで済みます。
.hand {
font-family: "Klee One", "Zen Kaku Gothic New", sans-serif;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.6;
}ステップ4｜Adobe Fontsの場合はWebプロジェクトを作る
Adobe Fontsでは、書体ページの「Webプロジェクトに追加」からプロジェクトを作成し、発行された埋め込みコードをheadに貼ります。CSSで指定する名前は、プロジェクト画面に表示されるfont-familyの値をそのまま使ってください。書体を追加・削除したときは、プロジェクトを保存し直してから表示を確認します。
読みにくい・表示が崩れるときの対処法
手書き風フォントのトラブルは、ほとんどが「使う場所」と「文字の詰まり方」で起きます。症状ごとに対処法をまとめます。
文字が詰まって読みにくい
手書き風書体は文字ごとに大きさや傾きが違うため、ゴシック体と同じ設定では窮屈に見えます。letter-spacingを0.03〜0.08em、line-heightを1.6〜1.8程度に広げると、手書きらしい余白が生まれて読みやすくなります。
太字にしたら文字がつぶれた
1ウェイトしかない書体に太字を指定すると、ブラウザが無理に太らせてにじんだ表示になります。h2などの見出しタグは初期状態で太字になるので、font-weight: 400を明示して打ち消してください。太さを使い分けたい場合は、2ウェイトあるKlee Oneを選ぶのが確実です。
一瞬ゴシック体で表示されてから切り替わる
display=swapの指定により、フォントの読み込み中はデバイスフォントで表示されるためです。これ自体は白い画面を防ぐ正しい挙動ですが、切り替わりが目立つ場合は「&text=」で読み込む文字を減らす、ファーストビューの大見出しだけ画像にする、といった方法で軽減できます。
よくある質問（FAQ）
Q. 手書き風の日本語Webフォントは無料で商用利用できますか？
A. Google Fontsの書体は無料で商用利用でき、クレジット表記も不要です。Adobe FontsはCreative Cloudの契約期間中であれば商用利用できます。
Q. 最も読みやすい手書き風フォントはどれですか？
A. Klee Oneです。教科書体に近い字形で、手書き風のなかでは長めの文章にも使いやすく、2ウェイトあるので太さの使い分けもできます。
Q. 手書き風フォントを本文に使っても大丈夫ですか？
A. おすすめしません。長文では読みにくく、離脱の原因になります。本文は読みやすいゴシック体にし、見出しやひとことコメントに手書き風を使い分けてください。
Q. 右上がりの手書き風フォントはありますか？
A. Google FontsならZen KurenaidoやSlackside Oneが、自然な右上がりの字形です。Adobe FontsのTA-神戸やTA-おおにしなどのペン字系も、実際の手書きに近い傾きがあります。
Q. WordPressでも使えますか？
A. 使えます。子テーマのfunctions.phpで埋め込みコードを読み込み、追加CSSで対象の要素にfont-familyを指定します。テーマにGoogle Fontsの選択機能があれば、それを使うのが簡単です。
Q. 手書き風以外の日本語フォントも知りたいです。
A. ゴシック体・明朝体・丸ゴシックなど分類別のおすすめは、Google Fontsのおすすめ日本語フォントで詳しく紹介しています。
まとめ｜手書き風フォントは「ひとさじ」が効く
手書き風の日本語Webフォントは、Google FontsならKlee One・Zen Kurenaido・Yomogiなど、Adobe FontsならTA-神戸・AB-手紙などが使えます。無料で長く使うならGoogle Fonts、表現力を重視するならAdobe Fontsが選択肢です。どちらを選ぶ場合も、本文には使わず、見出しやコメントなど短い文字にひとさじ加えるのが、読みやすさと温かみを両立するコツです。
THREE D PLUSでは、書体選びを含めて「その会社らしさ」が伝わるサイト制作を行っています。サイトの印象を変えたい、採用ページに温かみを出したいといったご相談も、お気軽にお寄せください。
