電話受付中 平日10:00~19:00 03-5919-0055

日本最大級のホームページ制作会社検索サイト

お急ぎの方はお電話で !( 平日10:00〜19:00 )

03-5919-0055

無料でWeb発注相談 ! 24時間受付中 !

メールで相談する

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

優良WEB編集部

Written by

優良WEB編集部

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

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

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

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

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

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

【発注先探しはお任せください】

お問い合わせバナー

優良WEBではWEB発注無料相談を行なっています!「相場がわからない」「優良な発注先見極めのポイントは?」などの相談に無料で対応いたします。実は優良WEB運営母体の会社もWEB制作会社。WEB制作のプロがご希望条件に合った発注先探しのお手伝いもできますので、是非お問い合わせください。

 

無料相談に対応するコンサルタント紹介

コンサルタント佐々木

佐々木

コンサルタントの佐々木です。Webのプロとして、現在までに累計200社以上のWeb制作に携わってきました。知識がない方にもわかりやすいアドバイスを心がけています!お気軽にご相談ください!

コンサルタント佐々木

 

電話相談も無料で受付中です!お気軽にお電話ください。:03-5919-0055(平日10:00〜19:00)メールの方はこちらから!

ピンクのサイト

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

また、ピンク一色の部屋にいた場合、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種類のサイトを紹介しました。

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

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

この記事を書いたライター

優良WEB編集部

優良WEB編集部

運営元であるホームページ制作会社、JetBのメンバーで構成された編集チームです。1,000社以上のホームページ制作を行なってきた経験やノウハウを活かし、プロの目線からホームページ制作に関するさまざまな情報をお届けします。

このライターの記事一覧

この記事を監修した人

⽵内 勇⼈

⽵内 勇⼈

JetB株式会社代表取締役。2014年に同社を創業し代表取締役に就任。同社では『広告費合戦に巻き込まれないWebマーケティング』をコンセプトにWebサイト制作やコンテンツ制作サービスを提供。中小企業を中心に1,200社以上の顧客を抱える。

>この監修者の著書をアマゾンで見る この監修者の記事一覧

Share

関連記事

おすすめ記事

Share