デザイン

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

 

色の使い方

 

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

 

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

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

 

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

寒い → 寒色(水色や青)

 

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

 

 

ビビットとパステル

 

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

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

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

 

 

ビビットカラー

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

 

 

パステルカラー

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

 

 

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

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

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

 

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

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

 

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

 

 

リッチとチープ

 

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

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

 

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

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

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

 

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

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

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

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

 

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

 

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

 

 

 

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

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

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

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

 

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

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

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

 

 

 フォントが与える印象

 

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

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

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

 

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

 

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

 

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

 

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

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

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

 

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

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

 

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

 

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

 

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

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

 

 

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

 

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

 

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

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

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

 

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

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

  

配置を考える

 

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

 

 

 

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

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

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

 


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

 

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

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

 

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

 

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

 

 

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

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

 

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

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

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

 

 

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

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

 

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

 

 

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

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

 

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

 

  

アイテムを使う

 

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

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

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

 

 

 

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

 

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

 

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

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

 

  

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

 

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

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

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

 

 

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

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

 

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

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

 

 

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

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

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

 

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

 

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

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

 

色を選ぶ

フォントを選ぶ

配置をかえる

回転させる

部分的に背景をつける

文字に枠線をつける

透明度をさげる

グラデーションをつかう

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

 

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

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

 

まとめ

 

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

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

 

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

 

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

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

 

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

 

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

 

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

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

 

注目の記事

迷惑メールはなぜ届く?amazonや楽天を騙る悪質メールへの対処法とは
ネットワーク
amazon,スパム,メール,楽天
迷惑メールはなぜ届く?amazonや楽天を騙る悪質メールへの対処法とは

「いきなり迷惑メールが届くようになった」 「Amazonや楽天を装ったメールはどうやって見分ければいいの?」   知らない人からいきなり連絡が届いたり、登録もしていないようなサービスからメールが届けば、それは詐欺メールかも知れません。 スマホやパソコンが一般的に普及して、ネットでの買い物やサービスを利用...

WordPressで作ったサイトで実装するワンランク上のSEO対策
SEO対策
PHP,WordPress,プログラミング
WordPressで作ったサイトで実装するワンランク上のSEO対策

  WordPressでSEOに強いサイトを運営したい   近年、ブログを採用せずともWordPressを使用したサイト作りが増えてきました。 その理由には更新の手軽さはもちろん、優秀なプラグインが揃っていることでSEO対策に強いサイト作りが簡単だということが大きいです。   今回は、WordPressのブログやサイトで役立...

OSI参照モデルとTCP/IP 〜ネットワークモデルとは〜【第3回 ド素人のためのネットワーク講座】
ネットワーク
OSI参照モデル,TCP/IP,ネットワークモデル,プロトコル
OSI参照モデルとTCP/IP 〜ネットワークモデルとは〜【第3回 ド素人のためのネットワーク講座】

  ド素人のためのネットワーク講座! 栄えある第3回は「ネットワークモデル」についてです。   横文字や英字が多くなってきたり、歴史的経緯が関係してきたりとややこしくなってくる部分ですが、ネットワークを理解するためには押さえておきたいポイントです。   プログラミングやシステムエンジニアとし...

PHPポケモン「タイプ実装編」15
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「タイプ実装編」15

ポケモンのタイプについて  2020年剣盾シリーズでのポケモンでは、全18タイプが実装されています。初代では15タイプ(あく、はがね、フェアリーを除く)からスタートして、たった3つのタイプしか増えていない、と感じる方もいるかも知れませんが、この追加に関してもバトルの歴史を大きく動かしてきたのです...

PHPポケモン「野生ポケモン遭遇編」18
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「野生ポケモン遭遇編」18

  PHPポケモンが第18回にしていよいよバトルの第一歩、野生ポケモンとの遭遇編に突入です。 新しいコントローラーの作成と、バトル画面の作成、そしてポケモンデータの受け渡しなどを中心にご紹介します。   バトル画面の実装  ポケモンのゲームでも、野生ポケモンが現れるとバトル画面へ移管し...

「発想と企画を量産する」第3回 朝活のまとめ
イベント
三宮,朝活,神戸
「発想と企画を量産する」第3回 朝活のまとめ

  第3回朝活を実施しました。   この記事では、その中で取り上げられた内容について具体的な考え方や内容をまとめていますので、ぜひ興味を持たれた方は次回朝活へお越しください。   今回の朝活のサブタイトルは「発想と企画を量産する」になります。      「話のネタが無い」は禁物   ブログで...

【脱初心者向けプログラミング学習】処理を追え!「今、変数には何が入ってる?」
プログラミング
HTML,PHP,プログラミング学習
【脱初心者向けプログラミング学習】処理を追え!「今、変数には何が入ってる?」

  初心者から中々抜け出せない 1から処理をかけない   そんな悩みを抱えたプログラミング学習者に向けて、「脱初心者のためのプログラミング学習」についてPHPを例にまとめました。 やり方自体は同じですので、他の言語をメインとしている人は自分の環境に置き換えながら学習して、初心者から抜け出しましょ...

PHPポケモン「バトルシステム編〜状態異常1〜」30
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム編〜状態異常1〜」30

状態異常チェック 今回は少し先延ばししていた状態異常判定を一部作成していきましょう。 状態異常では「行動前」と「行動後」に判定するものに分けることができます。 行動前 まひ、ねむり、こおり  行動後 どく、もうどく、やけど   まずは簡単な行動前から実装していきます。行動前に判...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力