【わんコメ対応】箔押しエンボス コメント吹き出しテンプレート|OBS用HTML
- Digital2,000 JPY

紙が押され、凹み、金箔が定着する。 **「FOIL EMBOSS」**は、厚紙へのエンボス加工と箔押しをモチーフにした、わんコメ対応のOBS用コメント吹き出しテンプレートです。 コメントが届くと、まず厚みのある紙面が現れ、金属型が押し込まれるように凹凸が形成されます。 その後、金箔が装飾線や縁へ転写され、最後に箔の表面を光が走ってコメント面が完成します。 単純に金色の枠を表示するのではなく、 厚紙 → 型押し → エンボス形成 → 金箔転写 → 箔片が舞う → 金属光沢 → コメント表示 という一連の加工工程を登場演出として楽しめます。 ■ 金属型で紙を押し込むエンボス演出 新しいコメントが届くと、まず紙の表面に型が押し込まれます。 押圧に合わせて紙面がわずかに沈み、縁や装飾部分に凹凸が形成されます。 完成後も、 ・押し込まれた部分の暗い影 ・浮き上がった部分の明るい縁 ・二重になったエンボス陰影 が残り、紙加工らしい立体感を表現します。 ■ 金箔が少しずつ転写される エンボス加工のあと、金箔が輪郭や装飾線へ順番に転写されます。 金色を一色で塗るのではなく、 ・深い金属暗部 ・明るい箔のハイライト ・細かな反射 ・角の箔装飾 ・中央の金属アクセント を重ねています。 箔が定着する途中には細かな箔片が舞い、最後に表面へ光沢が走って完成します。 ■ 紙の繊維感まで表現 ベースとなる紙面には、細かな繊維や濃淡を加えています。 ツルツルした単純なカードではなく、厚手の高級紙や名刺、招待状のような質感を意識したデザインです。 箔の光沢とマットな紙面のコントラストを楽しめます。 ■ 演出後は落ち着いて静止 型押し・箔転写・光沢演出が終了すると、吹き出しは静止状態になります。 常時派手に動き続けるデザインではないため、複数コメントが並んでも画面が騒がしくなりすぎません。 名前と本文は別行で表示し、文字そのものをエンボス変形させる仕様ではありません。 ※長文を横スクロール表示している場合は、本文のスクロールのみ継続します。 ■ 紙・金箔・凹凸をカスタマイズ 同梱の設定用デモから、見た目と演出を調整できます。 主な設定項目: 【紙】 ・紙の色 ・中央表示面の色 ・紙の繊維感 ・本文カラー ・名前カラー 【箔】 ・箔の色 ・箔ハイライトカラー ・箔の暗部カラー ・箔線の太さ ・金属光沢の強さ ・装飾密度 【エンボス】 ・凹凸の深さ ・エンボスの明部 ・エンボスの暗部 【演出】 ・型押し、箔転写の演出時間 ・登場演出ON/OFF 【コメント表示】 ・吹き出し幅 ・本文サイズ ・名前サイズ ・最大表示数 ・吹き出し間隔 ・画面端の余白 ・アイコン表示 ・絵文字サイズ ・スタンプ最大サイズ ・長文表示方法 ・横スクロール速度 ■ 配色プリセット 設定用デモには、デザインのベースとして使用できるプリセットを用意しています。 Ivory Gold 明るいアイボリー紙とゴールド箔の定番配色。 Midnight Gold 濃色紙と金箔を組み合わせた高級感のある配色。 Burgundy Copper 深い赤系の紙と銅系メタルを合わせた落ち着いた配色。 Forest Brass 深緑と真鍮系の金属色を組み合わせたクラシックな配色。 プリセット選択後に、それぞれの色を個別に変更することもできます。 ■ 長文コメントにも対応 長文は、 ・自動 ・折り返し ・横スクロール から表示方法を選択できます。 自動モードでは、本文が長くなった場合に横スクロールへ切り替わります。 横スクロールは右から左へ進み、最後まで表示すると先頭位置へ戻ります。 短いコメントは静止表示です。 ■ 絵文字・画像スタンプ表示 通常テキストに加え、画像形式の絵文字やスタンプを表示する処理も実装しています。 画像の縦横比を維持した状態で表示し、最大サイズも設定できます。 ※受信データの形式や画像URLの状態によっては表示できない場合があります。すべての形式での表示を保証するものではありません。 ■ コメント表示仕様 新しいコメントは下から追加され、古いコメントが上へ移動します。 最大表示数を超えた場合のみ、古いコメントから押し出されます。 時間経過だけでコメントが自動的に消える仕様ではありません。 名前と本文は別行で表示します。 ■ 背景透過 実配信用テンプレートの吹き出し外は透明です。 ゲーム画面・雑談背景・配信オーバーレイなどへ、そのまま重ねて使用できます。 接続状態やデバッグ情報などの不要なステータス文字は表示しません。 ■ 設定・演出確認用デモを同梱 商品ZIP内の obs_demo/index.html をブラウザで開くことで、実際の配信コメントを使用せずに型押し・箔転写演出や設定変更を確認できます。 デモ画面は、 左側:設定UI 右側:コメントプレビュー に分離しています。 設定スライダーとコメント吹き出しが重ならない構造です。 設定後はconfig.jsを書き出し、わんコメへ導入済みのテンプレート内にある同名ファイルと置き換えてください。 その後、OBSのブラウザソースを再読み込みすると設定が反映されます。 ※obs_demoは見た目・設定確認専用で、実際の配信コメントは受信しません。 ■ こんな配信におすすめ ・高級感のある配信画面 ・アンティーク、クラシック系デザイン ・文具、紙もの、印刷物が好き ・ゴールドや箔押しデザインが好き ・落ち着いた雑談配信 ・上品なコメント欄にしたい ・コメント登場時の演出にこだわりたい ・一般的な角丸枠とは違うものを使いたい 配色を変更することで、ウェディング風、ヴィンテージ風、ダーク系など幅広く調整できます。 ■ 内容物 ・わんコメ用コメントテンプレート ・わんコメ追加用ZIP ・見た目・設定確認用デモ ・config.js ・editor_schema.json ・README ・設定ガイド ・トラブルシューティング ・検証内容 ・利用規約 ■ 導入方法 商品ZIPをすべて展開してください。 わんコメへの導入には、 install/foil_emboss_onecomme_v1.0.0.zip を使用します。 商品全体のZIPではなく、installフォルダ内の導入用ZIPをわんコメへ追加してください。 追加したテンプレートをOBSへ読み込みます。 OBSブラウザソースは、 幅:1920 高さ:1080 を基準としています。 詳しい導入手順は、同梱の README_FIRST.txt をご確認ください。 ■ 動作確認について Chromium上で以下を確認しています。 ・型押し途中の表示 ・エンボス形成 ・金箔転写途中の表示 ・箔片演出 ・箔の反射、光沢演出 ・完成状態 ・通常コメント表示 ・同一IDコメントの重複防止 ・最大表示数を超えた際の古いコメント押し出し ・deletedによる単一コメント削除 ・チャンネル単位のclear ・長文横スクロール ・画像形式の絵文字 ・時間経過だけではコメントが消えないこと ・設定UIとプレビュー領域の分離 ・JavaScript / JSON / ZIP構成 ただし、以下は未確認です。 ・実際のOBS Studio上での表示 ・実際のわんコメへのZIPインポート ・YouTube実配信コメントの受信 ・Windows環境での長時間運用 ご使用環境によって動作が異なる可能性がありますのでご了承ください。 ■ 利用条件 購入者ご自身の配信・動画で使用できます。 収益化した配信・動画にも使用可能です。 ご自身で使用する範囲で、色・サイズ・コードなどを調整できます。 以下は禁止しています。 ・元データの再配布、再販売 ・改変データの再配布、再販売 ・第三者とのファイル共有 ・自作発言 ・本商品の全部または一部を組み込んだテンプレートや素材の配布、販売 ・第三者がファイルを取得できる状態での公開サーバー等へのアップロード 詳しくは同梱の利用規約をご確認ください。 制作:たっくん
