🔤 【個人開発】15種の独自Webフォントを試せる「Gravity Font Studio」を公開！透過PNG保存＆リアルタイムタイポグラフィ生成
Webサイトやアプリ、ゲーム、YouTubeサムネイル、バナーなどの制作において、「パッと目を引く特徴的なタイポグラフィ（文字デザイン）を使いたい」と感じる場面は非常に多いです。
しかし、専用のデザインソフトを立ち上げてフォントを探し、エフェクトをかけて書き出すのは意外と手間がかかります。 そこで、ブラウザ上で文字を入力するだけで近未来・サイバー・8bitドット・グリッチ・レトロウェーブなど全15種類の個性的なWebフォントをリアルタイムに試せ、背景付きカードや文字のみ（透過PNG）として即座にダウンロードできるWebツール『Gravity Font Studio』を個人開発してリリースしました！
1. Gravity Font Studio の特徴
一般的なフォントプレビューツールとは異なり、「入力したテキストがサイバーパンクやレトロゲームの世界観でそのまま光り輝く」ようなリッチなビジュアル体験にこだわりました。
- ① 全15種類の厳選Webフォント：SF・HUD・8bitドット・グリッチ・シンセウェーブ・ミリタリーステンシルなど、世界観の強い15スタイルを搭載。
- ② リアルタイム・タイポグラフィ生成：テキスト入力、大文字自動変換、プリセットチップで即座に試行可能。
- ③ 視覚エフェクト調整：文字サイズ（20〜96px）、文字間隔（Letter Spacing）、ネオングロー強度（0〜100%）、カラーテーマ（6種）をリアルタイム制御。
- ④ 2モードのPNG画像エクスポート：
- 💾 背景付きPNG：1200×630のカード形式で高解像度保存（OGPやSNS投稿用）。
- ✨ 透過PNG（文字のみ）：背景を透明にし、発光エフェクト付きの文字だけを保存（サムネイル・動画・UI素材用）。
- ⑤ ワンクリックCSSコピー：Webサイトにそのまま貼り付けて使えるCSSコードを即座にクリップボードへコピー。
2. 搭載されている全15フォントのラインナップ
Google Web Fontsの中から、商業利用可能で視覚的インパクトの強い書体を厳選し、独自スタイルとしてチューニングしました。
| 書体名 | カテゴリー | 特徴・おすすめ用途 |
|---|---|---|
| Gravity Neo | Sci-Fi / Flagship | 鋭角な斜角とスペーシーな広がり。ロゴ・タイトル・ゲームヘッダーに。 |
| Gravity Cyber | HUD / Cyberpunk | 軍用HUDやインターフェースを想起させる直線美と45度カット。 |
| Gravity Pixel 8bit | Pixel / Retro Arcade | 完全な正方ピクセルグリッド。80〜90sレトロゲーム・ドット絵に。 |
| Gravity Orbit | Geometric / Space | 惑星軌道をイメージしたワイドでモダンな幾何学ディスプレイ。 |
| Gravity Mecha | Heavy / Tech | 重厚なブロック構造と力強い極太スクエアシェイプ。 |
| Gravity Glitch | Glitch / Distortion | 水平走査線のデータ崩壊ノイズ。ハッキング演出・ダークウェブに。 |
| Gravity Synthwave | 80s / Retro Future | 滑らかなカーブとネオンサイン感。シティポップ・夜景映えに。 |
| Gravity Code | Terminal / Console | 精密な等幅モノスペース。ターミナル・ログ画面・コード演出に。 |
| Gravity Matrix | Avant-Garde / Code | アシンメトリーな変則グリフ。先鋭的な実験的UI・アートに。 |
| Gravity Hyper Speed | Racing / Speed | 強烈な横ストライプモーション。光速突破・疾走感・バトル演出に。 |
| Gravity Vector Lines | Parallel Lines | 緻密な複線ライン構造。幾何学アート・ヴィンテージデザインに。 |
| Gravity Plasma | Electro / Future | ネオン管のような均一な丸み。テクノポップ・サイバーカフェに。 |
| Gravity Industrial | Stencil / Military | 無骨なミリタリーステンシル。サバイバル・ガレージ風デザインに。 |
| Gravity Stardust | Contemporary / Art | 極太プロポーションと芸術的対比。ハイファッション・現代アートに。 |
| Gravity Dark Gothic | Dark Fantasy / Crest | トゲのある古典的装飾書体。魔導書・RPG・紋章・タイトルロゴに。 |
3. こだわりの機能：透過PNG（文字のみ）書き出し
通常モードでは背景グラデーションや方眼グリッドを含めたカード画像として保存されますが、「透過PNG保存」ボタンを押すと、背景を完全に透明にし、ネオングロー効果を保ったままの文字データのみを書き出すことができます。
これにより、PhotoshopやCanva、動画編集ソフト（Premiere / Final Cut / CapCut）などにそのままドラッグ＆ドロップして、背景動画やサムネイル画像の上に即座に合成できる素材として活用いただけます。
4. まとめ
Gravity Portalでは、今後も「知的好奇心を刺激する個人開発の実験場」として、オリジナルのWebツールやフォント、AI実験、ゲームなどを拡充していく予定です。
ちょっとしたロゴ制作やサムネイル作り、デザインのアイデア出しに、ぜひ Gravity Font Studio をご活用ください！