手書き風のWebデザインを作りたい時に役立ちそうなフリー素材やデザイン例まとめ

Ads

個人的に大好物の手書き風な
Webデザインを作りたい時に
役立ってくれそうなフォントや
テクスチャ、アイコンなど、無料
のリソースをメモしておきます。

手書き風と言っても色々あるのでこのまとめは偏ったものになっているかも知れません。参考程度にして頂ければ幸いです。全ては掲載出来ないので個人的に好みのリソースを厳選します。

日本語フォント

ふい字

hand-write01

かなり使用条件を緩くしてくれている有名な手書きフォント。

ふい字

みかちゃんフォント

hand-write02

こちらもかなりオープンに配布してくれています。

みかちゃんフォント

あんずもじ

hand-write03

縦書き用も含まれています。こちらも有名なフォント。

あんずもじ

ひま字

hand-write04

基本的には商用でも利用可能ですが、よく規約を読んで。可愛くて使いやすいです。

ひま字

ミウラ Liner ジュニア

hand-write05

漢字もがっつり入った素敵なフォント。

ミウラ Liner ジュニア

衡山毛筆フォント

hand-write06

著作権を放棄された毛筆フォント。放棄って凄いですね。。

衡山毛筆フォント

ホリデイMDJP03

hand-write07

商用は無料ではないけど漢字が豊富。

ホリデイMDJP03

英字フォント

スケッチタイプ中心です。

Jamaistevie

hand-write08

書きなぐった感じのスケッチフォント。

Jamaistevie

Sketch Block

hand-write09

定番フォント。よく使っています。

Sketch Block

FFF Tusj

hand-write10

グリッドを含んだスケッチフォント。

FFF Tusj

WC RoughTrad Bta

hand-write11

形状がしっかりしている可視性の高いアスケッチフォント。

WC RoughTrad Bta

Pointy Solid

hand-write12

3Dタイプのスケッチフォント。最近よく見かけます。

Pointy Solid

Refuse Trip

hand-write13

こちらも3Dですが、ややキッズフォントに近いでしょうか。

Refuse Trip

SKETCHETICA

hand-write14

細めで形も綺麗なスケッチフォント。これも良さそう。

SKETCHETICA

アイコン

海外SBMアイコンが多いのですが、インスピレーション的な用途も考慮して掲載しています。

20 Web2.0 icons

hand-write15

色鉛筆が滲んだような淡いタイプのアイコン。

20 Web2.0 icons

Kreski -Lines-

hand-write16

グリッドを含んだ手書き風アイコン。

Kreski -Lines-

Free Hand Drawn Doodle Icon Set for Bloggers

hand-write17

ボールペンで書いたようなアイコン。素敵です。

Free Hand Drawn Doodle Icon Set for Bloggers

Natsu Icon Set

hand-write18

色鉛筆で描いた感じのとても可愛いイラストアイコン。

Natsu Icon Set

Handycons 2

hand-write19

油絵のようなアイコン。珍しいですね。

Handycons 2

Notebook Paper Image Files

hand-write20

凄く可愛いですねこれ。ノートに書いたようなアイコン。

Notebook Paper Image Files

Hand Drawn Vector Icons

hand-write21

いつか使いたいベクターで配布されている手書きアイコン。

Hand Drawn Vector Icons

Hand-Drawn Blogging Icon Set

hand-write22

墨が滲んだようなアイコン。枠からはみ出ているのがリアリティ感じます。

Hand-Drawn Blogging Icon Set

19 Free hand-drawn sketch icons

hand-write23

手抜き感が素敵なボールペンで書いたっぽいアイコン。

19 Free hand-drawn sketch icons

FreeHand_ColorStroked icon pac

hand-write24

クオリティの高い手書きアイコン。

FreeHand_ColorStroked icon pac

120+ hand-drawn arrows and other elements

hand-write25

汎用性の高い手書き風矢印アイコン。

120+ hand-drawn arrows and other elements

Red Little Shoes Icon set

hand-write26

かなり可愛いイラストアイコン。

Red Little Shoes Icon set

Watercolor Free Icon Pack

hand-write27

滲んだ感じのカラフルアイコン。

Watercolor Free Icon Pack

ファンタジーRPGのアイテムっぽくて手書きのアイコンセット「Legendora Icon Set」

hand-write28

GIGAZINEの記事。かなりオススメの可愛いアイコン集です。

ファンタジーRPGのアイテムっぽくて手書きのアイコンセット「Legendora Icon Set」

テクスチャ

紙とか布とか。個人的にテクスチャはたくさん種類が欲しいのでまとめ記事を選出しました。

フリーの紙や布のテクスチャ素材のリンク集

hand-write29

コリスさんのまとめ記事。

フリーの紙や布のテクスチャ素材のリンク集

158 Paper Textures

hand-write30

大量の紙のテクスチャを紹介してる記事。

158 Paper Textures

80+ Free High Res Paper Textures

hand-write31

こっちも沢山あります。

80+ Free High Res Paper Textures

40 Amazing Free Paper Textures

hand-write32

使いやすそうなテクスチャのまとめ記事。

40 Amazing Free Paper Textures

30 Great Free Paper Backgrounds and Textures

hand-write33

ライセンスへのリンクもしてくれているまとめ記事。ありがたいです。

30 Great Free Paper Backgrounds and Textures

Free Texture Tuesday: Subtle Fabric

hand-write34

ファブリックテクスチャのまとめ記事。

Free Texture Tuesday: Subtle Fabric

Photoshopブラシ

紙のテクスチャなどと相性の良さそうなブラシ。

Paintey Brushes

hand-write35

ブラシで書いたようなチェックマーク。

Paintey Brushes

Tissape Tape

hand-write36

汎用性高いテープのPSブラシ。

Tissape Tape

Clips

hand-write37

こちらも良く使われるペーパークリップのブラシ。

Clips

Coffee Stains

hand-write38

コーヒーカップのシミのような表現が可能なPSブラシ。

Coffee Stains

Social Media Grungy Watercolor Brushes

hand-write39

染みた感じのソーシャルメディアのアイコンがブラシに。

Social Media Grungy Watercolor Brushes

Broken Brushes

hand-write40

壊れたガジェットのイラスト。

Broken Brushes

Handmade Doodle Brushes

hand-write41

可愛いキッズイラストタイプのブラシ。

Handmade Doodle Brushes

Stamp brushes

hand-write42

クールなスタンプブラシ。

Stamp brushes

Creative Doodles

hand-write43

手書き風の矢印ブラシ。

Creative Doodles

A Collection of Photoshop Paper Brushes

hand-write44

紙の質感を出せるPSブラシのまとめ。

A Collection of Photoshop Paper Brushes

School Dayz Sketches Brushes

hand-write45

学校で見かけるあんなものやこんなもの系ブラシ。

School Dayz Sketches Brushes

デザイン例

有名なサイトはよく見られていると思うので、まだ未紹介のサイトを選出。

Pigeon and Pigeonette

hand-write46

ここ凄いですよ。ALLイラストのデザインで、ページの移動時にスライドします。

Pigeon and Pigeonette

Diego Latorre

hand-write47

凄くクールなサイトです。コンテンツもかなり凝ってる。

Diego Latorre

El Original Movimiento Audiográfico

hand-write48

音速でブクマしたサイト。紙の質感がたまりません・・

El Original Movimiento Audiográfico

Clever Craft

hand-write49

キッズサイト。楽しい感じが伝わってきます。

Clever Craft

DEVOLEN

hand-write50

日本のデザイン会社さんのサイト。写真のような紙のような感じのヘッダが素敵です。

DEVOLEN

Bénestar

hand-write51

女性向けのプロダクトを扱うECサイト。可愛い。

Bénestar

BoxedArt

hand-write52

アイコンやフォントを上手く使った手書き風デザイン。

BoxedArt

kevadamson.com

hand-write53

イラストやメニューが可愛いです。ロゴも素敵。

kevadamson.com

Christian Sparrow

hand-write54

Flashサイトはあまり紹介しないのですが個人的に凄く気に入ったので。

Christian Sparrow

以上、手書き風のWebデザインを作りたい時に役立ちそうなフリー素材やデザイン例のまとめでした。リソースやデザイン例はあまたにありますので参考程度にして頂ければ。素材はライセンスを確認してご利用くださいませ。

タイトルとURLをコピーしました