KODANSHAtech の研修制度を活用した R&D（研究開発）の一環として、書体制作に取り組みました。長野県松本市の「松本文字塾」で、ヒラギノ書体などを手がけた鳥海修さんのもと、1年間にわたり仮名書体をデザインする機会に恵まれました。
今回は、古典のリサーチから Glyphs によるデジタルデータ化まで、その取り組みをお届けします。
前提として
ウェブフォントはデータの読み込みに多少時間がかかるため、表示速度やパフォーマンスを最優先するなら「標準のシステムフォントで十分」と考えるのは合理的だと思っています。また、ウェブフォントを導入したからといって、売上や PV といった数字が直接的に急上昇するわけではない、というのも事実です。
一方で、ブランドのイメージを形作ったり、文章に温かみを持たせたりしたいときには、ウェブフォントはとても有効です。今回は、ニュースサイトのように効率やスピードが求められる場ではなく、「情緒や世界観を伝えたい場」に向けたウェブフォントのお話です。
デジタルでお米を味わうために
書体はよく食べ物に例えられますが、明朝体が「お米」だとしたら、ゴシック体は「パン」のような存在かもしれません。ゴシック体は、今のウェブの主食のように、どこでも手に入り誰でも食べやすい良さがあります。
一方で、お米に例えられる明朝体は、本来なら情緒や繊細な味わいをもたらす主食のはずです。しかしウェブ環境では、「細い線がかすれる」「アンチエイリアス（画面表示のボケや潰れ）で消えてしまう」といった理由から、技術的に敬遠されがちでした。
画面の解像度が上がり表示環境が整いつつある今、デジタルでもお米を美味しく味わえるような情緒ある書体を作れないか、と考えました。
古筆を源流に情緒を求めて
この「情緒」をどう書体へ落とし込むか。まず、その源流を昔の「古筆（古い時代の手書きの文字）」に求めました。
自分の中で「平安時代の優れた書き手」を現代に召喚します（この比喩は、同じ文字塾の中谷可惟さんの受け売りです。ちなみに中谷さんは Oscar Ogg を召喚していました）。その書き手が「もし、いまのようにデジタルが当たり前の時代に、横書きの明朝体を考えたらどうなるか？」──そんな問いをコンセプトに据えました。
書体制作の過程
プロセスは「リサーチ」「スケッチ」「デザイン」という3つのフェーズに分かれます。まずはリサーチからスタートし、次にスケッチ（試作・下書き）へ。ここまでが手作業の「アナログ」領域です。そこから先のデザインが仕上げの段階で、デジタルデータにして書体として完成させる工程になります。
縦書き・横書きの特徴
まずは書道の手本をもとに、縦書きと横書きそれぞれの特徴を分類して分析しました。手本文章の中からひらがなを一文字ずつ収集します。元の文字にはかすれて不鮮明な部分もあるため、一度デジタルデータ（パス）に置き換えて骨格をはっきりさせ、縦横での筆の使い方の違いを並べて比較検証しました。
図版内の文字データは、狩田巻山『ペン習字』（1965年、日本習字普及協会）の資料を参考に、筆者がトレース・再構成したものです。
縦書きでは、運筆の終点が次の文字がある「左下」へ向かい、縦の気脈（筆の流れ）が生まれます。一方、横書きでは次の文字が「右」に配置されるため、筆の勢いは左下へ逃げず、水平方向のつながりを意識した形になります。
文献調査をさらに深めるため、京都の古本屋などに足を運び、江戸時代の和古書『道乃技折』（1814年）をはじめとする昔の和本を調べました。
「さ」という一文字でも、次の文字へのつながりで筆がどう動くのか。当時の「垂直方向への落ち方（縦の流れ）」を参照していきます。
『携帯かな字典』を開き、平安時代を代表する古筆を中心に、さまざまな昔の文字のバリエーションを参照しました。
また、「あ」の語源である「安」から現代の明朝体に至るまでの変遷をたどり、もともと縦長だった文字が、時代とともに四角いマス目に整然と収まっていく過程を確認しました。
画面上の適正値を検証
つづいて、古典の調査と並行して、既存の活字の分析を行いました。
画面の上でつぶれない線の太さは、どの程度なのか。数値を測定し、ウェブでの最適な数値を探っていきました。
重心と視線移動の検証
横組みで視線が流れたときに生じる偏りやガタつきの傾向、そして重心の移動が読みやすさに与える影響を検証しました。
文字の形状を定量的に測定するため、Python で簡易的な検証プログラムを作成し、各文字の「幾何学的な重心」や「外周の多角形（凸包）」を数値化して分析しました。
from PIL import Image, ImageDraw, ImageFont
import numpy as np
from scipy.spatial import ConvexHull
import cv2
def compute_mass_center(image: Image.Image) -> tuple:
"""重心（質量中心）を濃淡から求める関数"""
gray = image.convert("L")
inverted = Image.eval(gray, lambda x: 255 - x)
arr = np.array(inverted)
total = arr.sum()
if total == 0:
return image.width // 2, image.height // 2
y, x = np.indices(arr.shape)
x_center = (x * arr).sum() / total
y_center = (y * arr).sum() / total
return x_center, y_center
def draw_convex_mass_visual(
char: str,
font_path: str,
filename: str,
img_size: int = 512,
font_size: int = 400
):
# Step 1: Render glyph
image = Image.new("L", (img_size, img_size), 255)
draw = ImageDraw.Draw(image)
font = ImageFont.truetype(font_path, font_size)
bbox = draw.textbbox((0, 0), char, font=font)
x = (img_size - (bbox[2] - bbox[0])) / 2 - bbox[0]
y = (img_size - (bbox[3] - bbox[1])) / 2 - bbox[1]
draw.text((x, y), char, font=font, fill=0)
# Step 2: Generate mask and mass points
bin_mask = np.array(image) < 200
points = np.argwhere(bin_mask)
if len(points) < 3:
return
# Step 3: Compute convex hull and center
hull = ConvexHull(points)
hull_pts = [(int(p[1]), int(p[0])) for p in points[hull.vertices]]
x_center, y_center = compute_mass_center(image)
# Step 4: Draw RGBA canvas
rgba = Image.new("RGBA", (img_size, img_size), (255, 255, 255, 0))
draw_rgba = ImageDraw.Draw(rgba)
# 赤い半透明質量領域
draw_rgba.polygon(hull_pts, fill=(255, 200, 200, 150))
# 赤い輪郭線
draw_rgba.line(hull_pts + [hull_pts[0]], fill=(255, 0, 0, 255), width=1)
# 黒文字描画（重ね）
draw_rgba.text((x, y), char, font=font, fill=(50, 40, 40, 255))
# 青点（質量中心）
center_radius = 6
draw_rgba.ellipse(
[x_center - center_radius, y_center - center_radius,
x_center + center_radius, y_center + center_radius],
fill=(0, 0, 255, 255)
)
rgba.save(filename)
算出している重心（青点）は、文字の濃淡（ピクセル密度）から機械的に求めた幾何学的な重心（質量中心）です。そのため、人間が文字を見たときに中心だと感じる視覚的な重心（錯視を考慮した中心）とは必ずしも一致しません。文字のハネや払い、フトコロの広さなどによって、数値上の中心と人間の感覚にはズレが生じるためです。
この幾何学的な重心を測定し、書体ごとの傾向を観察しました。
検証の結果、書体によって重心移動の角度差や高低差（落差）が確認できます。そこから、設計上は以下のような傾向の違いが推測できます。
- 重心の落差が大きい書体：視線が上下に波打ち、独特のリズムや躍動感が生まれる。
- 重心の落差が少ない書体：視線の上下のぶれが抑えられ、穏やかに横へ流れる安定感が生まれる。
このように、書体ごとの設計や特徴が重心の波形に現れる傾向が確認できました。
一方で、横組みに必要なラインの安定感やメリハリ、リズム、そしてスペーシングのバランスには、幾何学的な数値だけでは測りきれない要素が多く残ります。今回のデータを一つの目安としつつ、実際に文字を並べたときの心地よい揺らぎは、自分の目で確かめる必要があると感じました。
情緒を形にするパラメーター
ここからは、具体的に「情緒のある」かなのスペックを固めていく作業です。文字の内側の空間（フトコロ）の広さによる印象の違いを、「狭い」「広い」などの軸で比較したものです。
これらのパラメーター検証にあたっては、鳥海さんの著書『明朝体の教室 日本で150年の歴史を持つ明朝体はどのようにデザインされているのか』（Book&Design）のフレームワークを参考にさせていただきました。
エレメントが「人間的か、機械的か」「情緒があるか、ないか」のマップ上で、位置づけを確認します。
文字の大きさによる印象の違いを、「控えめな」「ニュートラル」「力強い」などの指標で比較したもの。
小塚明朝・游明朝体・築地体三号細仮名を参考に、モダンからクラシックまでの文字の骨格を比較したもの。
文游明朝体 S 垂水かな・游明朝体・築地体三十五ポイント仮名をもとに、線のつながりや粘り具合（粘着度）を比較したもの。
平成明朝体・游明朝体・秀英初号明朝をもとに、筆の動く速さ（筆勢）の印象を比較したもの。
といったパラメーターを、一つずつ検証していきました。
下書き・墨入れ
決まったスペックをもとに、ひらがな・カタカナのスケッチ（試作・下書き）を描いていきます。とはいえ、スペックを決めたからといってそう簡単には上手くいきません。フィードバックを受けて修正を重ねながら、本番用の文字を描き進めていきました。
描き終えたら、次はロットリング（製図ペン）で線を黒く塗りつぶす「墨入れ」を行います。ここで墨入れを丁寧にしておかないと、デジタル化の際に、どの線を基準にパスを引くべきか迷いが生じてしまうためです。
こうして墨入れしたデータを出力し、鳥海さんから具体的なフィードバックを繰り返しいただきました。
Glyphs によるデジタルデータ化
墨入れした文字をもとに、フォント制作ツール「Glyphs」でデジタルデータに起こしていきます。
漢字と混ぜて並べてみて、スクリーンでかすれないか、太さは適切か、調整を繰り返します。
「調整、書き出し、組版、確認」という工程を繰り返し……
ようやく形になったのが、横組み用仮名書体『あおなみ（青波）』です。
おわりに
この一年を振り返ると、出版における伝統的な書体選択とは対照的な、「ウェブ環境の慣習（システムフォント一辺倒になりがちな現状）」に小さな疑問を抱いたことが、この取り組みの始まりでした。明朝体や仮名表現の可能性を探るために飛び込んだ松本文字塾では、同じ志を持つ仲間たちからたくさんの大きな刺激を受けました。
文章として並んだときの文字同士の関係や全体の均整、デザインの統一性を確かめながら微調整を重ね、何度もやり直しつつ文字と向き合ったぶん、得るものの多い一年でした。
また、こうした社外での R&D 活動を支えてくれる、KODANSHAtech の環境にも深く感謝しています。
仮名書体「あおなみ」特設サイト
「あおなみ」特設サイトでは、文字の試し打ちや、実際の文章に使用した見本をご覧いただけます。実装とインタラクションは、弊社デザインエンジニアの竹本さんが手がけました。今後は、この1年間の制作を記録した制作日誌も順次連載していく予定です。
「あおなみ」は現在も、少しずつ文字数を増やしながらアップデートを続けています。デジタルスクリーンなどでの実用性をさらに検証するため、実際のプロジェクトでテストユース（試用）いただけるクリエイターや企業の方を募集しています。ご興味のある方は、ぜひサイト内のお問い合わせからお気軽にご連絡ください！