はい!てんぷらちゃん

ゲームで義務教育を終えた男がスマブラや学問を通じて考えたことを殴り書きするブログ

対戦ゲーム大会の配信告知ツイートにサムネイル画像を添付する試み

ゲーム大会の配信が当たり前になりつつある昨今、どのように視聴者を増やすかは常に悩みの種であり、向き合い続けなければならない課題ですよね。

 

ブログ界隈などいろいろなところで言われるのは、「画像ツイートは文字だけのツイートに比べてエンゲージメント数(ツイートへの反応数)が伸びやすい」とのこと。

 

実際に導入してみました。

 

 

この記事では、導入にあたっての経緯、手段、結果をちょろっと共有することが目的です。

 

 

 

経緯

 

 

HST主催のおばりんさん(@obarinssb4)のブログに触発され、私がスタッフとして参加する東京都中野の隔週スマブラ大会「Weekly Smash Party〜スマパ!〜」でも取り入れてみました。

 

おばりんさんのブログはこちら。

ブログ開設&HSTオフレポ - 雑記

 

Weekly Smash Party 〜スマパ!〜のYotutubeチャンネル、Twitchチャンネルはこちら。フォローしてね♡

 

www.youtube.com

www.twitch.tv

 

スマブラ4非公式オンライン大会「タミスマ」主催のさめきさんも採用しています。

 

 

 

仕事ができるお人だなぁ

 

 

手段 

 

GIMPという画像編集フリーソフトを使いました。

www.gimp.org

一言で言うと「無課金Photoshop」です。

できることは一緒だけどちょっと大変みたいな感じ?

フォトショをそんなに使ったことがないので比較はできませんが、サムネ作る程度なら問題ないです。

 

筆者はサムネを作るために一からGIMPを勉強しましたが、3つくらい先人の記事を読めばこの記事に書いてある程度の技術は習得できます。

参考リンクはその都度貼っていきます。

 

 

サムネイル画像の作り方としては、

  • 背景用のオーバーレイを作る
  • 大会ロゴや「VS」の画像等の、一度貼ったら二度と書き換えないパーツを配置する
  • 日付、大会ナンバリング等の、その大会中で書き換えないパーツを配置する
  • プレイヤー名やファイターなど、対戦毎に代わるパーツを配置する

といった感じです。

 

f:id:temprachan:20180820152738p:plain

 

この画像のレイヤー構造はこんな感じ。

 

f:id:temprachan:20180820155930p:plain

f:id:temprachan:20180820155939p:plain

 

上から、

  1. プレイヤー名1
  2. プレイヤー名2
  3. ラウンド表示画像フォルダ
  4. 大会ナンバリング
  5. 大会ナンバリングの縁取り(黄)
  6. 大会ナンバリングの縁取り(白)
  7. 日付
  8. 日付の文字装飾(影)
  9. 右下のWiiUのロゴ
  10. 大会ロゴ
  11. 画像上下の文字を目立たせるための白帯(不透明度を30くらいにしてます)
  12. 左のファイター画像フォルダ
  13. 右のファイター画像フォルダ
  14. 中央「VS」のロゴ
  15. 背景画像、オフ大会会場の画像
  16. 背景画像にかける色

 

上のレイヤーに行くほど前面に表示されます。

 

上から順に飛ばし飛ばし一言ずつ。

 

 

プレイヤー名

f:id:temprachan:20180820161406p:plain

 

太めのフォントで見やすく。Impactというフォントにしました。

本当は文字に縁取りを作りたかったのですが、大会進行中は忙しいのでなるべく手間にならないようシンプルな表示にしました。

 

ラウンド表示画像フォルダ

f:id:temprachan:20180820161628p:plain

f:id:temprachan:20180820161743p:plain

f:id:temprachan:20180820160855p:plain

 

最初にレイヤー構造を示した画像ではフォルダを展開していなかったので見えていませんでしたが、展開するとフォルダ内部はこんな感じになっています。

 

画像左の目のマーク👀が付いている画像のみ表示されます。

ラウンドが進むごとにいちいちラウンド表記を作るのでは大会進行に遅れをきたすので、事前に全部のラウンド表記画像を作ってから、表示/非表示を切り替える方式にしました。

 

 

 大会ナンバリング

f:id:temprachan:20180820161802p:plain

 

縁取りはここを参考にしました。

 

synclogue-navi.com

 

日付 

f:id:temprachan:20180820161938p:plain

 

いつの大会かひと目で分かると便利だと思います。

文字装飾が縁取りばかりだと味気ない気がしたので、「ドロップシャドウ」の機能を使いました。

 

いろいろな機能を使いたがると、やたら文字が飛んだり跳ねたりする素人が作ったクソダサパワーポイントみたいになりかねないのでそこだけ注意しました・・・・・・。

 

synclogue-navi.com

 

WiiUロゴ 

f:id:temprachan:20180820162447p:plain

 

 こちらのツイートを参考にしました。

 

ファイター画像フォルダ

f:id:temprachan:20180820162647p:plain

 

なんだかんだ言ってここが一番大事ですよね。

 

今回カラーバリエーションまでは対応できませんでした。

 

下準備の段階で一番面倒なのはここでした。

というのも、私の取った方法だと

「公式画像をDL→適宜左右反転させる→移動・拡大縮小して配置」

という作業を全キャラ分行ってサムネ画像サイズの透過画像を作る必要があったので。

 

f:id:temprachan:20180820163203p:plain

 

フォルダ構造にしているのはラウンド表記のところと同様の理由からです。

 

背景

f:id:temprachan:20180820163656p:plain

 

元画像はこんなかんじです。

 

f:id:temprachan:20180820163553j:plain

Red Bull Gaming Sphere Tokyo)

 

かっこい〜〜!みんなスマパ!(@KACHISMAPA)来ようね

 

オーバーレイの作り方はここを参考にしました。

GIMPレイヤーモード | GIMP始めの一歩

 

 

 

ここまでが下準備。

あとは大会当日に「日付」、「ナンバリング」を更新し、対戦毎に「プレイヤー名」、「ラウンド表示」、「ファイター」を更新して画像をエクスポートするだけです。

 

 

結果

 

まずは運営目線から。

 

GIMPで作業して告知ツイートをするのにノートPCが1つ占領されてしまいます。

これまで受付やChallonge更新等も同じPCで行っていたので、端末の使い分けが問題になりました。

 

同様にスタッフを1人そこに割く必要が出てくるので、ただでさえ人数不足気味なオフ大会で実行できるのか?といった疑問も出てきます。

 

進行が落ち着いた敗者側準決勝あたりからサムネイル付き配信告知ツイートをするのも一つの手です。

配信の序盤から視聴者を連続的に集めたいという目的との間で板挟みにはなりますが・・・。

 

それでも好意的な反応が見られたのでやってよかった〜〜。

 

 

参加者目線からすると、

 

配信台で対戦するプレイヤーとしては、

「対戦前に画像つきツイートをしてくれれば『これから配信です!』みたいな引用RTができるので惜しかった。」

というコメントや、複数キャラ使いからは

「サムネの画像のキャラと実際に使ったキャラが一回も当たってなくてワロタ」

といったコメントをいただきました。(すまんな・・・)

 

試合始まってからサムネを作ると前者の、試合前に画像を作ると後者の問題がより出てくるのでトレードオフって感じです・・・。

 

 

そして肝心のエンゲージメント数です。

 

現在のスマパ!公式アカウントのフォロワー数は535。

画像付きツイートをしたスマパ!第7回と、そうでないスマパ!第6回、第5回を比較します。

決勝、勝者側決勝、敗者側準決勝、Top 32(勝者側1回戦)のデータは、

 

第7回: 67, 33, 99, 194 (ave. 98.25)

第6回: 22, 4, 20, 44 (ave. 22.5)

第5回: 49, 26, 13, 31 (ave. 26.5)

 

となりました。

 

配信台プレイヤーの集客性や微妙な文面の差異、開催曜日(7回のみ金曜開催)などいろいろな要素はありますが、こうして数字で見ると、サムネイルの影響力は大きいのではないでしょうか。

 

 

 

 

ちなみにエンゲージメント数762(スマパ!第7回中最大値)を叩き出したツイートはこちら。

 

 

 

 

 

 

 

 

 

 

 

 

 

??

 

 

 

 

 

 

終わりに

 

いかがだったでしょうか。

これを読んだあなたの何かの助けになれば幸いです。

 

よ〜〜し新作スマブラに備えてサムネ画像の下準備するぞ〜〜〜!

 

 

 

 

・・・

 

 

 

 

 

・・・・・・

 

 

 

 

 

f:id:temprachan:20180820172434p:plain

 

 

 

 

!!!

 

 

 

f:id:temprachan:20180820172841p:plain

 

 

 

 

 

 

別ゲー勢に届け!!!!!!!!!!!!!!!!!!

 

 

 

 

 

 

この試みに付き合ってくれたスマパスタッフのみんな、ありがとうございます。。。

 

 

おわり!!

 

 

 

 

P.S.

プログラム組んでサムネ画像を生成するとしたらどんな知識が必要になるのか分かる有識者の方がお客様の中にいらっしゃいましたら、参考URLとかコメントでいただけるとうれしいです