UI mockups & wireframes はインターフェースの絵を構築します。アプリやサイトが持つであろう画面を、ブリーフで指定した再現度で。本当に作り始める前の「これはどう見えるだろう?」を確かめるためのテンプレートです。
ハイファイモックアップかローファイワイヤーフレームか
再現度はブリーフで決めます。
- モックアップ — 「写真アプリの設定画面、ダークテーマ」— 実際のタイポグラフィ、色、コントロールを備えた、出荷に近いハイファイ画面が着地します
- ワイヤーフレーム — 「オンボーディングフローをワイヤーフレーム化、4 画面」— ローファイの構造が着地します。ブロック、階層、ラベル。まだ議論するスタイルはありません
どちらもステアリングできる実際のファイルで、静的な画像ではありません。コントロールにピンを付け、レイアウトにコメントし、密度を微調整する。どの結果とも同じです。
UI mockup · Devin · swe-2-high · 24 min
Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.
▸ the prompt that made it▾ the prompt that made it
“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”
1 画面か、セットか
1 画面を頼めば 1 つが、フローを頼めばエージェントがセットを構築します。オンボーディング、ダッシュボード、設定などを、順に進められるアートボードの列、またはグリッドとして。プレビューは常にライブです。クリックして進み、ホバーし、エージェントが組み込んだ状態を試せます。
Wireframe · Devin · e2e · gate PASS
Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.
▸ the prompt that made it▾ the prompt that made it
“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”
得意なこと
- 方向性の探索 — 同じ画面の 3 案、低コストで
- 早期のプロダクト作業 — 仕様化前の機能の画面セット
- 承認用ワイヤーフレーム — スタイルの議論のない構造
- 競合分析 — 構築せずに「このフローはどう見えるか?」
モックアップのステアリング
ステアリングのすべてが適用されます。エンジンは同じです。
- ⌥-click で間違った部分を選び、正確なノードにコメント
- Tweaks でデザインが公開するパラメータを調整
- 追記 で欠けた画面や間違った方向性を修正
- Variants で「同じフローの 2 つの異なる案」
ゲートも実行されます。モックアップも他の結果と同じようにチェックされます。実現可能性に嘘をつく絵は、役に立つ絵ではないからです。
モックアップ vs Web サイト vs モバイルアプリ
- UI mockups — インターフェースの絵。デスクトップまたは Web 形状
- Mobile app — スマートフォンサイズの画面、タッチターゲット、モバイルナビ
- Interactive website — 実際に動くサイト、マルチページ
成果物が見るものではなくクリックして操作するものなら、それはモックアップではありません。Web サイト(スマートフォン形状ならモバイルアプリ)です。
ヒント: ブリーフに再現度を明記しましょう。「ハイファイモックアップ」と「ローファイワイヤーフレーム」は別物です。ハイファイが欲しかったのにワイヤーフレームが出てきては実行が無駄になります。この言葉が、エージェントが動き出す前に期待値を決めます。
エクスポート
モックアップは共有用に PNG または PDF にエクスポートします。プレゼンで使うサイズでレンダリングされます。ソースファイルはプロジェクトフォルダに残り、次のステアリングや次のバージョンに使えます。