インタラクティブ配信とMILEのためのトップダウンとボトムアップのデザインについて、3回に渡るミニシリーズの第3回目へようこそ。
前2回の記事では、一般的なトップダウン/ボトムアップのデザインについて説明しましたが、今回はインタラクティブ配信とMILE関連の内容で発展させてみました。
第3回目の今回は、この2つの要素をシンプルなデザインで両立させる方法をご紹介します。 トップダウンとボトムアップ、どちらから始めてもかまいません。
このブログ記事の読み方を選択することができます。
- 普通の記事として。
- ワークブックとして、ある地点で一時停止することができます[Pause] ); 。このような場合は、答えを書き留めてから読み進めるようにしてください。
今回のエクササイズでは、「お化け屋敷に止まるお客さんが幽霊になる」というトップダウンのビジョンからスタートします。
いくつかの要素をあらかじめ用意して対応します。
- アクター:AIにコントロールされる、インワールドの人間
- 参加者: 視聴者にコントロールされる、インワールドの幽霊。
- インタラクティビティ: 画面上のクリック
- 固定カメラ
このデザインのビュースクリーンのインスピレーション。

まずは以下の表から始めます(前回の記事にはすべての質問が記入されているので、段階的に回答する質問を入れていきます)。
ステップ | デザイン |
ビジョン(トップダウン) | 体験の物語的な枠組みは何か? 参加者は誰なのか、何を表現しているのか? |
参加者へのビジョンコミュニケーション | |
テストを楽しむこと | |
メカニズムの例:パッシブプレゼンス | |
メカニズムの例 :インタラクティブプレゼンス |
そして、トップダウンのビジョン(太字)を記入します。
ステップ | デザイン |
ビジョン(トップダウン) | 参加者は幽霊ホテルの幽霊 |
参加者へのビジョンコミュニケーション | |
テストを楽しむこと | |
メカニズムの例:パッシブプレゼンス | |
メカニズムの例 :インタラクティブプレゼンス | 視聴者が自分の見ているものと対話できる、自己中心的でシンプルな仕組み |
ボトムアップでは、新しい技術空間を想定して、楽しく使えるシンプルなインタラクションを探したいと考えています。
[Pause]
キャラクターをクリックすると、それに反応してくれるという、非常にシンプルな動作にします。 幽霊が出没するというトップダウンのビジョンで、具体的なリアクションのアクションも「怖さ」として記すことができるます。
ステップ | デザイン |
ビジョン(トップダウン) | 参加者は幽霊ホテルの幽霊 |
参加者へのビジョンコミュニケーション | |
テストを楽しむこと | |
メカニズムの例:パッシブプレゼンス | 参加者がアクションを起こす必要はないが、体験に影響を与える可能性がある仕組みのこと。 |
メカニズムの例 :インタラクティブプレゼンス | クリックでキャラクターを反応させることができる(恐怖のアニメーションなど) |
ここで2つの方向性のうちのひとつで続行します。つまり、ビジョンを下方へ抽出するか、インタラクションではなくウォッチングに焦点を当てた代替メカニックを見つけるか(シット・フォワード・インタラクティビティよりもシット・バックに焦点を当てる)です。 ここでは、代替となるメカニックの例で話を進めますが、どちらでもかまいません。
[Pause]

パッシブプレゼンスの仕組みは、シンプルにスクリーン内で自分自身を幽霊として見ることができる機能です。 アウトラインを追加して、オーバーレイが自分のアバターにフォーカスすることで、これが確かに「自分のアバター」であることを象徴することができます。 Sit Up(積極的にインタラクティブする)では、キャラクターではなく画面をクリックすることにすると、自分のアバターがマップ上のその方向へ移動します。
ステップ | デザイン |
ビジョン(トップダウン) | 参加者は幽霊ホテルの幽霊 |
参加者へのビジョンコミュニケーション | ビジョンを視覚的に理解するにはどうしたらいいのか? 私はスクリーンで何を見て世界を理解しているのだろう? |
テストを楽しむこと | |
メカニズムの例:パッシブプレゼンス | 小さなアバターが表示され、自分を表現しています。自分の幽霊のアバターが浮遊しているのが見えます。 空いている場所をクリックすると、アバターが移動します。 |
メカニズムの例 :インタラクティブプレゼンス | クリックでキャラクターを反応させることができる(恐怖のアニメーションなど) |
ビジョンを下へ下へと蒸留し、「参加者は幽霊ホテルの幽霊たち 」というというビジョンを伝える方法を見つけたいと思います。
[Pause]

世界の中の自分を把握する簡単な方法のひとつは、他の参加者の姿を見ることです。 幽霊として見ることができるのは、その点を伝えているのです。
それぞれの幽霊が別のユーザーであることを説明するのは難しいかもしれません。この点を伝えるために、数人の頭の上にユーザー名を表示させる価値があるかもしれません。 さらに、画面に表示される参加者の数を制限するのも一案です。
ステップ | デザイン |
ビジョン(トップダウン) | 参加者は幽霊ホテルの幽霊 |
参加者へのビジョンコミュニケーション | 他の参加者が幽霊として見える。 ホテルにいる人間のキャラクターは、彼らが現れる以外には反応しないようだ。 |
テストを楽しむこと | 参加者は参加後、通常どのような意見(物語/メカニズム)を交わしあうでしょうか。 |
メカニズムの例:パッシブプレゼンス | 小さなアバターが表示され、自分を表現しています。自分の幽霊のアバターが浮遊しているのが見えます。 クリックするとアバターを動かすことができます。 |
メカニズムの例 :インタラクティブプレゼンス | クリックでキャラクターを反応させることができる(恐怖のアニメーションなど) |
そして、最後のポイントにたどり着きます。 参加者が他の人間に自分の体験を伝えるとき、どのようにシンプルなキーフレーズでを言うでしょうか?
[Pause]

視覚や機械的なレベルでは、人間を怖がらせることができるゴーストです。
ステップ | デザイン |
ビジョン(トップダウン) | 参加者は幽霊ホテルの幽霊 |
参加者へのビジョンコミュニケーション | 他の参加者が幽霊として見える。 ホテルにいる人間のキャラクターは、彼らが現れる以外には反応しないようだ。 |
テストを楽しむこと | 「私は幽霊となって、人間を怖がらせることができる!」 |
メカニズムの例:パッシブプレゼンス | 小さなアバターが表示され、自分を表現しています。自分の幽霊のアバターが浮遊しているのが見えます。 クリックするとアバターを動かすことができます。 |
メカニズムの例 :インタラクティブプレゼンス | クリックでキャラクターを反応させることができる(恐怖のアニメーションなど) |
そして、シンプルなインタラクティブ体験のデザインが出来上がりました。
上記のような枠組みで、デザインの構築を始めるには十分でしょう。 このフレームワークを「高く」したり「広く」したりすることは可能です。
例えば、楽しさに関する仮説が正しいかどうかをチェックすることに関心があるとします。 プレイテストやアンケートの文脈で、ステップごとに可能なチェックを追加することができます。
このポイントの表例
ステップ | デザイン | デザインの有効性 |
ビジョン(トップダウン) | 参加者は幽霊ホテルの幽霊 | 人は「理解」できるのでしょうか?5秒間の動画や静止画から 何が起こっているのかを? |
参加者へのビジョンコミュニケーション | 他の参加者が幽霊として見える。 ホテルにいる人間のキャラクターは、彼らが現れる以外には反応しないようだ。 | インタラクションのない30秒の動画で、ユーザーは見たものを理解できるのでしょうか? |
テストを楽しむこと | 「私は幽霊となって、人間を怖がらせることができる!」 | プレイテストの後、ユーザーにその体験を一文で表現してもらいます。 |
メカニズムの例:パッシブプレゼンス | 小さなアバターが表示され、自分を表現しています。自分の幽霊のアバターが浮遊しているのが見えます。 クリックするとアバターを動かすことができます。 | Sit BackまたはSit Upのユーザーは、画面上に自分を象徴するアバターがあることを理解していますか? Sit Upのユーザーは自分のアバターをクリックで移動させますか? |
メカニズムの例 :インタラクティブプレゼンス | クリックでキャラクターを反応させることができる(恐怖のアニメーションなど) | Sit Forwardのユーザーは、クリックすることでインワールドの人間が反応することを理解しているのでしょうか? インワールドの人間がAIキャラクターであることを理解しているでしょうか? |
また、デザインをさらに発展させ、探索のための中間レベルを増やしたい場合もあります。
その際の表組みの一例です。
ステップ | デザイン |
ビジョン(トップダウン) | 参加者は幽霊ホテルの幽霊 |
参加者へのビジョンコミュニケーション | 他の参加者が幽霊として見える。 ホテルにいる人間のキャラクターは、彼らが現れる以外には反応しないようだ。 |
コミュニティのコミュニケーション | 他の参加者があるエリアに集中しているとき、人間のキャラクターはゴーストの一族を見るので、より強く反応する(行動するかしないか)はずです。 |
テストを楽しむこと | 「私は幽霊となって、人間を怖がらせることができる!」 |
時間経過に伴う仕組み | 流れに身を任せていると、横にある特殊なメーターが埋まっていく。 キャラクターを怖がらせると、メーターが一定量になる。 |
メカニズムの例:パッシブプレゼンス | 小さなアバターが表示され、自分を表現しています。自分の幽霊のアバターが浮遊しているのが見えます。 クリックするとアバターを動かすことができます。 |
メカニズムの例 :インタラクティブプレゼンス | クリックでキャラクターを反応させることができる(恐怖のアニメーションなど) |
もちろん、必要に応じて上記のすべてを組み合わせて、より複雑なテーブルを作ることもできますが、この基本的な枠組みは、さまざまなデザインを検討し、作り始めるには十分すぎるほどです。
このデザインミニシリーズを楽しく読んでいただけたら幸いです。 もし、さらに議論をしたい場合は、私たちのDiscordサーバーに参加して、Genvidチームにご連絡ください。