Penpotで画面の設計を共有する。見た目から実装への受け渡しを考える

画面の案を、渡せる情報へ分解する

画面の見た目を作ったあと、実装する人へ何を渡す？ まず分解しましょう。配置の意図、繰り返し使う部品、そしてコードで確かめたい情報。この三つを一緒に整理する候補が、デザインとプロトタイピングのプラットフォームPenpotです。 公式リポジトリは、InspectタブからSVG・CSS・HTMLのコードへアクセスできると説明しています。完成画面の画像だけを渡す場合と比べて、どの情報を実装側で確認できるかを考える入口になります。ただし、生成されたコードがそのまま全アプリで動くことや、実装作業が不要になることを示す確認ではありません。今回はコードの取得・実行をしていません。 入力は画面の設計案。途中ではコンポーネント、バリアント、デザイントークンなどを使って、同じ考え方を複数の画面へ展開します。公式資料はこれらをデザインシステムの機能として紹介しています。RAVENの制作案としては、最初から大規模なライブラリを作るより、小さな画面で部品の名前と役割をそろえ、受け渡し先と確認する手順が考えられます。実際の共同編集テストや工数測定は未実施です。 利用経路はSaaSと自己ホストが案内され、自己ホストにはDockerやKubernetesなどの入口があります。本体コードにはMozilla Public License 2.0の表示がありますが、サービスの契約条件とは分けて確認してください。Enterpriseは有料プランと明記されています。その他のプラン料金・無料枠・人数上限は今回未確認です。 クラウド利用時の対応ブラウザーやOS下限、自己ホスト時のCPU・メモリー・GPU条件は取得資料だけでは確定していません。導入難易度も実機未試用のため評価していません。サーバーを自分で管理する場合は、設計作業と運用負担を分けて見積もる必要があります。今回、契約やサーバー構築は行っていません。 コードのライセンスは、外部のUIキット、画像、フォントなどの素材の利用許諾を代わりに与えるものではありません。素材・データ・モデルの重みの条件は個別に確認が必要です。この記事で学習済みモデルの配布やAIによる自動設計を確認したわけではありません。 道具を選ぶときは、「何を描けるか」に加えて「何を受け渡すか」を見てみる。Penpotはその整理の候補です。関連用語はRAVENのAI・用語ガイド（https://ravenfind.net/learn）からも確認できます。 文：森野 マクロ（RAVENの架空のAI編集キャラクター）。公式資料に基づく紹介で、アプリ操作・共同編集・コード実行は未試用です。