デザイン

デザイナーにセンスは必要ない!誰でも作れるおしゃれなサムネイル

サムネイル デザイナー バナー 広告

 

「デザイナーになるためにはセンスが必要ですか?」

 

バナーづくりの小規模講習会を実施した際に、この質問した人がいました。

よくある質問なのですが、いつも決まって自分の回答は「NO」です。

 

実際に一流のデザイナーとして活躍するレベルまでいくには、確かにセンスと呼ばれているものが必要になるのかも知れません。

しかし、ほとんどの場合ではセンス以上にテクニックのほうが大切だと自分は考えています。

 

また、デザイナーといっても様々です。今流行のWebデザインはもちろん、ファッションや建築などといった多くのジャンルでデザイナーと呼ばれる人は存在します。

今回はデザイナーとして活躍していない人でも使えるようなデザインの知識について解説していきます。

最終項ではそれを活かして、YouTubeで使えるサムネイルサイトやSNSで使える広告バナーの作り方についても説明していきますので、是非自分で作ってみたいと思う人は参考にしてみてください。

 

 

色の使い方

 

デザインにおいて重要な要素はたくさん有ります。その中でも特に重要だと考えるのは「色の使い方」についてです。

 

色彩検定という資格試験は認知度が高いですね。それぐらい色というものは奥が深いのです。

だからといって、そこまで専門的な知識が必要だということでは有りませんので安心してください。

 

暖かい → 暖色(オレンジや赤など)

寒い → 寒色(水色や青)

 

こういった色に対するイメージを持つことができれば、デザインを進めていくには十分です。

 

 

ビビットとパステル

 

自分自信が作ったものから良し悪しを感じることは確かに大切ですが、実際に良しだと感じるものに仕上げられなければ意味が有りません

そのために、最低限押さえておきたいのが「ビビットカラー」「パステルカラー」についてです。

専門的なことまで細く覚える必要はありませんので、ざっくりと説明していきます。

 

 

ビビットカラー

原色や蛍光色のように力強いのことを指します。「目がチカチカするような色」と考えておけばOK。

 

 

パステルカラー

白に近い柔らかい色。赤ちゃん向け洋服店などで見かけるような「ふんわりとしている色」と考えておけばOK。

 

 

色から受ける印象があるように、色にはそれぞれメッセージ性があります

説明でも書いた通り、パステルカラーは赤ちゃん向けの洋服で多く採用されています。

それは、色からが「幼い」であったり「やわらかい」という印象を与えてくれるからです。であれば、それを店のテーマカラーとして採用すれば、多くの人に対してひと目で「この店はこんな感じのお店だな」ということを伝えられるということです。

 

販売する商品のイメージにもよりますが、期間限定や特価広告の場合であれば「とにかく目立たせたい!」ということからビビットカラーに近いような強めの色を採用することが多いです。

また、明るく元気なイメージが伝わってくるため、幼稚園から小学生の子どもを対象にした洋服などにも多い色のタイプです。

 

もちろん色のパターンはもっと細分化することができます。しかし、基本を押さえておくだけであれば、この2つの使い分けが出来ているだけで、十分に良いものを作ることができます。 

 

 

リッチとチープ

 

広告を作る場合は、アピールする商品や提供するサービスの価値についても、色を使って表すことがあります。

例えば高級旅館の広告であれば、その名の通り見た人に「高級感」を伝えなければいけません。もし格安セール中のスーパーのチラシのような配色と作りだった場合、そこのサービスや出される料理まで安物なんじゃないかと感じてしまうものです。

 

なので、色を選ぶ要因としては「リッチ」であるか「チープ」であるかがとても大切です。

実際に色で見てみましょう。

左の方が高級感を感じ、右の方がチープに感じる人が多いでしょう。これは選択した色によってはその差はより明確になりますが、今回注目してほしいのは左側の「グラデーション」の部分です。

 

同系色のグラデーションを入れると、その色は一律ではなくなり、高級感を高めることができます。金色が何故高級に感じるのかは、この「一定ではない」色がそうさせているからです。

そして、原色から離れていくほど高級感は増していきます。前項をから例えると、ビビットから離れていくと考えても良いでしょう。

そして、白と黒では黒の方が高級感を表すには適しています。そのため、パステルカラー寄りに白方向へ離れていくよりも、上の図の左側のように、できるだけ黒に近い色を使う方が容易に表現することができます。

※あくまで今回必要な簡単な解釈であって、そうでないパターンや組み合わせも存在します

 

その反面、単色であればチープな感じ、そして単純な印象を与えやすくなります。それが前項で説明したようなビビットカラーのような色が当てはまります。

 

例にマクドナルドのマークでみてみましょう。

 

 

 

赤と黄色に力強さを感じますね。原色に近い色を採用することによって「安価な商品を提供している」ということを伝えることができます。

ファストフードという印象を伝えるにはこういったチープな色を使いこなすことも大切なのです。

しかしこのアイコンからは蛍光色のようなチカチカするような印象はありません。それは若干ではありますが暗めの落ち着いた赤と黄色を使用しているからです。

サービスは良いものを提供している、そしてブランドとしての価値の高さを表すような、良いマークだと自分は思います。

 

また、マクドナルドには「マックカフェ」がありますね。

こちらは通常販売しているコーヒーよりは少し高めで大人向けのサービスを提供するコーナーです。そのため黒と白、茶色など落ち着いた配色を用いています。

それだけ、色によって伝えられる情報は強いということです。

 

 

 フォントが与える印象

 

バナーやサムネイルを作る上では重要なのが「文字」です。どういった文面を採用するかで売上に大きな差が現れます。

そして、その文字のパワーを更に後押ししてくれるのが「フォント」です。

フォントにはデザインのあらゆるものが詰まっています。スティーブ・ジョブスも大学でフォントを学んだことが今のMacを作ったと言うぐらいです。

 

おしゃれなフォントは要注意

 

標準搭載されているようなフォント意外にも、フリーでおしゃれなフォントも多数あります。英語であればその種類は格段に多くなり、選ぶだけでも一苦労です。

 

そんな中、おしゃれなフォントを安易に選んでしまうことには注意しなければなりません

 

一番上のように明朝体は一般的なものの中でもおしゃれです。Wordなどで文章を作成する際においても、日本語では比較的読みやすいこの書体が初期採用されている場合は多いです。 

二番目のフォントま丸ゴシックタイプのフォントです。通常のゴシック体とは異なり、角がとれているため、とても柔らかく可愛い印象を与えられるため人気があります。 

三番目は行書体です。筆で書いたようなこの書体は、日本語にはぴったりな「和」の感じを強く表してくれます。

 

このように、フォントをそれぞれとっても特徴があり、そこから感じるイメージは様々です。

そのため、ただ単に「おしゃれなフォント」という感覚で選んでしまうと、実際に伝えたい商品イメージであったり、伝えたい内容が弱まってしまう危険性があります。

 

実際に「格安特価セール」を例に見てみましょう。

 

現在格安セールを実施していることを伝えるために、目に止まりやすい色を採用しても、丸ゴシックだとイマイチアピールにかけています。上の太めのゴシック体の方が力強さがあってアピール力もありますね。

 

この様に、比較してみるとわかりやすいのですが、そうせずに「フォントのデザインだけ」に注目してしまい、下のような選択をしているケースは意外にも多いのです。

せっかく広告を出すのであれば、より高い反響が得られる方が良いですよね。

 

 

サムネイルを作成してみよう

 

それでは実際にYouTubeで使うようなサムネイルづくりをしながら見ていきましょう。

 

今回は色とフォントについてしか学んでいませんが、これだけあれば十分です。

なぜなら、この2つをある程度意識できていれば、後はデザインの方法を知るだけで多様な表現と変化を出すことができるからです。

なので、段階を踏んで一つずつ解説していきます。

 

今回は「美味しいコーヒーの淹れ方」という動画用のサムネイルを作ってみましょう。

※自分はAdobe Illustratorというソフトを使用していますが、フリーのソフトやスマートフォンで初期搭載されている機能でもある程度実現は可能です。画像編集用のアプリなどもあるので、使いやすいものを選んでください。

  

配置を考える

 

まず、コーヒーの淹れ方を紹介している動画だとわかってもらうために、それっぽい背景画像がほしいので、フリーの画像をつかいます。

 

 

 

これだけでもどんな動画か伝わるような良い写真ですね。

写真選びは重要です。しかしそれを良くも悪くもしてしまうのがここからのデザインにかかっています

そして、そのために重要な「配置」を決めていきましょう。

 


※周りの灰色部分はソフトの画面なのでデザインには含まれません

 

今回はYouTubeの規格1920×1080を想定して、16:9の比率で作成していきますので、まずは余計な部分をカットしました。

先ほどの元写真と比べて見てもらえればわかるように、上部を多めに切り取っています

 

真ん中にメインであるコーヒー部分がきてしまうと文字を配置しづらくなります。そのため、今回は左側に文字用のスペースを確保しました

 

では、今回はテーマである「美味しいコーヒーの淹れ方」という文字を配置してみましょう。

 

 

背景画像が黒に近いので、白文字で文字を挿入しました。

しかし、これだけだとおしゃれとは言えませんので、もう少し手を加えていきましょう。

 

次はフォントを変更してみましょう。

あまり細すぎるとYouTubeのサムネイルとしては弱くなってしまうので、今ぐらい太いほうが良いですね。

しかし、「コーヒーの淹れ方」という大人な印象を残しておきたいので、明朝体を試してみましょう

 

 

それっぽくなってきましたね。

しかし、これでは一つ一つの文字が小さく、まだまだインパクトに欠けます。

 

次は「美味しい」「コーヒーの淹れ方」ばらして配置してみましょう。

 

 

スペースができた分、文字が大きくできるので伝わりやすくなってきました。

しかしそのせいで、背景の色と近い文字色の部分が少し見にくくなってしまいました。

 

色を変えてしまうのも一つの方法ですが、今回はアイテムを駆使して解決してみましょう。

 

  

アイテムを使う

 

画像に文字を配置する以外にも方法があります。 

例えば、四角や丸といった単純な図形でも、使い方一つで大きな変化をつけられます。

今回は、文字が背景の色とかぶってしまい見づらい部分があるため、文字の部分だけに赤色長方形の下地を敷いてみましょう。

 

 

 

とっても読みやすく、文字を目立たせることができましたが、赤色が強すぎてせっかくの写真の良さが少し失われてしまいましたね。

 

  1. 下地を引いた部分の写真がもったいない
  2. 赤色が強すぎる

 

という問題を「赤色の透明度を下げる」という方法で一気に解決してしまいましょう。

また、今回は伝えたい部分を「コーヒーの淹れ方」という点に絞るために四角のサイズも小さくしてみます。

 

  

とっても上品な感じになりましたね。そして伝えたい部分である「コーヒーの淹れ方」という部分の読みやすさも維持されています。

 

最後に残った「美味しい」の部分に残る問題も解決しましょう。

「コーヒー」の左部分にスペースが空いているので、この部分を利用するために文字を斜めにして対応しましょう。

そして、背景と色味の近い部分が見えづらいため「文字の枠線」を使ってみます。

 

 

大分見やすくなったのではないでしょうか。

枠線を白にして、文字の色には焦げ茶色のグラデーションを使用しました。少しの変化ですが、今回のケースであれば不均一な色味が、より「美味しい」という印象を上品なものだと印象づけてくれています

 

これで、最初と比べるとかなり見やすくなったでしょう。今回のサンプルサムネイルとしてはほぼ完成です。

最後に各箇所のサイズや配置に微調整をかけていきます。

 

 

文字部分については、より重要な部分を目立たせるためにサイズを不均一にするという方法があります。

今回はひらがなの部分のサイズを一回り小さくしました。

※”しい”、”の”、“れ”の3箇所です

 

こういった強弱をつけるだけで、重要な部分をより伝えやすくすることができます。例えばイベントのチラシであれば、日付の部分の年月日は小さく、数字を大きくして開催日時を強調したりできます。

 

重要なポイントは、どうすれば変化がでるのかを知っておけばデザインはできるということです。

最後に、今回作成したサムネイルで実施した項目をまとめてみましょう。

 

色を選ぶ

フォントを選ぶ

配置をかえる

回転させる

部分的に背景をつける

文字に枠線をつける

透明度をさげる

グラデーションをつかう

文字サイズに強弱をもたせる

 

こういった変化の候補をを予め知っておけば、後は試行回数を重ねていくだけです。

この他にも色んな変化の付け方があり、それを知っていけば色んな表現方法を身につけられ、それだけデザインの幅が広がっていきます。

 

まとめ

 

今回は「デザインにセンスは必要ない」ということをテーマに、YouTubeのサムネイルづくりを実際に手順を追って解説していきました。

もちろん実際のサムネイルには、キャッチフレーズの選定などといった今回は触れていない部分も意識する必要があります

 

しかし、とても良いキャッチフレーズが浮かんでも、それを上手く表現できなければ良さが半減してしまうということです。

 

デザインをする際に必要なことは、色やフォントが与える印象をある程度理解しておくことと、どういった候補があるかを予め知っておくことです。

そうなれば、あとは試行回数を重ねていくだけです。

 

一流のデザイナーや、最前線で活躍する人たちは、こういった積み重ねと、各自の方法を極めに極めきった人たちが、更に今現在も鍛錬を積み続けています。なので、始めたばかりの人がいきなり同じレベルで活躍しようと思っても、そうは上手くいかないでしょう。

 

しかしそれは、デザイン自体がハードルの高いものだということではなく、あくまでデザインというものにはレベルの上限値がないということです。

 

なのでこれからデザインを学んでいく人や興味を持った人は、自分のペースで取り組んでいってください。

また、今回解説した最低限のテクニックだけでも知っていれば、未経験の人やセンスがないと思っている人でも十分にデザイナーという仕事に取り組めるでしょう。

 

注目の記事

【税金は貰うもの】知って得する!お金を稼ぐための実践的な3要素
マーケティング
【税金は貰うもの】知って得する!お金を稼ぐための実践的な3要素

  「お金を稼ぐための基本的な3要素」に続く、「実践的な3要素」です。 前回は、単価、頻度、客数の関係を理解すれば、お金を稼ぐ仕組みがどのように成立しているのか、そしてどういったアプローチをすればお金を稼げるのかがわかりました。   今回は、直接お金に関係する実践的な3要素です。どう...

「数字を上げる」必勝マニュアル 〜再生回数・フォロワー・PV数〜
マーケティング
YouTuber,ブロガー,必勝マニュアル,自己啓発
「数字を上げる」必勝マニュアル 〜再生回数・フォロワー・PV数〜

  「継続は力なり」   色んな場面で言われます。何事も地道な努力が大事です。 しかし、地道な努力というのは成果が見えづらく、反応が得にくいことも確かです。   運良く勢いに乗れて、常に努力のし易い環境にいることで伸びていく人の確かにいます。 しかし、ほとんどの人がそうはいきません。...

初心者向けのブログで稼ぐ方法【アフィリエイト編:Google AdSense】
SEO対策
Google AdSense,アフィリエイト,クリック単価,クリック数,ブログ,広告収入
初心者向けのブログで稼ぐ方法【アフィリエイト編:Google AdSense】

  ブログを始めたほとんどの人が アフィリエイトで稼ぎたい   という強い思いを持っているのではないでしょうか。しかし現実は厳しく、広告の審査さえ通らず挫折してしまうといったことは多いです。 中には審査が通っているが、全然広告収入が得られないという人もいるでしょう。 毎日ブログを書いているの...

バトル状態のクラス化編 PHPポケモン 67
プログラミング
PHP,PHPポケモン,ポケモン
バトル状態のクラス化編 PHPポケモン 67

バトルの状態 PHPポケモンでも様々な技を再現してきましたが、まだまだ未実装のものはたくさんあります。そのほとんどがイレギュラー処理の必要なものだったりします。 それらをしっかりと解決していくためにも、今回は「バトル状態」をひとまとめに管理できるようにシステムの見直しを行います。   ひとまとめに...

捕獲処理実装編 PHPポケモン 80
プログラミング
PHP,PHPポケモン,ポケモン
捕獲処理実装編 PHPポケモン 80

捕獲処理の作成 前回モンスターボールのクラスを作成したので、今回は捕獲判定までの一連の処理を仕上げていきます。サービス自体は他のアイテムと一緒にするためItemServiceを呼び出し、その中で使用されたアイテムを判断して分岐を作ります。   バトル中のアイテムサービス(/App/Services/Battle/ItemService.ph...

これってスパム?amazon・paypalを装う悪質メールの対処方法とは
ネットワーク
amazon,Paypal,Xserver,スパム,三井住友,楽天,迷惑メール
これってスパム?amazon・paypalを装う悪質メールの対処方法とは

定期更新、役立つコラムのコーナー!   今回の注目したのは「迷惑(悪質)メールについて」です。   以前はamazonや楽天を名乗る業者から届いた迷惑メールについて紹介、その対処方法について取り上げましたが、今回は更にレベルアップしたスパムがいくつか届いたので、それらも紹介がてら、騙されないため...

わざマシン編 習得 PHPポケモン105
プログラミング
PHP,PHPポケモン,ポケモン
わざマシン編 習得 PHPポケモン105

わざマシンによる技習得 前回、わざマシンのアイテムクラスを作成したので、今回は実際に使用するまでの処理を作成していきます。 まずは、アイテムクラスに使用時の処理(effectsメソッド)を増設しましょう。   わざマシン01(/Classes/Item/ItemTM01.php) <?php require_once(root_path('Classes').'...

進化の石編(実装)PHPポケモン103
プログラミング
PHP,PHPポケモン,ポケモン
進化の石編(実装)PHPポケモン103

アイテムによる進化 前回作成した、進化アイテムによる構成の続きです。   進化アイテムとして「かみなりのいし」、ピカチュウの進化判定を作成したので、アイテムの使用から進化処理までを作成、実装します。   今回作成する処理は以下の2点です。 アイテムの使用判定 進化画面への移管   それ...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力