初心者としてDiscord Reactive Imagesを操作する方法[2022]

公開: 2022-09-13

VTuber (バーチャル YouTuber) の時流に参加し、仲間のゲーマーやファンと Discord でコラボレーションしたいと考えているとします。 その場合、 Discord Reactive Imagesの使用を検討することをお勧めします。 リアクティブな PNG VTuberアバターを使用したスト​​リーミングは、 VTubingを開始するための最も初心者にやさしく安価な方法です。

discord reactive images

2D および 3D アニメーションが向上するにつれて、VTuber はどこでもカムバックし、YouTube、Twitch、Discord などのプラットフォーム間でコラボレーションします。 VTuberまたはPNGtuberモデルを作成およびカスタマイズして、さまざまな状況でのキャラクターの発言や行動を反映させることができます。 ストリーミングや不和の通話で使用するためのフェイスカムの代替品が必要な場合は、Discord Reactive Images を試してみてください。

この投稿では、初心者が Discord Reactive Images を複数の方法でセットアップして使用する方法を学びます。

目次

Discord Reactive Images は正確に何をしますか?

リアクティブ イメージを使用すると、Discord 通話のストリーミング中または参加中に、声や反応に応じてオンライン アバターを動かすことができます。 これは匿名性を維持するのにも役立ちます。 カメラの前にいる気分になれないときは、VTubing を使用すると、物事を活発に保ち、視聴者を引き付けることができます。

音声キャプチャ ソフトウェアを使用してリアルタイムでアニメーション化され、通常は日本のアニメーション スタイルの架空のキャラクターを表すデジタル PNG キャラクターまたはアバターを使用してビデオを作成できます。 Discord でライブ配信を行っている場合でも、プライベート ファン サーバーをホストしている場合でも、PNG、2D、または 3D モデルで感情を表現できます。

Discord Reactive イメージの操作と必要な前提条件

Discord を使用すると、ストリーマーはファン サーバーを使用してサブスクライバーとチャットし、ゲーム内外でコミュニティとの絆を築くことができます。 Twitch の視聴者は、Twitch チャンネルと統合された Discord サーバーで、お気に入りのストリーマーに参加してチャットできます。 ストリーマーとして、テキスト チャネル、音声チャネル、個別のグループ ダイレクト メッセージ、ゲーム ボット、特定の視聴者へのライブ ストリーミングなど、Discord でサーバー メンバーを忙しくさせることができます。

Discord リアクティブ イメージにどの程度のカスタマイズと技術的ノウハウを入れたいかに応じて、多くのオプションから選択できます。 PNGtuber として始めて、Vtubing の経験を積むにつれて、2D または 3D のリギングに進むことができます。 そして最高の部分は、ハイエンドの顔追跡ソフトウェア、照明、またはカメラに投資する必要がないことです.

PNGtuber になるには最小限の設定が必要です。 リアクティブ イメージをセットアップするために必要なものには、次のようなものがあります。

  1. Discord のリアクティブ画像として機能する PNG 画像が 1 つ以上 2 つ以下であること。
  2. バックグラウンド ノイズを除去するノイズ リダクション機能を備えた音声を録音するためのマイク。
  3. ライブ ストリーミングとビデオ録画用のブラウザー ソースを追加するための OBS (Open Broadcast Software)。

パーソナライズされたリアクティブ画像の場所

Discord アバターの PNG 画像を取得する方法は複数あります。 FireAlpaca、Procreate、Inkscape、またはその他の一般的な描画ソフトウェアなどの無料または有料の描画ソフトウェアから独自の PNG モデルを作成できます。 Discord サーバーにアップロードする前に、必ず画像を透明な PNG カットアウトとしてエクスポートしてください。 PNG を作成したら、removebg などのオンライン ツールを使用して背景を削除し、透明な PNG 画像を取得できます。

また、Etsy、Instagram、または Fiverr を通じてカスタム PNG を購入または委託することもできます。ここでは、お金を払う準備ができている場合に、仕様に基づいてカスタマイズされた PNG を作成できるデジタル アーティストを多数見つけることができます。 彼らの作品の例を要求し、画像の完全な著作権を所有していることを確認して、他の人が複製したり使用したりできないようにしてください.

Discord Reactive 画像を追加する方法

リアクティブ PNG を不協和音の呼び出しとコラボに追加する方法は複数ありますが、初心者向けにわかりやすくするために、あまり時間をかけない 2 つの簡単な方法に焦点を当てます。

discord reactive images fugi tech + streamkit overlay

この投稿で説明する方法は次のとおりです。

  1. Reactive by Fugi を使用します。これは、Discord と統合して、あなたの声に自動的に反応する PNG アバターを生成するソフトウェア ツールです。
  2. カスタム CSS を手動で追加して Discord Reactive Images のコードを生成し、必要に応じて編集、カスタマイズ、またはサイズ変更できます。

注: これらの方法はモバイル デバイスと互換性がない可能性があるため、代わりにデスクトップ コンピューターに Discord アプリをダウンロードする必要があります。

上記の各手順について、以下で詳しく説明します。

方法 1: Fugi の Discord Reactive Images で Reactive 画像を追加する

Fugi の Discord Reactive Images は、Discord PNGtuber が使用する最も人気があり、最も簡単なツールです。 このためには、音声チャネル、OBS、およびマイクに接続された Discord アプリが必要になります。

詳細な手順は次のとおりです。

  1. デスクトップの Discord アプリと OBS をダウンロードしてインストールします (このチュートリアルでは、無料でオープン ソースの OBS Studio を使用します)。
  2. 次に、Discord アプリを起動し、左下隅のユーザー名の横にある[設定]アイコンを選択します。
    discord reactive images- settings
  3. [設定] ウィンドウで、左側のパネルから [詳細] まで下にスクロールし、 [詳細] の下の [開発者モード] をオンにします。
    discord developer mode
  4. 次に、左側のパネルから [音声とビデオ] を選択します。 [音声設定]でマイクを選択し、テストして動作することを確認します。 [ビデオ設定]メニューの [カメラ] セクションの下にあるドロップダウン ボタンをクリックし、[ OBS 仮想カメラ] を選択します (OBS Studio をインストールしている場合)。
    discord reactive images - obs virtual camera
  5. Fugi の Reactive Web サイトにアクセスし、 Loginをクリックします。 次に、Discord に再度サインインし、アプリを承認するために必要なアプリのアクセス許可を付与する必要があります。
    fugi discord reactive images
  6. これにより、物事を設定するためのメインページに移動します。 両方の PNG の準備ができている場合 (1 つは口を閉じたもの、もう 1 つは話しているアバター用に口を開けたもの)、[ Set Inactive Image ] の下のカメラ アイコンをクリックし、口を閉じた最初の PNG を選択します。 次に、「 Set Speaking Image 」でプロセスを繰り返し、口が開いている 2 番目の PNG を選択します。 完了したら、[保存] をクリックします。
    fugi reactive images - upload PNGs
  7. 左側では、画像の配置や間隔、トランジション間のバウンス効果など、いくつかの変更を行うことができます。 完了したら、[適用] をクリックし、[リンク] で、[個別のブラウザー ソース] の横にある [コピー] アイコンをクリックして URL をコピーします。
    fugi discord reactive images - browser source
  8. OBS を開き、[ソース] の下のプラス アイコン ( + ) をクリックします。 [ブラウザ] をクリックし、[新規作成] でソースに名前を付けて [ OK ] をクリックします。
    discord reactive images - add browser source to OBS
  9. [プロパティ] ウィンドウで、URL の横にコピーしたリンクを貼り付け、[ OK ] をクリックします。
    discord reactive images -- copy links to obs
  10. これで、Reactive Image が一番上に表示されます。 画像をドラッグすると、幅または高さを変更できます。
    discord reactive image obs
  11. Discord ストリームを開始するには、OBS の [コントロール] の下にある [仮想カメラの開始] をクリックします。
  12. 最後に、Discord アプリに戻り、音声チャネルに接続します (最初にテストするためにプライベート音声チャネルを作成します)。 左下にある [ビデオ] 、[カメラをオンにする] の順にクリックします。
    reactive png vtuber obs

この時点で、リアクティブな画像が Discord に表示されるはずです。マイクに向かって話すことで試してみることができます。 リアクティブ イメージは、Discord 呼び出しを介したストリーミングとコラボレーションに使用する準備ができました。

方法 2: OBS StreamKit Overlay を使用してリアクティブ イメージを追加する

別の方法が必要な場合は、Discord のStreamKit Overlayを使用できます。これにより、2 つの画像を手動でアップロードするのではなく、カスタム CSS コードを追加できます。

詳細な手順は次のとおりです。

  1. Discord StreamKit Web サイトに移動し、ストリーミング ソフトウェアに応じて、 [ Install for OBS ] または[Install for XSplit] を選択します。
  2. すでに Discord にサインインしている場合は、ウィジェット ページが表示されます。 それ以外の場合は、サインインするよう求められます。
  3. 音声ウィジェットに移動し、[サーバー] と [音声チャネル] の横にあるドロップダウン メニューからサーバー名と音声チャネルをそれぞれ選択します。 Discord 通話中にユーザー名を非表示にする場合は、[名前を非表示] オプションを有効にします。
    pngtuber streamkit overlay
  4. ページの右下にある Voice Widget の下にあるブラウザ コードをコピーします。
    discord vtuber - streamkit overlay
  5. OBS を起動し、[ソース] メニューから + (ソースの追加) アイコンを選択します。 [ブラウザ] > [OK] をクリックし、コピーした URL を URL の横に貼り付けて、最後に [OK] をクリックします。
  6. 次に、Discord アプリを開き、PNG 画像を保存して両方のファイルをアップロードできるプライベート テキスト チャネルを作成します。
ヒント：
GitHub や Reddit を掘り下げて、他の Vtuber が利用できるコード ジェネレーターやカスタム コードを見つけることができます。 私たちがお勧めするのは、CodePen でホストされ、Kukushie という Vtuber によって作成されたものです。
  1. ブラウザーで CSS ジェネレーターのリンクを開きます。
  2. Discord に戻り、左下隅からユーザー名を右クリックし、[ ID をコピー] を選択します。 CSS ジェネレーターの Discord ユーザー ID の横に ID を貼り付けます。
    discord reactive PNG - custom CSS
  3. PNG が保存されている Discord チャンネルを開き、各画像を右クリックして [ID をコピー] を選択し、CodePen ウィンドウの [画像 URL] セクションの横に ID を貼り付けます。
  4. 画像リンクを確認し、[ CSSを生成] をクリックしてコードを生成します。コードは編集および変更できます。 [ CSS をコピー] ボタンをクリックします。
    discord reactive png vtuber - copy custom CSS
  5. 次に、OBS に戻り、StreamKit で作成したブラウザー ソースを右クリックし、[プロパティ] を選択します。
  6. カスタム CSSまで下にスクロールし、コピーしたコードを貼り付けて、 [ OK ] をクリックします。

すぐに使用できるリアクティブ イメージが一番上に表示され、ドラッグしてサイズを変更できます。 Discord に接続するには、OBS のControlsに移動し、 Start Virtual Cameraを選択します。

画面全体を共有するか、OBS を介してゲーム アプリケーション ウィンドウだけを共有することで、ストリーミングを開始できます。 [ソース] の下の [ +]をクリックし、[ゲーム キャプチャ] (Windows) または [ディスプレイ キャプチャ] (Mac) を選択して、ゲーム画面をキャプチャします。 または、ブラウザ ゲームをプレイしている場合は、Windows キャプチャを使用してブラウザ ウィンドウを Discord ボイス チャネルのメンバーと共有できます。

TwitchまたはYouTubeチャンネルをDiscordに接続する方法

ライブストリーマーと Vtuber コミュニティは、Discord を広く使用して、何年にもわたって視聴者の関与と成長を高めてきました。 これが、特にストリーミング シーンに慣れていない人にとって、Discord を他のストリーミング プラットフォームと統合することをお勧めする理由です。 サブスクライバーに異なるチャンネルとサーバーを提供して、すべてのサブスクライバーが同時にストリームを視聴できるようにすることができます。 これにより、忠実なファン層を構築し、特別な特典と機能を提供し、今後の更新についてコミュニティに通知することができます。

discord reactive image - connect twitch or youtube

Discord を Twitch または YouTube に接続するには、Discord を起動し、左下隅のユーザー名の右にある [設定] 歯車アイコンをクリックします。 Connections に移動し、Twitch と YouTube のアイコンをクリックしてから、各サービスに Discord への接続を許可します。 サーバーの役割と権限を構成するだけでなく、ボット、カスタム絵文字、コミュニティ イベントなどをサブスクライバーに追加して、誰にとっても楽しい体験にすることができます。

Discord Reactive Images に関するよくある質問

Loader image

Discord Reactive Imagesとは何ですか?

Discord Reactive PNG を作成するにはどうすればよいですか?

FireAlpaca、Procreate、Inkscape などの無料または有料の描画ソフトウェアを使用して独自の PNG モデルを作成し、その画像を透過 PNG としてエクスポートしてから Discord サーバーにアップロードできます。

Discord Reactive Images を OBS に追加するにはどうすればよいですか?

Discord のリアクティブ画像を OBS に追加する最も簡単な方法は、両方の PNG 画像を Reactive Fugi ツールにアップロードし、ブラウザのソース リンクをコピーして OBS にソースとして貼り付けることです。

Discord Reactive Images が機能しないのはなぜですか?

Discord Reactive Images が機能しない場合は、サインアウトしてから再度ログインしてください。 画像が PNG 形式であることを確認してください。 ユーザー名と画像 ID を確認し、正しい音声チャンネルにいて、OBS 仮想カメラに接続していることを確認してください。

Discord Reactive Image でユーザー名が非表示にならないのはなぜですか?

Discord ユーザー名を非表示にするには、Discord を起動します。 [設定] > [マイ アカウント] に移動します。 [ユーザー名] の横にある [編集] をクリックし、シンボル (リンク) をユーザー名フィールドに貼り付けて、[完了] をクリックします。

参考文献：

  • Discord サーバーにボットを追加する方法 [ガイド]
  • 2022年にサーバーを管理するのに役立つ上位10のDiscordボット
  • 2022年に参加するDiscordサーバーを見つけるためのトップ4ソース