デザイン

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

 

色の使い方

 

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

 

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

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

 

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

寒い → 寒色(水色や青)

 

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

 

 

ビビットとパステル

 

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

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

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

 

 

ビビットカラー

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

 

 

パステルカラー

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

 

 

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

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

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

 

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

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

 

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

 

 

リッチとチープ

 

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

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

 

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

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

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

 

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

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

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

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

 

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

 

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

 

 

 

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

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

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

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

 

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

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

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

 

 

 フォントが与える印象

 

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

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

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

 

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

 

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

 

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

 

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

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

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

 

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

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

 

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

 

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

 

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

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

 

 

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

 

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

 

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

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

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

 

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

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

  

配置を考える

 

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

 

 

 

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

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

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

 


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

 

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

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

 

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

 

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

 

 

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

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

 

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

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

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

 

 

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

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

 

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

 

 

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

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

 

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

 

  

アイテムを使う

 

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

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

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

 

 

 

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

 

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

 

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

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

 

  

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

 

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

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

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

 

 

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

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

 

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

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

 

 

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

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

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

 

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

 

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

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

 

色を選ぶ

フォントを選ぶ

配置をかえる

回転させる

部分的に背景をつける

文字に枠線をつける

透明度をさげる

グラデーションをつかう

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

 

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

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

 

まとめ

 

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

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

 

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

 

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

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

 

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

 

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

 

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

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

 

注目の記事

レポート(試験)編 PHPポケモン 94
プログラミング
PHP,PHPポケモン,ポケモン
レポート(試験)編 PHPポケモン 94

今回の内容は、あくまで試験的なものとなります。実際にそのままの仕組みで導入するかは未定です。 ※セーブ機能の実装自体は予定しております   また、今回はセーブするための仕組みの部分にのみにフォーカスを当てています。非公開ディレクトリやパーミッション等による最低限の対応は施していますが、試験的にア...

PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化

  前回実装したオートローダーの使い方が盛大に間違っていたので、今回その間違いの説明をしながら、正しい実装方法をご紹介します。 申し訳ありません。(誠意)    オートロードについて(再)  必要なタイミングで必要なファイルをrequireまたはincludeするあれです。   前回spl_autoload_reg...

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

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

【Laravel】1対1リレーションをわかりやすく解説(hasOne)
プログラミング
Laravel,PHP
【Laravel】1対1リレーションをわかりやすく解説(hasOne)

  Laravelの1対1リレーションのhasOneについて、公式マニュアルでは専用単語ばかりでどうしてもわかりにくいと感じてしまっている方へ向けて、わかりやすく解説しました。 ※例で紹介しているコードについては、一部英語を日本語表記で使用している部分もありますので、コピペで使用する方は必要に応じて置...

フリーランスになるなら知っておきたい!無料サービス3選
フリーランス
フリーランスになるなら知っておきたい!無料サービス3選

  「フリーランスになる前に何を準備すればいいの?」 「フリーランス向けの便利なサービスが知りたい」   今回はそんな悩みを抱えた人へ向けて「フリーランスになるなら知っておきたい!無料サービス3選」をご紹介します。 この記事を読んで、フリーランスにとっての悩みである以下の3つの問題を一緒...

フリーランスなら心がけておきたい3つのルール【仕事と遊びは両立させろ】
フリーランス
フリーランス,独立
フリーランスなら心がけておきたい3つのルール【仕事と遊びは両立させろ】

  フリーランスになっても不安がいっぱい   会社というものに縛られないというのは楽なイメージがありますが、それ相応の不安がついてまわります。 その結果、会社員へと舞い戻ってしまうと再度そこから抜け出すことは非常に困難です。   今回は、現在活動している人や、これから独立しようとしている...

パーティー実装編 トレーナーの作成 PHPポケモン 63
プログラミング
PHP,PHPポケモン,ポケモン
パーティー実装編 トレーナーの作成 PHPポケモン 63

パーティーとは ポケモンでは、ゲーム・アニメ共に最大6匹のパートナーポケモンと旅をすることができます。7匹以上は持ち歩くことができず、ボックスに転送されてしまうという仕組みです。そして、その6匹のパートナーポケモンの構成をパーティーと呼んでいます。 現在のPHPポケモンでは1匹のポケモンしか管理で...

PHPポケモン「バトルシステム編〜経験値の獲得〜」29
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム編〜経験値の獲得〜」29

経験値の獲得 今まではポケモンに直接経験値を与えるというチートびっくりの仕様でしたが、バトルシステムも終盤に差し掛かってきたので「倒したポケモンから経験値を取得する」というごく当たりまえの仕様を導入していきます。   基礎経験値の設定 では、経験値の計算式に入る前に、必要なパラメーターを1つ用...

カテゴリ

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