イラストメイキング第三弾～イメージイラストができるまで【デザイナーイラスト編】～

このブログのトップページにあるこちらのイラスト↓

以前の記事でこの「プログラマー」のイラストメイキングをご紹介しましたが
今回はもう一つの「デザイナー」のイラストがどうやってできあがったか？
そのメイキングについてを解説ご紹介させていただきます。

制作フロー

今回の制作フローとしては下記の通り。

①主体となるイラストを考える
②イラストを描き込んでいく
③アウトラインを整えていく
④着色
⑤演出・効果用の装飾パーツを加えて完成

制作ツール

そして今回もおなじみ
・iPad
・apple pencil
・ドローイングアプリ「ibis paint」
の三種の神器を使います！

制作過程

1.主体となるイラストを考える

まずざっくりイメージを決めるところから始めるのですが
今回は、前回のプログラマーイラストの対となるように「風神雷神」風なイメージで…という方向性は決まっています。

あとは、プログラマーイラストと対となるよう対比を意識した差別化が主となります。

なのでポーズや構図はプログラマーイラストと対称でいけるため
プログラマーと対比になり、なおかつ「デザイナー」のイメージを象徴するファッション・アイテム・演出用の装飾の選定がキモなります。

2.イラストを描き込んでいく

今回も前回同様、ある程度イメージや構図が固まったら、ここまでのラフ画のレイヤーの透明度を下げて、それを元にラインを詰めていきます。

まずはファッションから。
プログラマーは比較的シュッとしたシャツ＆パンツルックだったので
その対比としてダボっとしたカジュアルラフなパーカーにします。

その上で、全体的にサイバーなテイストは踏襲したいので
それっぽいゴーグルなどで演出します。

「デザイナー」という人物イメージを表現するにあたり、こだわったのは持たせるアイテムでした。
デザイナーといっても範囲やジャンルが広いので、果たしてその中でも何を持たせるのが、最も一般的なデザイナー像になるのか…？

悩んだ末、「絞らずいっそいっぱい持たせちゃえ！」と
筆・マウス・カラーチップといった様々なデザイナーを象徴するアイテムを持たせました。
結果的に、ジャンルやツールに縛られず幅広い「デザイナー」という職業の表現に繋がったと思います。

3.アウトラインを整えていく

改めて最終的なラインを描き込みます。

線の強弱をつけることで迫力と躍動感を演出します。
また、プログラマーのほうが直線的なラインを基調としたタッチだったので
その対比と差別化の意味で曲線的なラインを出すようにしました。
総じて結果的に筆で描いたような強弱のあるイラストに仕上がりました。

4.着色

サイバーチックで近未来感のあるサイトデザインに馴染むよう、イラストのカラーもそれに合わせます。
その上で、プログラマーがブルー系の寒色系をベースにしていたので
対称的にこちらは暖色系を多めにしていきました。

その中で苦労したのが右手に持たせたカラーチップの配色です。

根本はサイバーで近未来的という個性的なカラーリングで、ピンク系のビビットな色味のアウトライン…
という厳しい条件の中で、カラフルなカラーチップの色調整・選定は本っ当に苦労しました。

カラーチップだけ色味が浮いたりしてはいけないし、もちろん埋もれてもいけない。
全体のトーンに合わせつつ、それでいてカラーバリエやカラフルさがないとそもそもカラーチップに見えない…

自分で導いたとはいえ、かなり厳しい条件での配色だったがあまり、
この部分の為だけに、実際にカラーチップを引っぱり出しての『リアルガチ配色』を実施したほどです…笑

5.演出・効果用の装飾パーツを加えて完成

最後に、プログラマーイラストでは直線的なスパークのエフェクトと対になるよう
曲線的なペンキ風のエフェクトが、口にくわえた筆から飛び出しているようになるよう加えました。

この色合いもまた紆余曲折あったのですが…最終的には意図せずして、某有名「ペンキ塗り合いゲーム」風のカラーリングに落ち着きました。

この「直線・寒色」VS「曲線・暖色」でまとめたことで、並べると当初のねらいどおり「風神雷神」風のいい感じの対比関係に仕上がったと思います。

こうして「デザイナー」のイメージイラストも完成です。

ブログのアイキャッチイラストひとつでも、なんとなくイメージだけで描き上げるよりも
このようにしっかりコンセプトや裏設定を定めることで
それなりに見ごたえのあるイラストに仕上がります。

また今後もご紹介できそうなイラストがあればどんどん解説していきたいと思います！

▼参考：「プログラマー」のイラストメイキングの紹介記事はこちら▼