こんにちは！デザインシステムとプロトタイピングの現場を駆け抜けてきた先輩エンジニアのボクです。
突然ですが、こんな経験はありませんか？
「Figmaからオープンソースの旗手である『Penpot』に乗り換えてみたはいいものの、デザインシステムが成長して巨大化するにつれて、ブラウザが重くなり、Macのファンが爆音を上げ始める……」
オープンソースでセルフホストも可能なPenpotは、開発者とデザイナーの共通言語（Code-base Component）を作る上で最強のツールです。しかし、何も考えずにコンポーネントを入れ子（Nested）にしまくると、ブラウザのDOMとレンダリングエンジンは悲鳴を上げます。
今回は、「巨大なコンポーネントライブラリを軽量化し、ブラウザのメモリ消費を劇的に抑えるPenpotパフォーマンスチューニングの極意」を、初心者の方にもわかりやすく、かつ現場で即効性のあるテクニックとして伝授しますね。
これをマスターすれば、毎日のプロトタイピング作業が劇的に軽快になり、ストレスフリーな開発ライフが手に入りますよ！
—
1. そもそも「Penpot」とは何か？（ツールの本質を知る）
まず前提として、Penpotは他のデザインツールと何が違うのでしょうか？
最大の武器は「最初からWeb標準（SVGとCSS Grid/Flexbox）をベースに作られていること」です。
多くのデザインツールは、独自のクローズドな描画エンジンを使っています。しかしPenpotは、ブラウザが直接理解できる「SVG」と「モダンCSSの概念」をそのままキャンバスに落とし込んでいます。つまり、Penpotを最適化することは、「極めてクリーンなWebフロントエンドのコードを設計すること」と完全に同義なのです。
—
2. 【基礎セットアップ】軽快なキャンバス環境を作るための初期設定
重くなる前に、まずはPenpot（またはブラウザ環境）の土台を整えましょう。ここを怠ると、どんなに綺麗にデザインしてもすぐに動作が重くなります。
① ブラウザのハードウェアアクセラレーションを有効化する
Penpotはブラウザ（ChromeやFirefox、Braveなど）上で動作します。GPUのパワーをフルに引き出すために、ブラウザの設定を確認してください。
- Chromeの場合: `chrome://settings/system` を開き、「グラフィックアクセラレーションが使用可能な場合は使用する」がオンになっていることを確認します。
② セルフホスト環境（Docker）でのリソース割り当て
もし会社や個人のサーバーでPenpotをDockerを使ってセルフホストしているなら、バックエンド（Backend）とフロントエンドのコンテナに適切なメモリ制限（Resource Limits）と、PostgreSQLのチューニングを行いましょう。
以下は、パフォーマンスを安定させるための `docker-compose.override.yml` の一例です。
version: ‘3.8’
services:
penpot-backend:
# バックエンドのJava/Clojureランタイムへのヒープメモリを最適化
environment:
- JAVA_TOOL_OPTIONS=”-Xms512m -Xmx2g -XX:+UseG1GC”
deploy:
resources:
limits:
memory: 3g
reservations:
memory: 1g
penpot-frontend:
deploy:
resources:
limits:
memory: 512m
※コンテナがメモリ不足でスワップが発生すると、キャンバスの操作がカクつく最大の原因になります。最低でもホスト側で8GB以上のRAMを確保したいところです。
—
3. 【HelloWorld的動作確認】軽量なコンポーネント構造の基本
では、Penpotにおける「軽くて美しいコンポーネント」の作り方を、最初のステップ（HelloWorldに相当する基礎）として確認しましょう。
重いデザインの共通原因は「不要なレイヤーのネスト（入れ子）」です。以下の手順で、パフォーマンシブルなコンポーネントを作ります。
1. ルート要素を正しく選ぶ
- ボタンを作る際、`Rectangle`の上に`Text`をただ重ねてグループ化していませんか？
- 代わりに Flexbox（Layout） を使って、ルートを1つのコンテナにします。
2. コンポーネント化（Component）の粒度
- アイコン1つひとつを独立したコンポーネントにせず、必要なアイコンをまとめた「Icon Set（バリアント管理）」を活用します。
—
4. 【極意】巨大ライブラリを劇的に軽量化する4つの裏技
ここからが本題です。大規模なデザインシステムを運用するエンジニア・デザイナーが実践している、具体的な軽量化テクニックを4つ紹介します。
裏技その1：SVGインポート時の「パスのダイエット（軽量化）」
Penpotに外部からSVG（ロゴやイラスト）をインポートする際、デザイナーがIllustratorやFigmaから書き出したSVGには、不要なメタデータ、グループタグ（`
- 対策: Penpotに取り込む前に、必ず [SVGOMG](https://svgomg.net/) などのツールで最適化をかけましょう。
- 効果: DOMノード数が削減され、PenpotがSVGをレンダリングする際のCPU負荷が驚くほど下がります。
裏技その2：「ネストの深さ」を3階層以内に抑える
コンポーネントの中にコンポーネントを入れ、さらにそれを……とやると、ブラウザの「再描画（Repaint / Reflow）」のコストが爆発的に上がります。
- ルール:
- Level 1: ページテンプレート
- Level 2: セクション / モジュール（カードやフォームなど）
- Level 3: アトム（ボタン、入力欄、アイコン）
- この3階層を超えるネスト構造を作らないように、デザインシステム側の設計をシンプルに保ちましょう。
裏技その3：非表示レイヤー（Hidden Layers）のこまめな削除
「後で使うかもしれないから」と、キャンバスの隅や、コンポーネントの内部に「非表示（目玉アイコンオフ）にした大量のレイヤー」を残していませんか？
Penpotは非表示であっても、データ構造（JSON）上ではメモリ上に保持している場合があり、これがライブラリ全体の動作を重くする隠れた原因になります。
- 対策: 使わなくなったアセットやバリエーションの残骸は、レイヤーパネルから潔く削除（Purge）しましょう。
裏技その4：ページ（Pages）とファイル（Files）の適切な分割
1つのPenpotファイルの中に、LP、ダッシュボード、設定画面、すべてのデザインシステムコンポーネントを詰め込んでいませんか？
- 対策:
- デザインシステム（Tokens & Core Components）のファイル
- プロダクト機能Aの画面ファイル
- プロダクト機能Bの画面ファイル
のように、ファイルを適切に分割し、必要なライブラリだけをアタッチ（Library Link）するようにしてください。ブラウザが保持するメモリ（Heap）が分散され、クラッシュを防げます。
—
おわりに：エンジニアとデザイナーの共通言語を軽やかに
Penpotは、コードとデザインを繋ぐ素晴らしいオープンソースのプロダクトです。だからこそ、その仕組み（Web標準であること）を理解して設計することで、パフォーマンスの悩みは綺麗に解消されます。
「重いからツールを変える」のではなく、「構造をチューニングして、サクサク動く快適な環境をハックする」。そんなエンジニアリング精神を持ってPenpotに向き合えば、あなたのチームのデザインワークフローは、もっと自由で楽しいものになるはずです。
今日の作業から、ぜひ「不要なレイヤーの削除」と「SVGの最適化」を試してみてくださいね。それでは、また次の知見でお会いしましょう！