OBSでブラウザが映らない原因6選と対処法【コメント欄】

OBSでブラウザが映らない原因6選と対処法【コメント欄】ソフト・アプリ

この記事は下記の悩みや疑問を持つ人にオススメです。

  • OBSでブラウザが映らない原因は？
  • OBSのブラウザソースが映らない！
  • コメント欄が全然表示されない…

はじめまして。ブログ運営と動画投稿をしているちゃすくです。

ちゃすく(cHask)

ブログ運営者のちゃすくです。
YouTubeは登録者3万人、総再生回数は2000万回超え。
ブログは月間13万PV達成！インフルエンサー向けのお悩み相談もしてます。
お仕事依頼はこちら

ちゃすく(cHask)をフォローする

この記事ではOBSでブラウザ（ブラウザソース）が映らない原因と対処法を解説します。

今、マイクの音質へ満足していますか？
＼実況＆配信活動では音質が超大切／ゲーム実況の音質が悪い理由と改善方法５選！実況経験者が解説

音質が悪い理由と改善方法を見る

スポンサーリンク

OBSでブラウザが映らない原因と対処法

OBSでブラウザが映らない原因には下記があるので、それぞれの項目で詳細と対処法を解説します。

  1. 「ブラウザソース」は存在しない
  2. ハードウェアアクセラレーションが有効
  3. セキュリティソフトがOBSを妨害
  4. ファイル名に全角スペースが含まれる
  5. カスタムCSSの設定ミス
  6. OBSのアップデートによる不具合

原因1：「ブラウザソース」は存在しない

よくある誤解なのですが、古い記事では「ブラウザソース」や「BrowserSource」と表記してあるので、それらを必死に探している人がいます。

しかし、最新のOBSでは下画像のように「ブラウザソース」や「BrowserSource」の機能が「ブラウザ」へ改名されてます。

OBS：ソースのブラウザ

そのため、YouTubeのコメント欄を表示したい時などは「ソース」にある「+」から「ブラウザ」を追加してください。

原因2：ハードウェアアクセラレーションが有効

OBSでブラウザソースが映らない場合、「設定」＞「詳細設定」＞「ソース」にある「ブラウザソースのハードウェアアクセラレーションを有効にする」が原因として考えられます。

ハードウェアアクセラレーションを有効にすると、CPUの処理をGPUへ任せられるのでOBSの描画パフォーマンスが向上しやすいです。

しかし、スペックがあまり高くないPCでハードウェアアクセラレーションを有効にすると、メモリを大量に使うのでブラウザソースが映らない原因になります。

もしブラウザソースが映らない場合は「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを外すか、高スペックPCを買ってください。

ちゃすく
ちゃすく

チェックを外した後は再起動推奨

今ならパソコン工房で最大2万円還元中！
＼ゲーミングPCも対象なのでチェック／

パソコン工房の最新キャンペーンを見る

原因3：セキュリティソフトがOBSを妨害

OBSのソースからブラウザを初期設定のまま追加すると下画像が表示されるはずですが、表示されない場合はセキリティソフトの妨害が原因だと考えられます。


対処する際はセキュリティソフトの検知機能でOBSを除外設定にするか、セキュリティソフト自体をオフにしてください。

ちなみに、Windowsの場合は最初からWindowsDefenderが搭載されているので、セキュリティソフトをアンインストールしても大丈夫です。

詳しい内容は下の「PCに有料ウイルス対策ソフトが要らない理由３選」にまとめてあるので参考にしてください。

Windows11にセキュリティソフトはいらない？理由や情弱なのかを解説
...
chasksite.com
2023.05.05

原因4：ファイル名に全角スペースが含まれる

OBSのソースでブラウザを追加する際、「ローカルファイル」で全角スペースが含まれたファイル名だと何も表示されません。

具体的には下記の通りであり、ローカルファイルを映したい場合はファイル名を変更するしかありません。

  • 「ちゃすくのファイル.html」：映る
  • 「ちゃすく   ファイル.html」：映らない

原因5：カスタムCSSの設定ミス

OBSのソースでブラウザを追加する際、「カスタムCSS」というブラウザのデザインや文字サイズを調整できる項目があります。

カスタムCSSの設定ミスがあると想定通りの画面が映らなかったり、表示がおかしくなることもあります。

カスタムCSSに何か書いてあった場合は一旦削除し、表示を確認してください。

ちゃすく
ちゃすく

YouTube LIVEのコメント欄向けカスタムCSSも貼っておきます↓

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500;700&family=Noto+Sans+SC:wght@500;700&family=Noto+Sans+TC:wght@500;700&family=Noto+Sans+KR:wght@500;700&family=Noto+Sans:wght@500;700&display=swap");

/* Background colors - 背景色 */
body {
  overflow: hidden;
  background-color: rgba(0,0,0,0);
}
/* Transparent background - 背景透過 */
yt-live-chat-renderer {
  background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
  background-color: transparent !important;
}


yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}
/* Outlines - 縁取り */
yt-live-chat-text-message-renderer * {
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 18px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-membership-message-renderer #content {
  overflow: initial !important;
}

/* Hide scrollbar - スクロールバー非表示 */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input - ヘッダーと入力欄非表示 */
#panel-pages,
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding - 余白設定 */
yt-live-chat-text-message-renderer {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

yt-live-chat-membership-item-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-paid-message-renderer {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars - チャンネルアイコン */
/* 通常のチャット */
yt-img-shadow#author-photo.yt-live-chat-text-message-renderer,
yt-img-shadow#author-photo.yt-live-chat-text-message-renderer img{

  width: 18px !important;
  height: 18px !important;
  border-radius: 18px !important;
  margin-right: 4.5px !important;
}
/* メンバーシップ・スーパーチャット */
#author-photo.yt-live-chat-membership-item-renderer img#img,
#author-photo.yt-live-chat-paid-message-renderer img#img,
yt-img-shadow#author-photo.yt-live-chat-membership-item-renderer,
yt-img-shadow#author-photo.yt-live-chat-membership-item-renderer img,
yt-img-shadow#author-photo.yt-live-chat-paid-sticker-renderer,
yt-img-shadow#author-photo.yt-live-chat-paid-sticker-renderer img,
yt-img-shadow#author-photo.yt-live-chat-paid-message-renderer,
yt-img-shadow#author-photo.yt-live-chat-paid-message-renderer img{
  display: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 30px !important;
  margin-right: 7.5px !important;
}

/* Member Badge - モデレーター・メンバーのバッジ(アイコン)サイズ */
.yt-live-chat-author-badge-renderer,
.yt-live-chat-author-badge-renderer svg.yt-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Emoji - 絵文字・メンバー用スタンプ */
#message > img ,
img.yt-live-chat-text-message-renderer {
  width: 28px !important;
  height: 28px !important;
}

/* Hide badges - バッジ非表示. */
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-text-message-renderer #chat-badges {

  vertical-align: text-top !important;
}

/* Timestamps - 時刻表示 */
yt-live-chat-text-message-renderer #timestamp {
  display: none !important;
  color: #999999 !important;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 16px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
}

/* Badges - 名前・バッジの色 */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #ffd600 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0a8043 !important;
}

/* Channel names - チャンネル名 */
yt-live-chat-text-message-renderer #author-name {
  color: #cccccc !important;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 18px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}

/* 名前を隠す */

/* チャンネル名の余白削除 */
yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip,
yt-live-chat-author-chip {
  padding: 0px 0px;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 2px;
}

/* Messages - チャット本文 */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #ffffff !important;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 18px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

/* メンバーシップ関連 */
.yt-live-chat-membership-item-renderer #author-name {
  color: #ffffff !important;;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 19px !important;
  line-height: 19px !important;
  font-weight: 700 !important;
}

.yt-live-chat-membership-item-renderer#header-subtext,
.yt-live-chat-membership-item-renderer#header-primary-text {
  color: #ffffff !important;;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 15px !important;
  line-height: 15px !important;
  font-weight: 500 !important;
}

/* .yt-live-chat-membership-item-renderer#header-subtext { opacity: 0.7; } /* ○○のメンバーシップ */

/* SuperChat/Fan Funding Messages - スーパーチャットメッセージ */
div.yt-live-chat-paid-message-renderer#author-name-chip,
div.yt-live-chat-paid-message-renderer#author-name-chip span#author-name,
div.yt-live-chat-paid-sticker-renderer#author-name-chip,
div.yt-live-chat-paid-sticker-renderer#author-name-chip span#author-name{
  /* ; /* 1行目の色 */
  font-family: "M PLUS 1p", sans-serif;
  font-size: 19px;
  line-height: 19px;
  font-weight: 700;
}

.yt-live-chat-paid-message-renderer#purchase-amount,
.yt-live-chat-paid-sticker-renderer#purchase-amount-chip,
.yt-live-chat-paid-message-renderer#purchase-amount-column,
.yt-live-chat-paid-sticker-renderer#purchase-amount-chip *,
yt-live-chat-donation-announcement-renderer #text,
yt-live-chat-donation-announcement-renderer #text * {
  /* ; /* 2行目の色 */
  font-family: "M PLUS 1p", sans-serif;
  font-size: 15px !important;
  line-height: 15px !important;
  font-weight: 500 !important;
}

yt-formatted-string,
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content *,
yt-live-chat-membership-item-renderer #content,
yt-live-chat-membership-item-renderer #content *,
yt-live-chat-membership-item-renderer #message {
  /* color: #ffffff !important; /* super-chat-content-color */
  font-family: "M PLUS 1p", sans-serif;
  font-size: 20px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

yt-live-chat-paid-message-renderer,
yt-live-chat-membership-item-renderer {
  margin: 4px 0 !important;
}

#header.yt-live-chat-membership-item-renderer {
  background-color: #0a8043 !important;
  /* margin: 4px 0 !important; */
}

yt-live-chat-text-message-renderer a,
yt-live-chat-membership-item-renderer a {
  text-decoration: none !important;
}

/* 削除/管理されたメッセージは非表示 */
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-membership-item-renderer[is-deleted],
yt-live-chat-moderation-message-renderer,
yt-live-chat-auto-mod-message-renderer {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}

yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  /* ; /* 2行目の色 */
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500 !important;
}

yt-live-chat-mode-change-message-renderer, 
yt-live-chat-viewer-engagement-message-renderer, 
yt-live-chat-server-error-message, 
yt-live-chat-banner-manager,
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}

/* アニメーションの設定 */

/* チャット欄をすごく小さくした時に表示を崩れないようにする */
yt-live-chat-app {
  min-height: 0px;
  min-width: 0px;
  word-break: break-all;
}

/* チャット欄の上下を入れ替える(古いコメントが下、新しいコメントが上) */

/* スティッカーの名前の高さ */
div#author-name.yt-live-chat-paid-sticker-renderer,
span#price-column {
line-height: unset !important;
}

/* スティッカーのサイズ */
#sticker img {
width: 54px !important;
height: 54px !important;
}

/* 余白調整とかいろいろ */
div#author-info {
  align-items: center !important;
  padding: 8px 16px !important;
  max-height: unset !important;
}

div#card {
  padding: 0px 0px !important;
}

#author-info #author-photo {
  margin-right: 11.25px !important;
}

div#action-panel.style-scope.yt-live-chat-renderer { display: none; } /* アンケートを非表示 */

#header-subtext.yt-live-chat-membership-item-renderer {opacity: 0.75;}

div#content.yt-live-chat-membership-item-renderer { background-color: #0f9d58 !important;; } /* メンスパ本文の背景色 */
div#message.yt-live-chat-membership-item-renderer { color: #ffffff !important; } /* メンスパ本文のテキスト色 */

/* アイコンの上書き */

/* メンバーシップギフト関連を非表示 */
ytd-sponsorships-live-chat-gift-purchase-announcement-renderer,
ytd-sponsorships-live-chat-gift-redemption-announcement-renderer {
    display: none;
}

原因6：OBSのアップデートによる不具合

OBSは定期的にアップデートしており、その影響で不具合が起きることもあります。

もしOBSのアップデートが原因だと考えられる場合は、対処があるまで他のソフトを使うか、OBSのダウングレードがオススメです。

OBSのダウングレードは下の「OBSのバージョン確認とダウングレード方法」を確認してください。

画像で解説：OBSのバージョン確認とダウングレード方法【Mac対応】
...
chasksite.com
2023.01.13

スポンサーリンク

ゲーム実況・雑談配信にオススメの機材・ソフト

ここからはゲーム実況や雑談配信で使いたいオススメの機材やソフトを紹介します。

【無料版あり】ゲーム実況で役に立つ動画編集ソフト

まずは、ゲーム実況で役に立つ便利な動画編集ソフトです。

Adobe Premier Pro

引用元：https://www.adobe.com

AdobeのPremiere Proは世界で1番使われてるサブスク型の動画編集ソフトです。

自動字幕起こし機能により、AIが動画内の音声を分析して自動で字幕を入力してくれます。

ゲーム実況動画や雑談配信の切り抜きへ手軽に字幕を付けられるのでオススメです。

しかも、Premiere Proであれば機能制限が全く無い無料版がAdobe公式サイトからダウンロードできるため、気軽に動画編集を始められます。

Adobe公式サイトでPremiereProを見る

CyberLink PowerDirector

引用元：https://jp.cyberlink.com

PowerDirectorはパッケージ版とサブスク版があり、パッケージ版の種類も４つ以上ある動画編集ソフトです。

モザイクの自動追従や動画の自動音量調節が可能であり、視聴者へ不快感を与えない編集が簡単にできます。

PowerDirectorもCyberLink公式サイトから無料体験版が配布されてるので使ってみてください。

CyberLink公式サイトでPowerDirectorを見るicon

CyberLink PowerDirector Ultimate Suite 通常版

posted with カエレバ
楽天市場で見る
Amazonで見る
Yahooショッピングで見る

Wondershare Filmora

引用元：https://filmora.wondershare.jp/

Filmoraは初心者向けの動画編集ソフトであり、買い切り版とサブスク版があります。

機能数と質は他の動画編集ソフトに劣るところもありますが、YouTube用の動画であれば十分なソフトです。

動作も比較的軽めなので、まずはWondershare公式サイトから無料版を試してください。

Wondershare公式サイトでFilmoraを見る

Wondershare Filmora パッケージ版

posted with カエレバ
楽天市場で見る
Amazonで見る
Yahooショッピングで見る

【コスパ◎】ゲーム実況・雑談配信にオススメのマイク

ここからはゲーム実況や雑談配信にオススメのマイクを紹介します。

HyperX QuadCast S

Kingstonのゲーミングブランド「HyperX」のコンデンサーマイクであり、接続方法はUSB端子です。

本体にポップガードが内蔵されており、ノイズや湿気を防いでくれます。

低価格帯のマイクでありながらノイズを防いでくれるため、OBSでのゲーム実況などにもオススメです。

HyperX QuadCast S USBコンデンサーゲーミングマイク HMIQ1S-XX-RG/G

posted with カエレバ
楽天市場で見る
Amazonで見る
Yahooショッピングで見る

Blue Microphones Yeti

Logicool傘下である「Blue」のコンデンサーマイクであり、接続方法はUSB端子です。

USB接続でも音質が良く、指向性も4つに切り替えが出来るので撮影環境に合わせた対応が可能です。

ちゃすく
ちゃすく

ひろゆきさんが配信で使ってたマイクです

Blue Microphones Yeti USB Microphone

posted with カエレバ
楽天市場で見る
Amazonで見る
Yahooショッピングで見る

Blue Bluebird SL

こちらも「Blue」のコンデンサーマイクですが、XLR接続なのでPCで使う場合はオーディオインターフェイスが必須になります。

オーディオインターフェイスにYAMAHAのAG03を使えば、山田涼介さんのゲーム配信環境と同じ音質になります。

もちろん、OBSなどの録画・配信ソフトにも対応しているので、音質を求めている人にはオススメです。

Blue Bluebird SL コンデンサーマイク BM1200

posted with カエレバ
楽天市場で見る
Amazonで見る
Yahooショッピングで見る

YAMAHA ウェブキャスティングミキサー AG03

posted with カエレバ
楽天市場で見る
Amazonで見る
Yahooショッピングで見る

【分割払い可】オススメBTOパソコンメーカー

BTOパソコンとは？

BTOパソコン：BTOはBuild To Orderの略称であり、意味は受注生産。
つまり、BTOパソコンメーカーは商品が購入されてから組み立てる形式のメーカー。有名なメーカーは「マウスコンピューター」や「パソコン工房」など。

引用元：https://www.mouse-jp.co.jp/

 品揃え豊富：パソコン工房

引用元：https://www.pc-koubou.jp/

パソコン工房はゲーミングPCや動画編集PC、ビジネスPC、ティープラーニングPCなど幅広い製品を取り扱っているBTOパソコンメーカーです。

PCパーツ単体でも販売しているので、グラボを買ってゲーミングPCへカスタマイズしたい人にもオススメです。

しかも、パソコン工房はクレジットカードを持ってなくても分割払いができるので、高価なゲーミングPCも買いやすいです。

パソコン工房公式サイトでセール情報を見る

PC初心者向け：マウスコンピューター

引用元：https://www.mouse-jp.co.jp/

マウスコンピューターはTVCMでもお馴染みのBTOパソコンメーカーであり、G-Tuneと呼ばれるゲーミングブランドがプロゲーマーやVtuberからも人気です。

他のBTOパソコンメーカーに比べるとPC初心者向けなモデルが多く、お手頃な価格帯のゲーミングPCや動画編集用PCが充実しています。

マウスコンピューターはセールもほぼ毎月やっており、金利0の分割払いも出来るので、お得にPCを買いたい場合はオススメです。

マウスコンピューター公式サイトでセール情報を見る

業界最安：FRONTIER

引用元：https://www.frontier-direct.jp/

FRONTIERはヤマダ電機傘下のBTOパソコンメーカーであり、業界内最安で高スペックゲーミングPCを買うことが出来ます。

なぜなら、FRONTIERでは月末セールや限定セールなどを常にやっており、基本価格が他のメーカーよりも圧倒的に安いからです。

その代わり、数量限定のゲーミングPCが多く、早い者勝ちになっているので注意が必要です。

FRONTIER公式サイトでセール情報を見る

スポンサーリンク

他の実況者はコチラの記事も読んでいます

当ブログ「ちゃすろぐ」では動画投稿やPCに関係する記事を執筆しています。

他の実況者は下の記事も読んでいるので、興味があればチェックしてください。

ちゃすく
ちゃすく

共有やブックマークもお願いします

【2023年】有名ゲーム配信者の使用マイク一覧【YouTuber】
有名配信者が使っている人気なマイクを紹介します。選び方や注意点も解説しているので、ゲーム配信を始めたい時は参考にしてください。
chasksite.com
2023.03.24
ゲーム実況&配信で収益化可能?期間や額を登録者3万人が解説【YouTube】
...
chasksite.com
2022.11.07
【実家】ゲーム実況&配信の親フラ対策７選【防音】
...
chasksite.com
2023.04.11
ゲーム実況の視聴者維持率平均値は10%？目安と上げ方を解説
...
chasksite.com
2022.12.13
タイトルとURLをコピーしました