Webデザイナーはイラストが描けて当然？

写真にらくがきする

子供のころ、偉い人の写真にらくがきをしませんでしたか。元の形に自分の考えがプラスされる面白さと、写真とイラストという違う質感のものが合わさった、面白さがあったはずです。あれをもうちょっとまじめにやると、かっこいい画像を作ることができます。

図3と筆者が実際に描いてみたサンプルの動画（http://tedia.jp/movie/item.php?id=Sy2ZKKPAmRQ）を見ながら、早速、先ほど練習した簡単な形のイラストや文字を加えていきます。

今回はまじめにらくがきをするので、写真の選び方もポイントになります。らくがきをする余白が十分あるものを選んでもいいですし、全体に要素がある写真に大胆にイラストや飾り文字を乗せても面白いです。手順は以下の2通りになります。

• 描きたいもの、表現したいものがあって、それに沿った写真を用意する
• 写真を見て、そこから連想されるストーリーを絵にする

実際にWebサイトをデザインする際はどんな写真を選ぶかとても慎重になると思いますが、ここはまだ練習ですので、お好きな写真を選んでください。

イラストを加えてみよう

どんな写真を使うとしても、写真とケンカしないで、その中で起こっている出来事に参加する気持ちで描いていきます。

図3-1は空に何か飛ばしたいなと思い、いくつかの空が広く映っている写真の中から選びました。つまり描きたいものが先です。下地の色はそれほど濃くありませんが、雲のイメージが浮かんだので、白いラインで乗せました。飛行機は楕円（だえん）を重ねた形でできています。

図3-2と図3-3は写真からイラストが浮かびました。

図3-2の花を見て、チョウを描きたくなりました。チョウは擬人化されていて、うっとりとみつの感想を言っています。その文字は写真に写っている花の輪郭に沿って並べられています。こうすると、文字にリズムが生まれます。チョウは先のまるまった三角と、先のとがった楕円（だえん）を重ねて描いています。ちょっと複雑な形なので、チョウの写真もいくつか参考にしました。

図3-3は、撮っている時点でお皿の中に人を入れたら面白いだろうなと思っていました。パスタのおいしさを女の子と犬に代弁してもらっています。本来、話せるのは女の子の方ですが、犬の方が食いしん坊に見えたので、こちらに吹き出しを伸ばしました。吹き出しは湯気のイメージでモクモクさせました。文字は縦ラインだけちょっと太くして、インパクトを加えました。ラインだけではちょっと写真に埋まってしまったので、下に白を敷いています。

どれも写真と別に紙にイラストを描いてスキャナーで取り込み、Photoshop上で重ねました。スキャナーで取り込んだ後は、レベル補正などでゴミ取りをしてください。濃いラインは乗算、白いラインは階調反転した上でスクリーン、女の子と犬のイラストは必要な部分だけ切り抜いて通常で重ねています。

人の形はちょっと難しいかもしれません。これに関しては次回、詳しく紹介します。どうぞお楽しみに。