プロトタイプのトリガー

はじめに

この機能を使用できるユーザー

すべてのチームまたはプランのユーザー。

編集可のアクセス権があれば、ユーザーはプロトタイプを作成できます。

プロトタイピングの概要については、プロトタイピングの開始ガイドをご覧ください。

すべてのプロトタイプは1つのインタラクションから始まります。各インタラクションに、トリガーとアクションがあります。

トリガーは、プロトタイプの処理を進行するきっかけとなるホットスポットとのインタラクションのタイプを決定します。これには、マウスや、タップ、ドラッグ、クリックなどのタッチ操作があります。

この記事は、プロトタイプ作成トリガーの詳細について説明します。

クリック/タップ

プロトタイプでホットスポットをクリック (デスクトップ) またはタップ (モバイル) するとアクションがトリガーされます。画面内の数多くのさまざまな要素にクリックまたはタップトリガーを追加できます。

トリガーは、リンクを開く、メニューを使用する、Webサイトを検索するなどの操作に使用できます。また、ユーザーがボタンをクリックする、フォームに入力する、またはアラートを確定または破棄する必要がある場合にも使用できます。

ドラッグ時

画面で要素をドラッグする場合、アクションを実行できます。これは、フレーム全体またはスライダーなどの1つの要素で実行できます。

上下左右の任意の方向にドラッグして使用できます。この操作は、シンプルなスワイプジェスチャーや、ドラッグして更新するような複雑なアニメーションに適しています。

ドラッグすると、移行中に前後に移動できます。これにより、スワイプジェスチャーの後にアクションを実行せずに連続した動きを生み出せます。

マウスオーバー

ホットスポットにカーソルを合わせると、アクションがトリガーされます。これにより、ツールチップ、画面プロンプト、または状態の変化を再現することができます。

ホットスポットからカーソルを動かすと、ユーザーは元のフレームに戻ります。これにより、ユーザーを現在の画面から離れないようにする場合に最適なインタラクションが提供されます。

押下中

デスクトップでマウスやトラックパッドをクリックしたままにすると、アクションがトリガーされます。または、モバイルデバイスでタップしたままにしてもアクションがトリガーされます。

このトリガーを使用して、ドロップダウンメニューをナビゲートしたり、iOSで3Dタッチを使用してプレビューを表示するなどの長押しのインタラクションを複製したりできます。

リリースすると、ユーザーは元のフレームに戻ります。これは、一時的なインタラクションや状態の変更をキャプチャするオーバーレイに最適です。

キーボード/ゲームパッド

キーボード/ゲームパッドトリガーを使用すると、キーボードショートカットとのインタラクションを複製できます。これは、キーボード、コントローラー、およびゲームパッドからのユーザー入力に適用されます。

トリガーは、1つのキーやボタン、またはキーの組み合わせになります。

たとえば、トリガーはユーザーがコントローラーのEnterキーまたは✕ボタンを押すこと、またはShift - Kなどのショートカットを使用することに基づいています。

マウスエンター

これにより、マウスがホットスポットエリアに入ると移動先フレームが表示されます。このエリアは、ボタンなどの小さなエリアや画面全体のセクションになる場合があります。

これを使用して、マウスがフィールドに入るときに、ドロップダウンメニューにオプションを表示することができます。他のインタラクションを実行するまで、たとえばアイテムを選択またはフィールドの外をクリックするまで、メニューは開いたままになります。

マウスエンターイベントをセットアップしたら、ホットスポットを離れたときにアクションを反転させるため、マウスリーブトリガーをセットアップするとよいでしょう。

マウスリーブ

これによって、カーソルがホットスポットエリアを離れると、移動先フレームが表示されます。

フィールドを完了していない、またはボックスをチェックしていない場合のアラートなどのオンスクリーンプロンプトに、これを使用できます。

マウスダウン(タッチダウン)

最初にマウスを押したとき、またはパッドにタッチしたときに、移動先フレームをトリガーします。モバイルデバイスの場合は、ユーザーが最初に指でホットスポットにタッチしたときにトリガーします。

マウスアップ(タッチアップ)

マウスまたはパッドを放したときに、移動先フレームをトリガーします。モバイルデバイスの場合は、ユーザーの指がホットスポットから離れたときにトリガーします。

• オーバーレイを開くために、マウスダウントリガーをメニューヘッダーに適用します。
• マウスアップインタラクションをオーバーレイのメニューアイテムに適用します。
• マウスを放したら、関連付けられたフレームに移動します。

アフターディレイ

アフターディレイトリガーによって、ユーザーが特定のフレームで一定の時間を費やすと、アクションをトリガーすることができます。遅延の時間をミリ秒単位で設定する必要があります。

動画到達時

動画到達時トリガーは、動画ファイルを開始するすべてのコネクションで利用可能です。

これにより、動画が特定のタイムスタンプに到達したときのアクションを設定することができようになります。割り込み動画広告などのためにプロトタイプを作る場合、または動画再生中にオーバーレイメッセージをトリガーする場合に役に立ちます。

動画到達時トリガーを選択すると、タイムスタンプを入力するフィールドが表示されます。

動画を使ったプロトタイプ作成の詳細情報 →

動画終了時

動画終了時トリガーは、動画ファイルを開始するすべてのコネクションで利用可能です。

これにより、動画が終了したときのアクションを設定することができようになります。動画を順番を付けて並べる場合、またはインタラクティブな動画再生機能を作成する場合に役に立ちます。

動画を使ったプロトタイプ作成の詳細情報 →