かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました

女性Webデザイナーにとっては「かわいいと言えばこんな感じ!」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫!今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです!紹介する素材はすべて商用利用OK!参考になるデザインのWebサイトもいくつか紹介します!(あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw)

↑私が10年以上利用している会計ソフト!

目次

  1. 無料フォント
  2. 無料アイコン・イラスト素材
  3. 無料の背景パターン素材
  4. 「かわいい」を実現する配色例
  5. かわいい系デザインのWebサイト実例

無料フォント

曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフォントはまるっこいものや女性の手書き風にすると、かわいらしさがググッとアップします!紹介するフォントはすべて商用利用OKです(但し書きのあるサイトについては、以下にその旨を記載)。

eriji-title
えり字
最近当ブログでも使う機会が増えてきた手書き風フォント。

「フォントを利用されるにあたって」
※個人で製作した同人誌、配布物、名刺などでのご利用、個人サイトでのバナー、イラスト、画像、素材などへの埋め込みなど、基本的に個人でしたら商用利用も可。
企業・お店・各種団体様でも、フォントを使うことによって金銭のやりとりが発生しない場合は、お気軽にご利用下さい。
企業・お店・各種団体様で商用利用される場合にもフリーですが、その際には事前・事後問いませんので必ずご連絡頂くようお願いします。

miura
ミウラ Liner−jr
小学校三年生程度の漢字が使えます。更に多くの漢字が使える 有料版(2376円〜)もあります。

utsukushimincho
フリーフォントうつくし明朝体
ダウンロードにはユーザー登録が必要ですが、FacebookユーザーはFLOPdesignのFacebookページで「いいね」をするとダウンロードできます。

logotypegothic
ロゴたいぷゴシック
エレガントな曲線を持ちつつ、見出しでも使える力強さを感じられるフォント。

yasashisa
やさしさゴシック
漢字も多数含まれていて使いやすいです。

fuiji
ふい字置き場
当ブログで長年使っていたフォント。こちらも使える漢字が多いです。Webフォント化OK!

sophia
Sofia
私のポートフォリオサイトでも使用中のフォント。くるんとした曲線がかわいらしいデザインです。Google Fonts対応。Webフォント化OK。

matilde
Matilde
細い縦長のシェイプやはしっこについた装飾がなんともおしゃれなフォント。Webサイトで例として使われている飾り枠の .epsファイルも一緒にダウンロードできます。

lemonchikin
LemonChicken
まるっこい形とどこかほんわかした手書き感があふれているキュートなフォント。Webフォント化OK。

その他、「無料・商用利用可!おしゃれで個性的な装飾系フォント20」という過去記事でも美しいフォントを集めています。ぜひ覗いてみてください!

目次へ

無料アイコン・イラスト素材

背景やフォントなど、すべての要素をシンプルにおさえても、かわいいイラストひとつあればそれがワンポイントになって全体のイメージも女性らしくなりますよ。素材はすべて商用利用OKです(但し書きのあるサイトについては、以下にその旨を記載)。

girlysozai
ガーリー素材
お花や動物、女の子など、かわいいイラストもりだくさん!.eps形式でもダウンロードできます。

illuston
いらすとん
ゆるかわなイラストを大量に配布しているサイト。イベントごとにもカテゴリー分けされていますよ。

illust-ya
いらすとや
上記サイト「いらすとん」と同じイラストレーターさんによる無料素材。ふんわりとした色使いのイラストがたくさん!リクエストも受け付けているようです。

商用目的の場合、一つの作成物の中に20点(重複したイラストは1点とします)までは無料でご使用いただけます。それ以上の使用をご希望の場合、有償で対応させて頂きます。

料金の目安:一点につき1,080円
※ご使用用途によって変わることがあります。
※20枚以降の枚数ではなく全体でのご使用枚数で数えさせていただきますのでご了承下さい。

stamp-sozai
ハンコでアソブ
ハンコ風のイラスト素材いろいろ。手作り小物系や食器類、楽器など、趣味に使えそうな素材もあります。

icon-melon
iconmelon
手描き風やラインアイコン等、様々な種類のSVGアイコンがダウンロードできるサイト。好みのアイコンをクリックして一括ダウンロードした後は、「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」で紹介したSVGスプライトの要領で表示できます。フィルターの追加もらくちん。

simple-icon
Free UI Vector Icon Set by Jonathan Hasson
シンプルながらまるっこい形が、かわいい系Webサイトにもマッチするはず。

clothes_icons
Free Clothes Icons
ファッション関係のシンプルなアイコン。ECサイトにピッタリ!

cooking-icons-set
Free cooking icon set
料理の食材が手描き風アイコンに!

目次へ

無料の背景パターン素材

背景画像を派手にすると、全体的ににぎやかなデザインになりがち。しかし「ヘッダー部分にだけ…」とか、「見出しの背景にだけ…」などなど、部分的に使うとシンプルすぎず、甘すぎない、ちょうどいいバランスを保てます。素材はすべて商用利用OKです。

natural-girlie
ナチュラルガーリーなパターン
お花やハートを使った女の子っぽいパターン素材。

aztec_pattern
Aztec Pattern by caralinaj
アズテック柄と呼ばれる幾何学模様に軽快な配色を組み合わせたパターン。

springtime_patterns_retro
Springtime Patterns Retro Edition
ポップな配色と柔らかいベージュの組み合わせがおしゃれ。

triangle_delight_patterns
Triangle Delight Patterns by MysticEmma
男性的なイメージになりがちなポリゴン風模様も、配色によって女の子らしくなりますね。使用面積に注意したいところ。

Floral_Patterns
Floral Patterns by sofi01
お花模様の彩度を落としてヴィンテージ風に。

European-patten
5 European Pattern Background
エレガントなダマスク模様のパターン。エレガントなテイストに◎

exotic-polkadots
Free Exotic Polkadots Photoshop Pattern Set
かわいいだけの水玉模様じゃ物足りないという大人ガーリーなデザインにぴったり。

目次へ

「かわいい」を実現する配色例

女性テイストと言えばまず思い浮かべるのがピンク。しかしピンクと言っても子猫の肉球のような薄いピンクから、イワンコフの水着のようなビビッドピンクまで、いろんな種類があります。そして組み合わせた色によって、そのピンクが生かされず、残念なデザインになってしまったり。迷ったらまず明度をあげて、明るい配色にするよう心がけましょう!あとは毎度おなじみ配色SNSサイトのColourLoversから、人気のかわいい配色を紹介するので、参考にしてみてください。

color1
#8DCCAD / #988864 / #FEA6A2 / #F9D6AC / #FFE9AF – By GabsGiggles

color2
#F8F4D7 / #F4DEC2 / #F4B36C / #E98977 / #F2B4A8 – By GabsGiggles

color3
#FFEFD3 / #FFFEE4 / #D0ECEA / #9FD6D2 / #8B7A5E – By loveSKE

color4
#755C3B / #FCFBE3 / #FBCFCF / #CDBB99 / #A37E58 – By Skyblue2u

color5
#554236 / #F77825 / #D3CE3D / #F1EFA5 / #60B99A – By valeryanaglz

color6
#7D9E3C / #73581D / #FFFEC0 / #FFE2A6 / #FE9F8C – By Skyblue2u

color7
#F3F1EC / #EB5591 / #F5F0CF / #2DADAC / #452C0A – By manabox

color8
#94654C / #F89FA1 / #FABDBD / #FAD6D6 / #FEFCD0 – By GabsGiggles

color9
#FCEF92 / #FFD680 / #A99770 / #FF934B / #FFF8C2 – By lizcrimson

color10
#805841 / #DCF7F3 / #FFFCDD / #FFD8D8 / #F5A2A2 – By misserp

目次へ

かわいい系デザインのWebサイト実例

かわいいテイストのポイントをおさえたWebサイトをいくつか紹介します。参考になるサイトがあれば、上記であげたフォントや配色、素材などの使い方を観察してみてください!かわいい系のデザインは、海外のものより、やはり日本のデザイナーの方が得意なのかなーと思います。

fixed
Fixed Digital Agency
カラフルな背景色と、スクロールするたびに動きながら表示されるイラストが印象的!

hapista
フォトハウス ハピスタ
手描き風&水彩画のように色付けされたイラストが、かわいい写真をよりかわいく見せています。

cake-sweet-cake
Cake Sweet Cake
補色である赤と青緑ですが、明度を高くすることでうまく調和されています。お手本にしたい配色の一例です。

Pretty-Ballerinas
Pretty Ballerinas
ピンクのちょうちょはスクロールするとふわっと画面外へ移動。さらに淡い色調の写真で女の子らしさをUP!

takashima-farm
たかしま農園
赤と緑に限定した難しい配色の中、フォントと余白にこだわってうまく可愛らしさを演出しています。

mummade
MumMade
布地や刺繍を施したようなデザインがポイント!

fixate
Fixate
クールになりがちなモノクロデザインですが、イラストと曲線をうまくつかって、かっこつけすぎない美しさをうまく表現しています。

lets-do-this
Let’s Do This
補色同士の組み合わせ方とフォントのアレンジが秀逸なデザイン。

kaku
かく動物病院
使用色も背景もミニマルに抑えている分、手描きアイコンが目立っていますね。温かみのあるデザイン。

hanamichiya
はなみち舎
水彩画風のタッチと淡い色彩が乙女心をくすぐる、レトロかわいいデザインの人気サイト。

uponafold
upon a fold
たくさんの色を使っているのに、彩度と明度を統一しているので、きれいにまとまって見えますね。

pique
Pique
散りばめられたお花がかわいい!アイコンやフッターイラストにまでキュートさが漂っています。


「かわいい」テイストのデザインに困った時は、Webサイトだけでなく、女性向けの雑誌や雑貨を参考にするものいいアイデアです。みなさんのおすすめかわいいサイトも、ぜひ教えてくださいね!

目次へ

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)