ゲーム実況のサムネイル作りで学んだデザインの基本

ゲーム配信を始めてから、サムネイルを自分で作るようになった。最初はひどい出来だったけど、数十枚作り続けるうちに「これは押さえないとダメ」というポイントが見えてきた。

この記事では、非デザイナーの自分がゲーム実況のサムネイルを作り続けて掴んだコツを、ツール選び・デザイン原則・改善サイクルの3つの観点でまとめている。

最初のサムネは誰にもクリックされなかった

配信を始めた頃、サムネイルはゲームのスクリーンショットにテキストを載せただけだった。文字は小さいし、色はゲーム画面に埋もれるし、何の配信かもわからない。

YouTubeの一覧で自分のサムネと他の配信者のサムネを見比べた時、差は歴然だった。同じゲームでもクリックしたくなるサムネとスルーするサムネがある。その違いを言語化するところから始めた。

具体的に観察したのは、同ジャンルで再生数の多い動画のサムネイル50枚ほど。共通点を書き出してみると、文字の大きさ、背景との分離、表情やキャラクターの配置に明確なパターンがあった。

サムネイル作成に使えるツールと選び方

Canvaは非デザイナーの味方

最初はPhotoshopを使おうとしたけど、サムネ作りにはオーバースペック。レイヤー管理やマスク処理の知識が必要で、1枚作るのに1時間以上かかった。

Canvaに切り替えてからは制作時間が15分程度まで短縮された。YouTubeサムネイル用のテンプレートが最初から用意されているし、1280×720pxのキャンバスも一発で作れる。ドラッグ&ドロップで要素を配置できるので、デザインツールに慣れていなくても直感的に操作できる。

無料版でも十分使えるが、Pro版だと背景の自動除去機能がある。ゲームキャラクターの切り抜きをしたい場合はPro版の方が作業効率がいい。

Figmaという選択肢

エンジニアならFigmaも検討する価値がある。Canvaよりカスタマイズ性が高く、コンポーネント機能でテンプレートの部品化ができる。自分のサムネイルにシリーズ共通のヘッダーやロゴを入れたい場合、Figmaのコンポーネントで一括管理すると後からの修正が楽になる。

ただし学習コストはCanvaより高い。最初の数枚はCanvaで感覚を掴んで、テンプレート化したくなった段階でFigmaに移行するのが現実的なルートだと思う。

スマホアプリでの応急処置

外出先で急にサムネを差し替えたい場面もある。その場合はPhonto（iOS/Android）が便利。画像に文字を載せるだけの単機能アプリで、フォント選択と文字位置の調整がスマホ上で完結する。クオリティは落ちるけど、サムネなしで配信を始めるよりはマシ。

文字は大きく、3語以内

一番効果があったのは、テキストを極限まで減らすこと。

最初は「今日も楽しくプレイします！参加歓迎！」みたいな長文を載せていた。スマホで見たら読めない。サムネのテキストは3語以内が限界。「参加型」「初見プレイ」「ジムリーダー戦」くらいの短さで十分。

文字サイズも最初の倍以上にした。スマホの小さい画面で一覧表示された時に読めるかどうかが基準。PCで作っていると見落としがちなポイント。

フォント選びも重要で、ゲーム実況なら太めのゴシック体が鉄板。明朝体や手書き風フォントは雰囲気は出るけど、小さい表示で潰れやすい。自分はNoto Sans JPのBoldかM PLUS Rounded 1cを使い分けている。

背景とテキストのコントラスト

ゲームのスクリーンショットは色が複雑で、どの色のテキストを置いても読みにくい場面がある。

解決策は単純で、テキストの後ろに半透明の帯を敷くこと。黒い帯に白文字。これだけでどんな背景でも読める。地味だけど、読みやすさへの効果は絶大。

縁取り文字も試したけど、帯の方がクリーンで見やすかった。縁取りは太くしすぎると文字が潰れるし、細いとコントラストが足りない。調整に時間がかかる割にリターンが少ないので、帯に統一した。

もう1つ効果的だったのが、背景画像自体を暗くする処理。スクリーンショットの上に黒の半透明レイヤーを被せて、全体の明度を落とす。こうすると白文字が背景を選ばず映える。Canvaだと画像を選択してから透明度を調整するだけでできる。

配色は3色まで

色を使いすぎるとゴチャゴチャする。サムネの配色は背景・メインテキスト・アクセントの3色が限界だと気づいた。

自分の場合は黒背景・白テキスト・黄色アクセント。この組み合わせはどのゲームでも汎用的に使えるし、一覧で自分のサムネだと認識できる統一感が出る。

ブランドカラーを決めておくと、作るたびに配色で悩まなくて済む。

色の選び方で迷ったら、YouTubeの一覧ページで目立つ色を考えるといい。YouTubeのUIは白と赤が基調なので、青や緑のサムネは埋もれやすい。黄色やオレンジなど暖色系のアクセントカラーは一覧の中で視線を引きやすかった。

構図のパターンを決めた

毎回ゼロからレイアウトを考えるのは効率が悪い。テンプレートを3パターン作って使い回すことにした。

1つ目は左にキャラクター、右にテキスト。2つ目は全面スクリーンショットに中央テキスト。3つ目は上下分割で上がゲーム画面、下がテキスト。

この3パターンで9割カバーできる。特別な配信だけオリジナルレイアウトを作る。

パターンを決めておく利点は制作速度だけではない。視聴者がチャンネルページを見た時に、サムネイルに統一感があるとチャンネル全体の印象が整って見える。バラバラのレイアウトだと、雑多で素人っぽい印象になる。

クリック率を見て改善するサイクル

サムネイルの良し悪しは感覚ではなく数値で判断できる。YouTube Studioのアナリティクスで、動画ごとのインプレッションクリック率（CTR）を確認する。

自分のチャンネルでは、CTRが4%以下のサムネは「改善が必要」、6%以上なら「うまくいっている」という基準を設けた。この数値は配信ジャンルやチャンネル規模で変わるので、自分のチャンネルの平均値を基準にするのがいい。

A/Bテスト的なアプローチ

YouTubeには公式のA/Bテスト機能があるが、小規模チャンネルでは使いにくい。代わりにやっているのは、同じゲームの配信でサムネのパターンを変えてCTRを比較する方法。

たとえば「ポケモン対戦」の配信で、ある週は人物なしのテキスト中心サムネ、翌週はキャラクターを大きく配置したサムネを使う。2週間ずつ試して、CTRの差を見る。

これを数ヶ月続けた結果、自分のチャンネルではキャラクターを大きく配置した方がCTRが約1.5倍高いとわかった。逆に、テキストの色を変えた程度ではほぼ差が出なかった。

数値から得た具体的な学び

改善サイクルを回してわかったことをいくつか挙げる。

• 人の顔やキャラクターの表情が入っているサムネはCTRが高い傾向にある
• テキストが4語以上になるとCTRが下がる
• 背景が暗い方がフィード上で目に留まりやすい
• 前回と似すぎたサムネは既視感でスルーされやすい

これらは自分のチャンネルでの結果なので、万人に当てはまるわけではない。ただ、数値を見て仮説を立てて検証する流れ自体は誰にでも再現できる。

サムネ制作の具体的な手順

自分が1枚のサムネを作る流れを書いておく。

1. ゲームプレイ中に「サムネ映えしそうな場面」でスクリーンショットを撮る
2. Canvaで1280×720のキャンバスを開き、テンプレートを複製する
3. スクリーンショットを配置して、暗めのオーバーレイをかける
4. 3語以内のキャッチコピーを考えて配置する
5. スマホのYouTubeアプリで一覧表示をシミュレーションして視認性を確認する
6. 問題なければ書き出してアップロードする

ステップ5が地味に大事で、PCの大画面で見て「いい感じ」と思っても、スマホで見ると文字が潰れていることがよくある。書き出したサムネ画像をスマホに送って、小さい表示で確認する習慣をつけてからミスが減った。

デザインの基本はエンジニアリングに似ている

サムネ作りを通じて気づいたのは、デザインの基本原則がエンジニアリングと似ていること。

制約の中で最適解を出す。再利用可能なパターンを作る。ユーザー（視聴者）の視点で評価する。数値でフィードバックを得て改善する。やっていることの本質は同じ。

非デザイナーでも、原則を押さえて反復すれば、それなりのものは作れる。完璧じゃなくても、伝わればいい。サムネイルは配信の入口でしかないけど、入口の質で中身を見てもらえるかどうかが決まる。時間をかけすぎず、でも手を抜かず。そのバランスを掴むのに数十枚の試行錯誤が必要だった。

関連記事

• ゲーム配信で同接が伸びない時に、モチベーションを保つ方法を考えた
• インフラエンジニアがゲーム配信するギャップ。仕事と趣味の温度差
• ブラウザで遊べるテトリス風パズルをTypeScriptで作った話