Font Lab

Font Lab

フォントを選び、文章を整えましょう。あとはエージェントにおまかせください。

デモ全編を見る →

Font Lab は、AI が構築したサイト向けのリアルタイムなタイポグラフィ・テキストエディターです。エージェントがインストールすると、厳選された Google Fonts と個性的なオープンファウンドリの書体を組み合わせたフォントの方向性を提案し、実際のサイト上にリアルタイムで表示します。フォントを切り替えて、気に入ったものを選べます。その後エージェントが仕上げまで行います。Next.js では next/font + Tailwind を使い、それ以外ではセルフホストの @font-face を使います。どちらも元に戻せます。

AI が構築したサイトの多くは、エージェントがデフォルト設定を使うため、Inter や Geist などのありきたりなフォントになってしまいます。Font Lab では、いくつかの質問への回答をもとにエージェントが厳選した候補から、人が選べます。また、文章を編集して、自分が書いたような表現にすることもできます。

コピーして使えるプロンプトはこちら：https://www.jack-mcgovern.com/fontlab

インストール

プロジェクト内で、次のプロンプトを使用してください。

Install font-lab (npx font-lab install) and set it up for me — start whatever needs to run; I shouldn't have to touch the terminal. Ask me a couple of questions, compose font directions for this project, and show them on my real pages: the live panel if you're on my machine, screenshots if you're not. Before you tell me to look, make sure it actually worked — the panel really loaded, or the screenshots really came out. I make the call. Don't pick for me. Then write the code for the one I choose, and stick around — I'll have text fixes as I go.

対応環境：Claude Code · Cursor · VS Code · Codex · Windsurf · Gemini CLI 対象：CSS の接続点があるあらゆるフレームワーク — Next.js ではライブパネルを含むフル機能を利用でき、それ以外の環境でも同じエンジンで動作します（下の表を参照）。

インストール時に利用中のエージェントが自動検出され、それぞれに適した形式でスキル、MCP サーバー、設定がすべて組み込まれます。接続点がまったくないスタックでは、Font Lab は中途半端な適用を拒否し、明確な理由とともに生成済みコードを渡します。

新しく登録した MCP ツールは、次のセッション再読み込み時に読み込まれます。ただし、エージェントを待たせる必要はありません。すべてのツールは単発の CLI としても実行でき、インストール完了と同時に処理を開始できます：npx font-lab run <tool> '<json-args>'（同じツール一覧、同じ JSON 出力）。これはセッションの途中で MCP サーバーが停止した場合のフォールバックとしても使えます。

フレームワーク — 環境ごとの提供機能

テイストエンジン、適用可否の判定、ポータブルプレビュー、スクリーンショットはすべてのスタックで利用できます。異なるのはプレビュー画面と、選んだフォントをコードに反映する方法です。font-lab analyze を実行すると、プロジェクトに対する正確な判定が表示されます。

お使いのスタック	プレビュー	自動適用
Next.js App Router + Tailwind v4	アプリ内のライブパネル + 実サイトのスクリーンショット	next/font + Tailwind コード生成
あらゆるフレームワーク + Tailwind v4（Vite、Astro、Remix、SvelteKit、TanStack など）	実サイトのスクリーンショット（ヘッドレス描画）+ ポータブルシート	セルフホストの @font-face + CSS エントリ内の @theme ロールマップ
あらゆるフレームワーク + Tailwind v3（tailwind.config の fontFamily にフォントを設定）	実サイトのスクリーンショット（ヘッドレス描画）+ ポータブルシート	セルフホストの @font-face + CSS エントリ内のユーティリティ／Preflight の上書き
Tailwind なし、CSS 変数経由でフォントを適用（--font-body、--fd など）	実サイトのスクリーンショット（ヘッドレス描画）+ ポータブルシート	セルフホストの @font-face + 独自のフォント変数の参照先を変更
接続点なし（font-family のハードコード、CSS-in-JS）	実サイトのスクリーンショット（ヘッドレス描画）+ ポータブルシート	手動適用：Font Lab がコードブロックを生成し、それを貼り付けます

自動適用のすべての方法は、適用範囲が限定され、冪等で、元に戻せます（font-lab undo）。エージェント向け： font_lab_analyze から capabilities と shipNote を読み取ってください。Next.js 以外のスタックでも同じループを別の経路で実行でき、処理を止める理由にはなりません。

アップグレード

そのまま npm install を実行するのではなく、必ず upgrade を使ってください。

npx font-lab upgrade

Font Lab は、npm パッケージと、プロジェクトに配置されるパネルコード（app/_fontlab/）の2か所にあります。そのまま npm install font-lab@latest を実行してもパッケージは更新されますが、パネルは古いバージョンのままになり、「バージョンが古い」という警告が表示されます。upgrade を使うと、パッケージの更新、パネルの再配置、MCP の再固定、古いエンドポイントの停止まで、すべてを1つのコマンドでまとめて実行できます。

仕組み

1. ヒアリングします。 Font Lab は、どんな方向性を目指しているのかを尋ねます。どんな印象にしたいのか、どのくらい大胆に変えたいのか、どんなブランドを想起させたいか、あるいは避けたいかを聞き、汎用的な初期設定ではなく、あなたに合わせた方向性を提案します。
2. 組み合わせます。 エージェントは、書体の方向性を少数まとめて作成します（ディスプレイ用＋本文用＋等幅用、それぞれに選定理由を添えます）。使い古された AI の定番から脱却できるよう、組み込みの「ありきたりさを避ける」評価基準により、Inter／Geist／Space Grotesk ばかりの候補は除外されます。
3. 選びます。 自分のサイト上で候補を比較できます。チャットに表示されるスクリーンショット（ウェブでもスマートフォンでも利用可能）を使うか、ローカルで動作するライブ切り替え／ミックス／比較パネルを使えます。最終的に選ぶのは、常にあなたです。
4. 反映します。 エージェントは、使用しているスタックに合わせた実際のコードを書き込みます。Next.js では next/font ＋ Tailwind を使用し、それ以外では、Tailwind のテーマ、v3 ユーティリティ、または独自の CSS フォント変数に組み込んだセルフホストの @font-face を使用します。すべての変更は元に戻せます。
5. きれいに完了します。 done ✓ をクリックする（または、そう伝える）と、エージェントが font_lab_finish を実行します。開発用パネルの足場コードが取り除かれ、Git で検証済みのコミット計画が提示されます。コピーの編集とフォントの変更を、すぐに実行できるコマンド付きで反映できます。Font Lab に関するものは一切混ざりません。セッション中、足場コードと状態は Git で常に自己無視されるため、そもそも git status が煩雑になることはありません。

パネル

Font Lab のパネルは、実際に動作しているサイトの上に表示されます。実際のページと実際のコンテンツを使って、フォントや文言をリアルタイムに変更できます。

• 方向性を切り替える：矢印キーを使って、複数のルートにまたがる実際のコンテンツ上で、書体の組み合わせを確認できます
• 役割を組み合わせる：ある方向性の見出しと、別の方向性の本文を組み合わせ、そのミックスを独立した方向性として保存できます
• 変更前／変更後：B を押したままにすると現在のフォントを確認でき、space を押すと最終候補2つを切り替えられます
• 調べる：任意のテキストにカーソルを合わせると、その役割、書体、サイズ、同じ書体が適用されている要素の数を確認できます
• 文言を編集する：テキストをダブルクリックして書き換えると、ソースファイルに直接保存されます
• 変更内容を確認する：編集のたびに、ページ全体で何が変わったかを正確に確認できます
• すべて元に戻す：変更にはすべて、元に戻すコマンドが用意されています
• 完了 ✓：1回のクリックでセッションをきれいに終了できます。エージェントが開発ツールを取り除き、正確なコミット計画を提示します

パネルはヘッドレスでも動作します。エージェントが各方向性でサイトのスクリーンショットを撮影し、チャットに画像を表示します。各方向性につき、チャットに収まるサイズのヒーローショットと、その背後に全ページのキャプチャが表示されます。スマートフォンでも、ウェブ上でも、エージェントを実行できる場所ならどこでも利用できます。

ライブパネルが対応しているのは Next.js だけですが、実際のサイトでのプレビューは Next.js に限りません。それ以外のすべてのフレームワークでも、Font Lab は各方向性を実際に動作しているページに適用します（パネルが切り替えに使うのと同じ、レンダリングを優先する調査機能をヘッドレスで注入します。足場コードやソースへの書き込みはありません。プレビュー用フォントは自己無視される状態にキャッシュされるため、実際に反映するまでは git status がクリーンなままです）。開発サーバーが動作していない場合、スクリーンショットツールがプロジェクト独自の開発コマンドを自動で起動します。127.0.0.1 にバインドし、ヘルスチェックを行い、キャプチャ後に停止します。これにより、クラウド／コンテナ内のエージェント（ウェブ上の Claude Code など）で、人間がエージェントの localhost にアクセスできない場合でも、無人で一連の作業を実行できます。開発サーバーをまったく起動できない場合は、代わりにポータブルプレビューを利用できます。独自の配色とコピーを使った、自己完結型の HTML 書体見本シートです（フォント埋め込み済みで、オフラインでも開けます）。これは書体見本カードであることが明確に示され、実際のページとして提示されることはありません。

誠実さ

Font Lab の中核となる約束は、プレビュー == 出荷です。パネルに表示されるものが、そのままコード生成によって書き出されます。

• ゲートを通過したすべてのフォントで、忠実性を保証します。バイト単位で完全に一致しない場合は、「表示がわずかに異なる可能性があります」というバッジを正直に表示します。
• スタックに実際の接続箇所がある場合にのみ自動で適用します。それ以外の場合は、推測せず、明確な理由とともに生成コードを提示します。変更が中途半端に適用されることはありません。これが契約です。
• 外部から取得したテキストを使う場合は、明示的に通知します。黙って編集することはありません。
• 人が選んだものが、何よりも優先されます。

貢献とテスト

テスターの皆さんの報告が何より重要です。特に「自分のリポジトリでは違う動作をした」という報告を歓迎します。アナライザーの出力を添えていただくと、最も役立ちます。

• Issue フォーム — バグや「自分のスタックをサポートしてほしい」というリクエスト
• CONTRIBUTING.md — コードへの貢献方法とテストの実行方法
• SECURITY.md — セキュリティ上の問題

詳しく知る

• cli/README.md — 完全なユーザーガイド：インストール時のフラグ、エージェントのループ、すべてのキーボードショートカット、CLI リファレンス
• docs/CONCEPT.md — ビジョンと中核となる信念
• docs/ARCHITECTURE.md — 選択の瞬間がどのように機能するかと、selection.json の仕様
• docs/SHIP-SPEC.md — 選択したものを、実際に適用可能で元に戻せるコードにする方法
• docs/PRODUCT.md · docs/PANEL-VISION.md — プロダクトとブランドの背景

---

オープンソース · MIT · npm provenance を使って公開しています。すべてのリリースを、このリポジトリとコミットまで追跡できます。jack-mcgovern.com で構築し、実際に活用しています。