• ブログ
  • 【参考サイト20選】「かわいい」を具体化する!7つのタイプ別参考サイト集
2024.12.10 更新
2024.12.10 更新

【参考サイト20選】「かわいい」を具体化する!7つのタイプ別参考サイト集

Written By
H.S.

デザイナー

「かわいい」という言葉は、あらゆる場面で多用されるようになりました。特に若者の間では「かわいい」が多様な意味で使われています。デザイン制作現場におけるコミュニケーションでは、広義の「かわいい」だけだと依頼内容が充分に伝わりません。そのため、見当違いのデザインが出来上がってしまうことがままあります。求めているのがどんな「かわいさ」なのかを具体化できるようにしましょう。

この記事ではかわいいデザインの20サイトを、どうかわいいのか説明した7つにカテゴライズしました。この記事を参考に、自分の中の「かわいい」のイメージをはっきりさせましょう。想像している「かわいい」が具体化できれば、制作会社へ依頼する時に参考デザインを提示することも楽になるはずです。


弊社では、HP・LPやバナーなどWeb制作全般を承っておりますご要望に応じて名刺やチラシ、リーフレットといった印刷物の制作も可能です。ご相談は無料ですので、まずはお気軽にお問い合わせください。

HP制作について相談する(無料)

“キュート”なかわいさ

「キュート」という言葉は本来、可愛い、愛らしいことを指します。日本では、小さなものにキュンとするという意味でよく使われます。小さいものを連想するデザインは、軽快さや幼さが出て賑やかな雰囲気を演出できます。例えばイラストを小さく使ってみたり、小さな動作を文字や飾りなどの要素に取り入れてみるとキュートさが出ます。

キュートなかわいさは、カラフルでキャッチ―なデザインが多く見られます。幼児向けのおもちゃやキャラクターもののグッズなど、やや若年層向けの商材やサービスに使用される傾向があります。

Swimmer

Swimmer
https://perfectworld.tokyo/swimmer/

ページ内のカラーリングが赤で統一され、手描きタッチのキャラクターが映えて賑やかです。キャラクターがそれぞれゆらゆらと動いているのがかわいらしく、独特な世界観をより引き立てています。ドット模様や赤系の配色は、ラブリーでキュートなかわいさを作り出すのに向いています。

STUDIO by spicato inc. | spicato

STUDIO by spicato inc.
https://spicato.com/studio/

それぞれ左右に揺れながら移動してくるイラストが、まるでてくてく歩いてくる小人のようでかわいらしいサイトです。ピンク・グレー・黒の組み合わせにより、キーカラーであるピンクが引き立っています。デフォルメされたイラストはかわいらしさを表現するのにぴったりです。

LakuMug(ラクマグ)| 自分で飲める、日本製ベビーマグ! | コンビ公式ブランドストア

LakuMug(ラクマグ)
https://www.combi.co.jp/store/baby/mug/lakumug_sp/

ドットや星、三角のパーツが各所にちりばめられていています。簡単な形の小さい模様や飾りは、画面を賑やかにしてくれます。緩いイラストと手書きの文字があたたかみとキュートな空気感を演出しています。子供向けの商品には、手書き感のあるフォントやイラストが相性抜群です。

“きれいめ”なかわいさ

ただ可愛らしいだけでなく、落ち着いた雰囲気で品があるデザインを指します。例えば、色の明るさや彩度を下げたりキャラクターやモチーフをデフォルメしすぎないようにすると美しさのあるかわいさが出せます。行き過ぎるとかわいさが失われていくため、かわいさと美しさの塩梅に注意です。プリティーなかわいさを意識すると、落ち着いたデザインになり幼い印象が抑えられます。そのため、少し大人の年代にも受け入れられやすいです。

FLOW LIFESTYLE – 枚方の東香里で中国茶の魅力をお届けするお店

FLOW LIFESTYLE
https://flow-lifestyle.jp/

落ち着いた清潔感のあるトーンの中に、少しだけ散りばめられた手書き文字とイラストがアクセントになっています。一部分を手書きにする手法はアイキャッチの効果があるため、ワンポイントにしたり注目させたい時に使うと良いでしょう。黒ではなくブラウンで統一された文字色が、ホワイトの背景になじんで心地良く感じます。グレーなど、黒よりも柔らかい色は落ち着いた印象を与えることができます。

cpw(シパウ)| 沖縄シークヮーサーのCCクリーム

cpw(シパウ)
https://dododododo.jp/pow/cccream-okinawa-shikuwasa/

TOPの水の画像が、マウスポインタの動きと連動して揺れ動くさわやかな印象のサイトです。優しいサーモンピンク色と、コロンとした英字フォントがかわいさを、余白や透明感のある水の表現がきれいな空気を保っています。目にやさしい彩度と薄すぎない明度で色を統一すると、きれいめなかわいいデザインになりやすいです。

レンズとカフェ LensPark(レンズパーク) – レンズを通して人々が集う 公園のような憩いの空間

レンズとカフェ LensPark(レンズパーク)
https://lens-park.com/

メガネのレンズの形を画像のトリミングやボタンに取り入れた、キレイで清潔感のあるデザインのサイトです。水色をメインカラーにしてさわやかさを出しています。細かい部分ですが、英字フォントが少し横に伸びたような形になっています。「O」がレンズの形に近いことがお分かりでしょうか。このように、フォントにも工夫が凝らされていることが分かります。かわいさをフォントで表現するのも良い手でしょう。

“クール”なかわいさ

かっこよさやさわやかな雰囲気があるかわいさを、ここでは「クールなかわいさ」とします。かっこいい要素が入ることで大人びた印象が強まり、男性でも受け入れやすいデザインになります。例えばピンクなどの暖色は使わずに、寒色でサイトの色を統一するとかっこよさが出ます。また、暖色系を使う場合はフォントを太いゴシックで大きく扱うと良いでしょう。大人びた印象があるため、やや中年層から上の世代に好まれることが多そうです。

クール系のさわやかな雰囲気のデザインは、おしゃれでモードなデザインになりやすい傾向があります。おしゃれなサイトの参考にできる記事はこちらからご覧ください。

HUMAN MADE株式会社: HUMAN MADE Inc.

HUMAN MADE Inc.
https://humanmade.co.jp/

モノトーンで統一されたページの中で、ぱたぱたと羽ばたくカラフルな鳥のイラストが目を引きます。暗めのトーンで色味をまとめるとかっこよさが全面に出るため、かわいい要素が多少あってもかわいらしくなりすぎません。かっこよさとかわいさは、対極なようで同居できるテイストです。

PASUR

PASUR
https://pasur.co.jp/

白黒をベースにしたカラーリングでありつつも、丸を印象的に取り入れたタイポグラフィがかわいさを強調しています。文字の入れ方や画像を使った切り返しなどで、曲線を積極的に取り入れています。かっこいいデザインといえば曲線よりも直線のイメージが強いですが、色味がモノトーンで統一されることでクールな雰囲気になります。手書きのカラフルなアンダーラインが遊び心があってアクセントになっています。

aguije | アグイジェ – 渋谷・館山・鎌倉・浦和が拠点の小さなデザインスタジオ。

aguije | アグイジェ
https://aguije.jp/

全体はシャープな印象が強いですが、タイトルロゴやノイズから現れる文字に遊び心がうかがえます。さりげないですが、左上にある文で拠点の文字がするっと切り替わる工夫も遊びのポイントです。手描きのイラストや文字はシャープで洗練されたトーンに合わなさそうですが、モノトーンにしたり線の太さの調節をすると統一されてなじみます。あえてかっこいいデザインに振り切らず、イラストなどでかわいさを出すと等身大な印象になります。

“ファンシー”なかわいさ

「ファンシー」とは、ここでは女の子らしいかわいさを指します。例えば、パステル調であったりレトロ感があるもの、メルヘンチックな要素が多用されるものなどです。空想や夢のような雰囲気を作り出せるため、プリティーに近しくも少し幼さが残るイメージです。ファンシーなかわいさを出すには明度・彩度の高い色を使ったり、要素のコントラスト差を小さくすると良いでしょう。

夢見心地な空気感やきれいな見た目から、年齢問わず女性にファンが多いテイストです。溶けるような表現と相性がよく、スイーツや化粧品などによく使用されます。

豆乳アイス、はじめました。

豆乳アイス、はじめました。
https://www.marusanai.co.jp/tonyu-ice/

アイスを連想させるシャーベットカラーが目を引くサイトです。豆乳をイメージしたベージュとシャーベットカラーが、まさにファンシーなカラーリングです。さりげなく動くイラストはライブ感があって、かわいらしいアクセントになっています。パステルの地色に対しイラストや文字色は黒ではっきり読みやすく、どことなく素朴な雰囲気も醸し出しています。

ARUKU EAST(アルクイースト)

ARUKU EAST(アルクイースト)
https://www.jre-hotels.jp/aruku-east/

明度の高いカラーリングと抜け感のある手書きのタイトル文字、ゆるめのイラストがマッチしてふんわりとした独特な空気感を作り出しています。全体の明るい雰囲気を壊さないように、ロゴや文字色は緑寄りの紺色に抑えているところも良いポイントです。細めの欧文フォントがやさしい雰囲気を邪魔せず、ワンポイントとして画面を引き締めています。

“デコラティブ”なかわいさ

「デコラティブ」とは、装飾的という意味です。ここでは、装飾的要素の多い派手なかわいさを指します。見るところが盛りだくさんで目移りしてしまうような、いわゆる原宿系と呼ばれるようなものもここに含まれます。デコラティブなかわいさにするには、色味の濃いイラストをふんだんに使用したりカラフルな装飾文字を多く使います。

プリティーなかわいさを基準にするとデコラティブなかわいさは、より派手で賑やかな雰囲気です。そのためやや若年層向けのデザインで、イベントや人が多く集まる場所の紹介などに使うと良いでしょう。

UMAJOB −馬のお仕事紹介サイト−

UMAJOB
https://jra-fun.jp/umajob/

ニューレトロな雰囲気のある色味と柄が印象的なサイトです。背景には競馬に関連のある仕事道具の柄があしらわれていて、見どころが満載です。競馬に興味がなくても目を引くため、最後までついスクロールしてしまいます。デコラティブなかわいいデザインは、コンテンツを盛り上げて若い人向けに訴求したい時に向いています

うおみこども園 | 鹿児島県指宿市のこども園

うおみこども園
https://uomi.jp/

パーツごとに飛び出してくるような動きがかわいらしいです。キーカラーの鮮やかな青とピンクが、サイケデリックな雰囲気を演出します。手で切り貼りしたようなタイトル文字とイラストが、子供たちが遊んでいる様子を連想させて印象的です。これらの要素が、子供が見ても楽しめるようなワクワク感を作り出しています。

LAMM

LAMM
https://corp.lamm.tokyo/

まず最初に目に飛び込んでくる、色々なタッチの羊が目に楽しいサイトです。それぞれ違う動きをしているところもポイントです。「人生を遊び尽くせ」というキャッチコピー通り、スクロールするたびに違うパーツが現れます。色だけでなく、動きも一つの要素になります。派手で賑やかなデザインにしたい場合、要素を増やすことで画面を盛り上げることができます。

“シンプル”なかわいさ

シンプルなかわいさは、デコラティブなかわいさとは対極に位置するテイストです。要素をできるだけ少なくし、必要なものだけに絞ったデザインにします。この場合かわいさを出すには、絞った要素をどのような配置・色・サイズにするかなどが重要になります。シンプルにかわいくするには、使うイラストを少なくしたり色数を最大3色までにして白+純色のペールトーンを使うと良いでしょう。

素朴で穏やかな雰囲気のある人を選ばないかわいさで、男女ともやや中年層以降に好まれます。飾り気が少ないもの、素材を見せたいものなどのデザインに向いています。

miruto(ミルト)公式サイト

miruto(ミルト)
https://www.miruto.shop/

商品本体の、機能性以外をなるべくそぎ落としたような雰囲気をデザインに取り入れています。余白が多めで装飾性を最低限にしていますが、ところどころで動く猫のイラストやボタンで手招くようなしっぽの動きがかわいらしくユーザーを誘導します。猫じゃらしのTOPに戻るボタンをクリックすると、猫が飛びつくところも工夫が伺えます。

7月11日オープン! – 塩をまぜるみせ ぐるぐるしゃかしゃか

塩をまぜるみせ ぐるぐるしゃかしゃか
https://guruguru-shakashaka.jp/

飾り気は少ないですが、まるで絵本のような空気感が漂います。海を模したような左右の波の飾りから覗くキャラクターがかわいらしいです。微妙にゆるさを含んだフォントが、全体を素朴にまとめ上げます。シンプルなデザインでは、フォント選びが全体の雰囲気を左右します。ボタンにマウスオーバーすると「ぐるぐる」「しゃかしゃか」という音が聞こえるような動きをするところも工夫されています。

やまいだし憩いの里温泉|「ただいま」と言いたくなる宿

やまいだし憩いの里温泉
https://yamaidashi.com/

子どもが書いたような手書きのタイトル文字が、余白たっぷりの画面に映えます。これだけでも、大人も子供も素になれる空間であることが伺えるようです。写真以外はモノトーンで落ち着いた雰囲気と思いきや変則的に揺れる写真のトリミングや、楽しみ方のコンテンツでは少し色味が入ったりして楽しげな工夫が凝らされています。かわいくするには、四角や直線よりも円や少しブレのある線の方が向いています。

“ナチュラル”なかわいさ

自然体でいるような雰囲気のあるかわいさを、ここでは「ナチュラルなかわいさ」とします。気取らないそのままの様子が感じられるようなテイストです。ナチュラルなかわいさにするにはベージュなどアースカラーを使ったり、クラフト感のある飾りや素材を使うと良いでしょう。シンプルと似ていそうですが、シンプルなかわいさは無機質、ナチュラルなかわいさは有機的なイメージのため異なるものです。

落ち着いてきれいめながら素材感がある雰囲気で、中年層以降の世代に好まれやすいです。自然界にあるものやナチュラルさが売りのものと相性が良いです。

YOAN(ユアン)ONLINE SHOP|うるおう角質ケア、誕生。

YOAN(ユアン)ONLINE SHOP
https://yoan.jp/

温かみがある色味が心地よいシャンプーのサイトです。彩度・明度の差が少ないため、とろけるような液体感をサイト全体で表現しています。ぱっと見て分かりにくいですが、コンセプト部分の背景の楕円が揺れているのがさりげない工夫ポイントです。淡い色味で統一すると雰囲気がぼんやりしがちですが、文字色の濃いグレーが引き締め役になっています。

採用サイト|株式会社 伊藤農園 |

株式会社 伊藤農園
https://recruit.ito-noen.co.jp/

ナチュラルなテイストがぴったりな農園のサイトです。紙のテクスチャが感じられる背景と、手描きのイラストが素朴さを感じさせます。手作りである点を強く伝えたい時、ナチュラルなかわいさはうってつけです。コツコツ丁寧な仕事ぶりが生き生きと伝わります。やや中彩度のトーンで全体が統一されていて見やすいところも良いポイントです。

コアハウス | 人の真ん中にあるものを大切に考える住まいづくり【福山市の工務店】

コアハウス
https://www.corehouse.jp/

余白たっぷりでシンプル寄りですが、手描きで温かみのあるイラストを使った自然な雰囲気のサイトです。イラストを扱う時、サイズ次第ではサイト全体の空気が左右されます。手描きのイラストはアナログなイメージがあり、ナチュラルな雰囲気と相性が良いです。中彩度で明度が高めのライトベージュやオフホワイトを使うと、素朴な空気を出しやすいでしょう。

まとめ

あなたが考えている「かわいい」は、この記事で具体化できたでしょうか。つい「かわいい」だけで済ませてしまいがちですが、イメージがはっきりするとデザインを依頼する時に内容を伝えやすくなります。プライムナンバーズでは、この記事で紹介したテイストを含めかわいいデザインのバナー・LPの制作が可能です。この記事ではまだイメージがぼんやりしている…という方もお気軽にご相談ください。

HP制作について相談する(無料)

この記事で紹介したサイトには、イラストを使用したデザインが多くありました。イラストはタッチ次第で色々なかわいい雰囲気を演出しやすくなります。トレンドのイラストタッチはこちらで紹介しています。

Written By
H.S.

デザイナー

チラシ・パンフレット・Webサイト・バナーなど幅広く担当するグラフィックデザイナー。シンプル、きれいめなデザインを得意とする。生姜とにんにくのたまり漬けをこよなく愛している。おにぎりは明太子、ラーメンは味噌派。