個人的に大好物の手書き風な
Webデザインを作りたい時に
役立ってくれそうなフォントや
テクスチャ、アイコンなど、無料
のリソースをメモしておきます。
手書き風と言っても色々あるのでこのまとめは偏ったものになっているかも知れません。参考程度にして頂ければ幸いです。全ては掲載出来ないので個人的に好みのリソースを厳選します。
日本語フォント
ふい字
かなり使用条件を緩くしてくれている有名な手書きフォント。
みかちゃんフォント
こちらもかなりオープンに配布してくれています。
あんずもじ
縦書き用も含まれています。こちらも有名なフォント。
ひま字
基本的には商用でも利用可能ですが、よく規約を読んで。可愛くて使いやすいです。
ミウラ Liner ジュニア
漢字もがっつり入った素敵なフォント。
衡山毛筆フォント
著作権を放棄された毛筆フォント。放棄って凄いですね。。
ホリデイMDJP03
商用は無料ではないけど漢字が豊富。
英字フォント
スケッチタイプ中心です。
Jamaistevie
書きなぐった感じのスケッチフォント。
Sketch Block
定番フォント。よく使っています。
FFF Tusj
グリッドを含んだスケッチフォント。
WC RoughTrad Bta
形状がしっかりしている可視性の高いアスケッチフォント。
Pointy Solid
3Dタイプのスケッチフォント。最近よく見かけます。
Refuse Trip
こちらも3Dですが、ややキッズフォントに近いでしょうか。
SKETCHETICA
細めで形も綺麗なスケッチフォント。これも良さそう。
アイコン
海外SBMアイコンが多いのですが、インスピレーション的な用途も考慮して掲載しています。
20 Web2.0 icons
色鉛筆が滲んだような淡いタイプのアイコン。
Kreski -Lines-
グリッドを含んだ手書き風アイコン。
Free Hand Drawn Doodle Icon Set for Bloggers
ボールペンで書いたようなアイコン。素敵です。
Natsu Icon Set
色鉛筆で描いた感じのとても可愛いイラストアイコン。
Handycons 2
油絵のようなアイコン。珍しいですね。
Notebook Paper Image Files
凄く可愛いですねこれ。ノートに書いたようなアイコン。
Hand Drawn Vector Icons
いつか使いたいベクターで配布されている手書きアイコン。
Hand-Drawn Blogging Icon Set
墨が滲んだようなアイコン。枠からはみ出ているのがリアリティ感じます。
19 Free hand-drawn sketch icons
手抜き感が素敵なボールペンで書いたっぽいアイコン。
FreeHand_ColorStroked icon pac
クオリティの高い手書きアイコン。
120+ hand-drawn arrows and other elements
汎用性の高い手書き風矢印アイコン。
Red Little Shoes Icon set
かなり可愛いイラストアイコン。
Watercolor Free Icon Pack
滲んだ感じのカラフルアイコン。
ファンタジーRPGのアイテムっぽくて手書きのアイコンセット「Legendora Icon Set」
GIGAZINEの記事。かなりオススメの可愛いアイコン集です。
テクスチャ
紙とか布とか。個人的にテクスチャはたくさん種類が欲しいのでまとめ記事を選出しました。
フリーの紙や布のテクスチャ素材のリンク集
コリスさんのまとめ記事。
158 Paper Textures
大量の紙のテクスチャを紹介してる記事。
80+ Free High Res Paper Textures
こっちも沢山あります。
40 Amazing Free Paper Textures
使いやすそうなテクスチャのまとめ記事。
30 Great Free Paper Backgrounds and Textures
ライセンスへのリンクもしてくれているまとめ記事。ありがたいです。
Free Texture Tuesday: Subtle Fabric
ファブリックテクスチャのまとめ記事。
Photoshopブラシ
紙のテクスチャなどと相性の良さそうなブラシ。
Paintey Brushes
ブラシで書いたようなチェックマーク。
Tissape Tape
汎用性高いテープのPSブラシ。
Clips
こちらも良く使われるペーパークリップのブラシ。
Coffee Stains
コーヒーカップのシミのような表現が可能なPSブラシ。
Social Media Grungy Watercolor Brushes
染みた感じのソーシャルメディアのアイコンがブラシに。
Broken Brushes
壊れたガジェットのイラスト。
Handmade Doodle Brushes
可愛いキッズイラストタイプのブラシ。
Stamp brushes
クールなスタンプブラシ。
Creative Doodles
手書き風の矢印ブラシ。
A Collection of Photoshop Paper Brushes
紙の質感を出せるPSブラシのまとめ。
School Dayz Sketches Brushes
学校で見かけるあんなものやこんなもの系ブラシ。
デザイン例
有名なサイトはよく見られていると思うので、まだ未紹介のサイトを選出。
Pigeon and Pigeonette
ここ凄いですよ。ALLイラストのデザインで、ページの移動時にスライドします。
Diego Latorre
凄くクールなサイトです。コンテンツもかなり凝ってる。
El Original Movimiento Audiográfico
音速でブクマしたサイト。紙の質感がたまりません・・
Clever Craft
キッズサイト。楽しい感じが伝わってきます。
DEVOLEN
日本のデザイン会社さんのサイト。写真のような紙のような感じのヘッダが素敵です。
Bénestar
女性向けのプロダクトを扱うECサイト。可愛い。
BoxedArt
アイコンやフォントを上手く使った手書き風デザイン。
kevadamson.com
イラストやメニューが可愛いです。ロゴも素敵。
Christian Sparrow
Flashサイトはあまり紹介しないのですが個人的に凄く気に入ったので。
以上、手書き風のWebデザインを作りたい時に役立ちそうなフリー素材やデザイン例のまとめでした。リソースやデザイン例はあまたにありますので参考程度にして頂ければ。素材はライセンスを確認してご利用くださいませ。