こんにちは！プロダクトデザイナーの先輩として、今日は君にとてもエキサイティングな話をしよう。
デザインツールといえば、長らく高価なクローズド環境のサブスクリプションが当たり前だったよね。でも、今のオープンソース・エコシステムはそこを完全に超越した。その最前線に君臨するのが「Penpot（ペンポト）」だ。
SVGをネイティブ言語として操り、開発者が普段使うCSSの概念（FlexboxやGrid）をそのままデザインシステムに持ち込めるこのツールは、僕らUI/UXエンジニアにとってまさに「夢の隠れ家」のような存在になりつつある。
今回は、そのPenpotの真骨頂である「プロトタイピング機能（画面遷移とインタラクション）」を徹底的にマスターしよう。これを使いこなせば、ただの「絵」だったデザインが、触れる「プロダクト」に生まれ変わり、チーム全員の共通認識を一瞬で揃えられるようになるよ。
さあ、最高にワクワクする旅を始めよう！
—
1. Penpotとは何か？（なぜ今、僕らはPenpotを使うのか）
一言で言えば、Penpotは「デザイナーと開発者の共通言語」だ。
Figmaなどの独占的なツールに別れを告げ、オープンソースの自由を手に入れようという世界中のエンジニアやデザイナーの熱狂的な支持を集めている。
何がすごいって、CSSのメンタルモデルと完全に同期している点。デザインのプロパティがそのままCSSのコード構造に直結しているから、プロトタイプを作る段階から「実装を見据えたレイアウト」が自然と組み上がっていくんだ。
セットアップのステップ
Penpotを始めるのは驚くほど簡単だ。
1. 公式サイト（[penpot.app](https://penpot.app/)）にアクセスして無料のアカウントを作成する（ローカル環境にDockerでサクッと立てることもできるよ。開発者ならこっちもおすすめ！）。
2. ダッシュボードから「新しいプロジェクト（New Project）」を立ち上げる。
これだけで、君のブラウザの中に世界最高峰のキャンバスが準備される。準備はいいかい？
—
2. 精度高い「HelloWorld」：最初の画面遷移を作ろう
百聞は一見にしかず。まずは、クリックひとつで別の画面にジャンプする、プロトタイピングの「HelloWorld」を作ってみよう。
ステップ①：2つのアートボードを用意する
キャンバス上にアートボード（Frame）を2つ並べよう。
- Screen A（ホーム画面）: メインのダッシュボードをイメージ。適当な長方形（ボタン風）を置いておく。
- Screen B（詳細画面）: 「遷移成功！」とわかるように、背景色を変えた別のアートボードを用意する。
ステップ②：インタラクションモードへ切り替える
Penpotの右サイドバーに注目してほしい。
普段は「Design」タブが開いているはずだ。その隣にある「Prototype」タブをクリックしよう。UIの雰囲気がパッと切り替わり、プロトタイピングモードに入る。
ステップ③：リンク（配線）を結ぶ
1. Screen Aに置いた「ボタン風の長方形」を選択する。
2. 要素の端に現れる小さな「＋（プラス）マーク」（または青いドット）にカーソルを合わせる。
3. そのままドラッグして、遷移先の Screen B に向かって線を引っ張る。
4. 離すと、モーダル（設定パネル）がふわっと立ち上がる。これが魔法の瞬間だ！
—
3. 画面遷移とトリガー、アニメーションの解剖学
リンクを繋ぐと現れる設定パネルこそが、インタラクションの心臓部だ。ここを丁寧に調整することで、チープなモックが一気に「プロダクトの質感」を持つようになる。
[ Trigger (きっかけ) ] ──> [ Action (動作) ] ──> [ Destination (行き先) ]
・On click ・Navigate to ・Screen B
・On hover ・Open overlay
・After timeout ・Close overlay
1. トリガー（Trigger）を選ぶ
ユーザーがどういうアクションを起こしたときに反応させるかを決める。
- On click（クリック時）: 最も基本。ボタンを押したとき。
- On hover（ホバー時）: マウスカーソルを重ねたとき。ツールチップやドロップダウンメニューに最適。
- Mouse enter / Mouse leave: より高度なインタラクション用。
2. アクション（Action）を設定する
- Navigate to（画面遷移）: 別の画面へごっそり切り替える。
- Open overlay（オーバーレイ）: モーダルウィンドウやポップアップを現在の画面の上に重ねて表示する。これ、めちゃくちゃよく使うテクニックだから覚えておいて！
3. トランジション（Transition）で命を吹き込む
ただパッと画面が切り替わるだけでは味気ない。アニメーションを加えよう。
- Instant: 一瞬で切り替わる（設定忘れ？と疑われるので注意）。
- Dissolve: ふわっとクロスフェードする。画面全体のエレガントな切り替えに。
- Slide: 横や縦からスライドインする。モバイルアプリの画面遷移に最適。
> 💡 先輩エンジニアからの知見:
> アニメーションの速度（Duration）は、速すぎると何が起きたかわからないし、遅すぎるとユーザーにストレスを与える。基本は 「200ms〜300ms（0.2秒〜0.3秒）」 の間に設定するのが、人間の認知科学的に最も心地よいリズムとされるよ。試してみて！
—
4. ステークホルダー共有とフィードバックの極意
さて、最高のプロトタイプが組み上がった。次にやるべきは、これをチームメンバー、プロダクトマネージャー、そしてクライアントなどのステークホルダーに見せて、熱狂的なフィードバックをもらうことだ。
Penpotの共有機能は、コラボレーションを極限までスムーズにしてくれる。
共有手順
1. 画面右上の「Share」ボタンをクリックする。
2. 権限設定を確認し、「Viewing（閲覧）」リンクを生成してコピーする。
3. Slackやメール、Notionなどでチームに投げる。これだけ！
ステークホルダーから最高を引き出すためのコツ
ただ「触ってみてください」とリンクを投げても、相手は迷子になってしまう。「どこをどう見てほしいか」をガイドするのがプロの仕事だ。
- ユースケースを添える: 「今回のプロトタイプは、『新規ユーザーがアカウント登録を完了してダッシュボードにたどり着くまでの導線』を確認するためのものです。特に◯◯のボタンの遷移スピード感に違和感がないか見てください」と、文脈（Context）を必ずセットで伝える。
- コメント機能を活用してもらう: Penpotのプレビュー画面では、ステークホルダーが直接画面上にピンを刺してコメントを残せる。Slackの流れてしまうチャットではなく、「デザインの文脈に直接紐づいたコメント」が残るため、修正箇所のタスク管理が劇的に楽になる。
—
おわりに：毎日の作業が劇的に楽になる未来へ
お疲れ様！これでPenpotを使った画面遷移、インタラクションの設定、そしてチームへの共有までの流れが完璧に君の手に入ったはずだ。
「デザインツールなんてどれも一緒」と思っていたかもしれない。しかし、オープンソースであり、開発者のメンタルモデルに寄り添うPenpotを触ることで、デザインとコードの境界線が溶けていく感覚を味わえたのではないだろうか。
これをマスターすれば、仕様書を何枚も書くより、1つの動くプロトタイプを見せた方が圧倒的に早く、正確にチームの意思決定ができるようになる。「仕様の行き違い」で無駄な手戻りが発生していた毎日の作業が、嘘のように軽くなりますよ。
さあ、次のスプリントに向けて、君だけの最高のプロトタイプをビルドしに行こう！