Illustratorで下準備
1280×720 で新規作成
Illustratorを開いて、「新規作成」を押します。
「Web」の中から「1280×720 px」を選びます（黄色の部分）
赤で囲った部分に自分で入力してもいいです。
- サイズ：1280px ×720px
- カラーモード：RGB
- ラスタライズ効果：150 ppi 以上
こんな感じで設定しておくといいと思います。
YouTubeのサムネイルのサイズは、基本的には1280px × 720pxです。
カラーモードは、RGBとCMYKというのがありますが、「CMYK」は印刷物をデザインする時に使います。
基本的にネット上でしか使わない画像であれば、「RGB」にします。
ラスタライズ効果は、ざっくり言うと、この値が低いと画像が粗く見えます。
150 ppiならとりあえず安心です。
値を高くしすぎると画像の容量も大きくなるので、YouTubeのサムネイルなら150ppiくらいでちょうど良いかと。
「レイヤー」と「アピアランス」を表示する
新規作成すると、こんな感じになります。
黄色で囲んだ部分は、「レイヤー」ウィンドウと「アピアランス」ウィンドウです。
作業するにあたって、最低でもこの2つは出しておきたいです。
出ていない場合は、メニューの「ウィンドウ」から選んで出せます。
レイヤーを整える
「レイヤー」ウィンドウの、右下の「＋」を押して新しいレイヤーをいくつか作っておきます。
このタイミングで作らなくても必要になった時に作ればいいのですが、
僕としては先にレイヤーをたくさん用意しておいた方がやりやすいです。
レイヤーには名前を付けられます。（文字の部分をダブルクリック）
大体いつもこんな感じです。
作業を進めていくと、ここからさらにレイヤーが増えたりします。
ガイドを作っておく
こんな感じのガイドを作っておくと、YouTubeのサムネイルを作る時にイメージがしやすいので説明します。
枠のガイドを作る
まずはガイド用のレイヤー（1番上のレイヤー）を選択します
長方形ツールを選択して、
キャンバスに四隅をピッタリと合わせるように長方形を作ります。
（この時点では、塗りつぶしや枠はなんでもいいです）
塗りを無しにして、枠をグレー系に変更します。
↑この部分でも色の変更はできますが、「アピアランス」ウィンドウからでもできます。
「アピアランス」の方が細かく設定できます。
「アピアランス」ウィンドウで太さを変更します。
太さを変更します。今回は50ptにしていますが、100pt～200ptくらいでも良いかもしれません。
その後、「線」を選択します。
「線の位置」の所で「線を外側に揃える」を選択します。
これで、キャンバスに被らない枠が出来ます。
時間表示位置のガイドを作る
↑これは、スマートフォンで見た時のサムネです。
（ヒカキンさんのチャンネル「HikakinTV」を例にしています。）
サムネイルの右下に、「〇〇：〇〇」と時間が表示されています。
サムネイルが大きく表示されている時はこのような表示は出ないのですが、
一覧でサムネイルが小さくなるとこういう表示が出たりします。
有名ユーチューバーの方々でも、そこまでこれを気にせずに結果を出しているので気にしなくても良いかもしれないのですが、
仕事としてクライアントに納品するのであれば、こういう部分にも気を配ってあげた方が印象も良いと思います。
今回は、スマホで先程のようなサムネイルのスクリーンショットを撮って、自分のPCに送りました。
それをIllustratorに読み込みます。（モザイクをかけています）
これを四隅にピッタリ合うように拡大します。
この時間表示の部分のガイドを作ります。
「長方形ツール」で同じ大きさの長方形を作ります。
不透明度は60～80％くらいにしておくと見やすいと思います。
これでガイドは完成です！
毎回作るのは面倒なので、これをテンプレートとして保存しておくのもいいですね。
写真や文字を配置する
ここからやっと、配置していく作業です。
この「写真01レイヤー」に、加工した写真を入れます。
重なり順を考えると、背景より上に来てほしいのと、テキストより下に来てほしいので、このあたりがちょうどいいです。
レイヤーを選んだ状態で、PSDファイルをIllustratorにドラッグ&ドロップします。
このようになります。
ここからは、バランスを考えながら写真や文字を配置していきます。
文字は左寄せにしました。
右下の時間表示の四角■に被らないようにするためです。
文字を装飾していきます。
これについては、説明すると記事1本分くらいになってしまうので、別記事で紹介します。
右下の四角■に少し被っていますが、この程度であれば読めるので大丈夫かなと思います。
会社で怒られている感じを出したかったので、オフィスの写真素材を背景にします(笑)
「背景01レイヤー」に入れました。
これだとちょっと背景が明るくて、写真と文字が目立ちにくくなりそうなので、背景を暗くします。
「背景01レイヤー」の上に「背景02レイヤー」を作ります。
動いてほしくないレイヤーはロックして作業します。（文字や写真など）
目のアイコンの右側を押すと、カギのマークが出てロックすることができます。
「長方形ツール」で黒い背景を作ります。
「プロパティ」で不透明度を下げていきます。
もうちょっと写真を目立たせたいので写真のまわりを白く縁取りしようと思います。
こういう感じにしたいので、Photoshopで作業します。↓
写真のまわりを白く縁取る
illustratorで写真をクリックして選んだ状態にすると、「クイック操作」というのがウィンドウに出てくると思うので、
「オリジナルを編集」を押します。
もし見当たらない場合は、写真素材のPSDファイルを普通に開いてください。
Photoshopで縁を作る
ここからはPhotoshopでの操作です。
切り抜いた写真の下に、レイヤーを1つ作っておきます。
作ってあったアルファチャンネルを選択して、下の方の点線の〇を押します。
このように白黒になって、選択範囲が作られます。
キスを迫っているシルエットみたいで気持ち悪いと思ったのは僕だけでしょうか(笑)
「チャンネル」タブで「RGB」を選択すれば、元の写真の状態に戻ります。
メニューから「選択範囲」→「選択範囲を変更」→「拡張」を選びます。
これで選択範囲を広げることが出来ます。
今回は15ピクセルくらいにしておきます。
選択範囲が拡張されました。
モザイク画像とはあまり相性が良くないですが、今回は気にせず進めます。
次は、縁にぼかしをかける作業をします。
「選択範囲」→「選択範囲を変更」→「境界をぼかす」
５ピクセルぼかします。このあたりは好みで。
メリハリのあるパキッとした印象にしたいのであれば、ぼかしはかけなくてもいいです。
そしたら、この選択範囲を白で塗りつぶします。
塗りつぶしツールを選択して、色を白（任意の色）にして、レイヤーを確認し、選択範囲の中を塗りつぶします。
こんな感じになりました。
（水色の背景は、わかりやすいように表示しただけです。）
白い縁のサイズやぼかし具合を替えたいときは、選択範囲の拡張とぼかしの手順の数値を変えればOKです。
これで素材の修正は終わりです。上書き保存します。
PSDファイルをIllustratorにリンクしているので、Illustratorに戻れば勝手に更新されます。
（Illustrator側で「更新しますか？」という表示が出ると思います。）
Illustratorに戻る
白い縁ができて、写真が目立つようになりましたね。
モザイクの部分は相性が悪く微妙な感じですが、そのへんはクライアントがどの程度を求めるかにもよりますね。
その他の効果を入れる
背景レイヤーと写真レイヤーの間に集中線（マンガとかで見る線）を入れると、迫力が出ます。
「集中線 フリー素材」などで調べれば、結構出てくると思います。
僕は有料サイトに登録していて、そこでダウンロードしたものを使っています。
これを１から作るのは骨が折れるので、ラクできる所はラクした方がいいです。
右上に「誰でも簡単！」とふざけて入れてみましたが、視認性（見やすさ）は微妙かもしれませんね。
水色+白 の配色だとコントラストが弱いので。
まぁおまけのテキストなので、そこまで目立たなくていいや と思ってこのままにしました。
保存のサイズ
保存する際には、ファイルサイズに気を付けた方が良いです。
まずは書き出し（保存）の画面を開きます。
「ファイル」→「書き出し」→「Web用に保存」を選択。
これはショートカットキー「Alt + Shift + Ctrl + S」でも開けます。（MACの場合は変わります）
よく使う人はショートカットを覚えた方が早いです。
保存形式は「JPEG」で良いかと思います。
基本的にはPNG形式より容量が軽いですし、仕事ならクライアントもJPGで要求してくることが多いと思います。
また、PNGだとファイルサイズを指定できないのですが、JPEGを選べばファイルサイズを調整できます。
黄色で囲んだ部分に「低画質」～「最高画質」があるので、プレビュー画面を見ながら選びます。
念のため、画像サイズも確認しておきます。（1280 × 720になっているか）
書き出し画面の左下を見ると、「566.3K」など、サイズが表示されています。
「このファイルサイズで書き出しますよー」という予告のようなものです。
YouTubeサムネイルは2MB以下と指定されているので、2MB（2000KB）以下ならOKです。
ただ、クライアント側からするとできるだけ軽いファイルサイズの方が嬉しいでしょう。
画質とファイルサイズのバランスを見ながら「低画質」～「最高画質」を選ぶといいと思います。
僕は普段「やや高画質」くらいにして、100～300KBで保存するようにしています。
.aiとしても保存
当然ですが、Illustratorファイル「.ai」としても保存しておきます。
（作業中はしょっちゅう「Ctrl + S」でこまめに上書き保存します。）
そして、次の作成を効率的にするために、この「.ai」ファイルをコピーして、次回以降も使っていきます。
キャンバスの外側に保管しておく感じです。
もちろん、次回以降もう使えない写真素材などは消していきます。
フォントはとっておくと本当に便利です。
これをどんどん繰り返していき、現在はこんな感じになっています。
かなり雑然としていますが(笑)
動画のイメージに合わせてフォントの装飾を作っていくことも当然多いのですが、
すでに作ったフォントでいけそうな場合はかなり時間が短縮できます。
素材の加工をしても10分くらいで作れることもあるので、取っておくと便利です。
最後に
いかがでしたか？
このクオリティで「１枚あたり 3300円」で受注できました。
12枚いただいたので39600円です。
しかも、１日もかからない作業量。
僕はまだサムネイルの仕事をし始めて6ヶ月です。
誰にも習っていません。ネットで調べながら作っているだけです。
サムネイル専門でやっているわけでもありません。
動画編集の仕事をしていて必然的にサムネイルを作る必要があったのでやってきただけです。
正直、そこまでクオリティが高いとも思っていません。
まだまだ改善点だらけですし、ソフトの使用に関してももっと効率よくできるでしょう。
でも、「サムネイルでお金を稼ぐ」のが目的なら、
クオリティを完璧にする必要は無いと思います。
お金の考え方については、こちらの記事にも書いてあるので、
合わせて読んでみてください。▼
「どうやってサムネを作ったらいいかわからない！」という人向けに、今回の記事を作成しました。
もし良ければTwitterなどのSNSでシェアしていただけると、非常に嬉しいです。
今後の情報を参考にしたい方は、
Twitterのフォローや、このブログのブックマークをよろしくお願いします！
テンプレート配布
今回作成したIllustratorデータを無料でダウンロードできるようにしました。
・再配布は禁止とさせていただきます。
・今回使用した写真などの素材は規約上入れられないため、抜いてあります。
・同梱してある「はじめにお読みください.txt」を読んでから使用してください。
・ダウンロードはこちらからどうぞ。(zipファイル 572KB）
