アイキャッチとサムネイルについて知る
アイキャッチとは
アイキャッチは「目」や「注目」を意味するアイ（eye）と、「捉える」「掴む」を意味する“キャッチ”（catch）を組み合わせた和製英語。簡単にまとめるならユーザーの目を引き付けるために用意されるアイテム全般で、広義ではPOPのキャッチコピーなども含まれます。
Webサイトではページ上部に表示される、画像もしくは動画を指すのが一般的です。 SKILLHUBブログでも上部に画像がありますね。これがアイキャッチです。
Adobe Blogでは記事タイトルの下にアイキャッチが配置されています。
多少の違いはありますが、どちらも、ページをスクロールダウンしなくても見える範囲内。
ページを開いた瞬間、ユーザの目に入る場所にアイキャッチが配置されていると言えます。
上の例だけではなく、多くのWebサイトでもアイキャッチは同じあたりにあります。 これは、ユーザーの目を引き付け、そしてコンテンツ内容や雰囲気をビジュアルで伝えることで「おもしろそう」「読みやすそう」と感じてもらうことが目的のため。コンテンツを見てもらうために、アイキャッチはぱっと見える位置が良いのです。
サムネイルとは
サムネイル（thumbnail）とは、ファイルの中身がわかるように用意された見本画像のこと。 サムネールや、略してサムネとも呼ばれます。
画像ファイルの見本用画像のこと。英語で親指（サムthumb）の爪（ネイルnail）を意味し、一つの画像が親指の爪のように小さいことから、そうよばれている。
引用元：サムネイル - コトバンク
サムネイルの役割はファイル・詳細ページなどを実際に開かなくても、一目で中身の内容がわかるようにすることです。 元々は“親指の爪”が語源とされるように、画像や文書のファイルを縮小表示した画像が使われていました。
しかし、現在ではサムネイルに「内容を簡潔に説明しつつユーザーの目をひく」画像も使われています。
例えば、YouTubeでの動画一覧表示。 動画のワンシーンを縮小した画像ではなく、作り込まれた表紙のような画像も多いですね。こうした画像もサムネイルです。
また、Webメディアではアイキャッチを縮小した画像＝サムネイルになっているケースも多いです。 ページ上部の画像はアイキャッチ、サイドバーなどにある縮小したアイキャッチ画像をサムネイルと呼び分ける場合もあります。
サムネイルとアイキャッチの違い
- ユーザーの目をひきつけるためのアイテム＝アイキャッチ
- 内容がわかるように用意した縮小画像＝サムネイル
と、言葉の意味は違いますが、Webでのサムネイルとアイキャッチの呼び分けは曖昧です。
例えば、WordPressでは一覧表示に使われるのは「アイキャッチ」で設定した画像。 設定項目名がアイキャッチなので、一覧ページなどで表示する縮小されたアイキャッチ画像もそのまま「アイキャッチ」と呼ぶ方が多いです。
You Tubeでは、動画の見本として表示する画像の呼び名はサムネイル。 動画本編にない、表紙のような画像はカスタムサムネイルと呼びます。
このように、SNSやCMSによって使われる呼称が違うこともあります。 個人個人が使う呼び分けは更に曖昧。コンテンツのイメージ画像を総称してサムネイルという方も、アイキャッチと呼ぶ方もいます。
けっこう混沌としていますので、クライアントと話す時は伝わりやすさを優先しましょう。
色々なサムネイルを見てみよう
サムネイルの制作、デザインのポイントなどを学習する前に、色々なサムネイルを見てみましょう。
サムネイルを作成するには、写真やテキストなど「サムネイルを構成するパーツ」が必要です。 今回は使用する素材ごとに大きく4タイプに分け、それぞれのサムネイルが素晴らしいサイト・アカウントをご紹介します。
- 写真ベース
- イラストベース
- テキスト主体
- 組み合わせ（コラージュ・グリッド）
1.写真ベース
コンテンツにかかわる写真、動画から切り抜いた画像などをベースにしたサムネイルです。
ヒントマガジン - ハンズ
ハンズの『ヒントマガジン』で使われているサムネイルは、写真が主体。 Webマガジンやブログサイトの、オーソドックスなサムネイルスタイルと言えるのではないでしょうか。
写真のクオリティが高く、きれいなギャラリーのようにも見えますね。写真だけで分かりにくいものはテキストが加えられている、店舗限定のご案内は店名の入ったフレームを使う、などマガジンとしての工夫もされています。
タロサックの海外生活ダイアリーTAROSAC - YouTube
外国人へのインタビュー動画が人気のタロサックさんのチャンネルでは、動画のワンシーン＋キャッチーなコピーのサムネイルが使われています。フチ付きの大きめな文字でユーザーの興味をひく文言を入れる、ザ・You Tubeというサムネイルですね。
特に日本のYou Tubeではよく使われている、テンプレと言っても良いデザイン。 ユーザーにとって見慣れていることは、分かりやすさや安心感に繋がります。興味のある内容であればつい見てしまうでしょう。
くまの限界食堂 - YouTube
同じYouTubeでも、こちらは画像主体。 テキストは白一色、読みにくい時は背景に半透明の黒を入れる…というルールでサムネが作られているので、統一感があり、料理が主役として立っています。
monograph/ 堀口英剛 - YouTube
こちらも文字色は白で統一されていて、紹介アイテムを引き立てるデザイン。 同じフレームを使うことでサムネイルの統一感もありますね。幅広いユーザー層に好まれる、シンプルで洗練された印象のサムネイルです。
2.イラストベース
イメージイラストを全面、もしくはメインに使用したサムネイルです。 イメージ写真素材ほど、大げさな誇張表現、嘘っぽく見えないのもイラストを使うメリットです。下記の参考サイトのように、コンテンツが写真だと伝えにくいような内容の場合にも適しています。
WP EXPLORER
WP EXPLORERはWordPressのテーマやプラグイン、運用のためのトピックスなどを紹介されている海外サイト。
ブログのサムネイルはイラストで統一されています。 文字入れなどもされていない、イラストのみのシンプルなサムネイルですが、どんな内容なのかはパッと見て把握できますね。
INITIAL
スタートアップ向けの情報プラットフォームINITIALでは、イメージイラストとタイトルやコピーを組み合わせたサムネイルが多く使われています。写真だと表現しにくいコンテンツの場合、イラストを活用するとイメージを伝えやすいですね。
お役立ち資料 | ONLYSTORY
経営・営業支援のプラットフォームONLYSTORYの、資料サムネイルもイメージイラストが上手く活用されています。 タイトルの文字、イメージイラストのどちらもわかりやすく、クラデーションや配色でシンプルすぎないデザインに仕上がっています。
ホワイトペーパー系のサムネイル、アイキャッチにはイラストが使われている物が多いです。 イラスト系のサムネイルの参考を探す場合は、メディアサイトやSNSだけではなく、お役立ち資料・無料DL資料などのページも見てみましょう。
3.テキスト主体
タイトルや内容を示すキャッチコピーの「文字だけ」でもサムネイルは作れます。 ぴったりな画像やイラストが見つからない、そこまでサムネにお金や労力を割けない…なんて方も、参考にしやすいのではないでしょうか。
楽しく働くを語るラボ - Parque（パルケ）
“楽しく働くを語るラボ ”では、ジオメトリックな背景画像に文字を載せたサムネイルが多く使われています。 文字のみのサムネイルは単調・それぞれの記事の区別がつきにくいなどのデメリットがありますが、色を変えるなどの工夫で一覧表示も見やすくなりますね。
英語聞き流し | Sakura English - YouTube
You Tubeでも文字主体のサムネイルが設定されることもあります。 以下の“英語聞き流し”チャンネルでは、イラストや写真が使われているものも、文字のみのデザインもあります。
どれも、検索結果を流し見しているユーザーの目にも止まりやすい、You Tubeっぽいデザイン。 文字だけでも、画像やイラストを使ったサムネイルに負けないインパクトがありますね。
きるたいむ- Killtime - Instagram
きるたいむさんのアカウントでは、手書き調のアイコンと、コンパクトなコピーで構成されたシンプルなサムネイルを使われています。
インスタで使われているサムネイルは、全面を使ったものが大半。写真系は言うまでもなく、文字だけのサムネイルでも正方形のスペースを広く使っているものが多いでしょう。そんな中で、この余白が強いデザインは逆に目を引きますね。
4.コラージュ、グリッド
コラージュデザインは、写真や画像などバラバラの素材を組み合わせて1つの作品にするデザイン技法。 グリッドデザインは、決められたスペースを水平線と垂直線で分断し、できた格子を組み合わせアイテムを配置していくデザイン手法。コラージュの素材を配置する際にも使われます。
はな 女子力上げる自分磨き- Instagram
ザ・グリッド、というレイアウトでデザインされたサムネイルを使われています。
複数アイテムの紹介・比較などの時に、グリッドで写真を配置していくとスッキリと見えて良いですね。紹介アイテムが見やすいので「掲載アイテムが気になっている人」「そのジャンルで良いものを探している人」両方のアクセスが期待できます。
森の家 / Mori's house - YouTube
比較ランキングや、同系等のアイテムをまとめて紹介しているYou Tubeチャンネル。全体的にナチュラルなテイストで統一されています。
こちらも複数の画像をグリッド配置していますが、画像の切り抜き・透過はなし。 テイストが近いため写真そのままでも見やすく、サムネイルから「動画の雰囲気」と「情報量が豊富」ということがわかります。
HOUYHNHNM
オウンドメディアで使うサムネイルのお手本にしたいWEBマガジン、HOUYHNHNM（フイナム）。 グリッドデザインのサムネイルも多く見られますし、それ以外のデザインも全体的にハイセンス。
LDK編集部【公式】- Instagram
コラージュデザインの代表格と言っても過言ではない雑誌LDK。 公式インスラグラムでもLDKらしさ全開の、掲載商品を並べたサムネイルが使われています。
LDK公式Webサイトの方では、写真をベースにしたシンプルなサムネイルのほうが多く使われています。 たくさんのアイテムを並べたデザインが見たい場合は、インスタアカウントのほうが探しやすいです。
メルカリマガジン
メルカリマガジンのアイキャッチ/サムネイルでも、グリッドデザインは使われています。
『教えて✗✗先輩！』ではコラージュ、『MY REAL KEYWORD』では写真+フレームなど、連載毎にサムネイルが統一されています。色々なパターンのデザインをみることができ、オウンドメディアで“テンプレート”的なデザインを使うメリットも体感できます。
CULTIBASE
企業やウェビナーで使えるような、落ち着いたデザインのアイキャッチ/サムネイルが多く見られます。
抽象的な背景画像やイラストと、出演者の写真を組み合わせたサムネイルは業種問わず使えるデザインですね。 文字の入れ方が美しく、読みやすさと画像の綺麗さが両立されています。
そのほかサムネイル制作に役立つサイト
SAMUNE
色々なサムネイルを見たい、サムネ制作のお仕事を受けたけどアイディアが……なんて時には、サムネイルデザインを専門にしたギャラリーサイト『SAMUNE』がおすすめ。Categoryから業種やテイスト、色調ごとでの絞り込みもできます。
アーカイブされている量が豊富なので、困ったらまずこちらを確認すると良いでしょう。
Vook（ヴック）
Vook（ヴック）は、映像クリエーター向けのナレッジ共有サービス。 映像クリエーター向けだけあって、サムネイルのクオリティがとても高いです。
Canvaテンプレート
オンラインのグラフィックデザインツール『Canva』は、テンプレートを使って誰でも簡単に画像を作成できるのがウリ。用意されているテンプレート数も非常に多いので、アイディア探しに役立ちます。
そのほかに、Pinterest、Webデザインやバナーデザインのギャラリーサイトなども参考になります。
Web上に限らず、雑誌・本の表紙・商品パッケージなど、私達の周りにはデザインの参考になるものが溢れています。お仕事で必要な時にパッと調べられるのはもちろんですが、普段からちょっと意識しているとネタに詰まりにくくなります。