デザインアイデアの活用場面
- プロダクトビジョンデッキインターフェースの説明に入る前に、プロダクトのアイデアを提示する。
- コンセプトプレゼンテーション大きなテーゼと具体的な画面を結びつける。
- チームワークフローのピッチ個人の作業が共同オペレーションへと広がる様子を示す。
プレゼンテーションのハイライト
- スケールの3段階変化ワークスペースのテーゼから、スマートフォン、コントロールルームへと移行する。
- 説明と並置されたスマートフォン画面インターフェースコンセプトを、3つの短いサポートポイントと組み合わせる。
- 表示されたプレゼンテーション操作コントロール元のデッキには、矢印・Auto・Fullの各コントロールが含まれている。
プロダクトプレゼンテーションデザイン プレビュー
1 / 33枚のスライドで語るプロダクトストーリー
このデッキは、3つの機能に対してほぼ同一のスクリーンショットを並べる構成をとっていない。議論のスケールを段階的に変化させている。広いワークスペースのテーゼ、1つのモバイルインターフェース、そしてより大きなオペレーション画面という流れだ。中間のスライドがヒンジの役割を果たす。これがなければ、抽象的な主張から情報密度の高いコントロールルームへのジャンプは、具体的なサンプルを見る前にプロダクトを受け入れることを聴衆に求めることになる。
| スライド | 表示されるコンテンツ | ナラティブ上の役割 |
|---|---|---|
| オープニングテーゼ | ヘッドライン、ワークスペースプレビュー、Prompt → Compose → Preview → Shipのシーケンス。 | 提案する変化を明示し、聴衆が記憶できる短いプロセスを示す。 |
| モバイルコンパニオン | スマートフォンのインターフェースと、コンセプトの3つの説明文。 | スコープを1画面に絞り、プロダクトのアイデアを議論しやすくする。 |
| エンタープライズコントロールルーム | ローンチトラック、エージェントのハンドオフ、承認、アクティビティタイムライン。 | 同じアイデアがチーム横断の協調作業をいかに支えられるかを示す。 |
3つのメトリクスと2層のナビゲーション
このスマートフォン画面は、上部付近にToday / Agents / Exportsタブを、下部にHome / Files / Agents / Exportナビゲーションを備えている。これは2つの異なるインターフェース階層だが、Agentsは両方に登場する。プロダクトプレゼンテーションで議論すべき有用な詳細がここにある。上段の行は現在のビューをフィルタリングしているのか、それとも別の目的地へ遷移させるのか、という問いだ。
繰り返されるラベルがインタラクションモデルを隠さないようにする
下段の行はアプリ全体のナビゲーションに見え、上段の行はビューレベルのタブに近い。デッキはその関係を完全には整理していない。画面を追加する前に、各階層のスコープを明示した改善が必要だ。たとえば、グローバルなAgentsエリアと現在のページのアクティビティ用フィルタを区別するなどの形で。
3つのメトリクスはそれぞれ異なるものを表している
12 Active Artifactsはカウント、4× Review Velocityは比較値、86% Ready to Exportは割合だ。これらは同一の視覚的な行に並べられるが、定義を共有することはできない。カウントにはスコープが、乗数にはベースラインが、パーセンテージには分母が必要だ。これらの欠落した定義は、ビジュアル処理だけでは補えない。
コントロールルームの4種類の情報
最終スライドには、左列に4つのコンテキストカード、中央にエージェントのルーティング図、右側にオペレーション上のカウント、下部に最近のアクティビティが配置されている。これらは交換可能なダッシュボードウィジェットではない。それぞれが異なる関係を表しており、発表者がその違いを説明することでプレゼンテーションの価値が高まる。
| 表示される構造 | 表しているもの | ピッチで説明すべき点 |
|---|---|---|
| Brand・Legal・Localization・Assets | 制約またはリファレンス素材の4つのセット。 | 4つの連続したタスクではなく、ワークフローがルールを取得する場所。 |
| Briefs and Product DataからAgent Routerへ | オーケストレーション図に接続された入力。 | ノード間を移動するものと、概念にとどまっている部分。 |
| 42 Queued・11 Pending・3 Risks・7 Ready | オペレーション状態のスナップショット。 | 各カウントに含まれるもの。ラベルが異なっても、それらを比較可能な合計値にはできない。 |
| Layout・Brand QA・Locale・Export Activityの各エージェント | 最近のアクションと対応づけられた名前付きエージェント。 | 最近起きたこととして、まだ対応が必要なものとは切り離して扱う。 |
ハッカソンデモ向けプレゼンテーションリファレンス
これはOpenDesignハッカソンの公式サンプルであり、参加者の提出物ではない。3枚構成のスライドはデモにとって有効な制約だ。1つの論拠、精査できる1つのインターフェース、より大きなワークフローの1つの説明という流れになる。聴衆が手がかりにできる具体的なサンプルを得た後でのみ、プレゼンテーションの情報密度を上げるべきだ。
このプレゼンテーションが示すもの
提供されたアーティファクトは、3枚のスライドとプレゼンテーションコントロールを備えたアニメーションHTMLデッキだ。モバイルコンパニオンとエンタープライズコントロールルームはそのデッキ内のコンセプトであり、リリース済みアプリケーションの証拠ではない。フルプレビューを開くとプレゼンテーション自体を確認できるが、各インターフェースが本番ワークフローに接続されているわけではない。
OpenDesignでプロダクトプレゼンテーションデザインを作成する方法
役割の異なる3枚のスライドを定義する
聴衆の中心的な問いから始め、各スライドに独立した目的を持たせる。オープニングの論拠は、インターフェースを見せる前に説明できる長さに収める。
推奨プロンプトエージェント支援型デザインワークスペースを対象に、3枚構成のプロダクトプレゼンテーションデザインを作成してください。スライド1ではアイデアと4段階のワークフローを紹介します。スライド2ではモバイルレビューコンセプトと3つの短い説明文を並置します。スライド3では承認フローと最近のアクティビティを含むチームコントロールルームを表示します。明確にラベル付けされたサンプルデータ、読みやすい静的なコンポジション、手動スライドコントロールを使用してください。コンセプトのインターフェースをリリース済みプロダクトのように示したり、パフォーマンス結果を捏造したりしないでください。
画面と説明文をセットで改善する
スマートフォンのラベルを読みやすく保ちながら、サポートの論拠をデバイスの外側に配置するようOpenDesignに依頼する。ラベルを繰り返すだけの文を削除する。デッキを、高解像度スクリーンショットだけでなく実際にプレゼンするサイズで確認する。
自動再生を止めた状態でデッキを確認する
モーションを停止した状態で3枚すべてのスライドをレビューする。各スライドは見出し、主要なビジュアル、補足説明を保持している必要がある。次に、発表者が質問のために一時停止しても話の流れを失わないよう、手動ナビゲーションをテストする。
エクスポートして共有リンクを取得
完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。
採用サイトデザイン
Kimiの採用サイトを8つの月面シーンで再構成。スクロール連動トランジションとイラスト応募フローを実装した事例。
ウェブサイト
ポートフォリオサイトデザイン
Maya Rowanの架空ポートフォリオ。作品カードと制作方針、ノートをつなぐ構成。
ウェブサイト
パーソナルダッシュボードデザイン
Life Systemは、週次スコア・ボディマップ指標・日次リズム・5つの実験を1つのデスクトップダッシュボードにまとめたUIです。レイアウトを詳しく解説します。
デスクトップアプリ
履歴書ウェブサイトデザイン
架空のTom Goodmanの履歴書は、職歴とスキルチャート・選定成果物を組み合わせた構成です。2カラムの読み取り順序、コンパクトな職歴カード、独立した印刷レイアウトを詳しく解説します。
ウェブサイト