OSSデザインツール比較：Penpot vs Excalidraw vs draw.io でUI設計をセルフホスト
オープンソースラボ編集部 ・ 2026年6月14日
OSSデザインツール比較：Penpot vs Figmaの代替 vs Excalidraw でUI設計をセルフホスト
Figma（月$15/エディター〜）・Sketch（年$99〜）に対して、Penpot（ブラウザベースのデザイン・プロトタイピングツール）・Excalidraw（手書き風のダイアグラムツール）・draw.io（diagrams.net）（フローチャート・アーキテクチャ図特化）はOSSのデザインツールです。
OSSデザインツールが必要な場面
- プライバシー・セキュリティ要件: 設計データを社内サーバーにとどめたい
- コスト削減: Figmaのエディターライセンス費用を削減したい
- アーキテクチャ図: システム構成図・ER図・フローチャートの作成
- チームのプロトタイピング: UIモックアップ・ワイヤーフレームの共同編集
主要ツールの概要
Penpot
2022年にClojureScriptで公開されたオープンソースのデザイン・プロトタイピングツールです。GitHubスター36k+。Figmaに最も近いOSS代替で、コンポーネント・グリッド・AutoLayout・プロトタイピング・デザイントークン・CSSエクスポートに対応します。SVGベースのため、デザインデータをSVGとして完全にポータブルです。
# PenpotをDockerで起動
git clone https://github.com/penpot/penpot.git
cd penpot/docker/images
# 環境変数を設定
cat > .env << 'EOF'
PENPOT_FLAGS=enable-login-with-google enable-login-with-github
PENPOT_SECRET_KEY=your-secret-key-min-32-chars-random
PENPOT_STORAGE_BACKEND=fs
PENPOT_SMTP_DEFAULT_FROM=no-reply@yourcompany.com
EOF
docker compose -p penpot -f docker-compose.yaml up -d
# WebUI: http://localhost:9001
# デフォルトポート: Frontend 9001, Backend 6060, Exporter 6061
# Penpot REST APIでデザインファイルを管理
import requests
PENPOT_URL = "https://design.yourcompany.com"
EMAIL = "designer@yourcompany.com"
PASSWORD = "your-password"
# 認証
session = requests.Session()
resp = session.post(f"{PENPOT_URL}/api/rpc/command/login-with-password", json={
"email": EMAIL, "password": PASSWORD
})
profile = resp.json()
print(f"Logged in as: {profile['fullname']}")
# プロジェクト一覧を取得
projects = session.get(f"{PENPOT_URL}/api/rpc/command/get-projects").json()
for proj in projects:
print(f"Project: {proj['name']} (ID: {proj['id']})")
# ファイル一覧を取得
files = session.get(
f"{PENPOT_URL}/api/rpc/command/get-project-files",
params={"project-id": projects[0]["id"]}
).json()
for f in files:
print(f" File: {f['name']} - Modified: {f['modified-at']}")
# デザイントークンをJSONでエクスポート（Design Tokens用）
# CSSをエクスポート
file_id = files[0]["id"]
css_export = session.get(
f"{PENPOT_URL}/api/rpc/command/export-binfile",
params={"file-id": file_id, "type": "zip"}
)
with open("design-export.zip", "wb") as out:
out.write(css_export.content)
Excalidraw
2020年に公開されたReactベースの手書き風ダイアグラムツールです。GitHubスター94k+。**インフォーマルな図（アーキテクチャ概念図・ブレインストーミング・ER図のラフスケッチ）**に最適で、フリーハンドスタイルの描画が「考え中」の雰囲気を演出します。リアルタイム共同編集対応。excalidraw.comのオンライン版を使うか、セルフホストできます。
# Excalidrawをセルフホスト
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install
npm start # http://localhost:3000
# またはDockerで
docker run -d -p 3000:80 excalidraw/excalidraw:latest
// Excalidrawをインタラクティブに操作（React Componentとして埋め込み）
import React from "react";
import { Excalidraw } from "@excalidraw/excalidraw";
export default function DiagramEditor({ initialData, onSave }) {
const [excalidrawAPI, setExcalidrawAPI] = React.useState(null);
const handleSave = async () => {
if (!excalidrawAPI) return;
// 現在の図の状態を取得
const elements = excalidrawAPI.getSceneElements();
const appState = excalidrawAPI.getAppState();
// SVGとして出力
const svg = await excalidrawAPI.exportToSvg({
elements,
appState: { ...appState, exportBackground: true }
});
onSave({ elements, appState, svg: svg.outerHTML });
};
return (
<div style={{ height: "600px" }}>
<Excalidraw
ref={(api) => setExcalidrawAPI(api)}
initialData={initialData}
onChange={(elements, state) => {
// 変更を監視（自動保存等に使用）
console.log("Elements count:", elements.length);
}}
/>
<button onClick={handleSave}>保存 (SVG)</button>
</div>
);
}
draw.io（diagrams.net）
2005年から開発されているフローチャート・ネットワーク図・ER図のためのダイアグラムツールです。GitHubスター44k+（drawio-desktopリポジトリ）。AWS・Azure・GCPのアーキテクチャ図に対応したアイコンセットが豊富で、システム設計書・インフラ構成図の作成に最適です。XMLベースのファイル形式（.drawio）でGitHubに保存・バージョン管理できます。
# draw.ioをDockerでセルフホスト
docker run -d -p 8080:8080 --name drawio -e DRAWIO_SELF_CONTAINED=1 jgraph/drawio:latest
# WebUI: http://localhost:8080
<!-- draw.ioのXMLファイル形式（.drawio） -->
<!-- GitHubにコミットして図のバージョン管理が可能 -->
<mxfile>
<diagram name="System Architecture">
<mxGraphModel>
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- API Gateway -->
<mxCell id="2" value="API Gateway" style="rounded=1;whiteSpace=wrap;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="40" as="geometry" />
</mxCell>
<!-- Backend Service -->
<mxCell id="3" value="Backend" style="rounded=1;fillColor=#dae8fc;"
vertex="1" parent="1">
<mxGeometry x="300" y="100" width="120" height="40" as="geometry" />
</mxCell>
<!-- Arrow from API Gateway to Backend -->
<mxCell id="4" edge="1" source="2" target="3" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
機能比較表
| 比較項目 | Penpot | Excalidraw | draw.io |
|---|---|---|---|
| UI/UXデザイン | ✅（Figma代替） | ❌ | ❌ |
| フローチャート | ❌ | ✅（手書き風） | ✅（本格的） |
| リアルタイム共同編集 | ✅ | ✅ | ✅ |
| プロトタイピング | ✅ | ❌ | ❌ |
| クラウドアイコン（AWS等） | ❌ | 限定的 | ✅（豊富） |
| GitHubとの統合 | 限定的 | ✅（PNG埋め込み） | ✅（.drawioコミット） |
| GitHub Stars | 36k+ | 94k+ | 44k+ |
デザインツールで作成したモックアップのアクセシビリティ検証にはDesignカテゴリ/categories/designの関連ツールを参照してください。チームのデザインレビューと承認ワークフローにはCommunicationカテゴリ/categories/communicationのツールと組み合わせてください。
FAQ
Q. Penpotはローカルフォントを使えますか？
A. はい。Penpotはシステムフォントを自動検出し、Googleフォントも統合されています。カスタムフォントをプロジェクトにアップロードする機能もあります。ただしFigmaのVariable Fontsサポートは2024年時点でPenpotは限定的です。
Q. Excalidrawの図をGitHubに保存・管理するベストプラクティスは？
A. .excalidraw ファイル（JSON形式）としてコミットします。GitHubはExcalidrawファイルをプレビューできないため、SVGエクスポートも一緒にコミットするか、excalidraw-to-svg CI Action を使ってPR時に自動でSVGに変換します。また、GitHubのREADME.mdには  で画像として埋め込めます。
Q. draw.ioで作成した図をJiraやConfluenceに貼り付けるには？
A. draw.ioのJira/Confluenceアドイン（有料）が公式に提供されています。ただしセルフホストのdraw.ioからはSVG/PNGエクスポートしてConfluence/Jiraに添付するのが最も簡単な方法です。GitHubとはネイティブ統合があり、リポジトリ内の.drawioファイルをGitHub上でレンダリングできます（GitHub Diagramsプレビュー機能）。
Q. PenpotのAuto Layoutは Figma の Auto Layout と同等ですか？
A. 2024年時点でPenpotのAuto Layout（Grid Layout）はFigmaのAuto Layoutの主要機能をカバーしています。方向（水平・垂直）・アイテム間のギャップ・パディング・子要素のサイズ設定（Fixed・Fill Container・Hug Contents）に対応。ただしAdvanced Auto Layout（Wrap・Absolute Position）はFigmaほど成熟していないため、複雑なレスポンシブコンポーネントはFigmaの方が扱いやすい場合があります。
まとめ
| ユースケース | 推奨ツール |
|---|---|
| UI/UXデザイン・プロトタイピング（Figma代替） | Penpot |
| ブレインストーミング・手書き風アーキテクチャ概念図 | Excalidraw |
| フローチャート・インフラ構成図・ER図 | draw.io |