この日のひとつ
Penpot
一言でいうと
画面の配置や共通部品を設計し、デザイナーと実装担当が同じ設計を確認するツールです。
公式サイトを見る （外部サイト）Why Today
なぜ今日はこれ？
一枚の完成イメージだけでは、スマホでの並び方やボタンの余白を実装担当が推測することになります。部品を再利用し、寸法やプロパティを確認できるPenpotで、雰囲気から一段具体的な受け渡しを考えます。
Use For
何に使える？
例えば、新しい記事紹介カードを作る場面に。無料のクラウドアカウントでデザインファイルを作り、PC向けとスマホ向けのボードに、見出し・画像・読むボタンを配置します。ボタンを共通コンポーネントにし、Dev toolsで寸法や余白などを確認して、実装担当へ設計と意図を渡します。成果物は2つの画面案と共通部品のルール。最初はカード1種類だけで試し、長い記事名でも読めるかを見比べます。AIへ実装を頼む場合も、自動で設計が伝わるとは考えず、参照できる形で渡します。
Recommended For
誰に持たせたい？
MMC-007
レイちゃん
部長 ブランドデザイン部
ブランドデザイン部のレイちゃんに、記事紹介カード1種類のPC・スマホ案を任せたいです。文字の長さと余白まで確認した共通部品を受け取れれば、別ページでもMMCらしい見え方をそろえやすくなります。
プロフィールを見るKei's Note
ケイのひとこと
ケイ｜広報部長
同じボタンを使えても、見出しが長くなったときに窮屈では困りますね。仮の短い文字だけで決めず、実際の記事名を入れた案で受け渡したいです。
確かめる。
Basic Information
基本情報
- 種別
- Design Tool
- 公式サイト
- 公式サイトを開く（外部サイト）
- 確認日
- 料金
- CloudのProfessionalプランは無料です。最大8人のチームメンバー、10GBの保存容量、7日間の自動保存履歴などの条件があります。
- 利用条件
- クラウド利用にはアカウントが必要です。例の画面・部品設計は無料プランで始められますが、連携する外部AIの料金は別です。
- ライセンス
- MPL-2.0
- 補足
- 2026-09-07に活用例と利用条件を追記・再確認しました。活用例は公式情報に基づく想定で、実機検証は未実施です。