Skip to main content
Participant
January 8, 2021
Question

スクロールなどの動作を動画に保存したい

  • January 8, 2021
  • 1 reply
  • 878 views

XD初心者です。

わからないなりに調べながらアプリ(の体)を作っているのですが、どうしても答えが見つからないので教えていただきたいです。

アプリを実際作るのは難しいので、作ったらこうなるよというイメージがわかるよう、トップページやメニュー、設定画面などページ毎にアートボードを分けて制作しています。

MacBookで作ったものをスマホ版XDで閲覧するまではできたのですが、各アートボードを閲覧するには横スワイプでページを捲らないといけません。

これをスワイプすることなく、オートでページの切り替え→下までスクロール→ページ切り替えなどといった動作を再生したいです。

それができたら画面収録で動画にして、ループ再生しようと考えています。

これが実現できる方法はあるでしょうか?

AEに出力する方法は見つけましたが、その結果どのような形で動画にできるのかわかりません(普段ほぼAIしか使わないので明るくなく、まだページ制作途中なので出力を試せていません)。

他にはアニメーションの作り方しかヒットせず困り果てています。

どのような方法でも、上記が実現できそうだと思ったら教えていただけると非常に助かります。

たまにPhotoshopも使うので、コンプリートプランで購入しています。

拙い説明ですが、よろしくお願いします。

This topic has been closed for replies.

1 reply

Risa Yuguchi
Inspiring
January 8, 2021

細かく作り込みをする前に、アプリのイメージを共有したいわけですね。

 

操作せずに動かすのも手ですが、操作せずに動かす時間をトリガーにした画面遷移は制限がありますし、「自動アニメーション」を使ってスクロールしているように見せてやる必要があります。

解説は伝わりにくいですし、現在のアートボードをあまり弄らずできる次のような手段はどうでしょうか?

 

実際にデスクトッププレビューでアートボードを全部表示できるようご自身で操作します。そのアートボードを最後まで表示したら、キーボードで何かキーを押して次のアートボードを表示し繰り返します。

この様子を動画に撮るのです。

 

これをするには次の二つのことをできるようになる必要があります。

  1. 横スワイプ以外で画面遷移をできるようにする
  2. XDのデスクトッププレビューで自分の操作している様子を録画する

 

横にスワイプでしか画面遷移ができないということは、プロトタイプモードで画面同士を繋いでいない可能性があると思います。

プロトタイプモードでは、次のようなことが実現できます

  • オブジェクトを選択して+マークをひっぱり他のアートボードの上に持って行って離すことで、ボタンをタップしたような効果をつける
  • アートボード自体を選択して+マークを引っ張って他のアートボードに繋いで、一定時間後に画面遷移する
  • キーボードで特定のキーを押すと画面遷移する

 

時間で自動的に動かなくても、キーボードで各画面に遷移できれば、それは言わなければ気がつかれませんし録画もしやすくなります

 

キーボードトリガーを使用する(公式オンラインヘルプ)

プロトタイプについてもっと知るにはXDTrailの動画も短いですしおすすめです
プロトタイプ(XDTrail)

 

次にデスクトッププレビューの録画機能で操作したものを録画します

 

Mac版のデスクトッププレビューでは、カーソルが指の影のような物に変わり、デバイスを指で操作しているような雰囲気のわかる動画を撮影できます。

 

プレビューウィンドウでのデザインとプロトタイプのプレビュー(XDTrailの動画)

 

Macの場合は画面収録の設定が必要なのでそこはオンラインヘルプを見てください

「macOS Catalina でプロトタイプのインタラクションを収録できない」の問題解決記事

 

実際問題、次のアートボードを紹介する動画で左右キーを押したとしても動画には映りませんので1つ目のキーボードのキーを押したら次のアートボードに遷移するは設定しなくても良いかもしれません。

(デスクトッププレビューでは横へまくるのでなく矢印の左右キーを押すとアートボード間を移動する設定になっています)

 

参考になれば幸いです。

onochiAuthor
Participant
January 9, 2021

とても詳しく書いてくださりありがとうございます。

私には難しそうですが、イメージは掴めたのでご説明いただいたことを調べながら挑戦してみます。

ありがとうございました!