00:00:00これはFigmaのような競合ツールであるオープンソースの設計ツール、Penpotです。
00:00:05見た目はFigmaに似ていますが、動作は全く別物です。
00:00:10なぜなら、内部的には本物のCSSを使用しており、後から変換する必要がないからです。
00:00:15そして、それがハンドオフの問題を大きく変えてくれます。
00:00:18どういうことか説明しましょう。
00:00:20PenpotはブラウザベースのUIデザインおよびプロトタイピングツールです。
00:00:29見た目は確かにFigmaやSketchのように聞こえますが、
00:00:32実は、ここが大きな違いです。
00:00:35Penpotは100%オープンソースであり、本物のWeb標準に基づいて構築されています。
00:00:40SVG、CSS Flexbox、Grid、そしてHTMLです。
00:00:43つまり、後から解読したり構造を変換したりする必要があるものの中で設計するのではなく、
00:00:49Webが実際にどのように機能するかに近い状態で設計できるのです。
00:00:52Dockerを使ってコマンド一つで自己ホストが可能で、
00:00:54この動画では実際にそれを行います。それが私のやり方ですから。
00:00:58ツールのオープンソース版と、それらがどう比較できるかを確認します。
00:01:01Penpotでも、デザイナーはコンポーネント、レイアウト、プロトタイプを利用できます。
00:01:06しかし、開発者は実際に重要な部分、つまり本物のコードのように見える出力を得られるのです。
00:01:11奇妙な中間層はなく、何が起きているか推測する必要もありません。
00:01:14しかも無料です。
00:01:15ファイル数もコラボレーター数も無制限、これが人々がこのツールに注目する理由です。
00:01:20もしあなたがオープンソースツールや、ワークフローを高速化するコーディングのヒントを楽しんでいるなら、
00:01:23ぜひチャンネル登録をお願いします。
00:01:25動画は常に公開しています。
00:01:27さて、Penpotはデザインツールです。
00:01:28開発者であるなら、なぜ気にする必要があるのでしょうか？
00:01:31それは、これが非常に特有の悩みを解決するからです。
00:01:34プロジェクトの引き継ぎや、デザインを本物のコードに変換する際の手間という悩みです。
00:01:39Penpotは、デザインをWebネイティブなものに感じさせてくれます。
00:01:42そのため、何かを調査する際に推測するのではなく、そのまま読み取ることができるのです。
00:01:46見せてあげましょう。
00:01:48さて、デモの時間です。
00:01:50これは私が自己ホストしているPenpotインスタンスで動作しています。
00:01:54設定した公式のDocker Composeファイルを使って、
00:01:58"docker-compose up"コマンド一つで起動しました。
00:02:00これは画期的でした。
00:02:02起動には少し時間がかかりましたが、一度立ち上がれば完璧に動作します。
00:02:07ご覧の通り、新しいプロジェクトを作成できるクリーンな見た目のランディングページが表示されます。
00:02:12実際に何か簡単なカードを作ってみましょう。
00:02:16コンテナを作り、Flexboxに設定し、パディングを追加します。
00:02:21タイトルとテキスト、そしてボタンを配置します。
00:02:24もう少し追加してみましょう。コピー＆ペーストで別のカードも作れます。
00:02:28素早く編集を加えます。
00:02:30次に「インスペクトモード」に切り替えます。
00:02:32ここが最も重要な部分です。
00:02:33実際のCSS、Flexboxプロパティ、間隔、レイアウトがクリーンな構造で表示されます。
00:02:39粗い変換ではなく、あなた自身がすでに理解しているコードそのものです。
00:02:42これをコピーして、そのままプロジェクトに貼り付けることができます。
00:02:46バリアント、トークン、プロトタイプフロー、SVGとしてのエクスポート機能もあります。
00:02:51それが大きなポイントです。
00:02:52これにより、特にスタック全体を自分で管理している開発チームにとっては、
00:02:54多くの摩擦が取り除かれます。
00:02:58さて、多くの開発者が懐疑的になる部分について話しましょう。
00:03:02最初は「ああ、また別のデザインツールか」と思うかもしれません。
00:03:06しかし、違いは見た目ではなく、仕組みにあります。
00:03:09Figmaはレイアウトを「シミュレート」します。
00:03:12オートレイアウトはFlexboxに触発されていますが、結局はすべて自分で
00:03:16頭の中で変換する必要があります。
00:03:17Penpotは実際のCSSに近いところから始まるため、
00:03:21デザインとコードの間の精神的な変換作業が少なくなります。
00:03:25それから、ロックインの問題もありますよね？
00:03:26Figmaは独自形式のファイルを使用します。
00:03:29料金プランやシートモデルもあります。
00:03:31Penpotはオープンソースなので、自分でホストできます。
00:03:34データはSVG、CSS、JSONの形式で保持されます。
00:03:38ハンドオフも違います。Figmaでは、それが余分なレイヤーのように感じませんか？
00:03:42Devモードやプラグインといった追加手順が必要です。
00:03:45Penpotでは、それが最初から組み込まれています。
00:03:47インスペクトビューは、私たちが実際に必要とするものに近いのです。
00:03:50公平に見て、Figmaは素晴らしいツールです。
00:03:53私も使っていますし、巨大で洗練されたエコシステムです。
00:03:56しかし、Penpotは最初から開発者のことを念頭に置いて構築されています。
00:04:00では、開発者は具体的にどの点を気に入っているのでしょうか？
00:04:02先ほど言ったことが一番の理由ですね。
00:04:04シンプルに、ハンドオフの問題が小さくなることです。
00:04:07これは私たちにとって非常に大きいです。
00:04:08レイアウトを逆エンジニアリングする必要はもうありません。
00:04:11CSSに直接マッピングされるものを読むだけでいいのです。
00:04:15それはデザイントークンにも現れています。
00:04:18色、間隔、タイポグラフィが、開発者がコードで考える方法に近い形で
00:04:22構造化されています。
00:04:24そして、自己ホストができることもチームにとっては大きなポイントです。
00:04:27プライバシー、社内ツール、CI/CDを重要視するなら、これらはすべて重要ですよね？
00:04:33ただし、オープンソースにも完璧なものはありません。Figmaでさえ完璧ではないでしょう。
00:04:37Penpotは非常に大きなファイルには苦戦することもあります。
00:04:40プラグインのエコシステムもまだ小さいです。
00:04:43Figmaを使い込んでいる人には学習曲線があるかもしれませんが、
00:04:47正直なところ、考え方が異なるだけで習得は非常に簡単です。
00:04:51一部で洗練さに欠ける部分はありますが、デザインと
00:04:56開発の間のギャップが非常に小さく、これこそ私たちが求めているものです。
00:04:59では、使う価値はあるのでしょうか？
00:05:01私はそう思います。
00:05:02使っていて楽しかったです。
00:05:02私はこういうツールが好きなんです。
00:05:03多くの開発者にとって、価値はあるでしょう。
00:05:06サイドプロジェクトや開発中心の作業をしているなら、納得できるツールです。
00:05:10特にコストを抑えたいならなおさらです。
00:05:12MVPを構築している時、こういうものを作っている時、
00:05:14ロックインを避けたい時、そして
00:05:16デザインをきれいにコードへ変換したい時に役立ちます。
00:05:19もちろん、巨大なデザインシステムを持つ大企業で、
00:05:23すでにFigmaを中心に構築されている場合は、
00:05:24一晩でこれに乗り換えることはないでしょう。でも、
00:05:28それが目的ではありません。
00:05:29Penpotはすべてを置き換えなくても十分有用なのです。
00:05:31多くのチームにとって、必要なことのほとんどをカバーし、
00:05:35開発をスピードアップさせてくれます。
00:05:36だからこそ、より多くの開発者が実際に試し始めているのです。
00:05:39デザインをコードに落とし込むためのハンドオフ時間を大幅に短縮できます。
00:05:45試してみたいなら簡単です。
00:05:46Penpotのアプリに行き、クラウド版を使うか、私のようにやってみてください。
00:05:50Dockerで自己ホストして、自分好みのコントロールを手に入れましょう。
00:05:54もしこのようなオープンソースツールやコーディングのヒントを楽しんでいただけたなら、
00:05:57ぜひBetter Stackチャンネルの登録をお願いします。
00:05:59また次の動画でお会いしましょう。