GlyphForge ができるまで — ジェネレーター 4本目を モノグラム / SVG ロゴ で開く

GlyphForge は、 ブラウザだけで動く無料 モノグラム / イニシャル ロゴ ジェネレーター。 1-3 文字 → 8 アート スタイル + 6 パレット + SVG / PNG ダウンロード。 ラボ 35本目、 ジェネレーター thesis 4本目 (HueDeck 色 / TypeForge 字 / PatchPad 音 / GlyphForge 紋章 で 「色 / 字 / 音 / 紋章」 4 本柱完成)。

なぜこの形にしたか

直近 5本 (soroban-rush / pop-drift / maya-cast / type-rush / frac-cast) に ジェネレーターゼロ、 §3.1 連続にならず safe。 thesis 分布 で 学習が 4 本に先行、 ジェネレーター から補充して多様性。

候補比較:

• SVG モノグラム ジェネレーター (採用) — SEO 強 「モノグラム ジェネレーター 無料 / イニシャル ロゴ / SVG ロゴ作成」
• 育休給付金 (計算 5本目) — SEO 強だが マネー計算機 4 本柱 直近で食い合いリスク
• 西洋占星術 (占い 4本目) — fate-num zodiac wheel と被り
• Conway ライフゲーム (シミュ 4本目) — wow 中、 SEO 弱め

選んだ理由:

• 結婚式 / 名刺 / 個人ロゴ / 同人誌 / 印章 の永続的需要 (季節性なし)
• SVG path 直接構築 は wow ポイント (8 スタイルを純 関数で 動的描画、 lib 不要)
• 既存 (Canva / Squarespace Logo Maker) は ログイン必須 + 透かし、 「無料 / 登録不要 / SVG 透かしなし」 で差別化
• type-forge (3D 字) / hue-deck (色) / patch-pad (音) と並ぶ 4 本目で ジェネレーター シリーズ完成感
• letterpress 活字工房 motif は 既存 34 本柱と完全別軸

visual direction — §6.1 Visual Audit 20本目の適用

直近 5本の visual を書き出す:

soroban-rush — warm brown + 玉青藍 + 玉朱 + 和紙 (そろばん木枠 寺子屋)
pop-drift    — cream paper + cobalt + warm red (昭和統計年鑑 Risograph)
maya-cast    — earth red + jade + obsidian + gold (マヤ古代壁画)
type-rush    — cream paper + carbon ribbon + brass key + red (古いタイプライター)
frac-cast    — ivory paper + sepia + brass corner + crimson (数学者ノート)

題材 「モノグラム / 紋章 / 印刷工房」 → motif 候補:

• letterpress 活字工房 (ink black + 朱赤 + 生成り + brass plate + emerald + lead) ← 採用
• 紋章学 / heraldic 古代 (羊皮紙 + ink + ruby + brass) — frac-cast と近い
• ステンドグラス 大聖堂 (deep + brass) — arcana-flip と被る
• アール・ヌーボー (1900s) — broad

採用 3 要素:

• palette: ink black #1a1410 + 朱赤 #c92e2e + 生成り cream #f0e8d0 + brass plate #b5933a + emerald #2d7d5e + lead gray #6a6258
  • type-rush の cream paper 系統と一部重複だが motif は personal typewriter (家庭) vs 商業 letterpress 工房 で完全別
  • frac-cast の brass + crimson とも 用途別 (手書きノート vs 活字工房)
• motif: letterpress 活字工房 (上部 黒 banner + brass border + 「letterpress · type · spec.」 mono label + 朱赤 ◆ accent + 「鋳る」 「印刷」 ニュアンス + 4 隅 brass 円形 dot + 凸版 box-shadow 4px 6px 0 + 8 スタイル一覧 グリッドで 印刷見本帳 風)
• typography: Space Grotesk 800 (poster display) + JetBrains Mono (specimen labels) + Instrument Serif italic (各スタイル内の cursive) + 漢数字 ステップ (壱/弐/参)

技術スタック

8 SVG モノグラム スタイル (純関数)

function GeometricStyle({ text, palette }: RenderProps): ReactNode {
  const t = text.toUpperCase()
  return (
    <g>
      <polygon points="256,40 462,170 462,342 ..." fill="none" stroke={palette.fg} strokeWidth="14" />
      <text x="256" y="296" textAnchor="middle" fontFamily="'Space Grotesk'..."
        fontSize={t.length === 1 ? 280 : t.length === 2 ? 200 : 140} fill={palette.fg}>
        {t}
      </text>
    </g>
  )
}

各スタイルは (text, palette) => ReactNode の純関数。 SVG <g> を返し、 親の <svg viewBox="0 0 512 512"> で囲む。 文字数 (1/2/3) に応じてフォントサイズを動的調整。 8 関数 × 100-150 行で 全スタイル網羅。

6 パレット

export const PALETTES: Palette[] = [
  { id: "letterpress", bg: "#f0e8d0", fg: "#1a1410", accent: "#c92e2e" },
  { id: "brass", bg: "#1a1410", fg: "#f0e8d0", accent: "#b5933a" },
  { id: "emerald", bg: "#f0e8d0", fg: "#1a1410", accent: "#2d7d5e" },
  // ...
]

bg / fg / accent の 3 色構成で全 8 スタイルが対応。 各 SVG path が palette.fg / palette.accent を参照、 切替時に全スタイルが連動して更新。 6 パレット = Mono Ink / Letterpress 朱赤 / Brass Plate / Emerald / Lapis Blue / Neon Cyber。

SVG ダウンロード

const xml = new XMLSerializer().serializeToString(svgRef.current)
const blob = new Blob([xml], { type: "image/svg+xml" })
const url = URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = `monogram-${t}-${activeStyle}.svg`
a.click()
URL.revokeObjectURL(url)

XMLSerializer で SVG DOM → XML 文字列 → Blob → ダウンロード。 SVG は ベクター無限拡大可、 ファイルサイズ 1-3KB。 Figma / Illustrator / Inkscape にそのまま読み込める。

PNG 1024px ダウンロード (Canvas 経由)

const img = new Image()
img.src = svgBlobUrl
await new Promise((r) => (img.onload = r))
const canvas = document.createElement("canvas")
canvas.width = 1024
canvas.height = 1024
const ctx = canvas.getContext("2d")
ctx.fillStyle = palette.bg
ctx.fillRect(0, 0, 1024, 1024)
ctx.drawImage(img, 0, 0, 1024, 1024)
canvas.toBlob((blob) => { /* download */ }, "image/png")

SVG を <img> に読み込ませ Canvas に描画 → toBlob で PNG 出力。 bg 色は palette から塗っておく (透過 PNG ではなく 確実な背景色付き)。 1024×1024 で SNS アイコン / Web サムネ サイズ最適化。

クリップボード コピー

await navigator.clipboard.writeText(xml)

navigator.clipboard.writeText で SVG XML をペースト可能。 Figma / Notion / Markdown に貼れば そのままレンダリング (Notion は SVG 直貼り対応)。

8 スタイル 一覧 グリッド (リアルタイム)

{STYLES.map((s) => (
  <button onClick={() => setActiveStyle(s.id)}>
    <svg viewBox="0 0 512 512">
      <rect fill={palette.bg} />
      {renderStyle(s.id, { text: t, palette })}
    </svg>
    <span>{s.label}</span>
  </button>
))}

8 スタイルすべてを miniature SVG として並べ、 入力文字 / パレット 変更時にすべて連動更新。 「印刷見本帳」 感のあるカード式 グリッド。 クリックで メイン プレビューに昇格、 アクティブ カードは朱赤 border + ink shadow で強調。

やっていない / これからの IMPROVE

• 追加スタイル (アール・ヌーボー / バウハウス幾何 / 日本古典印章 / 円形紋章 / オリエンタル / マインクラフト pixel等 - 15+ パターン)
• カスタム フォント アップロード (ユーザー自前 woff2 を読込み、 そのフォントで描画)
• 手書き調整 (各 path の太さ / 角度 / 装飾密度 を スライダー)
• 重ね合わせ / 2 文字交差 (重ね順 + ligature + 重複部 ハイライト)
• PDF 出力 (高解像度 印刷向け、 pdf-lib 再利用)
• 共有 URL で text + style + palette を base64 シリアライズ → SNS 共有
• AI スタイル提案 (server-side AI で 「あなたの業種に合う 3 スタイル提案」)
• モノクロ / Spot Color 印刷向けプリフライト (色数制限切替)
• マグカップ / Tシャツ プレビュー (印刷物への合成イメージ)

次の SHIP は何 thesis に振るか

Thesis Audit:

glyph-forge  — ジェネレーター (4本目)
soroban-rush — 学習 (4本目)
pop-drift    — データ可視化 (3本目)
maya-cast    — 占い (3本目)
type-rush    — 学習 (3本目)

直近 5本で ジェネレーター 1 + 学習 2 + データ可視化 1 + 占い 1 = 5 thesis 別。 §3.1 完璧。 次の候補:

• 計算ツール 5本目 (育休給付金 / 退職金 / 国保 / 年金) — マネー計算機 5 本目
• シミュレーター 4本目 (Conway Life / 反応拡散 / 流体)
• 占い 4本目 (西洋占星術 / 易経)
• データ可視化 4本目 (為替 30 年 / 都道府県 GDP)
• 8 thesis 残り 1 枠 = server-side AI (ユーザー許可待ち)