目次
視聴者の目を引くデザインで配信を盛り上げる
Twitchの配信を見ていて、おしゃれなコメント欄を見たことがありませんか？カスタムCSSを活用すると、コメント欄をカスタマイズできます。おしゃれなデザインのコメント欄にすると視聴者の目を引きやすく、配信のクオリティが上がること間違いなしです。また、カスタムCSSは基本コピペだけで利用できるため、簡単に使えます。コメント欄のデザインを自分好みにして、他の配信者と差をつけましょう！
本記事では、Twitchのコメント欄を簡単にカスタマイズする方法を詳しく解説します。
Twitchのコメント欄をCSSでカスタマイズする方法
Twitchのコメント欄をカスタマイズできるカスタムCSSは各サイトで配布、販売されています。カスタムCSSが入手できるおすすめのサイトを3つ紹介します。
方法1：はいしんツールキット
はいしんツールキットは、配信画面の装飾に使える素材を無料で配布しているサイトです。コメント欄のカスタムCSS以外にも、時計やDiscordオーバーレイなども配布しています。
手順1：サイトにアクセス
はいしんツールキットのサイトにアクセスします。
手順2：コメント欄の設定
コメント欄をカスタマイズします。好みの表示形式を選び、フォントや色を設定してください。
手順3：CSSをコピー
画面下にある「Twitchコメント欄のカスタムCSS」をコピーします。
手順4：ブラウザソースを作成
OBSを開き、「ソース」からブラウザソースを作成します。「プロパティ」の「カスタムCSS」欄にコピーしたCSSを貼り付けてください。
手順5：コメント欄のURLを取得
Twitchのコメント欄を開き、歯車マークからチャットをポップアウトをクリックします。ポップアウトしたコメント欄上部にURLが表示されるのでコピーしてください。
手順6：コメント欄のURLをコピペ
再度OBSを開き、ブラウザソースのプロパティの「URL」に取得したコメント欄のURLを貼り付け、「OK」をクリックしてください。
方法2：fukidashi
fukidashiはコメント欄を吹き出し風に表示できるカスタムCSSです。はいしんツールキット同様、無料で利用できます。
手順1：サイトにアクセス
fukidashiのサイトにアクセスします。
手順2：コメント欄の設定
コメントのフォントや色、枠線の色などを設定します。その際、「Platform」が「Twitch」になっていることを確認してください。
手順3：CSSをコピー
画面を一番下までスクロールし「Create」をクリック後、表示されたカスタムCSSをコピーします。
手順4：ブラウザソースを作成
OBSを開き、「ソース」からブラウザソースを作成します。「プロパティ」の「カスタムCSS」欄にコピーしたCSSを貼り付け「OK」をクリックします。
手順5：コメント欄のURLを取得
Twitchのコメント欄を開き、歯車マークからチャットをポップアウトをクリックします。ポップアウトしたコメント欄上部にURLが表示されるのでコピーしてください。
手順6：コメント欄のURLをコピペ
再度OBSを開き、ブラウザソースのプロパティの「URL」に取得したコメント欄のURLを貼り付け、「OK」をクリックしてください。
方法3：BOOTH
BOOTHではクリエイターが作成したカスタムCSSを購入できます。BOOTHはクリエイターがカスタムCSSやオーバーレイなど、様々なものを出品しているサイトです。有料での販売が基本で、カスタムCSSは数百円で購入できるものが多いです。中には無料のものもあります。
また、BOOTHではコメント欄のカスタムCSSだけでなく、配信画面に表示できる時計やオーバーレイなど、配信に必要な素材が一通り出品されています。1つのサイトで配信素材が揃うのもBOOTHの特徴です。「無料のものでは物足りない」「他の配信者と配信画面のクオリティで差をつけたい」と思った人は、BOOTHで配信素材を探すのがおすすめです。
番外編：CSSを使わずにコメント欄をカスタマイズ「CastCraft」
CastCraftは配信者の魅力を上げる、配信者のためのツールです。コメビュや特定コメントに対するエフェクトの表示など、配信を盛り上げる機能が多数揃っています。CastCraftにはコメント欄をカスタマイズする機能があります。
CastCraftをインストール
CastCraftの公式サイトでデスクトップアプリをインストールします。
CastCraftでチャットボックスを作成
LiveDashboard下部にある「チャットボックス」の欄で「配信に表示する」ボタンを押します。
チャットボックスの基礎となるデザインを選びます。
「チャットボックスを作成」ボタンを押します。
「URLをコピー」ボタンを押します。
OBSのブラウザソースにURL貼り付け
OBSにて「ブラウザ」ソースを追加します。
先ほどコピーしたチャットボックスのURLを貼り付けます。
幅と高さを調整し、「OK」ボタンを押します。
【推奨設定】幅：480 ~ 640, 高さ：1080
チャット欄を表示させる位置を調整します。
デザインの詳細設定
デザインをカスタマイズしたい場合、CastCraftでチャットボックスを作成した画面にて鉛筆のアイコン（編集ボタン）を押します。
デザインやフォント、アニメーションをカスタマイズした後、右上にある「保存する」ボタンを押すことでカスタマイズが反映されます。
CastCraftで配信に接続
OBSやYouTube/Twitch管理画面から配信を開始した後、LiveDashboardの「配信に接続」ボタンを押すとコメントの取得を開始すると、コメントが配信画面に映し出されます！
OBSでコメント欄のCSSが反映されない場合の対処法
カスタムCSSが反映されない場合は、OBSを最新バージョンにアップデートしてください。カスタムCSSは作成時点で最新のOBSのバージョンに対応して作られていることが多いです。古いバージョンのままOBSを使っているとカスタムCSSが反映されない場合があります。OBSを最新バージョンにアップデートしましょう。
それでも解決しない場合は、カスタムCSSを配布・販売しているサイトやクリエイターに問い合わせてみてください。
Twitchのコメント欄を自分好みにカスタマイズしよう！
Twitchのコメント欄をカスタムCSSを使ってカスタマイズする方法を解説しました。カスタムCSSはほぼコピペだけで設定できるので、誰でも簡単にコメント欄を華やかにできます。ぜひ本記事で紹介したカスタムCSSを試してみてください。
TwitchコメントCSSのよくある質問
Twitchのコメント欄はCSSでカスタマイズできますか？
できます。カスタムCSSを使えば、コメント欄の見た目を大きく変えられます。
無料で使える配布サイトはありますか？
あります。記事では「はいしんツールキット」と「fukidashi」が紹介されています。
有料のCSSもありますか？
あります。BOOTH では数百円程度の有料 CSS や無料配布の素材も探せます。
OBSにはどこへCSSを入れますか？
ブラウザソースのプロパティにある「カスタムCSS」欄へ貼り付けます。
TwitchのチャットURLはどう取得しますか？
Twitch のコメント欄で歯車メニューを開き、「チャットをポップアウト」を選ぶと URL を取得できます。
CSSが反映されないときはどうすればいいですか？
まず OBS を最新バージョンへ更新してください。それでも直らない場合は配布元へ確認します。
関連の人気記事
OBSでのコメント表示におすすめのCastCraft
OBSでYouTubeやTwitchなどの配信コメント表示を行う際のツールとして、CastCraftをおすすめします。
CastCraftを使えば、配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 配信コメントをニコニコ風にOBS画面に横流しできる
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- 設定した画像やGIFで自由に画面演出が作れる
いつでも投げ銭（収益化）機能
- 配信者に9割還元できる
- 投げ銭してくれた視聴者に対して個別のお礼の返信や、特典ファイル（画像や音声など）を送付することも可能
このような機能により、配信者が視聴者との関係を深めることができます。
CastCraftを利用する配信者さんの声
ぺこPさん
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
MeeChanneLさん
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
九条林檎さん
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
ゆっきん【博多弁猫Vtuber】さん
『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』
日々の配信をより良く
CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで260万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。