心を動かす サムネイル の作り方Photoshop

こんにちは、フルタニです。放送局で番組作りをしてました。

YouTubeで注目される動画を作りたいなら、サムネイルを工夫するのが早道です。

なぜなら、YouTubeを見る人は忙しく、秒速でサムネイルを見てみたい動画を判断するからです。

自分で作れないときは外注するという選択肢もありますが、できることなら自分で作れるようになりましょう。ポイントは人の評価なんか気にしないこと。

人真似をしながら積み重ねていくうちに上手くなります。

Photoshopでサムネイルを作るには

サムネイルを作るにはPhotoshopやIllustratorなどの画像加工ソフトを使うと便利です。

パワポを使えば、複雑なフォトショップなどを使わずにも、簡単に印象的なサムネやトップ画像が作れます。

サムネイルで使えるパワポ・テンプレートを提供します YouTube、ブログ、ココナラなどですぐ使えるテンプレ集 | その他（デザイン） | ココナラ

出来栄えは見た目に平均点で、既視感を感じるため、稼ぐサムネイルとしては力不足です。

Photoshopでは画像の加工が、Illustratorでは作画やレイアウトなどが得意。

平凡に見えるテキストも、サイズや色、フォントや配置を自由自在に配置することで、あっという間にインバクトのあるデザインなります。

今回はPhotoshopを使って下記のようなサムネイルを作りました。

テキストを中心としたデザイン案です。背景に写真を一枚用意して、その手前にシンボルロゴの画像を配置したシンプルなものです。

PowerPointなどでもサムネイルは作れますが自由度は限られます。

Photoshopを使うとテキストの色や輪郭、変形は自由自在。イメージにあったデザインを手軽に作ることができます。

作り方

Photoshopを起動します。

アートボードの書式を選びます。
YouTubeのタイトル用のサムネイルは標準となる縦横サイズが指定されています。

WordPressなどのブログで使うサムネイルはそれほど高画質にする意味はありません。
私の場合はブログの速度を上げるため画質の劣化は気にせず、縦横比は16:9、640×360に統一しています。

サイズは人それぞれでいいと思うので、自分がよく使うサムネイルはテンプレートにして保存し、必要に応じて使い回しましょう。

まず、主役となるテキストを画面上に配置します。

続いて説明用のテキストを画面上に配置してサイズを変えて、バランスを確認します。

テキストのサイズを変えるにはCtrl+Tをクリックした後、縦横比を変えないようにAltを押しながらサイズを変えます。

アイキャッチ用の画像を画面上に並べバランスを見ます。

テキストと画像のレイアウトが決まったら色付けなどテキストの加工を始めます。

テキストの胴体に当たる部分にグラデーションをかけたい時は、かけたいテキストをレイヤー上でダブルクリックすると編集窓である「レイヤースタイル」画面が開きます。

「グラデーションオーバーレイ」にチェックを入れてクリックするともう一つの編集画面が開くのでカラーや比率、スタイルなどを調整することで平面内にグラデーションを作ることができます。

まず、テキストのフォントを決めます。

テキストを範囲指定すると指定した範囲のフォントを変えることができます。

「文字」「フォント」から任意のフォントを選択します。

日本語フォントには明朝体とゴシック体など様々なものから選べますが、サムネイルによく使われるのは視認性の高いゴシック体です。

さらにフォントにはウエイトと呼ばれる太さの違いがあります。サムネイルには極太のHヘビーが使われることが多いので、はじめのうちはゴシック+Hでデザインしてみましょう。

※テキストに使用するフォントは、AdobeCCに同梱されるフォントから選び放題。フォントの著作権は書き出してしまえば気にする必要はありません。

フォントが決まったら輪郭線を追加します。

レイヤーから「改善」と書かれたテキストを選びクリックすると「レイヤースタイル」の編集窓が開きます。

「境界線」にチェックを入れると編集ができるのでサイズやカラーを選びます。

「境界線」は追加できるので輪郭を追加したいときは、右わきにある「+」を選択して作業を繰り返します。

同様に説明用のテキストにも輪郭や色を足して様子を見ます。

テキストの背景に枠を入れるには、長方形をクリックして描画します。

「長方形1」というレイヤーが出来上がるのでマウスで移動させ、テキスト 「プロキシメディアだからできる」 の下に移動します。しかしこのままでは同色なので文字が消えてしまいます。

背景とテキストの配色を変えるには、レイヤーを指定してカラーパレットを調整します。

レイヤーから「プロキシメディアだからできる」を選択し、文字パレットのカラーをクリックするとカラーピッカーが表示されるので新しい色を白に変えました。

続いてアイキャッチ用のロゴ画像をサムネイルの余白に貼り付けます。

用意したロゴ画像には余白が付いているので余白を取り除きます。

まずサムネイル編集画面とは別ファイルにロゴ画像を読み込みます。

切り抜くにはPhotoshopの「オブジェクト選択ツール」を選択し、範囲を指定するとロゴと周囲の境目を自動的に認識します。

Ctrl+CとCtrl+Vを押して複製（レイヤー1）をとります。

すると背景をカットした画像が出来上がるので、そのままサムネイル作成中の画面にドラッグ&ドロップすると読み込まれます。

ロゴ画像はレイヤー2に配置されました。

最後に全体の背景に使う画像を読み込ませ、一番奥の背景に配置します。

ファイル名をつけて保存します。

最後にCtrl+Shift+Alt+Sを同時に押すとプリントアウト画面が開くので、ファイル形式をPNG、サイズを指定して書き出します。

まとめ

サムネイルデザインは、毎回新しく作るのではなく、使用するチャンネルに合わせて基本パターンとなるデザインを作り使いまわすことを検討しましょう。

必要に応じて手直しすることで効率をあげることができます。

また、思い切ったデザインにチャレンジすることで自分のポートフォリオを充実させることもできますし、使いやすいデザインは素材として個人販売することも可能です。

Photoshopで作るサムネイルテンプレートの購入ページ

時間の余裕をみて作りだめしましょう。

サムネイルを購入する場合の注意点は、著作権がセーフかどうか。

特に人物が映りこんでいる場合は注意した方がいいです。サムネデザイナーは写真家を生業としているわけではないので人物写真はほとんどの場合ストックフォトになります。

人物などの画像素材は含まれない。イラスト素材は含まれない。フォントは含まれない。など第三者の著作物の有無を中心に利用条件を確認しましょう。

権利処理が適正に行われていなかった場合は思わぬ火の子を被ることがあります。