【デザイン事例集】かわいいサイト11選！ピンク・花柄・キャラクターを用いたサイトなどを紹介します。

「かわいいデザインにしたいけど、具体的にどういうビジュアルにすれば良いんだろう…」
「参考になるかわいいデザインのサイトを知りたい！」

といったことを考えている、Webデザイナーの方もいらっしゃるのではないでしょうか？

「cute＝かわいい」と英語の授業で習った人が多いと思いますが、「かわいい」の中には美しい・癒し・素敵など様々な意味が含まれており、海外では該当する言葉が見当たらず「kawaii」と表記されるほど「かわいい」は曖昧な言葉です。本記事では、

• ピンクのサイト
• 花柄のサイト
• キャラクターを用いたサイト
• パステルカラーのサイト
• ビビットカラーのサイト

といったジャンルに分けて、全部で11個のかわいいサイトを紹介します。ぜひ参考にしてみてください。

ピンクのサイト

ピンク色と聞いてイメージするのは「かわいい・華やか・愛情・女性らしさ・優しさ」と言ったところでしょうか。ピンクは桜色と言い換えられることも多く、春の色としても使われます。

また、ピンク一色の部屋にいた場合、15分経てば怒りが静まると言われているほど、ピンクは人に安心感や幸福感をもたらす色です。そのため、ストレス緩和の色ともいわれていますよ。

そのことから、相手に安心感を与えることができるという点で、医療関係のサイトに向いています。人に良い印象を与えるということから、ギフト商品とも相性が良いです。

ピンク×ビビットカラー【ロート リセ】

出典：ロート リセ｜ロート製薬

ロート製薬が販売する女性をターゲットにした目薬「リセ」のブランドサイトです。トップページにビビットなピンク色の背景を使い、女性らしさを演出。
モデルには1,000年に1度の美少女と言われる橋本環奈さんを起用することで、「かわいい人が勧める商品＝かわいい商品」という印象をユーザーに与えています。

文章の枠にハート型を使っていたりと、様々な箇所でかわいらしさを表現している「かわいい」が詰まったサイトです。

ピンク×手書きイラスト【ファイブミニ】

出典：ファイブミニ公式サイト｜大塚製薬

大塚製薬が販売する「ファイブミニ」のブランドサイトです。

商品と同じ色合いのピンクを、イメージモデルの仲里依紗さんの服に使用したり、商品の下に配置するなど統一感を持たせ、サイト一面を通して「かわいい」を作っています。

また、レタス1.8個分やレモン15個分の表記を、それぞれの手書き風の絵の中に書くことで、かわいさを演出。「メディア」という項目内では、バリエーションの違う仲さんのポスターを設置し、写真集のようなデザインに仕上げています。

花柄のサイト

花柄は、花が持つ美しさ・幸福感・可憐さを表現します。
花の大きさによっても与える印象が変わり、大花柄を使用することで華やかな印象を与え、小花柄を使用すると控えめでかわいらしい印象を与えることができますよ。

花の種類によっても、以下のようにイメージが異なります。

さらに、花柄とピンク色を掛け合わせることで、かわいさを倍増させることができますので、試してみてください。

花柄×ピンク【Maison de FLEUR】

出典：Maison de FLEUR（メゾン ド フルール）｜STRIPE CLUB

ヨーロッパ風の上品なライフスタイル雑貨を販売するMaison de FLEURのブランドサイトです。メインビジュアルにはヨーロッパ風のお城が描かれ、背景には花柄が薄く描かれていて乙女心をくすぐるデザインとなっています。

トップページで取り上げられている写真には額縁のような枠がついていて、まるで絵画のようです。商品の飛び先ページの写真も、大きめの写真を並べ、1つ1つにおしゃれな文字で番号を振ることで、コレクション雑誌を見ているような感覚を与えています。

花柄×丸みを帯びた写真【Swankiss】

出典：Swankiss（スワンキス）Official Site

ガーリーなデザインを得意とする、Swankissというアパレルブランドのサイトトップページです。背景にバラの花を用いています。トップの写真にもバラの装飾を付けたり、写真の形自体も柔らかい雰囲気のデザインにしたりと可憐な印象を与えるサイトです。

通常ならば「・」で表すカルーセルインジケーターにハートマークを使うなど、細かいところにもかわいらしさを散りばめています。

さらに、先ほど紹介したメゾンドフル―ルのように、写真の外枠に額縁のようなデザインが使われており、絵画のようなかわいさを演出しています。

キャラクターを用いたサイト

キャラクターは、丸みを帯びた柔らかいデザインのものが多く、閲覧者に対して親近感・安心感・愛されるイメージを与えます。

もちろん、ディズニーや有名アニメなどのIP（知財）を販促に活用する効果は絶大ではありますが、なかには自社のオリジナルキャラクターを作り、サイトを通してマスコット化に成功している例もありますよ。

キャラクター×ポップなデザイン【フェリシモ】

出典：ドラえもん｜フェリシモ

大手通販会社であるフェリシモが運営する、ドラえもんのコラボ商品専用ページです。
最初から最後まですべて漫画のようなデザインになっており、合間にドラえもんとその仲間たちが現れる楽しいデザインにすることで「かわいい」を表現しています。

ポップな色や模様が多く使われており、小さいお子様にもかわいいと思ってもらえるデザインです。

「かわいい」のターゲットは女性だと思われがちですが、このように幅広い層のファンがいるキャラクターや、ポップなデザインでその世界観を表現することで、年齢・性別問わず多くの人々に「かわいい」を届けることができます。

キャラクター×手書きイラスト【くまころ】

出典：とろ～りコロッケ「くまコロ」｜熊取うまいガイド

大阪南部にある熊取町という町の名産品コロッケ「くまコロ」の紹介ページです。手書き風のキャラクターを用いたり、コロッケの写真に顔を書くなど、癒しの印象を与えています。

また、文字を囲む枠や写真の̚カドを無くして丸みの帯びたデザインを設定し、サイト全体を柔らかいイメージに仕上げていますね。

コロッケの茶色をイメージカラーとしていて、落ち着きを与えながらもキャラクターのかわいさを引き出すという、大人向けのかわいさを演出しています。

キャラクター×パステルカラー【PASMO】

出典：PASMO（パスモ）

交通系ICカード「PASMO」のブランドサイトです。PASMOには、「PASUMOのロボット」というイメージキャラクターが設定されており、サイト内の至る所にこのキャラクターが登場しています。

PASMOの利用方法をキャラクターを使って説明することで、わかりやすさを追求しながらかわいさを表現。ユーザーが、サイトに対して好意的なイメージ持つ可能性が高いです。

キャラクター自体もそうですがサイト内でもピンクや水色、黄緑などのパステルカラーを使用することで、柔らかい雰囲気を表現していますね。

パステルカラーのサイト

パステルカラーは柔らかくて優しい印象を与える色です。桜や藤の花を連想させることから、春のイメージや穏やか・清々しい気持ちを表現する色です。

また、ふんわりとした印象を与えることから、甘めのお菓子を宣伝する際にもよく使われます。

パステルカラーは曖昧さを表現するのが得意なので、自然由来の優しい味・柔らかい食感の商品や、肌なじみの良い化粧品などのサイトと相性が良いです。

パステルカラー×手書きイラスト【リリオンテ】

出典：㈱ケーツーコミュニケーション Lilionte（リリオンテ）

こちらは「リリオンテ」という、チョコとラムネを融合させたお菓子販売店のブランドサイトです。パステルブルーをイメージカラーとして使い、ラムネの爽やかさを表現しています。それと同時に、ころっとしたカラフルな見た目の商品を載せることで、かわいさもアピール。

「商品の楽しみ方」という項目では手書きデザインの絵を用いて説明することで、柔らかい雰囲気を表現しています。

パステルカラー×丸みを帯びた写真【イグニスiO】

出典：IGNIS iO（イグニス イオ）公式サイト

化粧品会社イグニスの商品「イグニスイオ」のブランドサイトです。この化粧品は、個人のライフスタイルに合わせて自由に選べるアラカルトコスメをコンセプトに作られました。

テーマカラーとして色とりどりのパステルカラーを使ったり、様々な形の写真や枠を使うことで、様々なライフスタイルやシチュエーションを想像させます。

フルーツやお花を使うことでかわいさを表現。フルーツをモチーフにした文房具などの商品は「かわいい」と人気がありますが、その理由はポップな色合いが関係していると考えられます。

カラフルな色のサイト内にカラフルなフルーツや商品を置くことで、カラフル×カラフルになり、かわいいが倍増していますね。

ビビットカラーのサイト

ビビットカラーは、元気でパワフルという印象を与えます。彩度の高いビビットカラーは、認知症の発症を防ぐともいわれているほど、活力を与えてくれる色です。ポップな印象も与えるので、動きがある写真や印象的な文字とも相性がいいでしょう。

さらに、レトロなデザインにもビビットカラーが使われることも多く、様々なバリエーションのかわいさを引き出してくれる色です。

ビビットカラー×動き【ルルルン クレンジング】

出典：フェイスマスク ルルルン

フェイスマスクで有名な「ルルルン」というブランドから派生した、クレンジングブランドの「ルルルン クレンジング」という商品のブランドサイトです。

サイト内で使われている、写真・デザイン・文体すべてに動きが感じられるという特徴があります。特に、トップの写真からは、商品を使用すると楽しい気分になるような印象を受けます。

動きがあるデザイン+ポップなデザインにより、弾けるようなかわいさを引き出しています。

ビビットカラー×レトロ【オオサカマニア】

出典：オオサカマニア｜Osaka Metro

「オオサカマニア」という、大阪の観光名所やジャンルごとのおすすめなお店などを掲載している情報サイトです。

1つ1つのジャンルがレトロな雰囲気の絵で表現。完璧すぎず手作り感がある絵なので、ゆるキャラと似たかわいさを感じます。そして、絵に合わせて異なるビビットカラーを背景に設定することで、かわいさを倍増させていますね。

文体も手書き感のある太字の文体を使うことでも、ポップな雰囲気を引き出しています。

かわいいサイトを作って、衝動買いを促そう！

今回は「ピンク・花柄・キャラクター・パステルカラー・ビビットカラー」の5種類のかわいい要素に分類した、11種類のサイトを紹介しました。

個人的な話なのですが、この記事を執筆するために「かわいいサイト」を見ていたら、ある商品がどうしても欲しくなってしまい、衝動買いをしてしまいました（笑）
「女脳」型の人は衝動買いをしやすいと言われていますので、かわいいサイトで集客して、衝動買いに持っていくこともコンバージョン率を向上させる一つの手です。

冒頭でも言ったように、「かわいい」は定義できるものではなく、今回紹介した以外にも「かわいい」の要素はたくさんあります。この記事や、いろいろな事例サイトを参考にして、自社に合った「かわいい」サイトを作っていきましょう。