自分の手書きでフォントを作る

 (chameth.com)
1 ポイント 投稿者 GN⁺ 2025-09-07 | 1件のコメント | WhatsAppで共有
  • 個人Webサイトの個性を出すため、自分で手書きフォント作りに挑戦した
  • FontForgeやInkscapeなどのオープンソースツールの使用は直感的ではなく、不便さを感じた
  • 最終的にCalligraphrの有料サービスを通じて、手書きフォントを手軽に生成・修正できた
  • 繰り返しの微調整と修正作業が必要だったが、実際の仕上がりには満足できた
  • Calligraphrのユーザーフレンドリーなビジネスポリシーにも好印象を受け、推薦している

個人Webサイトに個性を加えるための試み

  • 自分のWebサイトが無味乾燥な企業サイトとは違い、より個人的で独特な雰囲気を持ってほしいと考えた
  • デザイン面で小さな変化を加えるため、画像やリンクなどに独特な効果を追加してきた
  • 既存のモノスペースフォントの代わりに手書き風の筆記体を適用したかったが、適切なフォントが見つからず、自作を決意した

オープンソースツールへの挑戦と失敗

  • InkscapeやFontForgeなどのオープンソースツールを使って、ベクターベースのフォントを作ろうと試みた
    • グラフィックタブレットを使って大文字のA、B、Cを書き、SVGとして保存してからフォントエディタに取り込もうとした
    • FontForgeの使いにくいユーザー体験と直感的でないUIに挫折感を覚えた
    • ファイル選択・インポートの手順やSVGの読み込みなど、基本的な作業でも多くの試行錯誤と煩雑さを経験した
    • グリフ編集の過程で曲線を扱うベジェハンドルも操作しづらいと感じた
    • 繰り返されるエラーメッセージと面倒なパス移動などにより、途中で断念した
  • InkscapeのSVGフォント作成機能も使ってみたが、各グリフを1つのパスに結合する必要があり、ベクター編集の知識も求められるなど、複雑で非効率なプロセスだと実感した

有料Webサービス（Calligraphr）の選択

  • さまざまなオープンソースのチュートリアルを探しているうちに、Calligraphrというクローズドソースのサービスの存在を知った
    • 無料版にはリガチャ、さまざまなバリエーション、75グリフ制限があるが、1か月の単発決済でプレミアム機能を利用できる
    • 自動更新なしで一度だけ支払う形で利用できる点と、透明な価格ポリシーを高く評価した
  • Calligraphrの使い方
    • テンプレートを印刷して手書きし、それをスキャンしてサービスにアップロードする方式
    • テンプレートには選択した文字、記号、リガチャなど多様な形式を含められる
    • 複数バージョンを作って評価・選択でき、ブログタイトルに合わせたカスタムリガチャも追加した
    • Sharpieペンを使って、太く鮮明な文字に特徴を持たせた
    • iPhoneの書類スキャン機能を使ってPDFとしてスキャンし、アップロードした

フォントの反復改善と微調整

  • CalligraphrのWeb UIを通じて、フォントのプレビューと直接適用テストができる
    • 実際のWebサイトにフォントを適用し、さまざまなサイズでの可読性とデザインを確認した
  • 初回バージョンは文字がベースラインに合っておらずバランスが崩れるなどの問題があり、位置およびサイズ調整機能で細かく修正した
  • **文字間隔（kerning）**を狭めて、手書き特有の自然なつながりを持たせた
  • 一部のグリフにはグリフ領域の外側にスキャンされたノイズが含まれており、不自然な間隔が生じていた
    • 単純に幅だけを縮めると、文中に離れた点が残ってしまう
    • 編集ツールで不要なピクセルを完全に削除し、スムーズに修正できた
  • こうした反復作業は、むしろ改善が目に見えてわかるため、楽しく感じられた

結果とCalligraphrサービスに対するポジティブな体験

  • 完成したフォントはWebサイトのヘッダーやキャプションなどに実際の手書きに近い雰囲気を与え、自分が求めていた個性を満たしてくれた
  • Sharpieの太さのおかげで、小さな文字でも可読性が高い
  • オープンソースツールとは異なり、短時間かつ低コストで成果物を完成させられる効率性を実感した
  • サブスクリプション終了後も、**Calligraphrがユーザーデータを自動バックアップ（export）**して提供してくれる
    • JSON形式ですべてのグリフ情報と画像データが含まれており、今後の再購読や追加編集に活用できる
    • 事前に明確なポリシー、継続課金への誘導なし、データの透明な提供といったユーザーフレンドリーなビジネス慣行に感銘を受けた
  • 同じ作業に挑戦したいなら、Calligraphrの簡潔さと顧客中心のサービスという点だけでもおすすめできる体験だ

関連記事

1件のコメント

 
GN⁺ 2025-09-07
Hacker Newsのコメント
  • 2013年に自分の結婚式用ウェブサイトのために似たようなことをやってみた。郵送サービスを使ってそこそこ良いTTFを作り、それをWOFFに変換した。今でも https://ruthandjosh.net/story/ で公開されている（ミレニアル感に注意）
    • この時代にリンク切れしていないサイトを維持しているのは本当にすごい
    • このストーリーは本当に美しい。まったく気恥ずかしさを感じなかった
    • この手の気恥ずかしさを共有してくれてありがとう。おかげで一週間をすてきに締めくくれた。シャバット・シャローム
    • このサイト、本当にすばらしい。デザインとレイアウトがむしろ時代を超越している感じだ
    • Ruthが本当に飛行機でひとりでシャンパンを飲んだのか気になる
  • 努力と過程に拍手を送りたい。オープンソースの代替をあきらめて、安価な選択肢で自分だけのものを持つという率直な選択に共感する。自分の話も似ている。自分も独学のクリエイティブ系なので、ときどき特定の技術やツールをどうしても使ってみたくて意地になってしまう。これが埋没費用や完璧主義のせいなのかは分からない。サイトのデザインは本当に個性にあふれている。PS: 自分のFirefoxブラウザでは fonts、developer-blog、creative-sites、boutique-designs にブックマークしてある
  • 自分の手書きは本当にひどくて、書けば書くほど下手になる。悪循環だ。字が汚いせいで何でもタイピングするようになり、練習しないからさらに悪くなる。自分の手書きでフォントを作ったら暗号ハッシュにも使えそうだ。それでもこのアイデア自体は気に入っている。手書きするよりメッセージをタイプするほうが個人的でないとは思わないが、実際には少しだけよそよそしく感じる。手書きフォントはその感じを少し補ってくれそうだ
    • ブラックメタルのアルバムジャケット用フォントとしてなら合いそう
    • 「もっと簡単な方法があるせいで、技術そのものを身につける必要すら感じなくなり、学ぶ機会をどんどん失っていく」――こういう現象は今かなり深刻な問題だと思う。簡単なシステムばかり覚えていると、結局は本当の技術ではなく、そのシステムの使い方だけを覚えることになる。たとえば自分のルームメイトはナイフ研ぎシステムしか使えず、手では研げない。システムがなければ何もできない。最近はこういう人が本当に増えた。ただマニュアルに従うだけで、なぜそうなるのかというつながりがない。社会全体としても基本的な能力がかなり弱くなっているが、資本主義があらゆるものを「時間を節約するために金を払う」構造にしてしまったからだと思う
  • 自分の知る限り、Microsoft Font Maker は今でも Windows Ink スタイラスで無料で使える（性能は少し物足りないかもしれない）。以前何を使ったかは覚えていないが、たぶん Windows Tablet PC 用の PowerToy に入っていた気がする。 https://apps.microsoft.com/detail/9n9209f8s3vc?hl=en-US&gl=US
  • 子どものころに虐待を受けていたので、自分の手書きはかなりひどい。筆記体もろくに書けない。もし自分の手書きで作ったフォントがあったら、みんな「うわ、この人の親はずいぶん無責任だったんだろうな」と思うはずだ。Microsoft Word ではフォント名が "Danny Wets The Bed" になっていそう。冗談だけど、記事は楽しく読んだし、すばらしい投稿だった
  • 10代のころ、好きだった女の子の手書きで ttf-font を作ってプレゼントしたことがある。あの作業を本当に甘く見ていた。Corel Draw Suite に入っていたツールを使って、彼女が書いてくれたアルファベットをスキャンし、すべての文字を自分でベクター化した。とてつもない手間だった。それから25年がたったが、今でもあのころの純粋な情熱には驚かされる。たったひとつの誕生日プレゼントのために膨大な時間を注ぎ込み、実際には何をしているのかほとんど分からないまま作業していた。最終的には完成したけれど、何も知らなかったからこそできたのだと思う
    • ミックステープよりはずっといいね。自分の手書きで何か書くなんて罰ゲーム級だ
    • その後彼女とどうなったのか気になる。その努力に見合う価値があったのか、ハッピーエンドだったのか知りたい
  • 技術が十分進歩して、実際には手書きと見分けがつかないほどになっているのか気になる。もしこれを使って学校の教授が求める手書き課題を処理したら、バレずに通せるのかも気になる。もちろん仮定の話だが
  • Amy Goodchild が試していた方法（ https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript ）を、実際のフォントファイルに変換する方法があるのか気になる
    • たぶん Chaikin's paths を Bézier 曲線に「翻訳」する問題になると思う。そうすれば Metafont フォントにできて、そこから ttf、otf などへ変換することも可能だと思う
  • 似た道をたどった人たちもいる
    • それから、昔からあるすばらしい Tekton フォントもある。建築家 Frank D.K. Ching の手書きをもとにしているが、実際のデザインは Adobe の David Siegel が手がけた
  • 本当にすてきな仕事だ。共有してくれてありがとう。今、子どもたち向けのワークショップを準備していて、そこでは子どもたちに自分だけのウェブサイトやウェブアプリを「自分で描いてみる」体験をしてもらいたいと思っていた。これまではフォントの作り方を知らなかったので取り入れていなかったが、これで方法が分かった。本当にありがとう！ もしこの種のワークショップをもっと楽しくするアイデアがあれば教えてほしい。たとえば紙でプロトタイプを作って、それを実際にクリックできるダミー（動く模型）に変えるような形で、アナログからデジタルへ自然につなげたいと思っていた。ちなみにここでいう子どもたちは8〜10歳だ
    • こんにちは、もし受け入れてもらえるなら自分もそこに貢献してみたい。故郷の子どもたちに創造的なテクノロジーを教えてみたかった。自分はナイジェリア／アフリカにいて、JavaScript をシングルクォートとセミコロンなしで書いている