こんにちは。
zerobaseでウェブデザイナーをしているkaloです。
普段はフリーランスのイラストレーターとしても活動しており、zerobaseではデザイン業務と並行してイラスト制作を担当することも多いです。
Webサイト制作の現場では、スピード感が求められる場面も多々あります。
すべての案件でゼロからイラストを描き下ろせればベストですが、予算やスケジュールの都合上、「商用利用可能なフリー素材」を活用するケースも少なくありません。
ただ、便利な反面、悩みどころなのが「どこかで見たことある感」や「サイトのデザインから浮いてしまう素材感」です。
そこで今回は、イラストレーターの視点から「フリー素材をWebサイトに馴染ませ、オリジナルっぽく見せるための簡単なひと手間」をご紹介します。
1. サイトの「テーマカラー」に染め上げる
最も簡単かつ効果が高いのが、カラーリングの変更です。
多くのフリー素材は、汎用的な色使いで作成されています。
これをそのまま使うと、洗練されたWebデザインの中では「借りてきた感」が強く出てしまいます。
Illustratorなどのベクターデータを扱える素材であれば、配色は自由に変更可能です。
素材のキーカラーを、制作しているWebサイトの「メインカラー」や「アクセントカラー」に置き換えてみてください。
これだけで、そのイラストは「そのサイトのために用意されたもの」のように振る舞い始めます。
2. 大胆に「トリミング」して構図を変える
「素材をそのまま全部使わなければならない」という決まりはありません。
イラストレーターとして絵を描く時もそうですが、最も見せたい部分にフォーカスするために、あえて画面外に見切切れさせる（トリミングする）手法はよく使います。
例えば、ビジネスマンがスマホを使っている全身のイラスト素材があるとします。
これをそのまま配置するのではなく、「手元だけ」にトリミングしてみたり、「足元」だけを切り取ってみたり。
不要な情報を削ぎ落とすことで、情報の伝達スピードが上がり、同時に「よくある素材の構図」から脱却できます。
3. 「ちょい足し」で文脈を作る
ここがイラストレーターとしての腕の見せどころですが、少しだけ加筆をして、サイトの文脈に合わせる方法です。
例えば、
・人物素材の胸元に、クライアント企業のロゴマークを描き足す。
・持っているスマートフォンを、タブレット端末に描き変える。
・驚いている表情に、漫画的な「汗」や「漫符」を描き足して、よりコミカルにする。
ゼロから描くのは大変でも、ベースがある状態での「加工」や「加筆」なら、数分で終わることも多いはずです。
この数分の手間が、ユーザーに「あ、細かいところまで作り込まれているな」という印象を与えます。
まとめ：素材は「材料」として捉える
Webデザインにおいて、フリー素材は「完成品」として扱うよりも「料理するための材料」として捉えるとうまくいきます。
もちろん、「どうしてもこの世界観を表現したい！」という場合は、私たちのような描けるデザイナーがゼロから描き下ろすのが一番の近道です。
zerobaseでは、そういったイラスト制作も含めたトータルなWebデザインを得意としています。
「素材を使うか、描くか」の判断も含めて、ぜひお気軽にご相談ください。
