Webサイトデザインに自作イラストを取り入れてみよう

いつもふざけてばかりなのでたまには真面目にこのブログらしい話題。

きっかけは私が使っているペンタブレット、バンブーコミックが2009年12月2日より新バージョン、
Wacom Bamboo Comic CTH-461/S1として発売されることです。
なので「管理人の作業環境はバンブーコミック」、とはいってもひとつ古いバージョンになります。
新しい方は相変わらず安いお値段のまま筆圧感知が倍になったとかで、
いや私はそんな筆圧云々いうほどのスキルはないので別に悔しくありません。

さて、イラストを取り入れるといってもそんなに本格的なものを推奨しているわけではありません。
そもそもこのブログ、専門用語で検索してくる人には誠に申し訳ないのですが、
素人の私が「こんな機能覚えますた！」とかいう備忘録を書いてるだけなのです。
別にイラストレーターを志しているでもなく、webサイトの動線として画像は
効果的だよね、という目的のもとに研究しているわけです。

例えば、「続きを読む」、「解説はこちら」、あるいは「ここをクリック！」みたいな
ものも描けるのならイラストで表現しては？というのは以前お友達の半蔵さんから
いただいたアドバイスです。すいません、面倒なのでまだやったことありませんw

こうかな？
いや、のっけからやる気ない絵ですいません。あと字を手書きにする必要なかった。
でもこんくらいなら簡単に描けますよね？

この簡単に描けるというのが大事なところでして、始めから素材用と割り切ってる絵は
さほど難しくありません。1年くらいイラストの練習をしていて思ったのは、人体のデッサンや
背景などは非常に難しいのですが、顔だけなら描き始めの頃も今もさほど変わらないと
いうことです。進歩がないともいえますが、顔だけなら簡単であるともいえます。

※気持ち真面目に作ったやつ

これがイラストレーターであれば体が描けないとか背景が描けないとかは
NGですけれども、素材制作であれば顔だけの絵や、背景に自分で撮った写真なり
フリー素材を用いることもなんら問題ありません。顔のアップならば背景との
整合性もあまり気にする必要はありません。
（カメラが顔に近い場合、背景の見え方は様々なのでデッサンは狂いにくい。
というかこの記事ではそもそもそんな難しいことは気にしない方向ですw）

この記事を書いた時点では、このブログのTOPバナーやらサイドバーのブログパーツなどに
何点か描いてある絵はほぼ顔だけです。これは元々は全身を描いたものを顔だけ
切り取って使っているケースもありますが、Web素材の場合結果的に顔しか使ってない
という事実が肝要です。

昔小規模なネットショップが流行った頃、店長の顔写真をサイドバーに載せるといい、
なんていう話がありました。これは顔を出すことで信頼性を高めるということが
第一義ではありますが、一点画像を入れるだけでデザインのアクセントになり
全体がよく見える、という目的も含まれています。

こんな例を出すまでもなくお気付きかもしれませんが、
上述の話は実は全部写真で代用が効きます。
しかし企業ならまだしも個人でWebサイトを作成する人が、
どれだけ顔写真を用意できるというのでしょうか。

もう一歩踏み込んだところで、ただのイラストではなくセリフで説明をする
まんが形式の素材もよく見られます。私なんかの場合はサイトの説明というより
本当にただの4コマまんがもどきを描いてしまうので世話はないのですが、
この形式の素材の最大のメリットは・・・、

に尽きると思います。つまり、

「商用サイト等でお客様に本当に読んでほしい一文は
まんがにすると非常に効果的だ！」

私はそんなのしたことありませんが。

で、冒頭のバンブーコミックの話に戻るんですが、数あるペンタブレットの中で
殊更にこれを推しているのはコミックスタジオミニという付属ソフトの存在にあります。
適当に絵描いて（あるいは画像を放り込んで）、コマ割りやフキダシやセリフ、
集中線（背景の線のこと）なんかはコマンドでラクラク。導入ムービーが分かりやすく、
買ったその日にまんがっぽいものを作ることが可能です。

付属ソフトであるからには機能が抑えられていますが、実のところ描画機能に
関してはフラッグシップモデルのコミスタEXと比べても遜色ありません。
ただし出力ができません。印刷にはスカシのような模様が入り、画像としては
目の荒いjpgでしか書き出せないです。荒いといっても印刷に使えないだけで
モニタ上では描いたときと見た目は同じですから、web素材用としては
必要充分であるといえます。

※まんがの描き方自体については楳図先生のレポート記事で触れています。

さて、ペンで普通に描く素材の話をするとなると、私的にはそれの対抗馬として
Adobe Illustratorの話もしないわけにはいきません。
（アドビ イラストレーター。紛らわしいので英語表記にします）
このソフトはクソ高いので興味本位で手を出すものとは違いますが、
職場に置いてあるな、なんて方も結構いらっしゃるかもしれません。

これは始点と終点、角度を指定して正確無比な線を引くベジェ曲線と呼ばれる
機能を搭載したツールです。ちょっと私がトレースしたものを挙げてみましょう。
※下の2点はトレースです。

これは正確には絵というより図形を組み合わせているだけです。
もう少し有機的なものも描けないこともないですが、絵柄的な向き不向きはあるでしょう。
好例として、お友達のところからまたも無断拝借。

Illustratorで実に多様な絵を描くケイドウエイ子さんの作品。
左のなんかに似てる生き物がほぼ左右対称、線の太さも一定であることが分かります。
基本的に線に強弱は付けられなく（できるけど激しく面倒）、ブレたりもしないので
線に遊びのある絵には不向きですが、家電説明書の挿絵にあるようなシャープな絵や、
慣れてくると写実的な絵を描くのにも向いています。
（ちょっとここでは公開できませんが、私はリアル系の似顔絵とかもIllustratorで作成したりします）

上の作品で、テーブルに載っているカツ丼と親子丼は写真です。
イラストとしては写真と混ぜるのは反則ですが、webコンテンツの素材と考えた場合は
先ほども述べたように自由な発想として全然アリですよね。

え？上のカツ丼の写真フリー素材なのかって？

ごめんそれは
今関係ないからスルーして。

注意点としては、ベジェ曲線を使うペンツールが非常に取っ付き辛くみえることです。
みえるだけで本当はそんなに難しくありません。
しかし紙に線を引くのとは全く違う未知の方法であるからして、
初見に直感で扱うのは無理があります。
参考書も最初はピンときません。これは誰かペンツールを使える人が
実際に描画するのを見るのが最も手っ取り早いです。百聞は一見に如かず。

絵心がなくてもキレイな絵が作れますし、マウスだけで操作できるのも利点です。
ペンで操作しようとしたら逆に使い辛かった・・・。
のですが、これは単に慣れの問題で、ペンに慣れると非常に速く
描画できるようになります。ベジェ曲線はただ線を引くことに比べると
異常に時間がかかってしまうので（着色のグラデーションメッシュも然り）、
時間短縮にペンタブレットを導入するのはなかなかオススメです。

練習時間と差し引くと本当に短縮になるかはちと疑問が残りますが・・・。

Wacom Bamboo Comic CTH-461/S1

Adobe Illustrator CS4 (V14.0) 日本語版 Windows版