Discordでリアクティブ画像を作成するためのガイド

ステップ1： Fugiのツールを使用してPNGtuberを作成する

まず、FugiのDiscord Reactive Imagesツールを使って簡単に画像を作成できます。以下の手順に従ってください。

1. 無料でダウンロードできるOBS Studioと一緒に、コンピューターで Discord アプリを開きます。
2. ユーザー名の横にある歯車アイコンをクリックして、Discord 設定にアクセスします。
3. 設定メニューで、「詳細設定」セクションに移動し、開発者モードを有効にします。
4. 左側のパネルで「音声とビデオ」までスクロールし、マイクを選択し、カメラを OBS 仮想カメラに設定します。
5. reactive.fugi.techにアクセスし、「Discord でログイン」をクリックします。
6. 資格情報を使用してログインするか、QR コードをスキャンして「承認」をクリックします。
7. 開いた設定ページで反応型画像を設定します。
8. 口を閉じた画像と口を開けた画像をアップロードします。プラス（+）アイコンをクリックして各画像を追加し、「保存」をクリックします。
9. セットアップ用に生成されたリンクをコピーします。
10. OBS で、[ソース] の下のプラス (+) アイコンをクリックし、[ブラウザー] を選択して、ソース名を入力し、[OK] をクリックします。
11. [プロパティ URL] フィールドにリンクを貼り付け、[OK] をクリックします。
12. Discord ストリームの前に、必要に応じて画像サイズを調整します。
13. OBS で「仮想カメラを開始」をクリックしてストリーミングを開始します。
14. Discord の音声チャンネルに参加し、カメラを有効にして反応する画像の動作を確認します。

プロのヒント:反応型画像が正しく反応することを確認するために、マイクに話しかけてセットアップをテストします。

ステップ2: DiscordのStreamKitオーバーレイでカスタムCSSを活用する

基本的なCSSに慣れている方には、Discord StreamKit Overlayを使った効果的なアプローチがあります。その方法は以下の通りです。

1. streamkit.discord.comにアクセスしてください。
2. ストリーミング ソフトウェアに応じて、OBS または XSplit のインストールを選択します。
3. プロンプトが表示されたら Discord にログインします。事前に Discord が開いていることを確認してください。
4. ボイスウィジェットに移動し、サーバーとボイスチャンネルを選択します。プライバシー保護のため、「名前を非表示」オプションを有効にします。右側に表示される生成されたURLをコピーします。
5. Discord からプロンプトが表示されたら、アプリケーションを承認します。
6. OBS を開き、プラス (+)アイコンをクリックして新しいソースを追加し、ブラウザーを選択して、コピーした URL を貼り付けます。
7. PNG 画像をアップロードするには、Discord でプライベート テキスト チャネルを作成します。
8. codepen.ioの CSS ジェネレーターを活用します。
9. Discord アプリから Discord ID をコピーし、CSS ジェネレーターに貼り付けます。
10. Discordチャンネルにアップロードされた各PNG画像を右クリックし、「IDをコピー」を選択します。ジェネレーターの「画像URL」の横に貼り付けます。
11. 「CSS の生成」をクリックし、出力コードをコピーします。
12. OBS で、StreamKit ブラウザのソース プロパティにアクセスし、カスタム CSS セクションに移動して、そこにコードを貼り付けます。
13. 「OK」をクリックして確定します。

プロのヒント: OBS でリアクティブ イメージの位置とサイズを調整し、レイアウトにぴったり合うようにしてください。

Discord 用のリアクティブ画像を作成するにはどうすればよいですか?

PNG以外の画像形式も使用できますか?