ビジネスマンのための資料デザインの教室

デザイン知識がなくても大丈夫!簡単にバナー・サムネイルが作れる3つのコツ

2020/03/16
 
ビジネス,デザイン,サムネイル,画像,バナー,YouTube
この記事を書いている人 - WRITER -
1984年東京生まれ。 デザイナーであった親の影響もあり、学生時代からデザインに関心を持ち、デザインの中ですくすくと成長。大学卒業後は都内出版社に入社し、編集部で書籍やWebサービスの企画・編集・ディレクションを幅広く担当。その後経営企画部を経て独立し、株式会社トリッジを設立。 現在は、同社でWeb・グラフィックデザイン、メディア運営の事業を中心に展開しつつ、企業や個人向けにデザイン・資料作成の講師兼アドバイザーとしても活動。 “日本最大まなびのマーケット『ストアカ』”にて開催されているPowerPoint作成講座では、ストアカ全登録講師25,000人の中で2019年トップレビューを獲得(ユーザー平均満足度95%以上を現在進行形で獲得中)。著書に『ひと目で伝わるプレゼン資料の全知識』(株式会社インプレス、2020年3月発行)がある。 趣味は、美味しいものを食べて飲んでケラケラ笑うこと♪

当ブログでは、ビジネスシーンで“誰でも・手軽に使える”デザインノウハウ・テクニックをお伝えしています。
今回もとっても役立つ&すぐに明日から使える資料作成の“極意”が詰まっていますので、ぜひご覧くださいね٩( ‘ω’ )و

今回は「バナー・サムネイル画像」を作る際のポイントについてです。
営業支援系・Web担当の方などに役立つ内容かと思いますので、ぜひご参考にしてくださいね!

 

バナー・サムネイル画像って、どうデザインしたらいいの?

dummy
神楽くん

トリジ先生、助けてください!最近社内のWeb担当に任命されたんですけど、いきなり上司から「サイトに載せるバナー画像作っといて!」なんて言われちゃいまして(汗)
画像編集ソフト(Photoshop)の使い方はなんとなくわかるんですが、どうデザインしたらいいのかさっぱりでして…。

dummy
トリジ先生

なんと、Web担当になったんですね!君にそんな重要な役割を与えるなんて、会社もなかなか大胆なことをしますね!

dummy
神楽くん

そ、そうですよね…ハハハ(今のってやっぱりディスられてるよね…(・_・))
とりあえず!初心者の僕でもうまくバナーを作るコツとか教えてください!

dummy
トリジ先生

わかりました、ではとりあえずバナー作成初心者の方が「ここはまず押さえておきたいコツ」に絞って、一緒に学んでいきましょう。
YouTubeのサムネイル画像を作る際の参考にもなりますよ!

 

バナー・サムネイル画像をデザインする際のコツ【基本編】

自社サイトや広告用のバナー画像をいきなり「作れ!」と言われても、ノンデザイナーである一般的なビジネスパーソンは、どんな風にデザインしたらいいのかさっぱり検討もつかないのではないでしょうか。

そのため結局「外注するしかないか…」なんてケースがほとんど。でもそれだとコストもどんどんと膨らんでいってしまうし、仕事のスピード感も失われていきます。

また、最近では企業・個人ともにYouTubeアカウントを持って動画を投稿するケースも増えてきていますが、YouTubeにおいても目を引くサムネイル画像を用意する必要があります。

そのような意味でも、実は現在の多くのビジネスパーソンにとっては、「バナー・サムネイル画像の作り方のコツ」は是非とも押さえておきたいノウハウであると言えるのではないでしょうか。

dummy
トリジ先生

バナー・サムネイル画像をデザインするには、もちろんある程度のデザインノウハウは必要です。でも、「基本的なコツ」さえ知っていれば、ノンデザイナー・初心者でもある程度デザイン的にまとまったバナー・サムネイル画像を作ることはできますよ!
特に押さえておきたいのは以下の3つです。

バナー・サムネイル作成のコツ①:余白が多い構図の画像を使う

dummy
トリジ先生

まず1つ目は「余白が多い構図の画像を使う」ということです。

dummy
神楽くん

余白が多い画像ですか?例えばどんな画像でしょう?

dummy
トリジ先生

具体的に例をあげるなら、こんな画像ですね。

ビジネス,デザイン,サムネイル,画像,バナー,YouTube

dummy
神楽くん

なるほど、確かに画像の上半分以上が余白になって空いてますね!でも、なぜこのような画像を使うんですか?

dummy
トリジ先生

簡単に言ってしまえば、余白部分が大きく空いていると、文字をいれたり、デザインを施しやすくなるからです。

バナー・サムネイル画像をデザインするときは、画像の中に文字やオブジェクトをレイアウトしていくわけですが、余白が空いていないと画像の被写体と文字やオブジェクトが重なってしまい、見づらくなってしまうことがあります。

プロのデザイナーであれば、そのような時でもうまく伝わるデザインテクニックを駆使して制作することもできますが、ノンデザイナーにとってはそれはやや難易度が高い…。

であれば、あらかじめ余白が多い画像を使ってしまう方が簡単に見やすいデザインにすることができます。余白部分がデザインスペース(文字やオブジェクトを載せる場所)になるわけです。

ビジネス,デザイン,サムネイル,画像,バナー,YouTube

dummy
トリジ先生

デザインに慣れてくるまでは、とにかくまずはシンプルに作ることを意識しましょう。その上では余白の存在は重要です。

バナー・サムネイル作成のコツ②:目を引く被写体が写っている画像を使う

dummy
トリジ先生

余白が多い画像を使った方がやりやすいのは間違いありませんが、さらに条件を加えるなら「目を引く被写体が写っている画像」の方が良いでしょう。これが2つ目のコツです。

dummy
神楽くん

単純に余白が多いだけじゃダメなんですね!僕は余白が多いので、下のような写真を使おうと思ってました…^^;

ビジネス,デザイン,サムネイル,画像,バナー,YouTube

dummy
トリジ先生

確かにこの画像は空の面積が大きく余白たっぷりですが、目を引く被写体が写っていないので、どうしても見ている人の目に止まりません。やはり使うなら、印象的な被写体(先ほどの例であれば猫やPC)が写っているものにしましょう。

ビジネス,デザイン,サムネイル,画像,バナー,YouTube

人のWebサイトの閲覧の仕方には、大きな特徴があります。それは「斜め読みをする」ということ。

Webの世界には膨大な情報が溢れているため、人はその中から自分が欲しい情報を探し出さなくてはいけません。そのため、Webサイトや検索結果を閲覧する際、基本的には「斜め読み」をしながら少しでもはやく欲しい情報にたどり着こうとします

バナーやサムネイル画像はそんな斜め読みをしている中で「急に目に飛び込んでくる情報」であることが多いので、目に止まらない画像・デザインだとそのまま見逃されてしまい、バナー・サムネイルとしての高い効果は期待できません。

「おっ!」とスクロールする手を止めてもらえるように、魅力的な被写体が写っている画像を選ぶようにするのも大切なポイントです。

dummy
トリジ先生

パッと見ただけで、「この写真の“主役”がわかる」ようなものがベストです。

バナー・サムネイル作成のコツ③:使う色の数を減らす

dummy
トリジ先生

3つ目のコツは「使う色の数を減らす」ということ。

dummy
神楽くん

あ、これはPowerPointの資料デザインの記事でも教えてもらいましたね!バナーやサムネイルをデザインするときも大事なんですね!

dummy
トリジ先生

そう、使う色の数を少なくするというのは、実はあらゆるデザインにおいて基本的かつ重要なポイントなんです。
色の数は増えれば増えるほど雑多な印象になったり、どこが大事なポイントなのかがわからなくなるので、少しでも色の数は減らせるように注意しましょう。

dummy
神楽くん

でもどうやって色の数を少なくすればいいんでしょうか?そもそも文字とかオブジェクトの色をどう選べばいいのかもわからないんですが…^^;

dummy
トリジ先生

バナーやサムネイル画像を作るときの文字やオブジェクトの色の選び方は、とっても簡単。画像の中に出てくる色をそのまま使えばいいんです。
例えば先ほどの写真を使って作るなら、こんな感じ。

ビジネス,デザイン,サムネイル,画像,バナー,YouTube

基本となる文字やオブジェクト(四角、線など)の色:黒に近い濃いグレー → 黒猫ちゃんの毛の色
大事なポイント・キーメッセージに使っている色:淡いグリーン → 植木の草の色

dummy
神楽くん

なるほど!画像の中に出てきている色をそのまま使えばいいんですね!確かにこれなら色選びに迷うこともないです!

dummy
トリジ先生

しかも、すでに画像内に出てきている色を使っているので、色の数も増えていないんです。

デザインの基本としては色数は少ない方がベター(意図的な演出がしたいときなどは除いて)。バナー・サムネイル画像を作る時も色数が増えないように気をつけましょう

ただそうすると「文字の色とか何色にすればいいんだろう…?」「どうやって少ない色で表現すればいいんだろう…?」と悩んでしまう人も意外と多いのではないでしょうか。

そんなときは上の例のように、画像の中に出てくる色をそのまま使ってあげるとGood!色数が増えることなく、全体のデザインとしてもまとまった印象に見えますし、どこが大事なポイントなのかも瞬間的に理解できるようになります。

特にバナーやサムネイル画像は、なかなかじっくり見てもらえることは少ないので、色数を少なくして「どこが大切な内容なのか」をわかりやすくしてあげましょう。

 

画像の中の色を抽出する方法(Photoshop)

画像の中に出てくる色をそっくりそのまま抽出するには、画像編集ソフトを使うと簡単にできます。今回はもっともメジャーな画像編集ソフト「Photoshop」でのやり方をご紹介します。
とっても簡単なので、Photoshop初心者の方はぜひ下の手順を参考にしてみてくださいね!

◆Photoshopで任意の画像を開き、画面左の[スポイトツール]を選択(①)

◆色を抽出したい箇所にスポイトカーソルを持っていき、クリック(②)。すると、カラーウィンドウ(画面右上)の塗りの色がスポイトツールで抽出した色に変わり、色情報が得られる(③)。あとは、その色情報を活用するだけ!

ビジネス,デザイン,サムネイル,画像,バナー,YouTube,Photoshop

dummy
神楽くん

めちゃくちゃ簡単www
Photoshop初心者の僕でもすぐできそうです!

 

まとめ:まずは手軽にできるコツを押さえてスタートしよう

dummy
トリジ先生

いきなり高度なデザインに挑戦するのではなく、まずは今回のコツを使いながら作ってみましょう。

今回の内容は以上です。

バナーやサムネイル制作は、最近ではノンデザイナーの方々でもビジネスシーンで作ることが多くなってきたのではないでしょうか。特にYouTubeの流行によって、その重要性もさらに増していると思われます。

ただデザインをしていくにあたって、しっかりとした集客効果を出していくためには、やはりある程度のデザインノウハウは必要です。

今回お伝えした3つのコツは、あくまでノンデザイナーの方が手軽に制作したい!という時のための最低限のポイントに絞っていますが、うまく使えば効果的なバナー・サムネイルを作ることができるので、ぜひ意識してみてくださいね^^

dummy
トリジ先生

手前味噌ですが、当ブログの内容がプレゼンノウハウ本として発刊されましたよ。

この度、ご縁あって当ブログの内容が「プレゼン資料作成のノウハウ本」として、株式会社インプレスさんより発刊されました!
タイトルは『ひと目で伝わるプレゼン資料の全知識』

当ブログがかねてからお伝えしている「PowerPointは“わかりやすさ”が一番大事」という考えをベースに、わかりやすいプレゼン・伝わりやすいパワポ作成のノウハウと、そのパワポでの操作方法を一冊の本にギュッと詰め込みまくりました(笑)。

タイトルの「全知識」という言葉の通り、“ひと目で伝わる資料”の作り方はこの一冊で全て網羅できるよう書きましたので、ぜひご一読くださいね!


現在、当ブログでお伝えしている内容をベースにした「PowerPointの作成講座」をストアカにて開催しています!(ひたすら私がしゃべりまくる講義形式)
我流で作ってしまいがちなPowerPointを「いかに見やすく・わかりやすく・伝わりやすく作るか」、その原則・ルールをロジカルにお伝えする講座です。
少人数制で開講していますので、超具体的&つっこんだご相談・ご質問にもその場でお答えしています^^
また、受講者様が実際に作成したPowerPointの個別フォローも無料でお受けしています。
ご興味ございましたら、ぜひ上のボタンよりお申し込みください。よろしくお願いいたします!

この記事を書いている人 - WRITER -
1984年東京生まれ。 デザイナーであった親の影響もあり、学生時代からデザインに関心を持ち、デザインの中ですくすくと成長。大学卒業後は都内出版社に入社し、編集部で書籍やWebサービスの企画・編集・ディレクションを幅広く担当。その後経営企画部を経て独立し、株式会社トリッジを設立。 現在は、同社でWeb・グラフィックデザイン、メディア運営の事業を中心に展開しつつ、企業や個人向けにデザイン・資料作成の講師兼アドバイザーとしても活動。 “日本最大まなびのマーケット『ストアカ』”にて開催されているPowerPoint作成講座では、ストアカ全登録講師25,000人の中で2019年トップレビューを獲得(ユーザー平均満足度95%以上を現在進行形で獲得中)。著書に『ひと目で伝わるプレゼン資料の全知識』(株式会社インプレス、2020年3月発行)がある。 趣味は、美味しいものを食べて飲んでケラケラ笑うこと♪

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© Are you Designer ? No, I'm … , 2020 All Rights Reserved.