https://knightli.com/ja/tags/penpot/ Recent content in Penpot on KnightLiブログ Hugo -- gohugo.io ja Mon, 22 Jun 2026 08:05:45 +0800 https://knightli.com/ja/2026/06/22/penpot-self-host-design-tool-guide/ Mon, 22 Jun 2026 08:05:45 +0800 https://knightli.com/ja/2026/06/22/penpot-self-host-design-tool-guide/ <p><code>penpot/penpot</code> はオープンソースの設計ツールです。位置づけは Figma に近いですが、オープンソース、セルフホスト、設計とコードの共同作業をより重視しています。設計資産、コンポーネント、ハンドオフの流れを自分たちで管理したいチームに向いています。</p> <p>プロジェクト：</p> <p><a class="link" href="https://github.com/penpot/penpot" target="_blank" rel="noopener" >https://github.com/penpot/penpot</a></p> <p>公式サイト：</p> <p><a class="link" href="https://penpot.app" target="_blank" rel="noopener" >https://penpot.app</a></p> <h2 id="penpot-が向いている人">Penpot が向いている人 </h2><p>Penpot は次のような場面に向いています。</p> <ol> <li>チームでオープンソースの設計ツールを使いたい。</li> <li>会社として設計ファイルを完全にサードパーティ SaaS に置きたくない。</li> <li>デザイナーとフロントエンドの間で Inspect Mode、デザインシステム、コンポーネントのハンドオフが必要。</li> <li>design tokens、components、variants をもとに長期的な設計規約を作りたい。</li> </ol> <p>個人で一時的に図を描くだけなら、オンライン版を使うほうが手軽です。セルフホストはチームで長期利用する場合に向いています。</p> <h2 id="セルフホストの入口">セルフホストの入口 </h2><p>README は完全な Docker Compose をトップページに貼っているのではなく、公式の self-host ドキュメントを案内しています。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">https://penpot.app/self-host </span></span></code></pre></td></tr></table> </div> </div><p>実際にデプロイするときは、Web 上の古い compose をコピーするのではなく、公式ドキュメントに沿って Docker または Kubernetes を使うのがおすすめです。Penpot のような共同作業ツールは、通常 1 つのコンテナだけでは完結しません。データベース、オブジェクトストレージ、バックグラウンドタスク、メールサービスも関係します。</p> <p>堅実なセルフホスト手順は次のようになります。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># 1. まず公式 self-host ドキュメントを読む</span> </span></span><span class="line"><span class="cl"><span class="c1"># 2. ドメイン、HTTPS、永続化ディレクトリ、データベースを準備する</span> </span></span><span class="line"><span class="cl"><span class="c1"># 3. 公式推奨の Docker / Kubernetes 方式で起動する</span> </span></span><span class="line"><span class="cl"><span class="c1"># 4. 管理者アカウントを作成する</span> </span></span><span class="line"><span class="cl"><span class="c1"># 5. チームスペースをインポートまたは作成する</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="開発ハンドオフでの使い方">開発ハンドオフでの使い方 </h2><p>開発者にとって Penpot で便利なのは Inspect Mode です。デザイナーが画面を完成させたあと、開発者は次の情報を確認できます。</p> <ol> <li>サイズと余白。</li> <li>色とフォント。</li> <li>コンポーネント構造。</li> <li>デザイン token。</li> <li>再利用可能なコンポーネントと variants。</li> </ol> <p>これはスクリーンショットへの注釈より安定しており、複数人での共同作業にも向いています。</p> <h2 id="チームでのおすすめフロー">チームでのおすすめフロー </h2><p>次のように進められます。</p> <ol> <li>デザイナーが Penpot で design system を作る。</li> <li>コンポーネント名をフロントエンドのコンポーネントライブラリにできるだけ合わせる。</li> <li>色、フォントサイズ、余白を token で管理する。</li> <li>開発者は口頭説明ではなく Inspect Mode でスタイルを確認する。</li> <li>大きなバージョン変更の前に設計ファイルをエクスポートまたはバックアップする。</li> </ol> <h2 id="注意点">注意点 </h2><p>Penpot は共同作業システムであり、単一ファイルのツールではありません。セルフホストする場合は、アップグレード、バックアップ、権限、メール、HTTPS、ストレージを考える必要があります。チームの正式な設計資産を移行する前に、まずテスト環境で一通りの流れを試すのがおすすめです。</p>