サムネイルとは？意味や画像のサイズ、作り方のポイントを解説

近年、スマートフォンやパソコン、SNSや動画サイトなど、様々な場所で目にする機会が増えた「サムネイル（サムネ）」。デザインや視認性に優れた「ユーザーを引きつけるサムネイル画像」とはどのようなものなのか、詳しく知りたいという方も多いでしょう。

本記事では、サムネイルの意味から画像選び・サイズ確認の重要性まで、押さえておきたい作り方のポイントを、分かりやすく解説します。

サムネイルとは

サムネイルとは、スマートフォンやパソコン、InstagramなどのSNS、YouTubeなどの動画サイトを利用する際に表示される、小さいサイズの画像です。

クリックして中身を確認しなくても内容が一瞬で分かるような、実際よりサイズを縮小して表示した画像をサムネイルと呼んでいます。以下で、意味や概要を詳しく確認しましょう。

● サムネイルの意味
● サムネイル画像の例

サムネイルの意味

サムネイルとは、英語で「thumbnail（親指の爪）」を意味する単語です。親指(thumb)の爪(nail)ぐらい小さなサイズの画像で、オリジナルデータを開かずにその内容・中身を確認できるため、インデックスやプレビュー、見本として使われています。

サムネイルは、大きいサイズの画像を掲載するより読み込みに時間がかからず負担も少ないこと、同時に多くのファイルデータを一覧化できることなどから、あらゆるサイトで活用されている、便利な縮小見本です。

また、近年よく耳にする「サムネ」とは、サムネイルの略称になります。「プロフィール」を「プロフ」と省略して呼ぶのと同様で、基本的には同じ意味を持つ単語だと理解しておきましょう。

サムネイル画像の例

サムネイル画像の具体例は以下になります。

● パソコンでデータを保存したらフォルダ内に一覧として表示される画像
● YouTube動画などの静止画として、その一場面を切り取って表示させた画像
● ニュース記事など、Webサイト内の記事に添えるサイズの小さい画像
● ショッピングサイト内の商品一覧画像

サムネイルの役割

サムネイルはただの画像ではなく、以下のような役割があります。

● コンテンツの一覧性向上
● ユーザビリティの向上
● 実際にコンテンツを見てもらえる可能性を高める
● サムネイルとアイコンやアイキャッチの違い

コンテンツの一覧性向上

サムネイルはWebサイト内のコンテンツを一覧表示し、当該Webページにはどのようなコンテンツがあるのかをユーザーに分かりやすく伝える役割があります。リンク先までわざわざ飛んでコンテンツ内容を確認しなくても、一目で分かるようにしています。

Amazonや楽天、Yahoo!ショッピングなどのECサイトにおいては特に必要不可欠で、サムネイルを使用しなければユーザビリティの悪いWebサイトとなってしまいます。

ユーザビリティの向上

サムネイルをカテゴリー分けして整然と陳列することで、ユーザビリティの向上にもつながります。どこにどのような情報やコンテンツがあるのかユーザーは一目で確認ができ、次々と内容を閲覧していけます。

こういったユーザビリティの良いWebサイトは、ユーザーにとって居心地の良いサイトとなり、サイト回遊率の改善やサイト滞在時間の増加にもつながるのです。

実際にコンテンツを見てもらえる可能性を高める

魅力的で注目を引くようなサムネイルは、ユーザーが思わずクリックしてコンテンツを実際に見に行く可能性が高まります。事実、YouTubeなどの動画サイトにおいて、サムネイルはフォントや背景色、レイアウトなどによって視聴回数に少なからず因果関係がある旨の研究結果を発表しています。

出所：電気・情報関係学会九州支部連合大会
（https://www.jstage.jst.go.jp/article/jceeek/2020/0/2020_323/_pdf/-char/ja）
（https://cir.nii.ac.jp/crid/1390286981376865408）

サムネイルに工夫を凝らすことは、クリック数を改善する上で非常に重要なポイントとなるのです。

サムネイルとアイコンやアイキャッチの違い

サムネイルに類似する対象として、「アイコン」や「アイキャッチ」が挙げられます。どちらもサムネイルと混同しがちな単語ですが、それぞれ別の意味を持っているため、注意しましょう。

アイコンとは、プロフィール画像としても使われるシンボル的なマークを意味し、その中身や内容を小さいサイズの画像・図柄で表したものです。スマホやパソコンのディスプレー上でも、そのファイル・プログラムの内容を象徴的な図・マークで表現しています。

一方、アイキャッチとは、ユーザーの目を引きつけるような画像・映像を指す和製英語で、発信する情報に興味や関心を持ってもらうために表示させるものになります。アイキャッチの大きさはSNSやWebサイトによって様々ですが、サムネイルはアイキャッチのサイズを小さくした画像で、内容や中身の目印となるような縮小見本です。

ただし、近年はSNS上で使用するプロフィール画像、アイコン画像、記事に添えた画像のことを、全てサムネイル・サムネと呼ぶことがあります。柔軟な対応ができるように、SNS上のあらゆる画像をまとめてサムネイル・サムネと称する場合があると理解しておきましょう。

関連記事：LINEアイコンの画像の設定方法！おしゃれな画像を設定する方法を解説！

サムネイル画像の選び方

ブログやYouTubeなどの動画サイトで、ユーザーが最初に目にするサムネイルの画像選びは重要です。一目見た瞬間に、記事や動画の中身・内容・意味が分かるような画像を選ぶこと。また、目立ったりインパクトがあったりするようなサムネイル画像を選ぶことが大切です。

サイトの雰囲気にもよりますが、基本的には明るく、目に留まりやすいテキスト文字を使用し、注目を集めるような文言を見やすい所に配置すれば、閲覧数やアクセス数を増やせる可能性があるでしょう。

数ある記事や動画の中で目立つためには、ユーザーの興味を瞬時に引くような工夫が必要です。サムネイルはあくまでインデックスやプレビュー、縮小見本であるということを踏まえ、内容の分かりやすさ・見やすさを意識しながら、他と差別化を図れるような画像を選択しましょう。

また、テキスト文字でサムネイル画像を装飾するのも、ユーザーから注目を集めるために必要な手法の一つです。画像だけでは補えない情報・意味を伝えたり、視覚イメージやデザイン性を高めたりしたいときには、サムネイルにテキスト文字を配置することが有効だと言えます。

テキストの可読性を上げるためには、背景とのコントラスト、バランスが大切です。使用するフォントの種類・サイズ・位置も工夫して、より魅力的なサムネイル画像を作ってみましょう。

情報が溢れている現代において、動画が再生されるかどうか、記事がクリックされるかどうかは「サムネイルで決まる」とも言われています。逆に言えば、魅力的なサムネイルの作り方さえ習得すれば、自身のコンテンツで継続的に高い成果を上げることもできるということです。

サムネイルの作り方を学ぶ際には、「効果的な画像の選び方」や「イメージに沿ったテキスト文字の作り方」を習得することがポイントになります。

関連記事：
・フリー素材をうまく活用しよう！著作権フリー画像を使用する際の注意点とは！
・フリー素材サイト7選／背景などの豊富な素材を無料でダウンロードできるサイトを紹介

サムネイル画像のサイズ

サムネイル画像の作り方を学ぶ際に、まず押さえておきたいのが最適な表示サイズです。

サムネイルはインデックスやプレビュー、縮小見本のような位置付けのため、元のデータを圧縮したり解像度を下げたりして小さいサイズにした画像が基本となります。サムネイル画像のサイズはそれぞれの媒体によって異なり、アップロードしたサムネイルのサイズが合わなければ、「背景やテキスト文字が切れる」ということも考えられます。

まずは自身が使いたいWebサイト、SNS、YouTube動画などで、実際にサムネイルが表示されるサイズと縦横比（アスペクト比：縦と横の長さ、画面比率）を確認しましょう。例えば、YouTube動画のサムネイル推奨サイズは「1280×720」（単位：ピクセル）で、アスペクト比は「16：9」です。（※2021年10月時点）

サムネイル画像として内容・意味、テーマが分かりやすいか、デザイン・テキストの見やすさに問題がないかなどは、細かく確認することが大切です。

サムネイルの作り方やポイント

サムネイルの意味や画像の選択、サイズを合わせるなどの基本が確認できたら、実際にサムネイル画像を作ってみましょう。

サムネイルの作り方・方法は様々ですが、「Photoshop」や「Canva」「Adobe Spark Post」などの画像処理ソフト、またはiOS（iPhone・iPod）のアプリなどを使って作ることもできます。自身や作業環境に合った作り方・方法を取り入れましょう。

● 動画サイト用サムネイルの作り方・ポイント
● SNS用サムネイルの作り方・ポイント

動画サイト用サムネイルの作り方・ポイント

写真加工や編集ができるソフトを使って、動画の説明文を見なくてもサムネイルを一目見てすぐに意味や内容が分かる画像を作ります。

例えば、Photoshopであれば新規作成で最初からサイズを設定するか、画像をドラッグ&ドロップで配置した後、大きさを調整しましょう。「編集」から「自由変形」の選択でも調整できます。

サイズを確定したら、「レイヤーマスク」で元画像の背景を消して目立つ背景を合成したり、「ウィンドウ」から「文字」を選択し、文字パネルを開いてテキストを配置したりして、画像に装飾していきましょう。

背景の上にそのままテキスト文字を置くと、文字と画像が重なって読みにくいことがあります。その場合は背景画像全体にぼかしを入れたり、太文字にしてその下を半透明にしたりするなど、見やすく効果的なサムネイルになるよう工夫しましょう。

また、2つの異なるシーンを同時に表示するような二分割のサムネイル画像で、ユーザーの好奇心を掻き立てる手法も有効です。

SNS用サムネイルの作り方・ポイント

SNS用のサムネイル画像も作り方は動画と基本的に同じですが、プロフィール画像やフィードに投稿する画像、シェア画像、広告画像など、SNS内のそれぞれの場所で推奨されるサイズが異なっている点には注意が必要です。

例えば、Twitterのアスペクト比は「16：9」で、プロフィール画像推奨サイズは「400×400」。ヘッダー画像の推奨サイズは「1500×500」です。（2021年10月時点）

SNSでは、画像や動画をアップロードすると自動的にサイズが調整されることが多く、推奨サイズ以外は、場合によって写真やテキストの一部が切れてしまうことも考えられます。どんなに魅力的なサムネイルでも、ユーザーに見てもらいたい、または強調したい部分が表示されなければ、思った以上に意味や内容が伝わらない場合があるかもしれません。

最適なサムネイルの作り方を習得する上でポイントと言えるのが推奨サイズの確認です。どのサイズがどのように表示されるのか、必ず前もって確認しておきましょう。

また、SNS用サムネイルとも呼ばれているプロフィール画像、アイコン画像は、自身を表す画像となるため、特に重要視されています。画像の選び方次第で、そのアカウントの第一印象やイメージが確定するということを踏まえると、個性的で覚えてもらいやすい、オリジナルのサムネイルを作ることがおすすめです。

まずは作り方のポイントを押さえて、各サイトのポリシーやガイドラインなどの規定に沿ったサムネイル画像を作ってみましょう。

関連記事：X（旧Twitter）のヘッダーとは？画像サイズや作成方法を紹介

サムネイルを作成する際の注意点

コンテンツのサムネイルに内容の異なるものを表示したとしても、大抵の場合違法とまではなりません。しかし、YouTubeなどの収益が発生する媒体においては、規約違反としてアカウント停止の対象になる場合もあります。

また、ECサイトなどにおいては意図的に内容を詐称したり、誇張したりしているようなサムネイルは刑法に抵触する可能性もあります。主にサムネイル作成の際には、以下の点に注意する必要があります。

● 著作権侵害に注意
● 差別表現や誹謗中傷に注意
● 内容の詐称や誇張に注意

著作権侵害に注意

知らず知らずのうちに犯してしまう可能性が高いのが「著作権侵害」です。

自分では身に覚えがなくても、当人から警告されてきたり、他人から指摘されたりして初めて気付く場合も多くあります。完全なコピーでないにしても、それほど変更が加えられておらず、参考にした媒体が分かってしまう程度だと、著作権侵害を主張されてしまう可能性もあります。

写り込みにも注意が必要

例えば、駅ナカやオフィス街などの風景写真を公表したつもりが、その写真において著作権侵害を指摘されることもあります。

写真の中のポスターや看板に描かれているキャラクターなど、他人の著作物が付随して写り込んでいることを「写り込み」と言います。こういったケースの場合、著作者に確認を取った上で公表するか、もしくは画像編集ソフトで著作物を消去またはモザイク処理を施してから公表する必要があります。

肖像権にも注意が必要

上述の「写り込み」によって著作物ではなく他人が写り込んだ場合、肖像権侵害が指摘されることもあります。肖像権とは、他人によって撮影された自分の写真などを無断で利用したり、公表したりできないように主張できる権利のことです。

上述の例のように、例えば風景写真を公表したつもりが、その風景写真に写っていた人物から警告を受けるといった事例もあります。この場合は上述同様に、人物を消去またはモザイク処理を施した上で公表します。

差別表現や誹謗中傷に注意

サムネイル作成においては、差別表現にも気をつける必要があります。国籍や人種、性別など特定の属性に関することや、容姿のこと、障害を持っている人のことなどを差別するような表現には細心の注意を払いましょう。

また、単に他人を誹謗中傷したような表現にも注意する必要があります。SNSにおいては炎上する可能性があるばかりか、名誉毀損などで民事訴訟になることもあります。さらに、名誉毀損罪や侮辱罪等が成立した場合、逮捕にまで発展するケースもあります。

内容の詐称や誇張に注意

特に動画サイトにおいて、コンテンツの内容とサムネイルが大幅に違うもの、もしくは全く関係ないものや過度に誇張された表現のものなど、こういったコンテンツを俗に「サムネ詐欺」「釣りサムネ」と呼びます。

単に再生数を稼ぐためだけの目的でこのようなコンテンツを投稿します。こういった事例に関しては、報酬の没収やアカウント停止の対象となる場合があります。

また、ECサイトなどにおいては、景品表示法の不当表示規制に抵触したり、詐欺罪が成立したりする場合もあります。景品表示法においてはユーザーにとって「優良」「有利」と誤認させるような「優良誤認表示」「有利誤認表示」などを禁止しています。

商品やサービスを購入させる目的で、嘘のサムネイルやタイトルを意図的に表示していた場合は、詐欺罪などが成立する可能性もあります。

サムネイルを作成できるおすすめツール3選

以下ではサムネイルを作成できるおすすめのツールを紹介いたします。

● Canva
● Photoshop
● PhotoScape

Canva

Canvaはオーストラリア発の無料グラフィックデザインプラットフォームです。CEOのメラニー・パーキンス氏、COOのクリフ・オブレヒト氏、CPOのキャメロン・アダムズ氏らによって創設されました。

何千点ものテンプレートやコンテンツが用意されており、それらを自由に選んですぐにデザインを完成させられます。

Photoshop

PhotoshopはAdobe inc.が販売している高機能ビットマップ画像編集アプリケーションソフトウェアです。

初リリースは1990年と2023年時点で33年目となるロングセラー商品です。当初は売り切りで販売されていましたが、2011年よりサブスクリプション型に大胆な移行を行いました。

画像の合成やぼかし、不要ポイントの削除、白黒のカラー化など画像編集に関することは、ほぼ問題なくできます。多くのデザイン会社や業界のプロフェッショナルから愛用されています。

PhotoScape

PhotoScapeは大韓民国のMOOII Techが開発した無料の画像編集ソフトウェアです。

基本概念は「簡単」「楽しい」で、撮影した画像をそのまま簡単に取り込んで、楽しく編集ができることを意識して作られています。サイズ変更や切り取り、色調整など基本的な画像編集機能はほとんど備わっており、PhotoScape一つあれば大抵の画像加工はできてしまいます。

関連記事：
・Canva（キャンバ）ってなに？初心者にも分かる使い方を解説します！
・GIMP（ギンプ）の使い方は？無料で使える画像編集ソフトの機能を解説

まとめ

様々な情報が溢れている時代において、発信した記事や動画を多くのユーザーに見つけてもらうには、一瞬で興味を引くようなサムネイル画像が欠かせません。細部までこだわったサムネイルは、閲覧者数を大きく引き上げ、記事やコンテンツの認知拡大に期待が持てます。

サムネイルの意味や作り方のポイント、画像を装飾する重要性を正しく理解し、各サイトの規定に沿った最適なサムネイルをデザインしましょう。