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