Penpotのパフォーマンスチューニング極意：巨大なデザインシステムを「超軽量」に保つプロの技術
テックリードの君なら、一度は経験があるはずだ。
プロダクトの成長に伴い、デザインシステムが肥大化。数千のコンポーネント、ネストされすぎたオートレイアウト、複雑なSVGアイコンの群れ――。Figmaならまだしも、オープンソースの旗手であるPenpotでこれをやると、ある日突然、ブラウザのタブが悲鳴を上げ、メモリを食い潰し、キャンバスのパンやズームがカクつき始める。
「オープンソースだから仕方ない」？
ふざけてはいけない。ツール側の限界ではない。私たちの設計アプローチが、ブラウザのレンダリングパイプラインをいじめているだけだ。
今回は、Penpotの内部アーキテクチャ（SVGベースのDOM構造とClojureScript/WASMの挙動）を理解し、巨大なコンポーネントライブラリを極限まで軽量化するための実践的なチューニング術を授ける。チーム全体の生産性を再び爆発させよう。
—
1. なぜPenpotは重くなるのか？（根本原因の解析）
Figmaが独自のWebGLレンダリングエンジン（Skia）に依存しているのに対し、PenpotはブラウザのDOM（SVG要素）をダイレクトに操作してキャンバスを描画している。
このアーキテクチャには「オープンで拡張性が高い」という圧倒的なメリットがある一方で、以下のボトルネックを抱えている。
- DOMノードの爆発: 複雑なコンポーネントを深くネストさせると、SVGの `
`（グループ）タグや ` ` タグが数万〜数十万に達し、ブラウザのレイアウトツリー構築コストが跳ね上がる。 - リアクティブな再計算コスト: Penpotはコンポーネントのプロパティやバインディングの変更を細かく監視しているため、依存関係がクモの巣状に広がると、一回の変更で広範囲の再レンダリングが発生する。
- ガベージコレクション（GC）の圧迫: 不要になったレイヤーや巨大な画像アセットがメモリ上に残留し、V8エンジンのGCを頻発させる。
これを克服するには、「描画コストの低いSVGの構築」「コンポーネントの疎結合化」「ブラウザリソースの最適化」の3つを同時に攻める必要がある。
—
2. 現場で即効性を発揮する！SVG & レイヤー構造の最適化テクニック
① SVGアイコンは「フラット」にパージせよ
外部からインポートしたSVGアイコンが、重さの最大の原因になっているケースが多すぎる。デザイナーが無意識に書き出したSVGには、不要なメタデータ、隠しレイヤー、過剰にネストされたパスが含まれている。
- 対策: インポートする前に必ずSVGO等のCLIツールで最適化するか、Penpot上で不要なパスの結合（Union）を行うこと。
- パスの削減: 1つのアイコン内でパスが10個以上あるものは、SVGの結合処理をかけ、DOMノード数を物理的に削減せよ。
② オートレイアウトの「過剰ネスト」を禁止する
「Flexboxのラッパーの中にさらにFlexbox…」という構造を何層も作ると、ブラウザのCSSレイアウト計算が地獄を見る。
- ルール: ネストの深さは最大3階層までとする。それ以上になる場合は、コンポーネント自体をフラットに再設計するか、デザインの粒度を見直せ。
—
3. 開発スピードを劇的に高める！隠れたキーボードショートカット
マウス操作でレイヤーパネルの奥底を探る時間は、チーム全体の生産性を確実に削り取っている。以下のショートカットをチームの共通言語にしろ。
| ショートカット (Mac / Linux / Win) | アクション | テックリードの解説 |
| :— | :— | :— |
| `Alt` + V / `Option` + V | コンポーネントのインスタンスをデタッチ | 変更の伝播をあえて断ち切り、ローカルでの軽量化を図る最終手段。 |
| `Ctrl` / `Cmd` + `Shift` + `G` | グループの解除（Un-group） | 無駄なラッパー層を秒速で排除し、DOM構造をフラット化する。 |
| `Shift` + `2` | 選択範囲へズーム | 無駄な全体表示によるレンダリング負荷を避け、必要な箇所だけを描画させる。 |
| `Ctrl` / `Cmd` + `Y` | アウトラインモード切り替え | レンダリングを犠牲にしてDOM構造の歪みを一瞬で暴く。重さの原因特定に必須。 |
—
4. チーム開発で絶対に守るべき「デザインシステム運用ルール」
個人のスキルだけでは限界がある。チーム全体で「重くならないデータ構造」を維持するための規約（ガバナンス）をコードとして共有しよう。
共有設定ファイル・ルール（`penpot-ds-guidelines.yaml`）
リポジトリのルート、あるいはチームのWikiに配置し、CI/CDならぬ「デザインレビューの基準」として活用せよ。
version: “1.0”
team: “Core-Design-Systems”
description: “Penpotパフォーマンス維持のための厳格なアーキテクチャガイドライン”
rules:
components:
max_nesting_depth: 3 # オートレイアウトの最大ネスト数
prohibited_elements:
- “unoptimized_svg_paths” # 結合されていない生の状態のSVG
- “hidden_layers_in_master” # メインコンポーネント内の非表示レイヤーの残留
naming_conventions:
# 検索性とメモリキャッシュの効率化を考慮したプレフィックス規約
tokens: “atom/token/”
molecules: “mol/”
organisms: “org/”
templates: “tpl/”
export_settings:
images:
max_resolution: “2x” # 4x以上の無駄な高解像度アセットの埋め込みを禁止
preferred_format: “WEBP” # PNG/JPEGではなくWebPまたはSVGを強制
—
5. ブラウザの限界を引き出す！メモリ・キャッシュ設定のチューニング
Penpotを快適に動かす主戦場は「ブラウザ」だ。クライアント側の環境設定を最適化することで、スペックの低いマシーンでもカクつきをゼロにできる。
Chrome / Chromium系ブラウザのハードウェアアクセラレーション最適化
1. `chrome://flags/` を開く。
2. “Hardware-accelerated video decode” および “GPU rasterization” が有効（Enabled）になっていることを確認する。
3. “Override software rendering list” を有効にし、GPUのパワーを強制的にPenpotのSVG描画に割り当てる。
メモリリークを防ぐタブ運用術
- 巨大なデザインシステムを触る際は、1つのウィンドウにPenpotのタブを1つだけ配置しろ。他の重いWebアプリ（特にJiraやFigma、大量のタブ）と同居させると、ブラウザのタブ単位のメモリコンパクションにより、PenpotのWASMヒープ領域が圧迫され、突然フリーズする原因になる。
- 定期的にブラウザのデベロッパーツール（`Ctrl + Shift + I`）を開き、Performanceタブからメモリ使用量をプロファイリングする習慣をつけろ。
—
結びに代えて：ツールに縛られるな、ツールを使い倒せ
「オープンソースだから動作が重いのは仕方ない」――そんな妥協を、優秀なエンジニアリングチームが許してはならない。
Penpotの裏側にある仕組みを理解し、DOMの肥大化を防ぎ、適切な構造化とブラウザチューニングを行えば、数千のコンポーネントを抱える巨大なデザインシステムであっても、まるで一枚の軽快なコードを書いているかのように滑らかに動作させることができる。
さあ、今すぐチームのPenpotワークスペースを開き、不要なネストを剥ぎ取り、DOMを解放してこい。君のプロダクトのビルドスピードと同じくらい、デザインのパフォーマンスも劇的に加速するはずだ。