LINEで送る
Pocket

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

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

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

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

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

インスピレーション編

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

100+ Resources & Inspiration for Hand Drawn Design

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


100+ Resources & Inspiration for Hand Drawn Design

SF – web design style: sketchy

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


SF - web design style: sketchy

Design Meltdown § Sketchy

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


Design Meltdown § Sketchy

ブラシ編

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

Collection: Sketchy Brushes

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


Collection: Sketchy Brushes

Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting

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


Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting

Freebies – Sketchy Arrow Photoshop Brush Pack | Arbenting

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


Freebies - Sketchy Arrow Photoshop Brush Pack | Arbenting

Design Blurb » “Sketchy” Design Resources

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


Design Blurb » “Sketchy” Design Resources

deviantART

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


deviantART

チュートリアル編

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

Advanced CSS Menu

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


Advanced CSS Menu

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

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


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

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

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


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

フォント編

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

Janko At Warp Speed | 10 sketchy fonts for web designers

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


Janko At Warp Speed | 10 sketchy fonts for web designers

!Sketchy Times, Regular – Abstract Fonts

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


!Sketchy Times, Regular - Abstract Fonts

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

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


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

Fontifier – Your own handwriting on your computer!

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


Fontifier - Your own handwriting on your computer!

アイコン編

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

Collection: Sketchy Icons | Resource Pile

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


Collection: Sketchy Icons | Resource Pile

Hand-Drawn Blogging Icon Set – psdfan.com –

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


Hand-Drawn Blogging Icon Set - psdfan.com -

Similar Posts:

LINEで送る
Pocket


One Thought on “手書き風ウェブデザインまとめ”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です