Figma の代替に Penpot — 無料・オープンソースのデザインツール完全ガイド【2026年版】

Figma の料金改定で困っているなら Penpot を知っておくべき

「Figmaの無料プラン制限がどんどん厳しくなっている…オープンソースの代替ってないの？」 あります。Penpot は、ブラウザベースで動くオープンソースのデザイン＆プロトタイピングツールです。

Figma は UI/UX デザインの事実上の標準ツールですが、Adobe による買収後の料金改定で、無料プランの制限が厳しくなりました。特にスタータープランでのファイル数制限やエディター数の制約は、個人開発者や小規模チームにとって痛手です。

Penpot はスペインの Kaleidos 社が開発するオープンソース（MPL-2.0ライセンス）のデザインツールで、Figma の代替として急速に注目を集めています。

---

Figma の現在の料金体系

プラン比較

プラン	月額（年払い）	エディター数	ファイル数
Starter	$0	1	3ファイル
Professional	$15/エディター	無制限	無制限
Organization	$45/エディター	無制限	無制限
Enterprise	$75/エディター	無制限	無制限

無料プランの主な制限

• エディター1名のみ
• 最大3ファイル
• ページ数に制限あり
• バージョン履歴なし
• 共有リンクの制限

---

Penpot とは — オープンソースのデザインプラットフォーム

基本情報

項目	内容
ライセンス	MPL-2.0（オープンソース）
GitHub Stars	35,000+
開発元	Kaleidos（スペイン）
動作環境	ブラウザベース（Chrome, Firefox, Edge）
セルフホスト	Docker 対応
料金	完全無料（クラウド版・セルフホスト版ともに）

Penpot の設計思想

Penpot は以下の原則で開発されています。

• オープンソース: コードが公開されており、誰でもフォーク・改変可能
• Web 標準準拠: SVG をネイティブフォーマットとして使用
• プラットフォーム非依存: ブラウザがあれば OS を問わず動作
• セルフホスト可能: データを自社サーバーで管理できる

---

Penpot の基本操作 — Figma ユーザー向けクイックスタート

アカウント作成とプロジェクト開始

1. design.penpot.app にアクセス
2. メールアドレスまたは GitHub/Google アカウントでサインアップ
3. ダッシュボードで「New Project」をクリック
4. プロジェクト名を入力して作成

Figma との用語対応

Figma	Penpot	説明
Frame	Frame / Board	コンテナ要素
Component	Component	再利用可能な要素
Auto Layout	Flex Layout	自動レイアウト
Variant	Component（状態管理）	バリエーション管理
Prototype	Prototype	プロトタイプ
Style	Library	スタイルライブラリ
Plugin	Plugin	拡張機能

主要な操作とショートカット

# 基本操作（Figma と共通のものが多い）
V: 選択ツール
R: 矩形ツール
O: 楕円ツール
T: テキストツール
P: ペンツール
Ctrl/Cmd + G: グループ化
Ctrl/Cmd + D: 複製
Ctrl/Cmd + Z: 元に戻す

# Penpot 固有
Ctrl/Cmd + Shift + C: コンポーネント作成
Ctrl/Cmd + Enter: プロトタイプモードに切替

---

Figma と Penpot の機能比較

デザイン機能

機能	Figma	Penpot
ベクターエディタ	◎	◎
Auto Layout / Flex Layout	◎	◎
コンポーネント	◎	◎
バリアント	◎	○
デザイントークン	◎	○
グリッド＆ガイド	◎	◎
マスク	◎	◎
ブレンドモード	◎	◎
エフェクト（影、ぼかし）	◎	◎
CSS Grid レイアウト	△	◎

プロトタイプ機能

機能	Figma	Penpot
インタラクション	◎	◎
トランジション	◎	○
スマートアニメート	◎	△
オーバーレイ	◎	○
スクロール	◎	◎
共有リンク	◎	◎

コラボレーション機能

機能	Figma	Penpot
リアルタイム共同編集	◎	◎
コメント	◎	◎
バージョン履歴	◎（有料）	◎
共有ライブラリ	◎	◎
権限管理	◎	◎
ゲストアクセス	制限あり	無制限

開発者向け機能

機能	Figma	Penpot
Dev Mode	◎（有料）	◎（無料）
CSS エクスポート	◎	◎
SVG エクスポート	◎	◎（ネイティブ）
アセットエクスポート	◎	◎
API	◎	◎
プラグイン	◎	○

---

Penpot の強み — Figma にはない特徴

1. SVG ネイティブ

Penpot は内部フォーマットとして SVG を使用しています。これにより以下のメリットがあります。

• エクスポートなしで SVG コードを直接コピーできる
• Web 標準に準拠したクリーンな SVG 出力
• ブラウザでそのまま表示できるデザインデータ

<!-- Penpot からエクスポートされる SVG の例 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
  <rect width="200" height="60" rx="8" fill="#3B82F6"/>
  <text x="100" y="35" text-anchor="middle"
        fill="white" font-family="Inter" font-size="16">
    ボタン
  </text>
</svg>

2. CSS Grid レイアウト

Penpot は Flex Layout に加えて CSS Grid レイアウトをネイティブサポートしています。これは Figma にはない機能です。

# Penpot の Grid Layout 設定例
- 行: auto auto auto（3行）
- 列: 1fr 2fr 1fr（3列、中央が2倍幅）
- ギャップ: 16px
- パディング: 24px

3. 完全無料のDev Mode

Figma では Dev Mode が有料機能ですが、Penpot では Inspect（Dev Modeに相当）が完全無料で利用できます。

• CSS プロパティの確認
• サイズ・間隔の計測
• カラーコードのコピー
• フォント情報の確認

4. セルフホストによるデータ主権

企業のセキュリティポリシーでクラウドサービスの利用が制限されている場合でも、セルフホストなら導入可能です。

---

Penpot のセルフホスティング手順

前提条件

• Docker と Docker Compose がインストール済み
• 最低4GBのRAM
• 10GB以上のディスク空き容量

Docker Compose でのセットアップ

# Penpot の Docker Compose 設定をダウンロード
curl -o docker-compose.yml \
  https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

# 環境変数ファイルを作成
curl -o .env \
  https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env

# .env ファイルの主要設定
# 基本的な項目を編集

# パブリックURI（外部からアクセスするURL）
PENPOT_PUBLIC_URI=http://localhost:9001

# メール設定（SMTPを使う場合）
PENPOT_SMTP_ENABLED=false

# テレメトリ（任意）
PENPOT_TELEMETRY_ENABLED=false

# 登録を許可するか
PENPOT_REGISTRATION_ENABLED=true

# 起動
docker compose -p penpot up -d

# ステータス確認
docker compose -p penpot ps

# ログ確認
docker compose -p penpot logs -f

初回アクセス

1. ブラウザで http://localhost:9001 にアクセス
2. 「Create an account」でアカウントを作成
3. メール確認（SMTP未設定の場合はログからトークンを確認）
4. ログインしてダッシュボードが表示されれば成功

SSL 対応（本番環境向け）

# Nginx リバースプロキシ設定例
server {
    listen 443 ssl http2;
    server_name penpot.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/penpot.yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/penpot.yourdomain.com/privkey.pem;

    client_max_body_size 100M;

    location / {
        proxy_pass http://localhost:9001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /ws/ {
        proxy_pass http://localhost:9001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

---

Figma から Penpot への移行

インポート方法

Penpot は Figma ファイルのインポートに対応しています。

1. Figma でファイルを開く
2. File → Export → .fig ファイルをダウンロード
3. Penpot のダッシュボードで「Import Penpot files」をクリック
4. 「Import from Figma」を選択
5. .fig ファイルをアップロード

移行時の注意点

項目	対応状況	備考
フレーム・シェイプ	◎	ほぼ完全に変換
テキスト	◎	フォントの互換性に注意
コンポーネント	○	一部手動調整が必要
Auto Layout → Flex	○	基本的に変換される
プロトタイプ	△	再設定が必要な場合あり
プラグイン	✕	Penpot のプラグインで代替

フォントの準備

Figma で使用しているフォントが Penpot で利用できるか確認しましょう。

# Google Fonts はそのまま利用可能
# カスタムフォントはセルフホスト版にアップロード可能

# セルフホスト版でカスタムフォントを追加
1. 管理画面 → Fonts → Upload font
2. .woff2 / .ttf / .otf ファイルをアップロード
3. フォントファミリー名を設定

---

チーム導入のポイント

1. 段階的な移行がおすすめ

いきなり全プロジェクトを移行するのはリスクが高いです。

Phase 1: 新規の小規模プロジェクトで Penpot を試す（2週間）
Phase 2: 既存プロジェクトの一部をインポートして検証（2週間）
Phase 3: チーム全体でのワークフローを確立（1ヶ月）
Phase 4: メインのデザインツールとして採用

2. デザインシステムの移行

コンポーネントライブラリの移行は最も手間がかかる部分です。

# 推奨アプローチ
1. Figma のコンポーネントをカテゴリ別にエクスポート
2. Penpot で共有ライブラリを作成
3. 基本コンポーネントから順に再構築
4. カラーパレットとタイポグラフィを先に設定
5. ボタン → フォーム → カード → レイアウト の順で移行

3. 開発者との連携

Penpot の Inspect 機能は無料で使えるため、開発者にとってはメリットがあります。

• デザインのURLを共有するだけでCSS値が確認できる
• コメント機能でデザインレビューが可能
• SVG をそのままコードにコピーできる

4. セルフホスト版の管理体制

セルフホストを選ぶ場合、以下の運用体制を整えましょう。

項目	推奨事項
バックアップ	日次でDBとファイルストレージをバックアップ
監視	Docker コンテナのヘルスチェックを設定
アップデート	月1回のイメージ更新を定期化
セキュリティ	SSL必須、ファイアウォールでアクセス制限

# アップデート手順
docker compose -p penpot pull
docker compose -p penpot up -d
docker image prune -f

---

Penpot の今後の展望

Penpot は活発に開発が続いており、以下の機能が追加・改善される予定です。

• AI 機能の統合: テキスト生成やレイアウト提案
• プラグインエコシステムの拡充: コミュニティ製プラグインの充実
• パフォーマンスの改善: 大規模ファイルの読み込み速度向上
• FigJam 代替機能: ホワイトボード・ブレインストーミング機能

---

まとめ — Penpot は Figma の実用的な代替になるか

結論として、Penpot は以下のケースで Figma の実用的な代替になります。

• コスト削減が目的: Professional プラン（$15/月/エディター）の削減
• データ主権が必要: セルフホストでデータを自社管理
• Dev Mode が高い: Penpot なら Inspect が完全無料
• オープンソースにこだわりがある: フォーク・カスタマイズが可能

一方、以下の場合は Figma のほうが依然として有利です。

• プラグインエコシステムに依存: Figma のプラグイン資産は圧倒的
• 高度なプロトタイプ: Smart Animate やインタラクティブなプロトタイプ
• 大規模チーム: 既に Figma でワークフローが確立されている場合

筆者はFigma歴3年ですが、個人プロジェクトのワイヤーフレーム作成はPenpotに移行しました。Dev Modeが無料で使えるのが決め手で、特にSVGをそのままコピーできる点はフロントエンド開発で重宝しています。

まずはクラウド版（design.penpot.app）で無料アカウントを作り、小さなプロジェクトで試してみることをおすすめします。完全無料なので、試すリスクはゼロです。

オープンソースの代替ツールに興味がある方は、Airtable代替 NocoDBやPostman代替 Brunoもあわせてご覧ください。