【第1回サムネイル道場】クリックされる！サムネイル画像のつくり方〜写真と文字のカンケイ編〜
こんにちは！
CB部クリエイティブディレクターの竹市です。
今回は、ブログを書き始めてからよく聞かれるようになった「サムネイルの作り方」について。
デザイナーに限らずPRするすべての人に役立つノウハウを、何記事かにわけて連載していこうと思います。
ブログやメディアで記事を書く人、Youtubeなどで動画を配信する人、仲間を集めるための募集ページを作る人…
ページに誘導するためのスキルはすべての人に必要といえます。
どんなにコンテンツが良くても、画像に引きが無いとなかなかPV数に繋がらない！ということは結構あるものです。
しかしどうしたら魅力的なサムネイル画像が作れるかわからない…！という方へ、これさえ気をつけるだけで見違える！という簡単なポイントをお話します！
ここで紹介する方法は、“見せ方の表現方法”であり、もちろんサムネイルに限らずさまざまな場面で使えるので資料を作る際など、日常的に意識してみてくださいね。
※基本的にノンデザイナーの方へ向けた内容となっています。
サムネイル画像/アイキャッチ画像とは？
よく聞く「サムネイル」とは、一般的に中身を開かなくても大体内容がわかる、縮小画像のことをさしています。
ブログにおいては、記事を開くと一番上に表示される画像でもあります。（アイキャッチと呼ばれることが多いです）
有料ツールがなくてもつくれる！
PhotoshopやIllustratorなど、有料のツールが無いと難しいと思っている方、そんなことはありません。
最近はweb上だけで無料でおしゃれな画像を作れるツールも充実しているので、こちらの記事も参照してみてくださいね。
canvaは日本語フォントも結構いろんなものが入っていたり、ツールも十分に揃っているので使いやすいです。
サムネイルの種類
サムネイルの表現を画像を大きく3つに分けると、こんな感じに分けられます。
・写真/イラストで表現する
・文字で表現する
・文字と写真/イラストで表現する
今回は、「文字のみ」と「文字と写真（またはイラスト）」の、文字の扱いにスポットしてお話していきたいと思います！
サムネイル初心者あるある
なーんにも考えずに作ると、よくありがちなパターンがこちら。
写真の上に薄い四角、の上に文字。
きれいな印象に・・・と思うとつい細いフォントを選んでしまったり・・・
写真も文字も見せたい、と思った結果どっちつかずのものができてしまったり。
では、一時期のCBplusのスタッフたち(非デザイナー)の作ったサムネイルを見てみましょう。
うーん、見事に初心者あるあるに当てはまっています（笑)
小さな文字を読まないとどんな内容なのか分からず、 読み手を考えたサムネイルとは言えません。
これからお伝えする内容は、こんな非デザイナーの方にこそ知ってほしい内容となっています。
文字と背景のカンケイ
文字を入れるサムネイルにする場合、文字が読めるということが必須です。
視認性・可読性を上げるため、「これだけ気にすればぐっと良くなる！」というポイントをご紹介します。
◆文字の場所は空ける
こちらのサムネイルを見てみると、文字を置いている後ろには見せたいものを被せず、文字と見せたいものをきちんと分けています。
これは撮影のときにサムネイルになることを想定して、文字を置く場所をあけて撮影をしています。
一見かんたんに感じますが写真の大事な部分に文字を置いてしまうなど、意外とやってしまいがちなので気をつけましょう！
◆背景にぼかしを入れて、その上に文字を置く
また、写真の上にそのまま文字を置いても読みやすくする方法もあります。
左はそのまま写真と文字を置いた状態。これでは文字と文字が重なって読みにくいです…。
右は背景の写真にぼかしを入れてその上に文字を置きました。（photoshopだとガウスで9.0pixel）
これだけでぐっと視認性が上がり、手前にフォーカスが当たっているような状態になりました。
これは全体的に見せたい写真、雰囲気が伝わればOKな写真の場合に使えます。
◆文字の下に別の色を置く
こちらは初心者あるあるでも紹介したように、背景＋カラー1色＋文字でサンドイッチする方法。
これで陥りがちなのは、つい後ろの写真も見せなきゃ！と思い半透明にし、写真も文字もどちらも見えにくくなってしまうパターン…。
こういう時は、潔く不透明にしたり、位置や効果を調整して「写真」と「文字」の住み分けをしましょう。
また、半透明でも文字をはっきり見せるこんな方法もあります。
ただ不透明度を下げるだけだと、なんだかぼんやりした印象になってしまいますが、レイヤー効果を変えてみると、また違った印象になるかもしれません。
その他、背景とコントラストをつけて文字を読ませる方法についてはこちらのまみたすの記事を参照してみてくださいね。
細すぎるフォントは使わない！
フォント選びも「目に入るサムネイル」には大事なポイントです。
ツールによって、使えるフォントがたくさんあるとつい“自分の好きなフォント”を選んでしまいますよね。
しかし！ここでの選ぶ基準は、小さくなっても読めること、ブログ内容にテイストに適していることです。
実際に表示された時のサイズを想定する
webでも印刷物でもそうですが、原寸のサイズで確認しながら作っていくことが大切です。
特にサムネイルの場合、思っていたより小さく表示されて、潰れて何だかわからない…ということになりがちです。
表示されるサイズは媒体によってさまざま。
メディアやブログ内では場所によってとても小さいこともありますが、Facebookやtwitterで流れてくるものは結構大きめだったりします。
小さくなってもインパクトあるサムネイルにするには、多少おおげさかな？と思うくらいの表現でちょうどいいと思います！
まとめ
ここまで紹介したテクニックをまとめると…
・文字は読めることが第一！
・文字の後ろは空けてあげましょう
・ぼかしやテーブルを使って文字を引き立たせましょう
・実際の最小表示サイズでクリックしたくなるか確認しましょう
簡単なことに思えますが、作ってみると意外とやってしまいがちな読めないサムネイル。
少しのことを気をつけるだけでPV数が上がるなら損はないので、ぜひチャレンジしてみてください！
わたしのこれまで作成したサムネイルはこちらの記事一覧から見れるので、ぜひ参考にしてみてください。
オルトプラスのインハウスデザイナー/クリエイティブディレクターです。
デザインの力で企業文化を明確化していくことをミッションとしています。
好きなものは映画とアメコミと横丁。