px → vw 変換ツール

リキッドデザイン用にpx値をvw単位に変換します。

px

数値のみでも、CSSプロパティ付きでも入力できます

計算式： vw = (px値 ÷ デザイン幅) × 100

使い方・詳細情報

vw単位とは

vw（viewport width）は、 ビューポート幅に対する割合を表すCSS単位です。 1vw = ビューポート幅の1%になります。

例えば、ビューポート幅が1440pxの場合、1vw = 14.4px となります。

リキッドデザイン（フルードレイアウト）とは

リキッドデザインは、画面幅に応じて要素のサイズが滑らかに変化するレイアウト手法です。 固定のブレークポイントではなく、あらゆる画面サイズで最適な表示を実現します。

vw単位を使うことで、デザインデータ通りの比率を保ちながら、 画面幅に合わせて自動的にサイズが調整されます。

このツールの使い方
  1. デザイン幅を設定します（Figma/XDのアートボード幅など）
  2. 小数点以下の桁数を選択します
  3. px値を入力します（数値のみ、またはCSSプロパティ付きで入力可能）
  4. 「変換する」ボタンをクリック
  5. 変換結果をコピーしてCSSに貼り付けます
入力例と出力例

入力（数値のみ）

16
24
320

出力（デザイン幅1440px）

1.111vw
1.667vw
22.222vw

入力（CSS付き）

font-size: 16px;
width: 320px;
padding: 24px;

出力（デザイン幅1440px）

font-size: 1.111vw;
width: 22.222vw;
padding: 1.667vw;
vw使用時の注意点

フォントサイズへの使用
vwをフォントサイズに使用すると、極端に大きな画面や小さな画面で読みにくくなる場合があります。 clamp()関数と組み合わせて最小・最大値を設定することをおすすめします。

clamp()の例：
font-size: clamp(14px, 1.111vw, 18px);