タイポグラフィスケール生成
ベースフォントサイズと比率を指定して、調和の取れたタイポグラフィスケールを自動生成します。
xs (scale -2)
10.24px
0.640rem
Aa あいう
sm (scale -1)
12.8px
0.800rem
Aa あいう
base (scale 0)
16px
1.000rem
Aa あいう
lg (scale 1)
20px
1.250rem
Aa あいう
xl (scale 2)
25px
1.563rem
Aa あいう
2xl (scale 3)
31.25px
1.953rem
Aa あいう
3xl (scale 4)
39.06px
2.441rem
Aa あいう
4xl (scale 5)
48.83px
3.052rem
Aa あいう
5xl (scale 6)
61.04px
3.815rem
Aa あいう
タイポグラフィスケールの使い方
ベースフォントサイズ（通常16px）と比率を選択すると、スケールが自動生成されます。
Major Third（1.25）やPerfect Fourth（1.333）が一般的に使われる比率です。CSSとしてコピーできます。
デザイン調整で見るべき点
- •生成した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を相互変換。