PX から PT 変換ツール

ツール概要：PX から PT 変換ツール

PX から PT 変換ツールは、ピクセル(PX)とポイント(PT)単位の相互変換を行うプロフェッショナルなツールです。カスタムDPI設定をサポートし、Webデザイン、印刷デザイン、UIデザインなど様々なシナリオに適用できます。

PX から PT 変換ツールとは？

PX から PT 変換ツールはPXとPTの変換を素早く行い、すぐ使える結果を出力します。

使い方

1. PXの内容を貼り付けるかパラメータを入力します。
2. PTの出力形式を選び、オプションを調整します。
3. 結果を確認してコピーまたはダウンロードします。

よくある利用シーン

• PX↔PTのフォーマット移行
• PXデータをPTのワークフローやコード生成に利用
• 変換結果の仕様チェック

❓ よくある質問

Q1: 変換に失敗する/空になる？
A: PXの入力が正しいか確認してください。

Q2: 出力が違って見える？
A: PTのルールに合わせて整形される場合があります。

Q3: 一括処理は？
A: 安定のため小分けにして処理してください。

✨ 主な機能

• 🔄 双方向変換：PXからPT、PTからPXの双方向変換をサポート
• 🎛️ DPI設定：一般的なDPI値(72, 96, 150, 300)とカスタムDPIをサポート
• 📊 リアルタイム計算：入力後即座に変換結果を表示
• 📋 ワンクリックコピー：単位付きで変換結果を素早くコピー
• 🔄 値の交換：PXとPTの値をワンクリックで交換
• 📈 変換表：一般的な値の変換対照表を提供
• 📐 公式説明：変換公式と現在のDPI設定を表示

📖 変換公式

PX から PT

PT = PX × 72 ÷ DPI

PT から PX

PX = PT × DPI ÷ 72

ここで：

• PX：ピクセル単位、画面表示の基本単位
• PT：ポイント単位、印刷業界の標準単位
• DPI：1インチあたりのドット数(Dots Per Inch)

🎯 使用シナリオ

1. Webデザイン

レスポンシブデザインでデザインカンプのPT単位をCSSのPX単位に変換：

/* デザインカンプのフォントサイズ：12pt */
/* 96 DPIでPXに変換 */
font-size: 16px; /* 12pt × 96 ÷ 72 = 16px */

/* デザインカンプの行高：18pt */
line-height: 24px; /* 18pt × 96 ÷ 72 = 24px */

2. 印刷デザイン

WebのPX単位を印刷のPT単位に変換：

/* Webタイトル：24px */
/* 300 DPI印刷単位に変換 */
/* 24px × 72 ÷ 300 = 5.76pt */

/* Web本文：16px */
/* 300 DPI印刷単位に変換 */
/* 16px × 72 ÷ 300 = 3.84pt */

3. UIデザインシステム

統一されたデザイン仕様の確立：

// デザインシステムでのフォントサイズ変換
const fontSizes = {
  // 12ptベースフォント、96 DPIベース
  small: '12px',    // 9pt
  base: '16px',     // 12pt
  large: '20px',    // 15pt
  xlarge: '24px',   // 18pt
  xxlarge: '32px'   // 24pt
}

// DPI変換関数
function ptToPx(pt, dpi = 96) {
  return Math.round(pt * dpi / 72)
}

function pxToPt(px, dpi = 96) {
  return Math.round(px * 72 / dpi * 100) / 100
}

📱 一般的なDPIの説明

72 DPI

• 用途：従来のMacモニター標準
• 特徴：1pt = 1px、最もシンプルな変換
• 応用：初期Macデザイン、PDFドキュメント

96 DPI

• 用途：WindowsシステムのデフォルトDPI
• 特徴：現代のWeb開発標準
• 応用：Webデザイン、Windowsアプリケーション

150 DPI

• 用途：高解像度ディスプレイ
• 特徴：1.5倍スケーリング比率
• 応用：HDモニター、モバイルデバイス

300 DPI

• 用途：印刷業界標準
• 特徴：高品質印刷出力
• 応用：書籍、雑誌、ポスター印刷

🔧 実際の応用例

レスポンシブフォントデザイン

/* ベースフォントシステム */
:root {
  /* 16px = 12pt (96 DPI)ベース */
  --font-size-xs: 12px;   /* 9pt */
  --font-size-sm: 14px;   /* 10.5pt */
  --font-size-base: 16px; /* 12pt */
  --font-size-lg: 18px;   /* 13.5pt */
  --font-size-xl: 20px;   /* 15pt */
  --font-size-2xl: 24px;  /* 18pt */
  --font-size-3xl: 30px;  /* 22.5pt */
}

/* 印刷スタイル */
@media print {
  :root {
    /* 300 DPI印刷単位に変換 */
    --font-size-xs: 2.88pt;   /* 12px */
    --font-size-sm: 3.36pt;   /* 14px */
    --font-size-base: 3.84pt; /* 16px */
    --font-size-lg: 4.32pt;   /* 18px */
    --font-size-xl: 4.8pt;    /* 20px */
    --font-size-2xl: 5.76pt;  /* 24px */
    --font-size-3xl: 7.2pt;   /* 30px */
  }
}

デザインカンプ変換ツール

class DesignConverter {
  constructor(designDPI = 72, targetDPI = 96) {
    this.designDPI = designDPI
    this.targetDPI = targetDPI
  }

  // デザインカンプPTから開発PX
  ptToPx(pt) {
    return Math.round(pt * this.targetDPI / 72)
  }

  // 開発PXからデザインカンプPT
  pxToPt(px) {
    return Math.round(px * 72 / this.targetDPI * 100) / 100
  }

  // デザイン仕様の一括変換
  convertDesignSpec(spec) {
    const converted = {}
    for (const [key, value] of Object.entries(spec)) {
      if (typeof value === 'number') {
        converted[key] = this.ptToPx(value)
      } else if (typeof value === 'object') {
        converted[key] = this.convertDesignSpec(value)
      } else {
        converted[key] = value
      }
    }
    return converted
  }
}

// 使用例
const converter = new DesignConverter(72, 96)

const designSpec = {
  typography: {
    h1: 24,      // 24pt
    h2: 20,      // 20pt
    body: 14,    // 14pt
    caption: 12  // 12pt
  },
  spacing: {
    xs: 4,       // 4pt
    sm: 8,       // 8pt
    md: 16,      // 16pt
    lg: 24,      // 24pt
    xl: 32       // 32pt
  }
}

const cssSpec = converter.convertDesignSpec(designSpec)
console.log(cssSpec)
// 出力：
// {
//   typography: { h1: 32, h2: 27, body: 19, caption: 16 },
//   spacing: { xs: 5, sm: 11, md: 21, lg: 32, xl: 43 }
// }

💡 使用のコツ

1. 精密な変換

• 変換の正確性を確保するため小数点以下4桁の精度を使用
• 四捨五入が視覚効果に与える影響を考慮
• 重要な寸法では手動微調整を実施

2. デザインの一貫性

• 基本単位システム（8pxグリッドなど）を確立
• 比例関係を保つため倍数関係を使用
• 異なるDPIでの視覚効果をテスト

3. パフォーマンス最適化

• 一般的な変換値を事前計算
• CSS変数を使用して寸法を統一管理
• ランタイムでの頻繁な計算を避ける

⚠️ 注意事項

1. DPI選択：ターゲットプラットフォームに基づいて正しいDPI値を選択
2. 精度処理：浮動小数点精度による視覚的差異に注意
3. 互換性：ブラウザによるサブピクセル値の処理の違いに注意
4. ユーザーエクスペリエンス：変換後の寸法がターゲットデバイスで正常に表示されることを確認

🔗 関連ツール

• CSS単位変換器：em、rem、vh、vwなどの単位変換をサポート
• レスポンシブデザインツール：マルチスクリーン適応ソリューションの設計を支援
• フォントサイズ計算機：最適なフォントサイズと行高比率を計算
• グリッドシステムジェネレーター：ピクセルベースのグリッドシステムを作成

PX から PT 変換ツールを使用することで、異なるデザイン環境での単位変換ニーズを簡単に処理し、デザインの一貫性と正確性を確保できます。