SONICMOOV Googleページ

絵がうまく見える小ワザ ~背景をうまく見せるコツ編~

絵がうまく見える小ワザ ~背景をうまく見せるコツ編~

  • このエントリーをはてなブックマークに追加

皆さまこんにちは!主にイラストを描いています、サボです。

最近暖かくなってきたのでアイスの消費量が日に1本から3本くらいに増えてきました。
私が好きなのは氷菓系なので、カロリーは低いしダイエットなど取るに足らないと思っています。
でもお腹を壊す頻度が増えてきたので、そろそろその生活習慣も見直そうかと思っています。
一番好きなアイスはラムネバーです。強がりましたがやっぱりダイエットしようと思っています。
以後お見知りおきを! 

◆◇◆◇◆◇◆◇

早速ですが、今回は背景イラストについてお話ししたいと思います。 

メインとなるイラストがあり、そこにちょっとした背景のイラスト(以後BG)を入れなければならない時って、ありますよね?そんな時に覚えておくと少し役立つ、BGの小ワザをご紹介します。

美しい一枚絵としてのBGを描く方法ではなく、デザイン重視のテキスタイルのようなBGについてでもなく、あくまでメインありきの状況説明用BGについてのお話ということで、ドウゾオヒトツ。

BGの極意 ①主張しすぎないこと

どのようなBGを入れるかは、メインイラストのテイストによって大きく左右されることなのですが、どの状況にも言えることは、目立ちすぎないこと、一番見せたい要素を引き立たせることです。

例えば、普段何気なく見ているアニメ。 皆さん動画については結構注目されていますが、BGまで意識して見ている方って、意外と少ないですよね。
ちょっとした室内のBGでも、丁寧に描き込みされていたり、とてもリアルで綺麗に描かれているのに、それについては特に感想もないのが実際のところではないでしょうか。

それは何故なのか。

続きを読む

理由はたくさんあると思いますが、第一に言えることは、アニメBGは「キャラクターを立たせることに徹している」からです。 キャラが浮かないよう画面全体の色設定をし、必要とあらば家の広さや天井の高さなど、スケール感に嘘をつき、キャラやその動きに違和感を持たせないような画面作りをしているからなのです。

大体のアニメのキャラクターには、まずきっちりとした線画があり、そして色もぼかしなどはあまり使われないはっきりとした色配置が基本です。
ぱきっとした色が付けられ、更にくっきりとした線で囲われているアニメキャラが乗るBGは、それなりに描き込んでもキャラに勝つことはありません。

また、BGに描かれているそれぞれの物の質感にリアル感があるほど、キャラ自体にもリアリティを持たせられるのです。

これが、主線がない淡い色合いのキャラが乗るBGとなると、また随分勝手が変わってきます。 …説明がちょっと脱線、長くなってしまいましたが、要は、メインのイラストのテイストを踏まえて主張しすぎない絵作りをする、これがBGの大原則なのです!

BGの極意 ②状況に合った色彩設計

さて、アニメBGについてお話ししましたが、今度はもっと実践的なBG作りについてです。

弊社で制作している「ガチャもん」や「毛玉ねこ」などのサービスには、定期的にイベントというものがあり、毎回イベントに則したデコレーションイラストが作成されます。
そして、それらのイベントに合わせたBGもデコレーションと一緒に作成します。

まずBGは、室内か屋外か決めることから始まります。 ピクニックイベントなら屋外設定ですし、あやしい科学研究室イベントなら室内設定が望ましいかと思います。まぁここは易しいですね。 次に、イベントのデコレーションを制作します。ここも今回は割愛。

さて、デコレーションが出来たら、それに合ったBG制作の開始です。
下は「ガチャもん」のいちごイベントの際のサンプル画像です。
03

今回は家具のデコレーションが多かったため、BGを室内に設定しました。デコレーションはいちごモチーフをふんだんに使ったデザインなので、BGも可愛らしくいちご柄で統一してあります。

ここでちょっと注目したいのが、デコレーションよりも淡い色彩でBGが作成されている点です。 デコレーションが映えるよう、強い色は使わず、彩度はやや落ちる色味で作られています。 更に、デコレーションとの統一感を出すため、赤の色味はデコレーションとなるべく近いものを使用しています。

もう一つ、こちらは「毛玉ねこ」のマイページです。
01

「毛玉ねこ」は淡いパステルカラーを基調としたイラスト(ねこやデコレーション)がメインですので、そのイラストたちに違和感なく溶け込めるように、彩度が低く落ち着いた色設定をしています。もともとのイラスト自体が柔らかい印象ですので、それを引き立たせるには、さらに淡く薄い印象でBGを制作する必要があるのです。

これが、メインのイラストを意識しない色設定にすると、どうでしょう。
02

ぱきっと明るく元気な印象にはなりますが、ねこが大切にしている「ふんわりした可愛らしさ」とはかけ離れてしまいました。
最初のマイページのイラストに比べると、BGの色が強すぎるため、見せたいはずのデコレーションの存在感が薄らいでいるのもお分かりいただけるかと思います。
これはこれでいいけれど、メインを引き立たせるBGとしては失格です。 BGは、見せたいイラストの邪魔になってはいけないのです。

BGの極意 ③ざっくり省略&空気感

これは主に風景画を描く時などに重要なポイントですが、ぺったりしたイラストレーター使用のイラストの際にももちろん使える要素です。

風景は大きく分けて三つに分類されます。近景と中景、そして遠景です。

05_2

BGを描く際、遠景になればなるほど、ディティールは省略され、最終的に輪郭のみが見える状態になるよう描きます。遠景までも細かく要素が見える状態ですと、どこを見ればいいのか分からない状況になり、遠近感自体があまり感じられなくなってしまうのです。
そしてまた、遠景、というか、描くオブジェクトとオブジェクトの間に距離があればあるほど、空気の層も厚くなり、その影響で青く霞んでいくのです。
空気の層が青いというのは、空が青いことと原理は同じなのですが、詳しい説明はここでは省略します。 とりあえず、遠くにあるものを青い色味で描くと、もっと遠くにあるように見えるよ!ということです。

以上を踏まえた上での、思いっきりデフォルメされたBGをご覧ください。

04

弊社で制作しているソーシャルゲーム「海の上のカメ農園」のBGの一部です。 これでもか!と言うくらい簡略化されたビルや山ですが、それらが何を表しているのかはちゃんと判別できると思います。
近景には色を付けるなどのアクセントがありつつ、基本は遠景ですので、青みの多い色で絵作りをしています。

遠くに行けばいくほど空気の層で霞んで見える。遠くに行けばいくほど青が干渉してくる。
以上を念頭に置けば、簡単に遠近感のあるBGが描けるのです。

◆◇◆◇◆◇◆◇

最後になりますが、オブジェクトを引き立てるBG作りに大切なのは

■オブジェクトと色のトーンを合わせる
■オブジェクトより強い色は使わない
■オブジェクトより全体的に彩度を低くする

番外:遠景には青色で空気感を出す

こんな感じかなぁと思います。

ここまで来ておいてなんですが、今回もまた基礎的なことを…と思われる内容で申し訳ありませんでした;
ですが、イラストを描かれる方は、ぜひ今一度意識してみてはいかがでしょうか…!
また、この記事はあくまでも制作の一例であり、イラストの作り方見せ方によっては当てはまらない部分も多々ありますので、どうぞご参考までに><

それでは、長々とお付き合いいただき、ありがとうございました!!!!!

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

サボ(デザイナー)

モバイルコンテンツチーム所属の残念デザイナー、サボと申します。 サボは仏語のサボタージュから来ていますが、だからと言って業務をサボタージュしている訳では決してありません。以後お見知りおきを!

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation