🔤
ロゴ用フォント組み合わせ提案
業種を選ぶと「メイン+サブ」のGoogle Fontの組み合わせを5パターン提案
業種・ジャンルを選択
プレビュー用テキスト
👆
上の業種を選ぶと5パターンのフォント組み合わせを表示します

📌 ツールの概要・特徴

「フォントコンボプレビューツール」は、見出し×本文のフォントペアをリアルタイムプレビューで試せる無料Webアプリです。「テクノロジー」「カフェ・飲食」「ファッション」などのシーン別にキュレーションされたGoogle Fontsの日本語・欧文フォントから相性の良い組み合わせを自動提案。フォントサイズ・行間・文字間隔を調整してプレビューし、「このコンボを使う」ボタンで即座にCSSコードをコピーできます。フォント選びで何時間も悩んでいた作業が数分で完了します。

📖 詳しい使い方・手順

  1. デザインのシーン（テクノロジー・カフェ・ファッション・教育など）を選択します。
  2. 見出し用フォントと本文用フォントをドロップダウンから選ぶか、「提案」ボタンで自動選択します。
  3. プレビューエリアに自分のサイトのテキストを入力して実際の表示を確認します。
  4. フォントサイズ・行間・文字間隔をスライダーで調整します。
  5. 「このコンボを使う」でCSSコードをコピーしてそのままサイトに貼り付けられます。

👤 こんな人におすすめ

Webサイト・ブログのフォント選びで迷いがちなデザイナー・エンジニアに最適です。デザイン知識が少ないが見栄えの良いサイトを作りたい方、既存サイトのフォントをリフレッシュしたい方、ブランドのトンマナに合うフォントを探しているマーケターにも活用いただけます。「Noto Sans JPしか知らない」「欧文フォントと日本語フォントをどう組み合わせればいいか全くわからない」という方の入門ツールとしても最適です。

🛠️ 制作の背景・こだわり

フォント選びは「なんとなく合ってる気がする」で済ませてしまいがちですが、見出しと本文のコントラストや読みやすさには明確な法則があります。デザイナー向けのフォント解説サイトは英語が多く、日本語フォントへの言及が少ない点も課題でした。日本語Webデザインに特化した実用的なフォントペア（「Zen Kaku Gothic×Noto Serif JP」「Kaisei Decol×M PLUS 1p」など）をシーン別にキュレーションしているのが最大のこだわりです。

💡 具体的な使用例

【例①：ポートフォリオサイト】「テクノロジー」シーンを選択すると「Rajdhani（見出し）×Noto Sans JP（本文）」などのクールなコンボが提案。プレビューで自分のキャッチコピーを打ち込んで確認できます。【例②：カフェのWebサイト】「カフェ・飲食」シーンを選ぶと温かみのあるセリフフォントの組み合わせが提案。「Kaisei Decol（見出し）×Noto Serif JP（本文）」のような和の雰囲気が漂うコンボが手軽に試せます。CSSコードをコピーしてそのままWordPressやHTMLに貼り付けるだけで完了します。

❓ よくある質問（FAQ）

  • Q. 商用利用はできる？
    A. このツールで提案されるフォントはすべてGoogle Fontsから読み込まれており、Google Fontsのライセンス（OFLまたはApache License）に従って商用利用が可能です。詳細は各フォントのライセンスをご確認ください。
  • Q. コピーしたCSSはどこに貼ればいい？
    A. HTMLの<head>タグ内にGoogle FontsのlinkタグとCSSの両方を貼り付けます。WordPressをお使いの場合は「テーマのカスタマイズ」→「追加CSS」に貼り付けるのが最も簡単です。
  • Q. Google Fonts以外のフォントも使える？
    A. 現在はGoogle Fontsのみに対応しています。Adobe Fontsなど他のフォントサービスへの対応は今後検討中です。

🔒 当ツールはブラウザ上で処理（ローカル実行）されるため、入力されたデータが外部サーバーに送信・保存されることは一切ありません。安心してご利用ください。