【第1回サムネイル道場】クリックされる！サムネイル画像のつくり方〜写真と文字のカンケイ編〜

こんにちは！ CB部クリエイティブディレクターの竹市です。

今回は、ブログを書き始めてからよく聞かれるようになった「サムネイルの作り方」について。 デザイナーに限らずPRするすべての人に役立つノウハウを、何記事かにわけて連載していこうと思います。

ブログやメディアで記事を書く人、Youtubeなどで動画を配信する人、仲間を集めるための募集ページを作る人… ページに誘導するためのスキルはすべての人に必要といえます。

どんなにコンテンツが良くても、画像に引きが無いとなかなかPV数に繋がらない！ということは結構あるものです。 しかしどうしたら魅力的なサムネイル画像が作れるかわからない…！という方へ、これさえ気をつけるだけで見違える！という簡単なポイントをお話します！

ここで紹介する方法は、“見せ方の表現方法”であり、もちろんサムネイルに限らずさまざまな場面で使えるので資料を作る際など、日常的に意識してみてくださいね。

※基本的にノンデザイナーの方へ向けた内容となっています。

はじめに

サムネイル画像/アイキャッチ画像とは？

有料ツールがなくてもつくれる！

PhotoshopやIllustratorなど、有料のツールが無いと難しいと思っている方、そんなことはありません。 最近はweb上だけで無料でおしゃれな画像を作れるツールも充実しているので、こちらの記事も参照してみてくださいね。

みなさんこんにちは！CB部PRのさいまりです！今回は、「デザイナーにお願いするには忍びない、ちょっとした画像の加工」でつかえる、無料ツールをまとめて紹介します！ガンガンいきますよ！（私のブクマが火を噴く）デザインツール「Canva」https://www.canva.com/以... フォトショいらず？便利なオンライン画像加工ツールまとめ！ - CBplus canvaは日本語フォントも結構いろんなものが入っていたり、ツールも十分に揃っているので使いやすいです。

サムネイルの種類

サムネイルの表現を画像を大きく3つに分けると、こんな感じに分けられます。

今回は、「文字のみ」と「文字と写真（またはイラスト）」の、文字の扱いにスポットしてお話していきたいと思います！

サムネイル初心者あるある

なーんにも考えずに作ると、よくありがちなパターンがこちら。

写真の上に薄い四角、の上に文字。 きれいな印象に・・・と思うとつい細いフォントを選んでしまったり・・・ 写真も文字も見せたい、と思った結果どっちつかずのものができてしまったり。

では、一時期のCBplusのスタッフたち(非デザイナー)の作ったサムネイルを見てみましょう。

うーん、見事に初心者あるあるに当てはまっています（笑) 小さな文字を読まないとどんな内容なのか分からず、　読み手を考えたサムネイルとは言えません。

これからお伝えする内容は、こんな非デザイナーの方にこそ知ってほしい内容となっています。

文字と背景のカンケイ

文字を入れるサムネイルにする場合、文字が読めるということが必須です。 視認性・可読性を上げるため、「これだけ気にすればぐっと良くなる！」というポイントをご紹介します。

◆文字の場所は空ける

一見かんたんに感じますが写真の大事な部分に文字を置いてしまうなど、意外とやってしまいがちなので気をつけましょう！

◆背景にぼかしを入れて、その上に文字を置く

右は背景の写真にぼかしを入れてその上に文字を置きました。（photoshopだとガウスで9.0pixel） これだけでぐっと視認性が上がり、手前にフォーカスが当たっているような状態になりました。

これは全体的に見せたい写真、雰囲気が伝わればOKな写真の場合に使えます。

◆文字の下に別の色を置く

これで陥りがちなのは、つい後ろの写真も見せなきゃ！と思い半透明にし、写真も文字もどちらも見えにくくなってしまうパターン…。

こういう時は、潔く不透明にしたり、位置や効果を調整して「写真」と「文字」の住み分けをしましょう。

その他、背景とコントラストをつけて文字を読ませる方法についてはこちらのまみたすの記事を参照してみてくださいね。

こんにちは！コーポレートブランディング部広報のまみたすです。もしかしたら、お気づきの方もいらっしゃるかと思いますが、最近CBplusの更新に力を入れており、更なる盛り上がりを見せています！来年から始まる新新企画『オフィスハッカーを探せ』も楽しみにしてい... キレイに早く！ぶきっちょ的、一番簡単なサムネイルの作り方 - CBplus

細すぎるフォントは使わない！

フォント選びも「目に入るサムネイル」には大事なポイントです。

ツールによって、使えるフォントがたくさんあるとつい“自分の好きなフォント”を選んでしまいますよね。 しかし！ここでの選ぶ基準は、小さくなっても読めること、ブログ内容にテイストに適していることです。

実際に表示された時のサイズを想定する

表示されるサイズは媒体によってさまざま。 メディアやブログ内では場所によってとても小さいこともありますが、Facebookやtwitterで流れてくるものは結構大きめだったりします。

小さくなってもインパクトあるサムネイルにするには、多少おおげさかな？と思うくらいの表現でちょうどいいと思います！

まとめ

ここまで紹介したテクニックをまとめると…

・文字は読めることが第一！ ・文字の後ろは空けてあげましょう ・ぼかしやテーブルを使って文字を引き立たせましょう ・実際の最小表示サイズでクリックしたくなるか確認しましょう

簡単なことに思えますが、作ってみると意外とやってしまいがちな読めないサムネイル。 少しのことを気をつけるだけでPV数が上がるなら損はないので、ぜひチャレンジしてみてください！

わたしのこれまで作成したサムネイルはこちらの記事一覧から見れるので、ぜひ参考にしてみてください。

第二回はこちらから。 もうワンランク上の文字の扱い方についてのお話をしています！

こんにちは！CB部クリエイティブディレクターの竹市です。先日から、非デザイナーの方向けにブログや動画で役立つ「サムネイルの作り方」の記事の連載をはじめました！これからPRするすべての人に役立つノウハウを、何記事かにわけて連載していこうと思います。前回... 【第2回サムネイル道場】最小の情報で最高に心を掴むサムネ画像！〜文字の扱い方編〜 - CBplus

#TAKEICH #PV上がらない #おしゃれ #サイズ #素敵 #画像 #youtuber #サムネイルとは #ブランディング #インパクト #ヘッダー #可読性 #サムネイル #youtube #デザイナー #かわいい #ブログ #竹市綾香 #動画 #レイアウト #バックオフィス #サムネイル道場 #読みやすい #フェイスブック #かんたん #トップ画像 #CB部 #アイキャッチ #コーポレートブランディング #アイコン #オリジナル #PV #インナーブランディング #クリック #企業ブランディング #ノンデザイナー #Facebook #PV上げる方法 #デザイン #まじめ #作成 #視認性 #道場 #かっこいい #魅力的 #１ #twitter #クリック率 #ロゴ #プレゼン #文字 #ライター #資料 #カンケイ #プレゼン資料 #簡単 #写真 #オルトプラス #つくりかた #TAKEICHI #つくり方