当コンテンツはPhotoshop初心者向けのYouTube用サムネバナー制作を通じてデザイン改善スキル向上講座です。初心者にありがちなデザインと改善パターン。デザインの本質とは？デザイン改善を行うステップなどについて解説します。
この記事の目次
当授業では主にYouTube（ユーチューブ）用のバナーデザインをはじめとしたクリエイティブのクオリティアップを実現できるようになるためのちょっとした「物事の見方」に関する内容を解説します。
2コマ（180分）という短い内容なので伝えられる事は限られていますが、デザインに対する考え方を意識するきっかけになれば幸いです。
下記はYouTube用サムネイルデザインの違いを並べた例です。
全て要素は同じですが、左図は初心者にありがちなパターン、右側は改善した例を掲載しています。
先に紹介したビフォーアフターの画像ですが、デザインに大きな違いがありますよね。
デザインとは「伝えたい情報を、目的に合わせて整理し、相手に届く形にすること」を指します。
- 誰に伝えるのか
- 何を一番伝えたいのか
- どう見せたら早く正しく伝わるのか
一旦上記の3点を頭に入れておくと、一例ですがデザイン作業でありがちな下記工程の意味が何となく分かる気がしますよね。
- 文字サイズを調整 → 情報の優先順位を伝えるため → 内容の伝達最適化
- 背景色を変更 → 文字情報を読みやすくするため → 内容の伝達最適化
- 人物を右に置く → 左側に情報を整理するため → 内容の伝達最適化
- 色数を減らす → 視線の迷いを減らすため → 内容の伝達最適化
- 余白を作る → 情報のまとまりを理解しやすくするため → 内容の伝達最適化
何かを比較した際や改善案を出す際に、「右の方が何となくいいかも」といった曖昧な表現ではなく、「〇〇だからAの方がBと比べると〇〇じゃないのかな？」といった案や仮説をそれっぽく具体的に言語化できるようになると今後何かと役に立つかもしれません。
例えば自身が作成した制作物に対して他者から「〇〇はこうなってるけど何でココは〇〇という表現にしたの？」といった質問に対して「あー、いやー、何となく…カッコいい、みたいな？へへ…」
質問内容がクリエイティブの内容である・そうでないに関わらず、社会人になってからそんな返答をしようものなら…ちょっとしんどい現実が待っていそうな予感がしますよね。
内容が正しい・正しくないは一旦置いておき、「即興でそれっぽく言語化できる」というのはそれなりに説得力が発生します。よって日頃から言語化する癖をつけておく事をオススメします。
BGMチャンネル風サムネ
仕事や作業用のBGMとして重宝するこの手のチャンネルのサムネ、見かけますよね。
イラスト素材の上に文字やアイコン等をPhotoshopやIllustratorで入力するパターンです。
まずは上記サンプルから言語化っぽい事をしてみましょう。
- フォント、もっちゃりして雰囲気と合ってませんよね
- ただ単に文字が入ってるだけ、ってイメージかな？あとデカすぎかも
- 背景のごちゃついた場所と文字類が重なって見づらい気がする、視認性？って言うのかな？
- フォントの色、なんかきついように見えるのは気のせい？
- イラストのコア部分とロゴ類が被って勿体ないきがするんですけど？
まずはこんな感じで合ってる・合ってない関係無くダメ出しを言語化してみましょう。
「なんか変」とか曖昧な表現はなるべく使わないように、具体的な表現で言語化してください。
- フォント、もっちゃりして雰囲気と合ってませんよね
→ゴシックじゃなくて線の細い明朝系フォントにしたらマシになる？ - ただ単に文字が入ってるだけ、ってイメージかな？あとデカすぎかも
→文字サイズや色に変化を入れてロゴっぽくして全体をサイズ調整してみようかな？ - 背景のごちゃついた場所と文字類が重なって見づらい気がする
→ごちゃついてない場所に置いて下地を少し暗くしみる？ - フォントの色、なんかきついように見えるのは気のせい？
→イラスト内の近しい色を彩度抑えめで柔らかめの色にしたら馴染むかな？ - イラストのコア部分とロゴ類が被ってると思うんですけど
→被っても問題なさそうな場所に移動してみますか
すると言語化した指摘部分に対してそれっぽい具体的な改善案が出てきやすくなりますよね。
繰り返していくと言語化や改善案の精度はおのずと向上します。
デカい文字はドーンとデカく、優先順位の低い文字はちょびーんと小さく。情報の優劣に合わせてダイナミックに強弱を付けると眠くない絵にできます。
続、異世界系BGMチャンネルのサムネです。
同じ手順でやってみましょう。
- よく分からんけど全体的にイモ臭い、なんで？気になる個所を箇条書きで挙げてみよう…
- フォントが大味な印象なんかな？
- 背景の白い所と白い文字が重なって見づらいし
- そもそも絵と字、合ってんのコレ？もしかしてフォント変更した方がいいのかな？
- 壮大なイメージやのにカメラ寄りすぎでちいちゃい絵になってる気がする、よく分からんけど
主な改善点：フォント周りが全滅、引き出しが少ない人は想像で作らず資料を見て作りましょう。
- 異世界ＲＰＧ等で新しい場所を訪れた際に表示されるＵＩの様なイメージに
- フォントを明朝系で繊細に、ジャンプ率高めて文字に強弱を付ける
- 文字を見やすくする為に左端に軽く暗いグラデを追加
- 文字に軽くドロップシャドウを追加して質感付与
- 文字色は真っ白ではなく、少し透過させて馴染ませる
サンプルは上記の改善を加えていますが、言語化する事である程度近い案が出やすくなると思います。
ついでに色彩検定の資格を取れば履歴書に書けますよ。検定の難易度はそこまで高くないです。
やってみた系の企画モノ
この手のチャレンジ系動画、量産型コンテンツでよく見かけますよね。
正直サムネのインパクト命です。
内容以上にモリモリにして大げさな仕草や表情といった情報を盛り込んで、文字情報は必要最低限。
- メインビジュアルが地味っぽいね、あと色悪くない？
- 表情おもんないよね、はっちゃけてみたら？
- キッチンの表示面積というか、画面の余白？がやたらデカいような…
- プリンのデカさが伝わらんよね、一応でかいけどさ、地味、とにかく地味
- 余白とかいらんのでドーンとインパクトある絵なんていいんじゃないの？しらんけど
主な改善点：サムネ写真の鬼リテイク、写真素材命です。
Vチューバーやキャラ系と実写
本人は顔出しせず、Vチューバーとか東方みたいなキャラを代わりに出演させるタイプのコンテンツってありますよね。コレ系はキャラに合うように加飾してあげると世界観が深まりそうですよね。
- 文字が地味と言うか、ただ入れてるだけで創意工夫が無いよね
→アニメっぽいロゴにして遊びを入れたら変わるかな？ - 写真、暗くてあんま美味しそうに見えないんですけど
→補正入れて明るくして彩度高める、とか？ - 料理目立たないね、パンチが弱い
→割れたブラータをでかく映してみようかな - キャラが妙に浮いてる気がするんだけど
→ロゴ化、背景イラスト化、エフェクト追加で馴染ませると？
テイストの違う実写コンテンツとアニメコンテンツの融合は少し制作コストが高くなりがちです。それなりに観察力とクリエイティブ力がないとチグハグ感丸出しに仕上がる可能性があるのが注意点です。
自主制作の映画とか短編
この手の本腰入れて映画や短編を作りました系は奇をてらわず、作風に合ったバナーでキッチリ仕上げるのが定石です。デザイン全般において言える事ですが、フォントの選定、大きさ、カラー、置き方を少し変えるだけで印象が全く異なる作品に仕上がりますよ。
- これって何のジャンルでしたっけ？サスペンスホラー？あんま見えないかも…
→ビジュアルの色味をサスペンスやホラー寄りにしてみる、とか？ - 画面がいっぱいいっぱいで、見てると疲れてくる
→余白持たせて画面に余裕作ったら落ち着く？ - 文字情報の主張が強いというか、「文字！」って感じですね、何とかならんの？
→細めのフォントと色合いで繊細さを出して整列したらどうかな、文字サイズに強弱つけて - 赤線、主張激しいね、劇中で何か重要な色？
→それなりに重要だけどアクセント程度、細くしたりグラデで薄く消したりして対応
素材画像をそのまま使うのではなく、より世界観に適した加工をする事で「シズル感」が出ます。要は「それっぽさが強調される」という意味です。
チュートリアル系
動画編集をはじめとしたチュートリアル系チャンネルのビジュアル例です。左のデザインを少し整える方向性でもいけそうですが、せっかくなので動画編集ソフトであるプレミアのパーソナルカラーを枠に入れて世界観を出してみるのもアリかもですね。枠デザインを共通化する事でチュートリアルシリーズの統一感も出せるでしょう。
- AEのチュートリアルを出した時に、見た目を差別化できると分かりやすいかも、しらんけどー
→せっかくなので枠デザインを追加してみる？ - 背景の編集画面と手前の文字が重なってる個所、見づらいかも
→黒のべた塗りを薄くして重ねたりシャドウ追加して視認性を向上させてみるといいのかな？ - 解説者、前面に押し出し過ぎ？背景と同化しちゃってるし
→小さくして枠を追加して調整してみるとか？
商品の提供元とレビュー系
こういうガジェットの開発元チャンネルの公式動画コンテンツもありますよね。
ゴテゴテしたインパクトさより、商品そのものに焦点を当ててスッキリ上品に見せるやり方。
改善前の方向性はいいけど、少し惜しいパターンですね。
- 線や文字の強弱を強く、先に解説した「ジャンプ率」を意識
- 余白を意識
文字サイズや余白、線の太さを少し変更するだけで印象は変わります。
ただ「入力して終わり」「置いて終わり」ではなく、調整を必ず入れる癖を付けましょう。
この手のガジェットを使って比較してみました、レビューしてみました系もよく見かけますよね。
「ガジェットそのもの」の世界観より、チャンネルの風味が色濃く出るデザインが多いです。
そもそも流入経路の大半がSNS経由かもしれないですし、サムネを変える事で更に視聴回数が稼げるかもしれないし、逆かもしれないし。要因が複数絡んでくるので一概にコレってのはありません。
上記で紹介したサムネはあくまで一例なので、自身で色々試行錯誤して表現を作って公開し、数字や実際の反応を見て検証・改善しながら方向性を見出していくのが経験と言う力に繋がると思いますよ。
Photoshopを使ってYouTube用のバナーに仕上げるプロセスを簡単に紹介します。
Photoshopの基本的な使い方はコチラの記事で以前解説しているので参考にして下さい。
PhotoshopでYouTubeのバナーサイズ（1280×720、72px/inch）のドキュメントを作成し、デザインを組み立てていきます。まずは写真やイラストなどのメインビジュアルを [ 配置 ] しましょう。
単に「文字を入力したら終わり」だと雑な仕上がりになるので、必ず調整を行う癖を付けてください。
デザインセンスの向上には知識のインプットと実際の制作をこなす、これに尽きます。
まずは「良質なサンプルを真似する」事から始めるのが効率的です。
デザインの引き出しが少ない状態で「想像だけで作る」のはオススメできません。
超高確率で先に紹介したビフォーみたいな仕上がりになります。
作りたいイメージに近い良質なサンプルを探す、そしてサンプルの細部まで再現する、その中に少しオリジナリティを加える。これらを繰り返していくと所謂「デザインセンス」、つまり「情報の最適化処理スキル」が身に付き始めます。
オススメの参考資料
下記はデザインに関するオススメの書籍です。通学中の電車内などでサクッと読める内容ですよ。
就活を行う上で欠かせないポートフォリオでも世界観の作成は重要です。
とりあえず必要な情報を入れて見られる状態にしましたけど何か？だと、先に挙げたビフォーのバナーと同じ状態です。動画の内容が良くても最悪見てくれない可能性が出てきます。
フォントの選定、文字サイズや色の調整、ちょっとした画像のレタッチをちょこっと入れるだけで印象が大幅に変わりますよ。
Web媒体のポートフォリオ作成は、AdobeCCを使っている方ならAdobePortfolioやBehanceあたりの使用がオススメです。
紙媒体のポートフォリオを作りたい方はポートフォリオテンプレートを活用すると効率的に作れます。