ロジカル色彩シリーズ

写真を使ったアイキャッチ画像の作り方【りよのロジカル色彩】

はじめに

りよ
いつも「りよと色彩」のコーナーをご覧くださりありがとうございます!

りよのロジカル色彩シリーズはこちら

 

今日、第3弾は写真を利用したアイキャッチ画像を作る時の配色のコツを紹介します!

今やサイト・メディアに限らず、個人ブログであってもアイキャッチ画像が必須になってきました。

もともとPCで絵を描いてたという人など以外は、アイキャッチ画像作りになかなか難儀するのではないでしょうか。

 

なんかダサいとか、ダサくないようにがんばったら必要以上に時間がかかったとか。色々。

でも、アイキャッチ画像も実は配色のコツをおさえればそれなりに雰囲気よくまとまります。

今回は初心者も応用しやすいように、写真素材ベースのタイプを、りよと色彩①、②と同様に法則化してお送りします!

 

▼こちらのみつりよスキルアップのアイキャッチ画像を例に使ってお話していきますね〜!

 

 

法則1:写真中の色と類似性を持たせる

類似性を持たせる=「トーンオントーン配色」or「トーンイントーン配色」のことを指します。りよと色彩②で詳しくお話した配色技です。簡単におさらいするとこんな感じ↓。

復習

  1. トーンオントーン・・・色相が一緒でトーンが違う配色
  2. トーンイントーン・・・トーンが一緒で色相が違う配色

*詳しくは【ロジカル色彩2】へ。

 

このおさらいでピンとこなかった場合は、ちょっとお手数ですが【ロジカル色彩2】をもう一度見てみてくださいね!トーンの概念から詳しく書いています。

 

では、本題に。

法則①は「使用する写真に使われている色と、トーンオントーン配色・トーンイントーン配色の色をチョイスする」ということです。例のアイキャッチ画像でみていきましょう。

この写真に差し色として使われているピンクに着目します。ちなみに、着目する色は「写真の大部分を占めている色」「差し色」のどちらかにするとキマリやすいです。

  • ❶のサーモンピンクの丸は、写真のピンクをほぼ同じ色相でトーンを変えている「トーンオントーン配色」を採用しています。
  • ❷の文字の背景のグリーンは、写真のピンクと色味が違うがトーンはほぼ同じの「トーンイントーン配色」を採用しています。

❶も❷も写真が持っている色を利用しているので、新しい色を2色も追加しても、色同士がケンカせず全体にまとまった印象を与えることができます。

 

法則2:追加する色は2色くらいで十分

次は、使用する色数についてです。

ビシッと言ってしまうと「初心者ほど・アイキャッチ作成に自信がない人ほど「追加する色の数は少ない方がいい」です。

そりゃぁデザインのプロなどはあえて数多の色を使ってかっこよくまとめたりします。ただ、それって非常に難易度の高いこと。

アイキャッチの作成方法を模索し始めた初心者には、色の追加は1〜2色(ギリギリ3色)がおすすめです。(ここでは文字や枠の白・黒は色数としてカウントしません。白黒の扱い方は、法則③④で紹介します。)

 

例のアイキャッチ画像も追加した色は2色のみです。

ギリギリ3色までとお伝えしましたが、この画像で考えてみても、もう1色追加してオシャレな感じにまとめるのは結構難しいかと。となると、やはり追加は1〜2色と思っておくと、画像をまとめやすいでしょう。

 

法則3:真っ黒は使わない

では次は、文字や枠に使っている「白」「黒」についてです。

白黒は彩度を持たないので、画像に追加してもあまりごちゃつきをうみません。法則2で色数について言及した時も、白黒を除外したのはそのためです。

ただ、この「白」「黒」はっきりした色であるため、写真に合わせると地味に主張が強いです。なんの工夫もなく投入すると、画像の調和を邪魔し、洗練さを削いでしまうことも多々あります。

 

なので、まずこの章では黒の扱い方をお伝えします!

「黒」は、使わないでください。(黒=カラーコード#000000の黒)
そして、黒の役割を担う、黒に近い色を使ってください。

 

例画像のプログラミング〜の文字列も真っ黒ではありません。

↑のように濃いグレーに少し赤みを入れてブラウン味っぽくしてあります。

 

私はこの画像に暖かさを持ち込みたかったので少し赤みを投入するという技を使いましたが、初心者さんは基本的に「黒」の代わりに「濃いグレー」を用いるのがおすすめです。

配色中級者さんは、濃いグレーに少し色味を加えて印象を操って見るものいいですね♪

 

法則4:真っ白は少し透過する

続いて「白」について。

白(カラーコード#FFFFFFの白)は使ってもいいです。
が、必ず透明度を下げてなじませてください。

実は「真っ白は使わない」というデザイナーさんもいらっしゃいます。

ただ、初心者の方が「真っ白を使わず薄いグレーを・・・」とチョイスしても、結構変なグレーになりがち。

黒とグレーとは違って、白とグレーの違いは見分けやすいですし、グレーの選び方によっては画像全体にくすんだ印象になりかねません。

なので白は「透明度をちょっと下げる」という技でなじませましょう!

 

例画像では、枠・文字・丸フチの3箇所に白を用いています。

それぞれの透明度はこんな感じ。

  • 枠:89%
  • 文字:94%
  • 丸フチ:55%

丸フチの55%はまだわかるとして、文字や枠はあえて透明度下げる必要ある?と感じる方もいるかもしれませんが、このちょっとが重要です。

「白使ったら、ちょっと透明度下げる」これを基本の作業にしてアイキャッチ画像を作ってみると、真っ白のまんま使った時より、洗練度があがります。

簡単な作業ですので実際にやってみて、効果を確かめてみてください!

 

法則5:余白は多めに

法則⑤⑥は「配色」の法則ではなくなってしまうのですが、せっかくなのでアイキャッチ画像作成の法則の一つとしてご紹介します。

「余白を制すものはデザインを制す」レベルで、余白はデザインのプロにとっても重要な要素。

そして、余白に関して初心者が陥りがちなのは「余白少なすぎ」現象。

例画像の「お得なポイント〜」の文字列を、丸の中いっぱいに広げてみました。


(左:原型/右:文字大)

どうでしょうか。見やすいのは非常に大切なことですが、文字を大きくし余白を少なくした右画像はどうしてもダサめな印象。

なので、自分で作るアイキャッチ画像がなんだか決まらないという方は「自分が思うより気持ち多めに余白をとる」をやってみてください。

もちろん「見やすい」ことはアイキャッチ画像の大切な要素なので、余白と見やすさのバランスは適宜調整してみてくださいね。

 

法則6:装飾は少なめに

最後の法則です。見出しの通り「装飾は少なめに」です。

色数のところでも触れましたが、プロがあえて装飾を多くして何かを表現しようとしていることもありますが、それはプロだからできる難易度の高いこと。

まずはシンプルな最低限の装飾で画像を作れるようになるのが先です。

例画像で使っている装飾を、ちょっと過剰にしてみました。

枠線を二重に、タイトルの背景板を謎の形に、お得ポイントの丸を星にしてみました。法則①〜⑤はしっかり守られていますでまとまりがそれなりにあるように見えますが・・・どうですかね、そこはなとないダサさ?素人感?

いや、ブランドで全身固めたのになんかむしろ変みたいな切なさ?笑

 

各ブログにコンセプトというものがあるでしょうから、絶対ダメとは言いませんが、ある程度洗練されたまとまりのあるアイキャッチ画像を作りたい場合は、装飾は控えめに控えめに意識するのが吉です。

 

おまけ:画像作成ツールの紹介

最後におまけとして、画像作成ツールをちょっと紹介しておきますね。

【Photoshop|Illustrator|canvaの違い】どれが良い?丁寧に解説します!

続きを見る

↑の記事に主な画像ソフトを紹介しています。

Adobeの有料だけど高機能なソフトphotoshopとIllustrator、無料のCanvaについてです。

 

まとめ

それでは、じわじわ連載化してきた「りよと色彩」第3弾は「配色法則を使って、写真ベースのアイキャッチ画像の作り方」をお送りしました。

りよと色彩1、2と同様に、法則化してありますので初心者の方も応用可能!ぜひ実践してみてくださいね。

アイキャッチ画像の作り方のまとめ

  • 法則1:写真中の色と類似性を持たせる
  • 法則2:追加する色は2色くらいで十分
  • 法則3:真っ黒は使わない
  • 法則4:真っ白は少し透過する
  • 法則5:余白は多めに
  • 法則6:装飾は少なめに

 

 

色を学ぶ

色彩検定2級3級パックコース

たのまな 公式サイト

1回の受験でW合格が目指せる!

 

【3万円以上割引】デジタルハリウッド経由でAdobeをお得に買う方法

続きを見る

【色が好きな人へ】色彩スキルを活用したお仕事一覧。

続きを見る

色彩検定、いきなり2級から受けられる?飛び級するなら知っておきたいこと

続きを見る

【厳選4校】WEBデザイナーを目指す人におすすめのプログラミングスクール

続きを見る

-ロジカル色彩シリーズ
-, ,

Copyright© LIYO MEMO リヨメモ , 2020 All Rights Reserved.