【初心者～中級者向け】わんコメのテンプレートの簡単なカスタマイズ方法や開発方法を解説

わんコメには、この記事を書いている2025年5月15日現在の公開バージョンである7.2.0だと、フリーとPRO版共通のテンプレートが16種類、PRO版専用のテンプレートが12種類の合計28種類のコメント向けのテンプレートが含まれています。

それに加え、コメントでの演出ができるWordPartyのテンプレートも含まれるため、実質29種類のテンプレートが含まれているとも言えます。

今回は、WordPartyを除くコメント向けのテンプレートのカスタマイズの方法や開発の方法を解説するため、わんコメに含まれているものであれば計28種類のテンプレートを指したお話をしていきましょう。

わんコメテンプレートの基本情報

わんコメのテンプレートの基本情報として初めに知っておくこととして、わんコメに含まれているテンプレートに何があるのかを知っておきましょう。

ここで紹介するものには、以前は含まれていたものの廃止されたテンプレートは含まれていません。

フリー版とPRO版

わんコメにはフリー版（無料版）とPRO版（有料版）が存在しており、PRO版はFANBOXで500円以上の支援をしている方が使えるものになっています。

ただし、一部条件を満たせば、わんコメのDiscordサーバーで無料でPRO版のライセンスキーをゲットすることもできます。

そのあたりは、以前記事にしているので、情報は古くなってしまっていますが参考にしてみてください。

わんコメに含まれているテンプレート

わんコメに含まれているテンプレートは、わんコメ公式サイトに掲載されています。

こちらに書かれているとおりで、フリー版（無料版）は以下の16種類のコメント向けテンプレート（今回はWordPartyを除く）を含みます。

• basic

• bolt

• bolt-right

• cool-pop

• chat

• chat-right

• diagonal

• diagnal-right

• pop-chat

• pop-chat-right

• retro

• slim

• neon

• ktx-quick-starter

• flipboard

• newsticker

そして、PRO版（有料版）は、以下の12種類のテンプレートを含みます。

• audience

• cheer

• jugon

• vertical

• the-world

• cloud

• horsetails

• horsetails-right

• scramble

• neon-ex

• cyber-mx

• toybox
ToyBoxは7.0以降にのみ含まれています。

わんコメのテンプレートで使われているファイル

わんコメのテンプレートで使われているファイルには、大きく分けて3つのファイルが使われています。

• HTML
• CSS
• JavaScript

この3つのファイルが扱えるようになれば、自分好みのテンプレートをより作りやすくなっています。

ですが、これらの言語を理解していなくとも、簡単にテンプレートをカスタマイズできるのがわんコメの特徴でもありますので、安心してください。

もちろん、これらの言語に関する書籍などを購入し理解を深めていたほうがよりスムーズにカスタマイズできるのは言うまでもないのですが、必須ではありません。

まずは簡単にカスタマイズを試していただき、満足できなくなってきたら勉強をして、より自分好みの開発を進めるのが良いかと思います。

【初心者向け】数分でできる簡単なテンプレートのカスタマイズ

たった数分でもできるテンプレートのカスタマイズに活躍するのが、わんコメで公式に提供されているテンプレエディタです。

手順はとても簡単です。

1. OBSに使いたいテンプレートをわんコメからドラッグ&ドロップして入れる
2. カスタマイズしたい（使おうと思っている）テンプレートの名称を「ベーステンプレート」から選択
3. 画面左列に変更できる項目があるため変更したい項目を変更
4. 画面右側で変更した項目が確認できるため確認
5. 2と3を繰り返し問題がないことを確認
6. 最後に「↓下のCSSをOBSのカスタムCSSにすべて貼り付け」の中にある文字列をすべてコピー
7. OBSのオプションの中にあるカスタムCSSを開きペーストして保存する
8. わんコメの「コメントテスター」で想定したカスタマイズになっているか確認する

以上で終了です。

もしも、コメントテスターで動作確認をしたときに意図していたカスタマイズ状況と違う場合には、コピペのし損ないや保存のし損ない、ベーステンプレートの選択ミスなどが考えられます。

また、実際に配信画面においてみたら「イメージと違う」ということもあるかと思いますので、そのときにはテンプレエディタで再度調整を繰り返してください。

このテンプレエディタを使ったカスタマイズに関しては、知識はゼロでできる方法になっています。

最低限、コピー＆ペーストやOBSのオプションやカスタムCSSの場所など、配信ツールの使い方などは必要になりますが、特別な知識を時間をかけて身につける必要はありません。

この方法だと早ければ本当に数分で終わるメリットがある一方、テンプレエディタにはない細かな設定はご自身の知識がないと一切手を加えることができないため、代わり映えのしない見た目になってしまいがちとも言えるでしょう。

ただ、見ただけで「わんコメ使ってるっぽい！」というのがわかるため、詳しい方がこっそり覗きに来るかもしれませんね。

【中級者向け】脱初心者のカスタマイズ

テンプレエディタではできない、初心者向けから脱する中級者向けのカスタマイズとしては、Visual Studio Code（VS Code）などを使ったテンプレートの編集や作成をしていきます。

一応、OS付属のメモ帳でも編集できることはできますが、おすすめはしません。

なぜかと言うと、Visual Studio Codeのようなアプリであれば、各コードに対する入力補助がありミスが少なくなったり、文字に対する色分けがされて見やすくなったりするのですが、標準のメモ帳だとそれらがありません。

また、Visual Studio CodeではGitHub Copilotの推測や開発支援も受けられるため、アプリに入れられる拡張機能も活用しつつVS Codeのようなアプリでのカスタマイズや開発をおすすめします。

GitHub CopilotをVS Codeで使う

Visual Studio CodeでGitHub Copilotの支援を受けるためには、以下公式サイトのような導入が必要です。

必要であれば、あらかじめ導入しておきましょう。

プランは無料のGitHub Copilot Freeで始めれば十分ですが、足りないようであればPro以上のプランをご契約ください。

GitHub Copilot Proだと月額10ドル（月払い）ですので、レートにもよりますが今だと月1,500円くらいですね。

機能を使い込まないなら絶対に有料プランは不要ですので、まずは無料でお試しいただき、足りないようであればの契約を考えてください。

テンプレートをカスタマイズする前の準備

上記VS Codeのようなツールを導入し終えましたら、さらにテンプレートをカスタマイズする前の準備を整えていきます。

手順は以下のとおりです。

1. どのテンプレートをカスタマイズしたいか選ぶ
2. 選んだテンプレートをフォルダごとコピーする
3. コピーしたテンプレートをcustomフォルダにペーストする
4. 3でペーストしたフォルダの名前をわかりやすいものに変更する
5. 4で名前を変えたフォルダを開く

ここまで終わりましたら、次のステップに進みます。

わんコメに内蔵されているテンプレートには、以下のファイルが含まれています。

• index.html
• script.js
• style.css
• template.json
• thumb.png

この中で、まずはtemplate.jsonを開き、変更を加えてしまいましょう。

template.json

template.jsonは、テンプレートの情報が書かれているファイルです。

例えば、basicのtemplate.jsonには以下のような記述があります。

{
  "name": "basic",
  "author": "OneComme",
  "link": "https://onecomme.com",
  "description": "OneComme preset template"
}

nameはテンプレートの名称、authorはテンプレートの制作者、linkはテンプレートに関連するURL、descriptionはテンプレートの説明、といった内容です。

コピペしたままだと、わんコメのテンプレート一覧を開いたときに分かりづらくなってしまうため、最低でもこの段階で「name」を変更しておくことをおすすめします。

もしできるようであれば、ほかの項目も変更してしまうと、あとで変更し忘れる心配が減少します。

HTML/CSS/JavaScriptの役割

index.html、style.css、script.jsの役割としては、大雑把に言ってしまうと以下のような役割を持っています。

index.htmlは、OBSにドラッグ&ドロップするファイルで、コメントを表示させるベースファイルです。

style.cssは、index.htmlで表示させる項目に対して、さまざまな装飾を施すファイルです。カスタムCSSに書くのと変わりません。

script.jsは、HTMLやCSSでは制御できないコメント表示の出し分けや、機能追加をします。

個人的には、HTML＜CSS＜JavaScriptの順に複雑になっていくような気がします。

このあたりは人にもよるでしょうが、HTMLやCSSと比べるとJavaScriptのほうが面倒・難しいというのは、誰がやっても変わらないかと思いますね。

わんコメでは、わざわざファイルを分けて書いていますが、index.htmlにHTML/CSS/JavaScriptすべての記述をして1つのファイルにすることもできます。

ただ、メンテナンス的な意味でも、わんコメ内臓のテンプレートと同じような形に分けて書いたほうが楽に対応できるでしょう。

カスタマイズって何をすればいいのか

実際にカスタマイズというのは何をすればいいのか、初めてだとわからないかと思います。

そういうときには、すでにカスタマイズされているテンプレートを見てみましょう。

このブログ上でも公開していますし、BOOTHなどでも販売や配布がされています。

また、手始めとするのであれば、テンプレエディタを参考に、プラスアルファでCSSを調整していくのもおすすめです。

テンプレエディタでは変更できない項目はどのような設定になっているのか、DevTools（開発者ツール）などを見ればわかりやすくなっていますので、どんどん自分の好きにカスタマイズできる項目を増やしていってください。

CSSにはどんなカスタマイズが可能なのか

DevToolsで確認することで、例えばどんなカスタマイズが可能になるのか例を示してみます。

今回はまだ何も変更していないBasicのテンプレートをDevToolsでbadgeを確認してみると、CSSには次のような項目が書かれていました。

.badge {
    width: var(--lcv-badge-size);
    height: var(--lcv-badge-size);
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 4px;
    border-radius: 100%;
}

このうちのバッジサイズは、テンプレエディタでも変更可能ですが、一番下の項目である「border-radius」は、テンプレエディタでは変更ができません。

badgeに適用されている「border-radius」というのは、バッジのイメージの丸みを調整している項目のため、四角く表示されることを想定しているバッジだと見切れてしまいます。

そこでCSSに

.badge {
    border-radius: unset;
}

と記述するだけでバッジの丸みが消え、バッジが四角く表示されるようになります。

このように、DevToolsを使いながら「自分が変更したい場所」の要素を確認することで、何をどう変更すればいいのかイメージがつきやすくなります。

ほかにもCSSは記載済みの項目を修正するだけでなく追記も可能なため、例えばバッジと名前のマージン（余白）を広くしたり狭くしたりすることもできます。

バッジと名前との余白を狭めたい場合は、

.badge {
    margin-left: -4px;
}

といった記述をすることで、index.htmlを変更していないBasicテンプレートでこの書き方であれば4pxだけ名前との余白が狭まることになります。

ベースにしているテンプレートが違う場合や、同じくBasicのテンプレートを使っていてもindex.htmlを書き換えている場合には挙動が異なる場合もあるため、注意が必要です。

HTMLにはどのようなカスタマイズが可能なのか

CSSには上記のようなカスタマイズが可能ですが、index.htmlとして用意されているHTMLファイルへのカスタマイズも可能です。

例えば、ここでもBasicテンプレートを基準とすると、わんコメがコメントを取得したときにテンプレートとして表示させるデータ構造に以下のようなものを指定されています。

          v-for="(comment, index) in comments"
          :class="getClassName(comment)"
          :key="comment.data.id"
          :style="getStyle(comment)"
          :data-service="comment.service"
          :data-user="comment.data.name"
          :data-gift="comment.data.hasGift"
          :data-owner="comment.data.isOwner"
          :data-moderator="comment.data.isModerator"
          :data-member="comment.data.isMember"
          :data-is-new="comment.data.isFirstTime"
          :data-service-name="comment.name"
          :data-service-id="comment.id"
          :data-paid="!!comment.data.paidText"

この中には、YouTubeで言うと「Super Chat（スパチャ）」「Super Sticker（ステッカー）」「メンバーシップギフト（送受信とも）」「メンバーシップ加入」「マイルストーンチャット」なども、GiftTypeである程度の切り分けが可能ですが、このままではデータが含まれないためCSSでの装飾振り分けはできません。

そのようなときに、次のような項目を追加します。

:data-gift-type="comment.data.giftType"

この1行が加わることで、どのようなギフトの種類なのか、ある程度の把握ができるデータがギフト系のコメントごとに付与されるようになります。

もちろん、このほかにもコメントや名前の表示順を変更したり、表示させるデータを増やしたり減らしたり、コメント表示の基礎を作るためのファイルになっています。

ちなみに上級者向けのカスタマイズは？

上級者向けのカスタマイズとしては、確実にJavaScriptも弄れる必要が出てくるでしょう。

JavaScriptを弄ることで、HTMLとCSSの書き換えだけではできない、より高度なテンプレートの実現が可能です。

わんコメで使えるJavaScriptとしては、OneSDKも用意されていますので、わんコメが取得している情報を呼び出したり書き出したりするのに、必要な知識となってきます。

これも、うまく使えばGitHub Copilotに質問をすれば回答を得ることができるため、AIへの質問の仕方や回答の取捨選択もうまくなると、開発はスムーズになるはずです。

カスタマイズの補助にGitHub Copilotへの質問もおすすめ

テンプレートのカスタマイズや開発にある程度慣れてきて、もう少し変更を加えてみたいけどわからないというときには、GitHub CopilotのAIに質問して回答を模索するのも手です。

GitHub Copilot Freeだと回数制限がありますが、Pro以上のプランを契約しておりGPT-4.1のモデルを使っているのであれば、Premiumリクエストが適用されるようになっても無制限でやり取りができます。

ただ、まったくの初心者が質問しても、適切な回答を得るための質問方法がわからなかったり、一部誤っているだけなので微調整すればいいだけなのに時間をかけて没になってしまったり、もったいないことにもなりかねませんので、基本的な意味くらいは理解してから使ったほうがいいでしょう。

HTMLとCSSの勉強でいいならば、このできるポケットシリーズのKindle版あたりは、外でも読めて便利な気はします。

どちらかと言うと辞書のように使うものではなかったですが、読み進めていけば「この項目ってそういうものなんだ」という理解が深まる構成でした。

こういった本を読んでもいいですし、スクールに通ってもいいですし、詳しい方に個人的なレッスンをつけてもらってもいいですし、学び方はそれぞれです。

もしいいテンプレートが作れ、BOOTHなどで販売した際に大好評を得られれば余裕のペイができる可能性もありますので、副業代わりにスキマ時間でテンプレートを作ってみるのも面白いかもしれませんね。