手書き風・イラスト系のwebデザインに挑戦する方へ参考になりそうなまとめ色々

優しい雰囲気とか、可愛い印象をもたせる時に手書き風なサイトって有効ですよねX(
メニューやポイントとして一部に手書き要素を加えても個性的な印象を与える事ができます。そんな手書き系のサイトを作る時に参考になりそうなことをまとめてみます♪;D

はじめに
自分で素材を書いてみる
Illustrator
Photoshop
ペンタブレット
イメージスキャナ
イラストを使ったレイアウトパターン
1.ビジュアルを分離する
2.全面ビジュアル
3.ビジュアル要素と情報を融合
手書き風な素材
フォント(フリー)
イラスト素材(フリー)
手書きアイコン(フリー)

はじめに

ソフトはillustlaterとPhotohopで解説していますがもっていない方はフリーソフトでも感覚を掴むことは出来ると思います。
ベクター系なら→INKSCAPE、ビットマップ系ならこちらが参考になるかもしれません:)
ベクター？ビットマップ？って方は後ほど記載してますのでとりあえず見て見て下さい:D

自分で素材を書いてみる

デジタルイラストを制作するには下記のいずれかが必要になります。

Illustrator(ベクター系ソフト)
photoshop(ビットマップ系ソフト)
ペンタブレット
イメージスキャナ

Illustratorやphotoshopはちょっとお値段びっくりしちゃうかもしれません…
先ほども記載しましたが、がっつり使わない方はフリーソフトを探してみるのも手だと思います。

Illustrator

Illustratorとはベクター系グラフィック制作ソフトです。イラストを書いたり、ロゴを作ったり、ポスターを作ったりすることができます。ベクター系は点や線の座標や距離等を数式的に保持しているため、拡大、縮小など形を変形しても画像が荒れません。データ量も小さいので、動きの多いFlashサイトではベクターデータがよく使用されていますね。下部画像のように均等に配色されたイラストを得意とします。

イラストレータは主にペンツールを使って書いていきます。点と点を結んで線を書いていくという感覚なのですが、初めてだとこの感覚を掴むのが難しいみたいです。
これは本当に慣れだと思うので慣れるまでトレース(写し絵みたいなもの)するしかないんじゃないかな。
下記サイトは動画で解説してくれているので解りやすいと思います。
動画マニュアル.com

そしてイラストレータには鉛筆ツールというものもあります。
こちらは先ほどのペンツールとは違い、マウスのドラッグ軌跡がパスとして生成されます。なので割とマウスで感覚的に簡単なイラストがかけてしまいます。
マウスで書くとガタガタになるんじゃ…と思うかもしれませんがイラストレーターはガタガタしてても自動でなめらかな曲線にしてくれますXD

簡単なイラストなら鉛筆ツールで書いてしまうのも良いですね。
複雑なことは出来ませんがこれはこれでかわいいかなぁと思っています(笑)

さらにイラストレータについて詳しく知りたい方は下記サイトが参考になるかと思いますXD
webデザインレシピ：これからIllustratorを始めてみようという人のための基本操作とかいろいろ

photoshop

photoshopはビットマップ形式の画像を主に扱うソフトウェアです。ビットマップ形式とは画像を色のついたドットと呼ばれる点の羅列・集合として表現するデータ再現方式のことです。
拡大するとドットの集合であることが解りやすいですね。

このドットはピクセルと呼ばれ、白黒(2値)の画像からフルカラー(１６７７万７２１６色)までの色数を指定することが出来ます。
１６７７万７２１６色ってなんでこんな中途半端な…て思うかもしれませんがＲＧＢの各色を２５６階調（黒から各ＲＧＢまで）を３色（ＲＧＢ）掛けあわせて（２５６×２５６×２５６）１６７７７２１６色ということみたいです。
平均的に人が識別できる色は１７００万色と言われているのでこれ以上は必要無いのかと思います。

メリット：写真の加工やグラデーションの作成、複雑な色合いが出せる。

デメリット：拡大すると画像が荒れ、一度縮小してしまうと元の大きさに戻りません。

ペンタブレット

ペンタブレットはWACOMが有名ですねXD
ちょっと慣れが必要ですが慣れると紙に書いてるような感覚で繊細なイラストがかけます。使い方によって色々な表現が出来るのでイラストを本格的に始めたい方におすすめですXDお値段ピンきりですが、私はサイドバーに置いてある一番安いものを使っています。
エヴァンゲリオンのキャラクターデザインをやられた貞本義行さんもペンタブらしいですねXD

ここまで書けたら相当楽しそう…

イメージスキャナ

イメージスキャナはコンピュータに画像情報をビット単位に読み取る機械装置のことです。例えば300dpiなら1インチを300の点の集まりとして読み取るので、この値が高ければ高いほど原画に近い精細な画像ってことになります。
イラストを書かれる方は下書きをスキャナで読み込んでIllustratorやphotoshopで仕上げていく方が多いみたいです。

イメージスキャナはイラスト以外にも、写真だったり、文字だったり、色々使い道がありますね。

以上4つ紹介しましたが、自分で素材を書くと愛着も沸きますし、自由度とか表現力も上がります。何よりサイトに個性を持たせる時に有効ですね。

イラストを使ったレイアウトパターン

どんなwebサイトにするってイメージがわかなければいくら絵が描けてもデザインに落としこむのは難しいですよね。どこまで画像で作ろうかなーとか、ここにイラスト入れたら見にくくなってしまうんじゃないかなーとか色々悩みます。
そうゆう時は沢山のサイトを見て、こうゆう見せ方もありだなーとかインスピレーションを刺激してみると良いかもしれません XD