【YOUTUBE 】サムネイル画像デザインで考えていること。

てちこ

こんにちわー!てちこです。

今回はYOUTUBE のサムネイル画像をつくる時に、
デザインについて私が考えていることについて、記事にしたいと思います。

リベ大ワークスでのご縁で、
たばえもんナース塾(@tabaemonnurse)さんのチャンネルからご依頼いただけました。

今回、例に挙げさせていただきます!
ありがとうございます!

私も本業は医療系。
国家試験前には、たばえもんさんのチャンネルのような解説動画に助けられたことを思い出します・・・。

こんなふうにデザイン側から関わらせていただくというのは、
不思議な気持ち・・・!

てちこ

それでは、よろしくお願いします!!

目次

依頼内容

依頼内容としては、

  • 動画を実際に見て、サムネイル画像を作ってください。
  • 現在、ブルー系の背景、赤系の文字なのでそれに準じた方がいいです。
  • ひとつの動画のサムネイル画像をまずつくって、気に入ったら他の動画も依頼したい。

ということでした。

実際に動画をたくさん見させていただきます。
その中で私がチャンネルの特徴として感じたことは、

  • 医療の知識を深めるというよりは、最低限の知識をつける手助けをしたいというチャンネルであること。
  • おおまかに解説系動画と、実習に向けての動画の2系統があること。

という2点です。
ここをしっかりと表現したいなぁと思いました。

情報の整理

作らせていただく動画は、
【実習】にいく時の必要な知識をまとめた動画に決まりました。

動画のタイトルは、

【国試対策つき!】術後の生体反応について解説!関連図の参考になります!

です。

ブログ用アイキャッチのデザインについての記事でも書きましたが、
アイキャッチ・サムネイル画像には、
ぱっと見でカテゴリーを理解させることができる。
という力があります。

まず、【解説系】【実習用】の2系統を枠の色で区別し分かりやすくしたいと考えました。

【解説系】は、冷静にしっかりと理解していくイメージからブルー系
【実習用】は、元気出して能動的に動いていくイメージからオレンジ系

の色の枠に決めます。

まだ、【解説系】の動画の依頼はもらってないだろ!というツッコミはなしでお願いします。笑

次に動画自体の特徴として、

  • アニメーションが使われていて、理解しやすい。
  • 理解の補助、知識の定着のために過去問が使われている。

の2点がありました。

国家試験の動画が使われているのは、解説系の動画も同じです。

大事な特徴ではあるのですが、

実習前の学生に見てもらいたい

という実習系の動画の一番の目的を考えると、

サムネイル画像に載せる情報ではないな。
載せると【解説系】と混同しちゃう可能性があるな。

という2点から載せないという判断をしました。

載せるテキストは、

アニメーションでわかる
術後の生体反応について解説
実習前にしっかり理解しよう

の3行に決めます。

アニメーションでわかる:動画の特徴。分かりやすさをアピールしてクリックしてもらう。

術後の生体反応について解説:メインタイトル

実習前にしっかり理解しよう:実習前の「」に向けた動画だよ!と自分ごとに思わせる。

といった狙いです。

この段階で、一度たばえもんさんに
このテキストでデザインしていこうと思うのですがよろしいですか?
と確認します。

テキストいいですね!
と返信していただけたので、デザインに入ります!

てちこ

盛り上がってまいりました!!!

デザインについて

ははじめから決めていた【オレンジ】

次は背景画像を探します。

背景画像は、ぱっと見で直感的に【医療系】の動画なんだ!

ってわかっていただけるようなものを探します。

いつも使っている、無料画像サイトのO-DANさん!

実習動画なので、病院での仕事をイメージできるように
ボールペンとかいっぱいさして、聴診器を首からかけた、白衣の画像にしました。

フォントは、見出しにピッタリな太めなゴシック体から選ぶとして、

その中でも、角が少し丸くやわらかい印象のもつ

やさしさゴシックボールド

を使いました。
専門的というよりは、最低限の知識を分かりやすく!
というチャンネルの趣旨をイメージしています。

さあ!文字を並べていこう!

デザインについて2

メインタイトルの

【術後の生体反応について解説】

のうち【解説】をとれば
もっとメインタイトルを大きくできるなぁ。

と思い、【解説】は端っこに追いやっちゃおう。
と考えます。

リベ大ワークスでの出会いなので、
リベ大の動画のサムネイルをパロディしました。

背景の画像の不透明度を下げて、文字を見やすくし、

テキストをまず載せて、
メインタイトルとその他のフォントの大きさに強弱をつけます。

この時、フォントのサイズが3行全部違うと、
見にくくなってしまうので、

メインタイトルと、それ以外。
の2種類のサイズだけにします。

あとは視認性がよくなるように枠をつけて、
見る人の理解を助けるように、あしらいをつけて、完成!!

アニメーションでわかる
は、注意を強くひく赤を使います。
特に大事な【わかる】に視線を集めるように〇で強調。

分かりたい人が動画で検索してますもんね!笑

また、理解するのに疲れないように、わかるはあえてひらがなのままです。
より優しく!

実習前にしっかり理解しよう!!
の前には、チェックマークのアイコンを置き、
サムネイル画像を見た人が、

私もチェックしなきゃ!

と目を止めるようにとイメージしています。

背景画像以外には、オレンジと赤の2種類しか有彩色は使っていません。

サムネイル画像のサイズでは情報が多すぎると、
かえって見にくくなると考えていて、
最大3色かなと思っています。

そんなこんなで完成!!!

たばえもんさんからの感想

カテゴリーを枠の色ごとに分けたり、
という1本の動画のサムネイル画像デザイン以上の提案を
喜んでいただけました。

また、サムネイル画像を変えたあとに
クリック率が上がったようで、
クリック率のグラフのスクショも送っていただけました!!

こちらとしてもとっっっても嬉しいです><

他のサムネイル画像もお願いしますということなので、
これからもよく考えて作らせていただきたいと思います!!

たばえもんさんのYOUTUBEチャンネルは下記です。

国家試験前は、新しい問題に飢えるので、
過去問をたくさん使ってくれる動画は本当に助かるんですよね。笑

ここまで読んでいただき、ありがとうございました!!!

この記事が気に入ったら
フォローしてね!

わたし、Twitterやってるよ!
  • URL Copied!
目次
閉じる