DesignWalker

手書き風な要素をウェブデザインに取り入れたサイトが多くなってきていますね。

ちょっとしたポイントに手書き風な要素を加えると、柔らかい印象になっていいですよね。

かといって、マウスやペンタブレットなどを使って自分で手書きしてみても、なかなかいい感じが出せない方が多いのではないでしょうか？

手書き風デザインは、あまり上手すぎてもダメだし、かといってめちゃめちゃへたくそだと、それはそれで微妙ですよね。いい感じのうま下手感が出したいですよね。

今回は、手書き風のデザインに使えそうなサイトをインスピレーション、ブラシ、チュートリアル、フォント、アイコンなどいろいろと集めてみました。

インスピレーション編

まずは、手書き風のサイトをたくさん見て、お勉強。インスピレーション編です。

100+ Resources & Inspiration for Hand Drawn Design

これだけで、結構お腹いっぱいになってしまいそうなくらいです…。手書き風の要素を上手く取り入れられたウェブサイト、ブラシ、フォント、テクスチャなどがたくさん集められております。

SF – web design style: sketchy

こちらもきれいな手書き風サイトがたくさん集められておりました。

Design Meltdown § Sketchy

こちらも、インスピレーションサイトです。こちらから、まとめて見ることが出来ます。

ブラシ編

実際に描くにはちょっと難しい…。というあなたは、ブラシを使えば簡単に手書き風デザインが作れますね。

Collection: Sketchy Brushes

かわいい手書きキャラクター系のブラシがまとめられています。

Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting

子供が書いたようなかわいらしい矢印や記号などのブラシです。

Freebies – Sketchy Arrow Photoshop Brush Pack | Arbenting

手書き風矢印のブラシです。いろいろ使えそう。

Design Blurb » “Sketchy” Design Resources

ブラシやアイコン、テクスチャなど、手書き風まとめです。

deviantART

deviantARTにも、手書き風ブラシがたくさんありました。

チュートリアル編

実践編です。手書き風デザインにいろいろ挑戦してみましょう。

Advanced CSS Menu

手書き風なメニューを作るチュートリアルです。

Create a Sketchy Hand-Drawn Camera Illustration in Illustrator – VECTORTUTS

Illustratorで描く手書き風カメラのチュートリアル。

Create a Sketchy Work of Art in Just 10 Steps – psdfan.com -

写真をもとに手書き風のイラストを描く方法を10ステップで紹介されていました。

フォント編

手書き風フォントもいろいろ使い道がありますよね。

Janko At Warp Speed | 10 sketchy fonts for web designers

こちらは、手書き風の欧文フォントが１０種類。

!Sketchy Times, Regular – Abstract Fonts

手書き風なフォントが豊富な、フォントダウンロードサイトです。

フリーで使えるいい感じの手書き風フォント特集（日本語も）*ホームページを作る人のネタ帳

ネタ帳さんで、いい感じの手書き風フォントをまとめられておりました。手書き風な日本語フォントはいろいろ使えますね。

Fontifier – Your own handwriting on your computer!

自分で書いた文字をフォントにしてくれるサイトです。

アイコン編

手書き風のアイコンはかわいいものが多いですね。

Collection: Sketchy Icons | Resource Pile

微妙なうま下手感がたまらない、かわいいアイコンを１０種類まとめられてます。

Hand-Drawn Blogging Icon Set – psdfan.com -

こちらもいい感じの手書き風アイコンですね。