ゲーム系YouTuberさんのサムネをデザイナーが添削してみた

こんにちは、私はゲームが好きで「原神(げんしん)」というゲームにハマっており、よくファンアートを描いたり、YouTubeを見たりしています。

そんなある日、原神動画をたくさん出しておられる人気YouTuberのボビーさんにいつの間にかtwitterをフォローして頂いていることに気づき、普段動画を見させていただいていたので、勇気を出してお声がけしてみることにしました。

動画のサムネイルを見ている時に、デザイナー目線でもっとこうすればより多くの方々に動画を見てもらえるのでは？と思うことがあったので、それをお伝えしてみるのはどうかと思ったのです。

----------------------------------------------------------------------------

◆添削するサムネイル

分かりやすいサムネイルもたくさんありましたが、例として内容が少し伝わりづらくなっていると感じたこちらのサムネイルについて、実際にサムネイル案を作成して、どうすれば伝わりやすくなるかお伝えすることにしました。
(※ボビーさんご本人にnoteに掲載する許可を頂いております。)

■動画タイトル
【原神】風の行方(かくれんぼ)の「勝てる」立ち回りとスキルセットをレンジャー＆ハンター共に紹介

■動画の内容
原神の期間限定イベントの「風の行方」というマルチプレイでハンター(鬼)とレンジャー(隠れる側)に分かれてかくれんぼをして遊ぶイベントについて、おすすめスキルや強い立ち回りを紹介した動画

----------------------------------------------------------------------------

◆伝わりづらい原因を考える

◆「風の行方」イベントであるということが分かりづらい
左下にうっすらといる猫は、イベントのバナーやゲーム画面で使用されているイメージキャラですが、存在感が弱いのでイメージが伝わりづらくなっています。
逆に右下の原神のマスコットキャラのパイモンは、イベントに殆ど登場しないわりに主張が強いように思いました。
ですので、何についての動画であるのかがほとんど「風の行方」という文字でしか伝わっていないことが勿体無いと思いました。

◆脳に伝わる情報の順番
サムネイルを見た時、パイモンのイラストと「強い！」の文字が最初に頭に入ってきますが、「風の行方」イベントであること、勝てる立ち回りについての動画であるということを最優先に伝えるべきだと思いました。

◆文字サイズが似通っている
「強い！」以外の文字がほぼ同じサイズで近い位置にあるせいか、少しごちゃついて見えてしまっているので、文字サイズにメリハリをつけたり位置を調整すると良くなると思いました。

----------------------------------------------------------------------------

◆サムネ案を２案作成

----------------------------------------------------------------------------

◆案１

・「風の行方」の公式画像のイベントロゴを使うことと、実際のゲーム画像を使用することで、原神の「風の行方」というイベントの動画であることを伝えやすくしました。

・イベントスキルの「感知の輪」と「ハンターの勘」が、文字だけではどのスキルのことなのか分かりづらかったので、画像でより伝わりやすくしました。

・伝えたい内容の文字を右上に配置し、勝てる立ち回りの動画であることを文字サイズや色で強めに伝えて、スキル名の文字サイズは小さめにしました。

★公式のイベント画像と、簡単な加工のやり方(豆知識)↓

こちらは「ロゴは自作ですか？」という質問があった際に、説明をさせていただいた時のものです。
突貫で作ったものですが、簡単な工夫で時短しつつそれっぽく見せています。

----------------------------------------------------------------------------

◆案２

・ゲーム画像を入れずに、公式のイベント画像のイメージを元にして作った案です。スキルの説明は黒板のチョークで書かれたようにし、おまけ程度の認識で伝えてみました。

・黒板の前にボビーさんを配置して、ボビーさんがイベントについて教えてくれる先生のようなイメージにしてみました。
(指示棒を持たせて、黒板の文字を指している感じにしてみても楽しくなるかも)

・「知るだけで強い！」は左上に配置して黒板に書かれている文字とは別の存在として認識してもらうことで、より情報が整理されて頭に入ってくるようにしました。

----------------------------------------------------------------------------

◆ボビーさんの感想

「すげえ！」とまずは喜んでくれました。(嬉しい...)

案1か2でいうと案1がいいとのことで、理由は「原神界隈的に僕がいることは動画を見る人にはあまり刺さらないと思うので、案1の方がおそらく再生数が伸びると思います。ライブ配信寄りの人だったら2もいいと思いますが、僕は動画寄りの人なので案1が気に入りました。」とのことでした。

なるほど..
YouTuberさんの事情についてそこまで深く考えていなかったので、その理由を聞いて私もとても勉強になりました。
----------------------------------------------------------------------------

◆ボビーさんの挑戦

サムネ案の提案からしばらくして、ボビーさんは新しい動画のサムネを案1に寄せて作ってくれました。

その画像がこちら↓

■動画タイトル
【原神】「申鶴」2週間かけて無凸～6凸まで使った結果！命ノ星座解説

■動画の内容
直近で登場した新キャラクター「申鶴(しんかく)」について、1凸～6凸の細かい解説動画で、各凸の解説と推奨凸(強い凸)がわかるという部分を伝える動画。
(※凸とは、原神でいうと既に持っているキャラをガチャで引き当てるとキャラが更に強化されていく仕組みのこと。)

こちらを送ってくださった際に、「情報量が多くてごちゃごちゃした感じになってしまった」、「申鶴(しんかく)さんについての動画だということが分かりにくい気がする」、とおっしゃっていました。

私が作ったサムネをすごく参考にしてくれて、短時間でここまで上手く真似できてしまう技術にまず驚きました。

また、命の正座(キャラクターの凸が見れるゲーム画面)が背景に使用されているのは、イメージが伝わりやすくいいアイデアだと思いました。
----------------------------------------------------------------------------

◆伝わりづらい原因を考える

◆どのキャラについての動画なのか分かりづらい
申鶴(しんかく)の動画だということが分かりづらくなっているのは、申鶴の絵が小さいことが理由だと思われます。
キャラが小さいと名前の文字に頼って誰についての動画か把握することになりますので、より直感的に伝えるにはキャラクターを大きく見せてあげると良いと思います。

◆このフォーマットが全ての動画に上手く当てはまるわけではない
「風の行方」の動画の場合は伝えたかった内容が、「感知の輪」＋「ハンターの勘」が強いということだったので、それらがどのスキルのことか画像を使って分かりやすくするために下側に画像を２つ配置した見せ方にしましたが、今回は画像自体が分かりづらいので意味が伝わりづらくなっているように思いました。

→具体的に画像がどう分かりづらいかについて
・１凸と無凸の画像の数字が何を意味するのか動画を見ないと分からない。
・「完凸」と「１凸」「無凸」よりも、「５」と「４」が目立ってしまっているので見る人を混乱させてしまっている。
・完凸の画像も何を伝えたい画像なのかが分かりづらい。
(ダメージの文字が潰れていたり、どのキャラなのか不明だったり)

◆意識するといいこと
何についての動画なのか一目で分かるサムネイルだと動画を見てもらいやすいので、伝えたい情報以外はとことん削ぎ落とす意識を持つと良いかもしれません。
→たとえば2人いる申鶴さんのイラストを1人にするとか、名前の「」を外すなど。

お洒落だとか、かっこよくするのがいいデザインなわけではなく、伝えたい人に伝えたい情報を分かりやすく伝えられているものが、いいデザインと言えると思います。

----------------------------------------------------------------------------

◆見せ方のご提案(ラフ)

今度は清書せず、ラフでざっくりとご提案してみました。
このくらいシンプルな方が伝わりやすくていいかもしれません。
----------------------------------------------------------------------------

◆ボビーさんの修正版サムネ

ラフのご提案をした翌日、早速サムネイルを作ってくださいました。

想像以上に分かりやすいデザインで、使われている申鶴さんのイラストも可愛いくてめっちゃいい..！
右側の命の正座(凸)もちょうど良い存在感で分かりやすく伝わるし、何の動画なのか一目で分かる！さすがです！！

----------------------------------------------------------------------------

◆ワンランクアップ添削　(※微調整を加えた案)

作ってもらったものに感動してしばらく喜んでいましたが、次の日更に見栄えを良くするためにはどうすればいいか考え、微調整を加えた案を私が作ってみました。
（※統合されている画像を無理やりいじって作った説明用の画像なのでよくみると粗があります。すみません。）

----------------------------------------------------------------------------

◆比較と解説

左がボビーさんが作ってくださったもので、右が私が作った調整案です。
見やすさをUPするためのポイントを２枚目の画像で解説しております。

----------------------------------------------------------------------------

◆おわりに

2022年1月20日の配信で少し今回の件について取り上げてくださり、サムネ制作を楽しんでくださったことが声から伝わってきて、とても嬉しかったです！
また、リアルタイムで視聴者さんに自分が作った画像に関してコメントをいただけたのはとても貴重な体験になりました。

お声がけする際に、「もしデザインに興味がなかったらお声がけする意味はないかも…」と思いましたが、興味を持ってお話を聞いてくださり、「サムネイルを作るのが楽しくなった！」、「無料ソフトを使っていたけどPhotoshopの体験版を試してみます」とおっしゃっていただけたことが凄く嬉しかったです。

今回添削をさせていただいて、説明するための文章を考えたり説明画像を作ったりしたことで、人に説明するということはこんなに難しいことなのか…と実は私の方が多く学ばせてもらった気持ちになりました。

日々動画を作って、たくさんの人に分かりやすく伝えて下さっているのは本当にすごいことなのだと思います。(いつもありがとうございます...)

そんなとても分かりやすい解説でためになるボビーさんの動画はこちら↓↓↓
原神のキャラクターの性能などについて、詳しく教えてくださっているので、原神を遊んでいる方に凄くおすすめです！
まだチャンネル登録をされていない方はぜひ〜！