OSSのデザインコラボレーション比較：Penpot vs Excalidraw vs tldraw でFigma代替を探す

Figma（月$15/エディター〜）・Adobe XD（サービス終了）・Sketch（Mac専用・月$9〜）に対して、Penpot（最もFigmaに近いOSSデザインツール）・Excalidraw（ダイアグラム・ホワイトボード特化）・tldraw（無限キャンバス・コード埋め込み対応）はOSSのコラボレーティブデザインツールです。

OSSデザインツールを選ぶ理由

• コスト: Figmaは10人で月$150。Penpotセルフホストなら$0
• データ主権: デザインファイルを自社サーバーに保管（NDAsや機密デザインを外部SaaSに置かない）
• Figma移行: FigmaのPlulanがAdobe買収で価格改定→OSSへの移行需要が増加
• エンジニアとの統合: tldrawはReactコンポーネントとして埋め込みできる

主要ツールの概要

Penpot

2015年に公開されたClojure/ClojureScript製のOSSデザインツールです。GitHubスター33k+。Figmaに最も近いUIと機能を持つOSSベクターデザインツールで、コンポーネント・バリアント・プロトタイプ・グリッド・フレックスレイアウト・開発者向けコード検査（CSS/SVG）・Figmaファイルインポートをサポートします。WebUI・Dockerセルフホストで動きます。

# Penpot をDockerでセルフホスト
git clone https://github.com/penpot/penpot
cd penpot

# docker-compose.yaml が含まれている
# 設定ファイルを確認・編集
cat > config/flags.env << 'EOF'
PENPOT_FLAGS=enable-registration disable-email-verification
PENPOT_SECRET_KEY=$(openssl rand -hex 16)
PENPOT_PUBLIC_URI=https://design.yourcompany.com
EOF

docker compose -p penpot -f docker-compose.yaml up -d

# WebUI: https://design.yourcompany.com
# 管理者アカウントを作成
docker exec -ti penpot-penpot-backend-1   ./manage.py create-profile   --email admin@yourcompany.com   --fullname "Admin"   --password your-secure-password

// Penpot REST APIを使ってデザインファイルを管理
// Penpotはアクセストークン認証のREST APIを提供

const PENPOT_URL = "https://design.yourcompany.com";
const ACCESS_TOKEN = process.env.PENPOT_ACCESS_TOKEN!;

// プロジェクト一覧を取得
async function getProjects() {
  const response = await fetch(`${PENPOT_URL}/api/rpc/command/get-projects`, {
    method: "GET",
    headers: {
      Authorization: `Token ${ACCESS_TOKEN}`,
      "Content-Type": "application/json",
    },
  });
  return response.json();
}

// ファイルのエクスポート（PNG・SVG）
async function exportFile(fileId: string, pageId: string) {
  const response = await fetch(`${PENPOT_URL}/api/rpc/command/export-file`, {
    method: "POST",
    headers: {
      Authorization: `Token ${ACCESS_TOKEN}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      "file-id": fileId,
      "page-id": pageId,
      "object-ids": null,  // null = 全オブジェクト
      "export-type": "png",
      "scale": 2,   // 2x = Retina
    }),
  });
  return response.blob();
}

// Figma ファイルをPenpotにインポートする
// Penpot WebUI → New File → Import Figmaから実行（GUIのみ）
// または Figma2Penpot CLIツールを使う

// pip install figma2penpot
// figma2penpot //   --figma-token YOUR_FIGMA_TOKEN //   --figma-file-id YOUR_FILE_ID //   --penpot-url https://design.yourcompany.com //   --penpot-token YOUR_PENPOT_TOKEN

Excalidraw

2020年に公開されたTypeScript/React製のOSSホワイトボードツールです。GitHubスター96k+。手書き風のダイアグラム・フローチャート・ワイヤーフレームをリアルタイムコラボレーションで作成できる最もシンプルなツールです。アーキテクチャ図・フロー設計・ブレインストーミングに特化し、エンジニアが技術設計をホワイトボードで説明するシーンに最適です。Next.jsやReactアプリにコンポーネントとして埋め込めます。

# Excalidraw をセルフホスト
git clone https://github.com/excalidraw/excalidraw
cd excalidraw

npm install
npm run build   # 静的アセットをビルド

# Vercelにデプロイ（最も簡単）
# npx vercel --prod

# またはDockerで
docker build -t excalidraw .
docker run -p 3000:3000 excalidraw

// ReactアプリにExcalidrawを埋め込む
// npm install @excalidraw/excalidraw
"use client";
import { Excalidraw } from "@excalidraw/excalidraw";
import { useState, useRef } from "react";
import type { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
import type { AppState } from "@excalidraw/excalidraw/types/types";

interface CollaborativeWhiteboardProps {
  initialData?: { elements: ExcalidrawElement[]; appState: Partial<AppState> };
  onSave?: (elements: ExcalidrawElement[]) => void;
}

export function CollaborativeWhiteboard({ initialData, onSave }: CollaborativeWhiteboardProps) {
  const [elements, setElements] = useState<readonly ExcalidrawElement[]>(
    initialData?.elements || []
  );

  const handleChange = (
    newElements: readonly ExcalidrawElement[],
    state: AppState
  ) => {
    setElements(newElements);
    // 自動保存（500msのdebounce）
    if (onSave) {
      clearTimeout((window as any)._saveTimer);
      (window as any)._saveTimer = setTimeout(() => {
        onSave([...newElements]);
      }, 500);
    }
  };

  return (
    <div style={{ height: "600px", width: "100%" }}>
      <Excalidraw
        initialData={initialData}
        onChange={handleChange}
        viewModeEnabled={false}
        zenModeEnabled={false}
        gridModeEnabled={false}
        langCode="ja-JP"
        UIOptions={{
          canvasActions: {
            export: {
              saveFileToDisk: true,
            },
          },
        }}
      />
    </div>
  );
}

// Next.js でExcalidrawデータをSupabaseに保存
// app/api/whiteboard/route.ts
export async function POST(req: Request) {
  const { boardId, elements } = await req.json();
  const supabase = createClient();
  const { error } = await supabase
    .from("whiteboards")
    .upsert({ id: boardId, elements: JSON.stringify(elements), updated_at: new Date() });
  return Response.json({ ok: !error });
}

機能比較表

比較項目	Penpot	Excalidraw	tldraw
ベクターデザイン	✅（Figma相当）	基本のみ	基本のみ
プロトタイプ	✅	❌	❌
コンポーネント	✅	❌	❌
手書き風	❌	✅	✅
React埋め込み	❌	✅	✅
オフライン	❌	✅（PWA）	✅
GitHub Stars	33k+	96k+	38k+

PenpotのデザインファイルをエクスポートしてデザインシステムとしてLow-codeカテゴリ/categories/low-codeのStorybookと連携します。Excalidrawのアーキテクチャ図をドキュメントとして管理するにはMiscカテゴリ/categories/miscのBookstackやOutlineなどのOSSナレッジベースに埋め込みます。

FAQ

Q. FigmaからPenpotへの移行はどのくらい大変ですか？

A. UIの学習コスト: Figmaと非常に似ており1〜2日で主要操作を習得できます。ファイルインポート: Penpot WebUI → New File → Import Figmaでfigmaファイルを直接インポートできますが、複雑なバリアントやコンポーネントの一部が正確に変換されない場合があります。機能ギャップ: Figma Variables（デザイントークン）はPenpotのデザイントークン機能として対応中。Auto Layoutは対応済み。Interactive Prototype LinkはPenpotでもほぼ同等に設定できます。推奨移行戦略: 新規プロジェクトからPenpotで開始し、既存プロジェクトは納期後に段階的に移行するのが現実的です。

Q. PenpotをLDAPやOktaでSSO認証するには？

A. Penpotはフラグ設定でOAuth2プロバイダー認証を追加できます。Oktaの場合: config/flags.envにenable-oidcフラグを追加。docker-compose.yamlの環境変数にPENPOT_FLAGS_AUTH_BACKEND_OIDC_ENABLED=true、PENPOT_OIDC_CLIENT_ID、PENPOT_OIDC_CLIENT_SECRET、PENPOT_OIDC_BASE_URI（OktaのDiscovery URL）を設定します。GitLab OAuthも同様に設定でき、セルフホストGitLabと統合したDevOpsチームに向いています。

Q. Excalidrawをチームのホワイトボードとして使うときのリアルタイムコラボ設定は？

A. Excalidrawのコラボレーション機能はFirebaseを使いますが、セルフホスト版は独自のWebSocketサーバーが必要です。①excalidraw-room（公式WebSocketサーバー）をDockerでデプロイ②Excalidrawの環境変数VITE_APP_WS_SERVER_URLをWebSocketサーバーURLに設定③チームメンバーが同じURLにアクセスするとリアルタイムコラボが開始。エンドツーエンド暗号化はデフォルト有効（URLのハッシュがEncryption Keyとして使われる）。最もシンプルな方法はexcalidraw.comのShare機能を使う（データはE2E暗号化されているため外部漏洩リスクは低い）。

Q. tldrawをNext.jsアプリに埋め込んでホワイトボード機能を追加するには？

A. tldrawはReactコンポーネントとして提供されており、Next.jsにそのまま統合できます。

npm install tldraw

// app/whiteboard/page.tsx
"use client";
import { Tldraw, Editor, TLUiEventHandler } from "tldraw";
import "tldraw/tldraw.css";

export default function WhiteboardPage() {
  const handleMount = (editor: Editor) => {
    editor.updateInstanceState({ isDebugMode: false });
  };

  return (
    <div style={{ position: "fixed", inset: 0 }}>
      <Tldraw
        onMount={handleMount}
        persistenceKey="my-whiteboard"   // localStorageで自動保存
        autoFocus
      />
    </div>
  );
}

まとめ

ユースケース	推奨ツール
Figma代替・UIデザイン・プロトタイプ・セルフホスト	Penpot
ダイアグラム・フロー設計・エンジニアのホワイトボード	Excalidraw
無限キャンバス・Reactアプリ埋め込み・ホワイトボード	tldraw

関連外部リソース

• Penpot GitHubリポジトリ↗
• Excalidraw GitHubリポジトリ↗
• tldraw GitHubリポジトリ↗
• Penpot公式ドキュメント↗