52種類の日本語Googleフォントを一覧でプレビューしながら、文字や背景、枠線にグラデーションをサクッと適用できる見出し生成ツールを作りました作りました。
作成した見出しはCSSやHTMLコードとしてそのままコピーできるだけでなく、画像（PNG/JPG/SVG）としてのダウンロードにも対応しています。
主な機能
本ツールで利用できる主な機能をご紹介します。
52種の日本語フォントを一覧プレビュー
Google Fontsで提供されている日本語フォントを一覧で確認できます。フォントを切り替えることなく、デザインの雰囲気に合うものを探すことができます。
3つの適用モード（文字・背景・枠線）
グラデーションは「文字」だけでなく、「背景」や「枠線」にも適用可能です。用途に合わせてデザインを調整できます。
100種類のプリセットとカスタマイズ
100種類のグラデーションプリセットを用意しています。また、色や種類（線形・放射・反復）、角度などを細かく調整して、独自のグラデーションを作成することも可能です。
CSSスタイルの調整
ボーダーの位置や太さ、文字サイズ、余白（パディング）、角丸、文字の配置など、基本的なCSSの設定をスライダー操作でプレビューを見ながら調整できます。
コード出力と画像ダウンロード
作成したデザインは、CSSとHTMLコードとしてコピーできます。
また、PNGやJPG形式での画像ダウンロードにも対応しています。システム標準フォントを選択している場合は、SVG形式での保存も可能です。
AIプロンプト作成機能
「高級感」「やわらかい」などのテーマを入力すると、外部AI（ChatGPTやClaudeなど）向けのプロンプトを生成します。AIが出力したJSONデータをツールに読み込ませることで、新しいグラデーションの組み合わせを試すことができます。
使い方
ツールの基本的な使い方をご紹介します。
1. 基本的な操作
まずはベースとなるデザインを作成します。
適用箇所の選択
画面左上のボタンから、グラデーションを「文字」「背景」「枠線」のどこに適用するかを選択します。
グラデーションの選択
左サイドバーの「グラデーション一覧」から、好みのグラデーションをクリックして適用します。
フォントの選択
右側のメイン画面には、選択したグラデーションが適用された見出しが一覧表示されます。イメージに合うフォントをクリックして選択状態にします。
2. 詳細設定での調整
左サイドバー下部の「詳細設定」ボタンから、より細かい調整が可能です。
グラデーションの調整
「グラデーション」タブでは、カラーピッカーを使用した色の変更や、グラデーションの種類（線形・放射・反復）、角度などを調整できます。
テキストや余白の調整
「その他」タブでは、プレビュー用のテキストを変更できます。また、文字サイズや内側の余白、角の丸みなども設定可能です。枠線モードの場合は、線を表示する位置を選択できます。
3. コードのコピーと画像の保存
デザインが完成したら、必要なデータを出力します。
コードのコピー
フォントを選択すると、画面右側にコードパネルが表示されます。「Google Fonts Link」「CSS」「HTML」のコードが表示されるので、「コピー」ボタンを押して使用してください。
画像のダウンロード
コードパネル上部のダウンロードアイコン（下向き矢印）をクリックすると、ダウンロード画面に切り替わります。プレビューを確認し、「PNG」または「JPG」ボタンを押して保存します。システム標準フォントを選択している場合は、「SVG」ボタンも利用可能です。
4. AIプロンプト作成機能の利用
AIを活用して新しいグラデーションを作成する機能です。
プロンプトの生成
左サイドバー下部の「プロンプト作成」ボタンを押します。テーマを入力し、生成ボタンを押すと、AI向けのプロンプトが作成されます。
JSONデータの適用
生成されたプロンプトをChatGPTなどに入力して実行します。AIから出力されたJSON形式のデータをツールの「JSON貼り付け」欄に入力し、「適用」を押すと、新しいグラデーションが一覧に追加されます。
おわりに
「グラデーション見出しジェネレーター」は、見出しのデザイン作成やCSSの調整をサポートするツールです。Web制作の際の一つの選択肢として、ぜひご活用ください。
