OBSで画像を動かす|配信画面での動く画像の設定方法

最終更新 2024-05-24
1-OBS画像動かす手順用サンプル画像

OBSで配信中に画像を自由に動かせれば、見応えのある配信画面を作ることができます。
配信映えするためにもぜひ本記事を参考にして、OBSで画像を自由自在に動かしましょう。

目次

OBSでの画像の動かし方の種類

OBSで配信中に画像を動かす方法は、次の2種類です。

  • OBS上で画像に一定の動きをさせる(スクロール・スライドショー)
  • OBS上で画像を、双方向な画像エフェクトとして動かす

画像に一定の動きをさせるためには、OBSのフィルターを使用します。OBSの操作ができれば簡単に設定できるでしょう。

双方向な画像エフェクトとして動かす方法は、CastCraft Screenと呼ばれるアプリを導入することで可能です。CastCraftは配信におすすめの機能が多く備わるアプリとなるため、配信者やこれから配信を始める方はぜひ導入しましょう。

本記事を参考にしてOBSで画像を動かせるようになれば、見応えのある配信として確立できる可能性が高まります。
さまざまなエフェクトやスクロールを活用して、配信画面を進化させましょう。

OBS上で画像に一定の動きをさせる

OBSで画像を動かす場合の基本的な方法は、OBSにあるフィルターの使用です。
ここでは、次のような画像を動かす方法について詳しく解説します。

  • 画像をスクロールさせる動かし方
  • 複数画像をスライドショーさせる動かし方
  • OBSに追加する画像を透過・反転させる

それぞれ動かし方の手順を確認しましょう。

画像をスクロールさせる動かし方

OBS上で画像を動かす方法の1つ目として、画像をスクロールさせる動かし方から解説します。

  • STEP1:OBSのソースから画像を追加する
  • STEP2:フィルターを追加して画像をスクロールさせる

2ステップで簡単に設定できるので、チャレンジしてみてください。
スライドショーでは画像が一定のスピードで動き続けるため、画面上で常に動きのある配信にしたい方におすすめです。
また、画像以外にテキストも同様の手順でスクロールさせられます。

STEP1:OBSのソースから画像を追加する

まずは、配信中に動かしたい画像を追加しましょう。
OBSのソースメニューにある「+」から「画像」を選択してください。
2-OBS画像スクロール手順①

画像を表示させたくないときのために、「表示されていないときに画像を読み込まない」にチェックをいれておくことがおすすめです。
反対に、常に画像を表示させておきたい方はチェックを外したままOKボタンを押してください。
3-OBS画像スクロール手順②

スクロールさせたい画像を追加したら、次のステップに進みましょう。
テキストをスクロールさせたい場合は、ソースから画像ではなく「テキスト」を追加してください。

STEP2:フィルターを追加して画像をスクロールさせる

ソースにある追加した画像を右クリックして、メニューを開きましょう。
メニュー内にある「フィルタ」をクリックして追加します。
4-OBS画像スクロール手順③

エフェクトフィルタ画面が開いたら、「+」から「スクロール」をクリックして、画像に適用してください。
5-OBS画像スクロール手順④

「水平速度」と「垂直速度」を設定して、画像をスクロールさせましょう。
水平速度は0以上で右から左にスクロールし、0以下にすると左から右にスクロールします。
垂直速度は0以上で下から上にスクロールし、0以下にすると上から下にスクロールするので、動かしたい方向に設定しましょう。
動かし続けるためには、ループ(繰り返し)にチェックを入れておきましょう。
7-OBS画像スクロール手順⑥

画面で確認し、画像がスクロールしていれば完了です。
7-OBS画像スクロール手順⑥

複数画像をスライドショーさせる動かし方

画像をスクロールさせる方法に続いて、複数画像をスライドショーとして表示させる方法について解説します。

OBSでスライドショーを表示する設定方法と、配信者におすすめの使い方

  • STEP1:OBSのソースに画像スライドショーを追加する
  • STEP2:スライドショーの設定

ゲーム実況でも背景にスライドショーを使用している方も多く、配信する際のテクニックとして活用してみてください。

STEP1:OBSのソースに画像スライドショーを追加する

まずは、OBSのソースに「画像スライドショー」を追加してください。
9-OBS画像スライドショー手順①

続いて、画像スライドショーの設定画面の下にある「+」ボタンから、スライドショーとして表示させる画像を選択します。
10-OBS画像スライドショー手順②

上記の方法で、スライドショー自体は完成です。
スライドショーができているのかを確認してみてください。
11-OBS画像スライドショー手順③

表示されている画面のまま待ち、切り替わればOKです。
12-OBS画像スライドショー手順④

STEP2:スライドショーの設定

スライドショーの切り替わるスピードやトランジション方法などを設定しましょう。
ソース内の「画像スライドショー」を右クリックすれば、再度設定画面が開けます。
14-OBS画像スライドショー手順⑥

自分の好みに合わせてカスタマイズしてみてください。

OBSに追加する画像を透過・反転させる

OBSに追加した画像は、透過させたり反転させることも可能です。
スライドショーと組み合わせることでさらにオリジナリティを出せるため、次の解説を参考にしてぜひ活用してみてください。

  • OBSに追加した画像を透過させる方法
  • OBSに追加した画像を反転させる方法

OBSに追加した画像を透過させる方法

OBSに追加した画像を透過させるためには、フィルター機能を使用します。
透過させたい画像を右クリックして「フィルタ」を選択してください。
15-OBS画像透過手順①

透過させるためにはフィルター設定画面内の「+」ボタンから「カラーキー」を使用します。
16-OBS画像透過手順②

「不透明度」のバーを任意の値に移動させて、透過具合を確認してみてください。
17-OBS画像透過手順③

おすすめの確認方法は、透過させた画像の下にほかの画像やテキストを入れることです。
透過できていれば、画像またはテキストが透けて表示されます。
18-OBS画像透過手順④

OBSに追加した画像を反転させる方法

OBSに追加した画像を反転させる手順は、非常に簡単です。
画像の端にあるサイズ調整の赤枠をクリックして、任意の方向にドラッグしましょう。
今回は、例として左にドラッグします。
19-OBS画像反転手順①

画像が小さくなったあとに切り替わる瞬間があるので、同じ方向にドラッグし続けてください。
20-OBS画像反転手順②

表示範囲内に画像を移動し、反転していれば完了です。
左以外にも上や下方向にドラッグすると、さまざまな反転ができるので試してみてください。
21-OBS画像反転手順③

また、画像をドラッグする以外の方法として、画像メニューから反転させることも可能です。
反転させたい画像を右クリックして「変換」から反転または回転させる項目を選んでみてください。
22-OBS画像反転手順④

以上がOBS上で画像に一定の動きをさせる方法です。
自分がやりたい動かし方や、表示方法を選んで配信に活用してみてください。

OBS上で双方向な画像エフェクトを動かす

OBSでさまざまな画像エフェクトを動かす方法として、CastCraftが挙げられます。
CastCraftではさまざまなエフェクトを使用でき、表示方法もカスタマイズ可能です。
ここでは、CastCraftの導入から画像エフェクトのカスタマイズ方法まで解説します。

  • CastCraft Screenの導入
  • 画像スタンプ」ウィジェット、または「画像モーション」インタラクションの追加
  • 画像の動かし方をカスタマイズ
  • OBSとCastCraft Screenの連携

それぞれの手順を確認し、OBS上で画像エフェクトを動かしましょう。

CastCraft Screenの導入

まずは画像エフェクトを追加するためのソフトであるCastCraftをインストールしましょう。
CastCraftのインストール手順は、次のとおりです。

  • STEP1:公式サイトからダウンロード
  • STEP2:CastCraft Screenをインストール

それぞれの手順を参考に、CastCraft Screenを導入しましょう。

STEP1:公式サイトからダウンロード

CastCraft公式サイトのダウンロードページから、Windowsと書かれたボタンをクリックします。

CastCraftのダウンロードページ

ファイルをダウンロードしたら、exeファイルからインストールを開始してください。
25-CastCraft導入手順③

CastCraftを起動したら配信するYouTubeのアカウントでログインし、CastCraft Screenをインストールする準備を整えましょう。
26-CastCraft導入手順④

STEP2:CastCraft Screenをインストール

CastCraftを起動し「Screen」タブに切り替えたら、「ダウンロード」ボタンをクリックしてCastCraft Screenをダウンロードしましょう。
27-CastCraft Screen導入手順①

ダウンロードしたexeファイルを実行し、インストールしてください。
28-CastCraft Screen導入手順②

手順に従い、インストールが成功したらインストーラーを閉じましょう。

再度CastCraftの画面に戻り、「再読み込み」ボタンをクリックします。
30-CastCraft Screen導入手順④

CastCraft Screenの画面が表示されれば完了です。
表示されない場合は起動に失敗している可能性があるため、CastCraft自体を再起動してみてください。
それでも表示されない場合は、一度CastCraft Screenをアンインストールして再度インストールしてみましょう。

CastCraft Screenの再インストール方法  

「画像スタンプ」ウィジェットの追加

ここからは、実際に画像を動かす方法について解説します。

  • Screenが起動したら、「キャストモード/クラフトモード」という切り替えボタンを「クラフトモード」にしてください。
  • その後、右側のタブでウィジェット設定を選択してください。  

31-CastCraft Screen導入手順⑤   

  • 「ウィジェット一覧」の横にある「+」ボタンから、「画像スタンプ」を追加してください。

32-画像スタンプ追加手順①

  • サンプルのGIF画像が表示されれば、追加完了です。

33-画像スタンプ追加手順②

続いて、自分が用意した画像に差し替えてみましょう。

  • 「画像設定」を開くと、任意のファイルをアップロードできます。

jpgやpngなどさまざまな形式に対応しており、動きのあるGIF画像もアップロード可能です。
34-画像スタンプ追加手順③

画像の動かし方をカスタマイズ

追加した画像に動きをつけるためには、アニメーションやエフェクトをカスタマイズする必要があります。
アニメーションは3種類、エフェクトは1種類あるので、それぞれ確認しましょう。
35-画像スタンプカスタマイズ手順①

出現アニメーション

出現アニメーションでは、画像が表示される際の動きをカスタマイズできます。
8種類のアニメーションから選択でき、実行時間と遅延で表示速度や表示タイミングを設定可能です。
36-画像スタンプカスタマイズ手順②

実際にカスタマイズし、好みの出現アニメーションを見つけましょう。
実行時間はアニメーション自体の実行速度を指し、遅延はアニメーションを実行するタイミングを調整できる設定項目です。
エフェクトとのズレを修正したりあえてズレを利用した演出にしたりすれば、オリジナルの画像エフェクトができます。

表示アニメーション

表示アニメーションは、画像を表示させる間隔や表示する際に色をつけることができる設定項目です。
Motion Lessを選択すると、画像を表示させる間隔を設定できます。
37-画像スタンプカスタマイズ手順③   

Glowでは画像に色を付けられるほか、色の表示アニメーションを設定できます。
38-画像スタンプカスタマイズ手順④   

使用する画像に合う色を選んだり色のアニメーションを選んだりできるため、自分好みの画像に仕上げられます。
それぞれの設定は、一度にすべて決定せずに視聴者からの反応や気分に合わせて都度変更してみてください。

消失アニメーション

消失アニメーションは、出現アニメーションと同じものから選択できる画像が消えるときのアニメーション設定項目です。
出現アニメーションと同じものを使用することもおすすめですが、変化をつけたい場合はそれぞれ別のアニメーションを設定してみてください。
39-画像スタンプカスタマイズ手順⑤   

エフェクト

エフェクトは2種類用意されており、出現アニメーションと同時に出現する設定項目です。
今回は例として「Star」を使用していますが、任意のエフェクトを設定してみてください。
エフェクトの色や大きさ、スピードを調整して確認しましょう。
40-画像スタンプカスタマイズ手順⑥   

画像スタンプ機能

「画像モーション」インタラクションの追加

上記では一つの画像を特定の場所に表示させる「画像スタンプ」を解説しましたが、全画面にたくさんの画像を使った派手な演出を作りたい場合は、CastCraft Screenの「インタラクション設定」から「画像モーション」を設定するのがおすすめです。

Screenの「画像モーション」では、お手持ちの画像やGIFを、画面全体で動かすエフェクトとして特定の条件のコメントや投げ銭に反応させられます。

画像モーション1

gifモーション

画像モーション機能

OBSとCastCraft Screenの連携

最後に、カスタマイズした画像をOBSに反映させましょう。
CastCraft Screenを起動した状態で、OBSを起動させてください。
ソース内の「+」ボタンから「映像キャプチャデバイス」を追加します。
41-OBS CastCraft Screen連携手順①   

映し出すデバイスは「CastCraft Screen」に設定してください。
42-OBS CastCraft Screen連携手順②   

映像キャプチャデバイスにCastCraft Screenが映らない方は、NDI経由でのCastCraft Screenの出力を試してみてください

サイズや位置の調整は、OBS上ではなくCastCraft Screen上で行いましょう。
マウスで枠をドラッグして調整できますが、詳細に設定したほうがおすすめのため「位置とサイズ」から設定してみてください。
43-OBS CastCraft Screen連携手順③   

設定後は必ずOBS上で確認した上で配信に臨みましょう。

以上が、CastCraft Screenを使用した画像の動かし方になります。
配信が盛り上がる要素の一つとなるほかVtuberの方には必須のテクニックとなるため、ぜひ活用してみてください。

番外:OBSでテキストを流す方法

CastCraft Screenでは画像を動かす以外にも、視聴者のコメントに合わせてテキストを流すことができます。
まずは、CastCraft Screenのクラフトモードの「インタラクション設定」タブ内の「+」ボタンをクリックしましょう。
インタラクションの選択メニューが開いたら、「文字スタンプ」「流れる文字」「落ちる文字」のいずれかを選択してください。
45-OBSでテキストを流す手順①   

視聴者からのコメントに反応してテキストを流せるように設定できるため、条件を設定してみてください。
46-OBSでテキストを流す手順②   

設定したキーワードを含むコメントが投稿されるたびに、テキストが流れます。
ほかにも配信参加回数コメントの投稿回数で設定したテキストを画面上に流せるため、自分の配信ならではのカスタマイズが可能です。
47-OBSでテキストを流す手順③   

下記の例に合わせて、画面上に流すテキストも設定しましょう。
48-OBSでテキストを流す手順④   

テキストも画像と同様にアニメーション設定やスタイル設定にて、さまざまなカスタマイズができるため、ぜひ活用してみてください。

CastCraftのダウンロードはこちらから

流れる文字例:右から左
49-OBSでテキストを流す手順⑤   

落ちる文字例:落ちたあとに跳ねて下に溜まる
50-OBSでテキストを流す手順⑥   

文字スタンプ例:ランダムで出現する
51-OBSでテキストを流す手順⑦   

視聴者が特定のキーワードでコメントするたびに画面にテキストが流れることから、視聴者がコメントしたくなる配信にできます。
CastCraft Screenを活用して、画像だけでなくテキストも表示させてみてください。

OBSでの画像の動かし方をマスターしよう!

今回は、OBS上で画像を動かす方法について解説しました。
OBSのみでできる動かし方に加えてCastCraft Screenを使用する動かし方など、さまざまな方法があります。
また、本記事では解説していないOBSで動く背景画像を設定する方法OBSの画像等に動く枠を設定する方法なども、ぜひ参考にしてみてください。
配信画面にさまざまなアクションを付けることは、視聴者を惹きつける魅力となります。
本記事を参考に、OBSでの画像の動かし方をマスターしましょう。

配信をより面白くするために

配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。

大きく分けて、  

  • 視聴者を覚えるYouTube/Twitchコメビュ
  • 配信画面演出のScreen
  • 収益化のための機能

の三つの機能があり、それぞれ下記のような目的があります。

機能 目的
YouTube/Twitchコメビュ 視聴者が配信に馴染めるようなやり取りをサポート
Screen 視聴者とのやり取りを視覚的に楽しくする
収益化 視聴者を大事にする形で収益化する

CastCraftのYouTube/Twitchコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
CRM候補1

特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
ペンライト

さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
収益管理

CastCraftは上記のような機能により、配信者(ゲーム配信者やVtuber)が視聴者との関係を深めることを手助けします。

導入している配信者さんの事例としては、

等がいらっしゃいます。

導入されたチャンネルの総登録者数は5,000万人を超えており、これまで70万回以上の配信で使われています。

CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。

CastCraftのダウンロードページ(利用無料)