鏡面のように輝くクロームと、ゆっくり形を変える液体金属の質感をモチーフにした、わんコメ対応のコメント吹き出しテンプレートです。 コメントが届くと、液体金属の表面に波紋が広がるような演出が発生。 さらに吹き出しのエッジを鋭い反射光がスッと走り、金属表面が光を反射しているような映像的な表現を楽しめます。 単純な銀色のグラデーションではなく、複数の反射表現や揺らぎを重ねることで、重厚感のある鏡面クロームの質感を目指しました。 SF、サイバー、近未来、高級感のある配信画面などにおすすめです。 ■ 特徴 ・鏡面クロームをイメージした液体金属風デザイン ・銀色のフレームがゆっくりとうねるアニメーション ・コメント出現時に表面を広がる波紋エフェクト ・吹き出しのエッジを横切る反射光アニメーション ・背景透過のため配信画面へ重ねて使用可能 ・コメントごとに独立した吹き出しとして表示 ・名前とコメント本文を分けて表示 ・コメントは下から上へ積み上がる形式 ・一定時間が経過してもコメントを自動削除しない仕様 ・最大表示件数を超えた場合のみ、古いコメントから順番に押し出し ・絵文字や画像を含むコメント表示に対応した構成 ・OBS用の見た目確認デモを同梱 ・各種表示設定を変更できる editor_schema.json を同梱 ■ コメント受信時の演出 新しいコメントが表示される瞬間に、クローム表面へ衝撃が加わったような波紋が広がります。 同時に金属フレームのエッジを強いハイライトが横切り、鏡面に光源が映り込んだような反射を演出します。 常時派手に動き続けるのではなく、通常表示中はゆっくりとした金属表面の揺らぎを中心とし、新着コメント時にアクセントとなる動きを加えています。 コメントの読みやすさを維持しながら、動きのある配信画面を作りたい場合におすすめです。 ■ こんな配信におすすめ ・SF、サイバー、近未来系の配信 ・クールでスタイリッシュな配信画面 ・黒やダークカラーを基調とした配信 ・高級感のあるコメント欄を作りたい方 ・一般的な平面デザインとは違ったコメント表示を使いたい方 ・コメントが届いた瞬間を視覚的に目立たせたい方 ■ 内容物 ・README_FIRST.txt ・OBS見た目確認用デモ ・わんコメ実配信用テンプレート ・HTML / CSS / JavaScriptファイル ・onecomme-bridge.js ・template.json ・editor_schema.json ・トラブルシューティング ■ 使用方法 OBSで実際のコメントを表示する場合は、 onecomme_template/liquid_metal_chrome_comment_bubble/index.html をわんコメ用テンプレートとして使用してください。 obs_demo/index.html はデザインやアニメーションを確認するためのデモページです。 obs_demoはわんコメSDKへ接続しないため、実際の配信でコメントを取得する用途には使用しません。 ■ カスタマイズ editor_schema.json に対応した設定項目から、吹き出しのサイズや文字サイズ、コメント表示数など、主要な表示設定を調整できます。 配信レイアウトに合わせてサイズや文字のバランスを変更してご使用ください。 ■ OBSで使用する場合 背景は透過しています。 OBSのブラウザソースなどを利用して、ゲーム画面や配信背景の上へ重ねて使用できます。 クロームの反射や細かなアニメーションを使用しているため、実際の配信環境によって描画負荷には差があります。 ■ 注意事項 ・本商品はOBS・わんコメで使用するHTMLコメント表示テンプレートです。 ・obs_demoは見た目確認専用です。実際のコメント受信には実配信用テンプレートをご使用ください。 ・ブラウザやOBSの描画環境によって、アニメーションの見え方が多少異なる場合があります。 ・コメントは時間経過では自動的に消えません。設定された最大表示件数を超えた場合に、古いコメントから順番に削除されます。 ・実際の配信前に、OBS上で表示サイズや文字サイズをご確認いただくことをおすすめします。 鏡面の反射、液体のような揺らぎ、コメント出現時の波紋。 静止したフレームではなく、「金属そのものが動いている」ような質感を目指したコメント吹き出しです。