視覚度

視覚度とは、ものの見え方、その強さのことです。
視覚度が強いということは、はっきりと見え、直感的に理解でき、強い印象を与えること、逆に視覚度が弱いということは、直感的ではなく印象に残らない、ということになります。 そこで効果を発揮するのが「写真やイラスト」といった視覚度の強い要素です。 シャーロック・ホームズの探偵然としたビジュアルは、一目で知的コンテンツのアイコンとなります。 このように視覚度は、広告やサムネイルのような、わざわざ凝視して見てもらえない「一瞬の勝負」ではとても重要な要素です。

大抵の場合、視覚度の強さは、絵や写真 > ロゴやアイコン > タイポグラフィ > 文字 となり、さらに同じモチーフの絵や写真であれば、より本質的で無駄のないものが高視覚度となります。

想像してみてください。 男性用トイレと女性用トイレに視覚度の高いアイコンがなく、すべて「男性用」「女性用」と文字表記で同じ色だったとしたら……まどろっこしいでしょう。 コンテンツへと想像を繋ぐ「瞬発力」を決めるのが視覚度というわけです。

対比(コントラスト)

次は対比(コントラスト)です。
これはデザイン全般に広く応用できる概念です。 わかりやすく一言でいうと、対比(コントラスト)とはボン・キュッ・ボンということです。 要点は強く、大きく、目立たせ、そうでない箇所は要点の邪魔をしないよう引っ込ませてメリハリをつける、違いをはっきりさせるということです。

書籍で勉強などをしていて、重要な箇所にラインを引いたり色を付けたりするのは、自ら対比を作り出しているわけです。 太さが1ピクセルの罫線と2ピクセルの罫線では対比が生まれず意味がないので、2ピクセルではなく4ピクセルにして対比をつくる、というのもそう。 逆に黄色い背景の上に白い抜き文字を乗せたりすると、明度差の対比が弱く、可読性が落ちます。 同じ論理で、余計なドロップシャドウやエンボス処理、凝った背景等も、使いどころと効果をよくわかって使わなければ、対比を弱める逆効果になってしまいます。 これはコントラスト(対比、contrast)ではなくコンフリクト(衝突、conflict)です。

似たり寄ったりのものばかり、すべてが一様の扱いでは、何が重要なのか、何が主題なのかがわかりません。 躊躇しない、潔いメリハリが対比(コントラスト)というわけです。 ちなみに大小で対比をつくることを「ジャンプ率」といいます。

カラースキーム

サムネイルという小さなスペースに、あれもこれもと欲張って詰め込むと、色も煩雑になります。 扱う絵や写真、文字の色にも意味を追求します。 ターゲットにたいして何の訴求効果も意味もない色だと判断したら、そういったものは無彩色(白、黒、グレー系)にまとめると、意味のある色がより引き立ちます。 無彩色というのはどんな有彩色ともコンフリクト(衝突、conflict)を起こさないので、その特徴を上手く使いましょう。

ちなみにグラデーションは小さな面積にたいして使うと、野暮ったい、垢抜けない煩雑な感じになってしまう可能性があるため、使うならできるだけ大きな面に使うのが無難です。

キャッチコピーから余計な文言を除去するように、色も余計な色は除去して、推しの色(コンテンツを象徴するような色)を際立たせると、洗練された、コンテンツへとスムーズに繋ぐドア、つまりサムネイルに近づくはずです。

イメージ イメージ

デザインを分解する

ではここからはデザインを分解して説明していきます。

イメージ

(1)のタイトルは、最も重要な文字情報です。
レイアウトにもよりますが、小さなサムネイルでも一目でわかる大きさ、コピーの長さにします。 全体の面積の1/2~1/3ほどの印象は欲しいところです。

しかし冗長になってはいけません。たとえば、 「誰でもあの名探偵シャーロック・ホームズのような思考方法を手に入れられる!」 というのは長すぎです。 これでは一目でわかるどころか、文章を読むように読まなければいけないし、さらに一文字が小さくならざるをえなくなり、タイトルとして弱くなってしまいます。 本のタイトルのように、長大なコンテンツをずばり一言で簡潔に言い表すことが重要です。

さらにタイトルのなかでも特に強調したい文言はジャンプ率をつけるなどして対比(コントラスト)をつくります。 ポイントは目に留まり、1~2秒で大意を伝えることです。

(2)のサブタイトルは、簡潔におさめたタイトルを補足するような具体的な文言を入れると効果的です。
たとえば「最強最速の筋トレとは」というタイトルに添えるサブタイトルとして「1日1分」という文言はさらに興味をそそります。 そのコンテンツによってどんな体験ができるのか、ベネフィットが得られるのかを具体的にすることで、抽象的なタイトルに目が留まった後、具体的なサブタイトルで中を見てみたくなるという流れを生むことができます。 書籍でいえば、表紙のタイトル、裏表紙のあらすじ、といった感じです。 ポイントはタイトルより具体的であることです。

(3)は先述の視覚度のためのビジュアルです。
その効果はタイトルよりも先に目に飛び込み、シンボルとしてコンテンツ全体を意識させてしまうという強力なものです。 小さなサムネイルではタイトルといえど、スクリーン上では小さく、マッチ箱程度のものになってしまいます。紙媒体のチラシやポスターのタイトルのようにパワフルに振る舞えません。

そのパワー不足を強力に補うのが視覚度担当のビジュアルです。 一覧表示の際、定型の矩形がずらっと並んだレイアウトで、人はまず、ざっと目で情報を拾っていくわけですが、その時はタイトル全文を逐一読んでいかず、アイコン的な直感的なものから拾っていくので、ビジュアル要素のほうがタイトルより速く目に飛び込みます。 先述の男性用トイレと女性用トイレのたとえです。

ちなみに、人や多くの生物、物には顔があり目がありますが、その視線も有効に使えるなら使いましょう。 サンプルでは、シャーロック・ホームズの視線の先にタイトル群が入るようにしています。タイトルを見るようなかたちです。 もしシャーロック・ホームズが左端にあれば、画面(枠)の外へ、タイトルにそっぽを向くかたちになってしまいます。 可能であれば、キャラクターの顔の向き、視線までも計算の内に入れてレイアウトすることが望ましいでしょう。 ここでのポイントはそのビジュアルはタイトルより先にコンテンツを想起させているかです。

(4)の処理は、この場合、シンボリックな色を乗せるスペースです。
色は普遍的な観念を人に呼び起こすもので、これをコンテンツに上手く活用します。

赤は、情熱、危険、興奮等
オレンジは、快活、健康等
黄は、軽快、陽気等
緑は、平和、安全、自然等
青は、清涼、爽快、鎮静等
紫は、高貴、気品、心配等
黒は、暗黒、死等
白は、清潔、平和、潔白等

色の選択で迷った時も、なんとなくの感覚で決めず、こうした何らかの根拠に依って配色するようにします。

上手な体験のチラ見せでコンテンツへスムーズに繋ぎ、
メディアとしての統合感も併せ持つサムネイルを

ここまででひとつのサムネイルを作るコツを解説しましたが、さらに、メディアとして、チャンネルとして統合された様式であることも重要であると付け加えておきます。 メディアやチャンネルにもターゲットが存在するものです。 サムネイルを包含するメディアやチャンネルとしての様式を、サムネイルデザインのルールとして確立すると、統一感のあるサムネイルが並ぶことになり、メディアとしての統合感も表現できます。

イメージ

基本さえ理解できれば、どんなジャンルであっても応用がききます。

サムネイル_サンプル サムネイル_サンプル サムネイル_サンプル

デザインにおいて、色やカタチなど、「なんとなく」で決定した根拠の曖昧な箇所は「まったくデザインされていない箇所」ということになり、小さなことでも、それが効果に影響してきます。 小さなことであってもデザインという知術を施さなかったばかりに、コンバージョン率が1%落ちる、というのはけっして些細なことではありません。 なぜなら、仮に1万人のターゲットのうち1%といえば、100人もの機会損失を生んでしまうからです。

小さなサムネイルひとつといえど、けっして手を抜くわけにはいかないというのは、小さなネジ一本足りないだけで、大きな機械装置が動かなくなってしまうことがあるのと同じです。 YouTubeやブログ、オウンドメディア等でサムネイルを作る時、この記事がその完成度を上げることに役立てば幸いです。

RELATED POSTS