サムネイル制作のポイントとレイアウト例をご紹介！
近年、SNSや動画配信が人々の生活に溶け込むようになってから、様々な所でサムネイルを目にするようになったかと思います。動画を見ている時も、よく配信者の方が「これサムネに使おう」と言ったりしていますよね。
最適なサムネイルを設定することで、そのコンテンツにユーザーを惹きつけ、閲覧数を増やすことが可能です。
最近では、プロモーション活動として、セミナーや企業ブログ・商品紹介動画などで情報を発信している企業も多くあります。こうしたコンテンツは、他企業との差別化や自社のイメージを確立させていくことが重要です。その為、コンテンツの内容だけでなく、サムネイルからしっかりとデザインして、ユーザーに与えるイメージをコントロールしていくことが重要です。
本記事では、サムネイルの基本情報からサムネイルを制作する上でのポイントなどを、レイアウト例と共にご紹介していきます。
サムネイルとは？
サムネイルとは、WebサイトやSNSなどの投稿を一覧表示したときに表示される小さいサイズの画像のことを指します。そのコンテンツの看板のような役割をしているため、ホーム画面・検索結果画面・関連記事など、様々な場所で表示されることになります。
投稿を閲覧しなくても一目で内容を把握できるため、プレビューや見本として使用されています。
また、ユーザーがコンテンツを閲覧するかどうかの判断材料としても扱われているので、サムネイルはとても重要な要素です。コンテンツを見てもらうためには、「面白そうだな…」「続きが気になるな…」と思ってもらうサムネイルを設定する必要があります。
サムネイルの語源は、親指の爪を意味する「thumbnail」という単語から来ています。親指の爪くらい小さな画像ですが、その限られた範囲の中で、コンテンツの内容や魅力を伝える必要があるということです。
ただ画像のみを配置するやり方もありますが、しっかりとデザインすることで、魅力的かつ注目を集めるようなサムネイルにすることができます。これにより、ユーザーが思わずクリックして実際にコンテンツを見てくれる可能性が高まり、閲覧数やフォロワー数の増加にもつながっていきます。
また、サムネイルの雰囲気を統一したものにすることで、自分のチャンネル・アカウントを覚えてもらえる可能性も高まります。ぜひデザインしてみましょう。
サムネイル制作のポイント
では、実際に魅力的なサムネイルを作るにはどうしたらいいのか。制作する上での重要なポイントを大きく3つに分けてご紹介していきます。
サムネイルに限らずバナーなどにも応用できるので、ぜひ参考にしてみてください。
写真について
写真の扱い方によって、サムネイルから受ける印象は大きく変わります。
画面いっぱいに使用する
例えば、写真を画面いっぱいに配置すると、ユーザーが一目で内容を把握しやすくなり、インパクトも大きいです。特にポートレートの場合は、大きく配置すればその人の事を覚えてもらいやすくなり、認知度が高まります。VLOGなど日常を紹介するようなコンテンツは、複数の写真を組み合わせることで楽しい雰囲気を出しつつ、内容も把握しやすくなります。
切り抜いて使用する
逆に少し小さめに配置して周りに余白を持たせると、落ち着いたおしゃれな印象を与えることができます。LOOKBOOKのようなコーディネート・アイテム紹介などは、切り抜きをすることで写真が配置しやすくなったり、背景を工夫して簡単に印象を変化させることができます。
写真ではなくイラストを使用する方法もあります。イラスト素材は写真よりも自由度の高いレイアウトにすることができるのでとても便利です。一気に親しみのある印象になるので、写真と組み合わせて使用してもおもしろいです。
テキストについて
基本的にサムネイルに配置するテキストは最小限にするのがベストです。
サムネイル内の情報が多すぎると、何が一番伝えたいことなのかわからなくなってしまい、そのコンテンツの内容が一目で把握できなくなってしまいます。その為、情報の取捨選択と情報の重要度に応じて文字に強弱をつけていくことがポイントです。
下に帯を敷く
テキストの入れ方も様々ですが、一般的なやり方としてテキストの下に帯を敷くという方法があります。写真の上にそのままテキストを置いた場合、コントラスによってテキストが読みづらくなってしまう場合があります。テキストの下に帯を敷いたり、フレームで囲ってあげたりすると、その問題も解消されるので非常に便利です。
動きを付ける
テキストをそのまま配置するのではなく、斜めにしたり、円形に沿ってテキストを流し込んだりすることで、そこに動きが生まれて印象的なサムネイルになります。なんだか単調なデザインになってしまうなと感じた時に効果的な方法です。また、縦組みと横組みを合わせて配置すると、変化が生まれて目を引きやすいデザインにすることができます。
最近では写真の裏にテキストを回り込ませているサムネイルをよく見かけます。こうすることで画面内に奥行きが出て、情報にメリハリを付ける事ができます。写真とテキストが
被りすぎないように調整しながら制作するのがポイントです。
色について
色はサムネイルの雰囲気作りを手助けしてくれる要素です。背景は無地でも良いですが、柄などを少し入れるだけでアクセントになり、だいぶ印象が変わります。またグラデーションを効果的に使用することで、今っぽさが出るので非常に便利です。
テーマカラーを決める
青は落ち着いた色、赤は活発的な色など、色にはそれぞれイメージがあります。サムネイルでも、コンテンツの内容に応じて色を使い分けると、ユーザーは内容をイメージしやすくなります。例えば、ビジネスに関する内容であれば、真面目さや誠実さのイメージを持たせるように青でまとめる。スポーツに関する内容であれば、熱気や生き生きとしたイメージで赤系の色にするなど、自分がどのような印象を与えたいかで使い分けましょう。
分割して色を分ける
何かと何かを比較するような内容の場合は、思い切って画面を分割し、色を分けると直感的に伝わりやすくなります。レイアウトは左右対称にすることで、内容が把握しやすくなります。なるべくコントラストのある色の組み合わせが好ましいです。この時、トーンを合わせて配色するのがポイントです。
サムネイルのサイズ
今回はYoutubeで使用する想定で、比率などもそちらに合わせて制作しましたが、
推奨されているサイズは、媒体やSNSによって異なりますので、それぞれのサイズに合わせてレイアウトしていきましょう。下記は主要SNSのサムネイルサイズになりますので、参考にしてみてください。
【Youtube】
解像度：1280×720px アスペクト比：16:9 ファイル形式：JPEG/PNG/GIF など
【Instagram】
・正方形…解像度：1080×1080px アスペクト比：1:1
・横長…解像度：1080×566px アスペクト比：1.91:1
・縦長…解像度：1080×1350px アスペクト比：4:5
ファイル形式：JPEG/PNG など
【Twitter】
・横長…解像度：1200×675px アスペクト比：16:9
・縦長…解像度：960×1280px アスペクト比：3:4
・正方形…解像度：1080×1080px アスペクト比：1:1
ファイル形式：JPEG/PNG/GIF
【TikTok】
解像度：1080×1920px アスペクト比：9:16 ファイル形式：mp4 など
【Facebook】
解像度：1200×630px以上 アスペクト比：1.91:1 ファイル形式：JPEG/PNG/GIF など
まとめ
これまでサムネイル制作のポイントを紹介してきましたが、今回紹介した方法以外にもやり方はたくさんあります。人気のある配信者のサムネイルや、自分が参考にしたいサムネイルを見つけて制作していくと、コツがつかみやすいかもしれません。
せっかくコンテンツの内容が良くても、サムネイルがイマイチだとそれだけで多くのユーザーを逃してしまいます。魅力的なサムネイルを設定することで、企業のイメージや商品の購入率をアップさせることができ、ビジネスの成功につながるでしょう。
この記事では基本的なポイントを紹介しましたが、コンテンツの特徴を適確に表現しようとすると、ある程度デザインの知識や技術がないと難しい場合があります。デザイン作成でお困りの際は、弊社でお手伝いさせていただきますので、ぜひお気軽にご相談ください。
WEBデザイナー ／ N.A
