GlyphForge ができるまで — モノグラムの SVG ロゴを生成する

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

#なぜこの形にしたか

直近 5本 (soroban-rush / pop-drift / maya-cast / type-rush / frac-cast) に ジェネレーターゼロ、 連続にならず safe。 ジャンル 分布 で 学習が 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 活字工房 モチーフ は 既存 34 本と完全別軸

#見た目をどう決めたか

直近 5本の 見た目 を書き出す:

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 (数学者ノート)

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

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

採用 3 要素:

• 配色: ink black #1a1410 + 朱赤 #c92e2e + 生成り cream #f0e8d0 + brass plate #b5933a + emerald #2d7d5e + lead gray #6a6258
• type-rush の cream paper 系統と一部重複だが モチーフ は personal typewriter (家庭) vs 商業 letterpress 工房 で完全別
• frac-cast の brass + crimson とも 用途別 (手書きノート vs 活字工房)
• モチーフ: 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, 配色 }: RenderProps): ReactNode {
 const t = text.toUpperCase
 return (
 <g>
 <polygon points="256,40 462,170 462,342 ..." fill="none" stroke={配色.fg} strokeWidth="14" />
 <text x="256" y="296" textAnchor="middle" fontFamily="'Space Grotesk'..."
 fontSize={t.length === 1 ? 280 : t.length === 2 ? 200 : 140} fill={配色.fg}>
 {t}
 </text>
 </g>
 )
}

各スタイルは (text, 配色) => 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 が 配色.fg / 配色.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 = 配色.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 色は 配色 から塗っておく (透過 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={配色.bg} />
 {renderStyle(s.id, { text: t, 配色 })}
 </svg>
 <span>{s.label}</span>
 </button>
))}

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

#まだやっていないこと

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