フォントプレビューツール
テキストを入力して、様々なフォントでの表示を比較できます。サイズや太さも調整可能です。
Serif（明朝体系）
The quick brown fox jumps over the lazy dog. あいうえお漢字テスト
Sans-serif（ゴシック体系）
The quick brown fox jumps over the lazy dog. あいうえお漢字テスト
Monospace（等幅）
The quick brown fox jumps over the lazy dog. あいうえお漢字テスト
Cursive（筆記体）
The quick brown fox jumps over the lazy dog. あいうえお漢字テスト
Fantasy（装飾）
The quick brown fox jumps over the lazy dog. あいうえお漢字テスト
Georgia
The quick brown fox jumps over the lazy dog. あいうえお漢字テスト
フォントプレビューツールの使い方
プレビューテキスト欄に確認したいテキストを入力します。
フォントサイズとウェイト（太さ）を調整できます。
表示するフォントのボタンをクリックしてON/OFFを切り替えられます。
システムフォントとよく使われるWebセーフフォントを比較できます。
デザイン調整で見るべき点
- •生成したCSSや色は、ライト/ダークモード、モバイル、ブラウザ差で見え方が変わります。
- •色やコントラストは見た目だけでなく、読みやすさとアクセシビリティを基準に確認してください。
- •装飾値はそのまま採用するより、既存デザインシステムの余白・角丸・影に合わせて調整すると破綻しにくくなります。
関連ツール
🎨🖥️🌈🌈🖼️🎨🖌️📱🔖👁️📐🎬
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。
CSSアニメーション生成
CSSアニメーションを視覚的に生成。