かわいいデザインの作り方と参考になるWebサイト11選

かわいいデザインをまとめました

こんにちは、デザイナーのフジコです。

以前、Webデザインのまとめとして和風のデザインを取り上げましたが、今回は「かわいいデザイン」を作る上で参考になるWebサイトと、そのポイントをご紹介します。

私の業務では機会があまり多くないのですが、稀にそういったデザインの依頼をいただくとテンションが上がります(笑)
「かわいい」と感じるものは人によってさまざまだと思いますが、私が思う「かわいい」を色々な切り口で取り上げてみたいと思います。

※掲載されている情報は、2015年12月現在のものです。URL等、変更となる場合がありますのでご了承ください。

ガーリー × かわいい


Tokyo---Magnolia-Bakery
Tokyo – Magnolia Bakery
http://www.magnoliabakery.com/locations/japan-jingumae-shibuya-ku/

NYを中心に展開されているカップケーキが有名なお店のWebサイト。
壁紙のようにカップケーキ模様の背景が入っていたり、プレートの形をした見出しや写真をスクラップしたようなデザイン、少しくすんだ色合いで、どこか懐かしいお店に入ったような感じがしますね。


かわいい姫系インテリア家具・雑貨の通販|ロマプリ・ロマンティックプリンセス
かわいい姫系インテリア家具・雑貨の通販|ロマプリ・ロマンティックプリンセス
http://www.magnoliabakery.com/locations/tokyo/

リボンで飾った見出し、商品写真を縁取る金の額縁、繊細な文様の罫線……挙げたらきりがありませんが、スイートなデザインをしたい時、とても参考になると思います。
何気ないところですが、左隅の検索の枠が少しかすれていたり、フッターの上のアイコンが色鉛筆で描いたようなイラストだったりと、サイトの隅々にまでこだわりがあるのが素敵です。
また、注目の特集ページを見ると、それぞれのページでまた違った装飾が施してあります。


以下のサイトは画像を掲載しませんが、デザインの参考になるのでぜひご覧ください。

ラデュレ | ラデュレ公式通販サイト
http://www.laduree.jp

女性に人気のマカロンが有名なお店のECサイト。
背景に植物のパターンを添えたり、文様やレースのような罫線を入れることで、サイト全体が華やかな印象になっています。
ここでベースカラーがピンクだとかなりスイートな感じになりますが、お店のテーマカラーでもある明度の高い黄緑色を使っていることで、軽やかな印象に仕上がっています。
メイン画像の下の「ラデュレのマカロン」のマカロンの写真をクリックすると、それぞれのフレーバーの詳細を見られるのもいいですね。


MAJOLICA MAJORCA|資生堂
http://www.shiseido.co.jp/mj/index.html

ラデュレは爽やかなかわいさだったのに対して、こちらはちょっと毒のあるかわいさ。
サイト全体をゴシックな形の罫線やリボンのような見出しなどで彩って、ブランドの世界観を存分に表現しています。
アーカイブのページからは過去のサイトも見られます。

シンプル × かわいい



pindot-studio*キッズフォトスタジオ*東京-目黒区
pindot studio*キッズフォトスタジオ*東京 目黒区
http://www.pindotstudio.com/

サイト全体に繊細な線画がちりばめられていて、上品で柔らかい雰囲気のデザインです。
イラストが多いとうるさくなりかねませんが、絶妙なサイズと配置になっていること、また色数を極力抑えることで、写真が引き立っています。
写真スタジオのサイトは写真の見せ方が上手なデザインが多いので参考になりますね。


動物雑貨を中心としたセレクトショップ|nocoto(ノコト)
動物雑貨を中心としたセレクトショップ|nocoto(ノコト)
http://nocoto.jp

モノクロベースのデザインの中にポップな色をポイントで取り入れたり、小さく鳥のイラストが添えられていたりと「大人かわいい」イメージに仕上がっています。


以下のサイトは画像を掲載しませんが、デザインの参考になるのでぜひご覧ください。

Jam & Fruits Collection フルーツの恵みを、アヲハタのジャムで。
http://www.kewpie.co.jp/fruits/

青系+水玉モチーフでまとめたさわやかなデザイン。
食品系であれば、お皿やランチョンマットに凝ってみたり……写真の撮り方や使い方も、かわいい雰囲気を作る上で重要なポイントになります。
そもそも色とりどりのジャムや瓶というモチーフ自体がかわいいんですよね(笑)

ポップ × かわいい


ジェリーネイル【Jelly-Nail】公式通販サイト
ジェリーネイル【Jelly Nail】公式通販サイト
http://www.jellynail.net

カラフルなペンで自由に書き込んだようなポップさがかわいいデザインです。
内容に合わせてページ毎にレイアウトが違っているのもポイント。
にぎやかなデザインですが、内容はとても見やすくまとめられています。


以下のサイトは画像を掲載しませんが、デザインの参考になるのでぜひご覧ください。

旅行の服装や持ち物リスト、お土産・観光情報ならJTB×女子旅つくるプロジェクト
http://jtpj.jp/ouen/

女性向けの旅に特化したJTBの情報サイト。
明るくポップな色使いとイラストがおしゃれなデザインです。
写真とイラストのバランスも絶妙ですね。

子供 × かわいい


こどもの国
こどもの国
http://www.kodomonokuni.org

ページの随所にちりばめられたイラストがとっても楽しいデザインです。
背景のイラストが時間を置いて出てきたり、右下の「ページの先頭へ」の風船につかまった男の子はゆらゆら揺れていたり、フッターでは電車が走ってきたりと、動きも楽しいですね。
今の背景は雪のイラストですので、きっと季節毎に変わるのでしょう。
ポンポン付きの帽子が集まったようなロゴも素敵です。


にこにこ小児歯科|福岡・春日・太宰府・大野城・筑紫野の小児歯科・矯正治療
にこにこ小児歯科|福岡・春日・太宰府・大野城・筑紫野の小児歯科・矯正治療
http://2525shika.com

トップページのメインビジュアルが大きな口の中に!明るく柔らかな背景色は顔の色なんですね。
イラストや色づかいも素敵ですが、見出しを縦書きにしたり、ページによってさまざまな形のレイアウトを取り入れたりと、サイト全体にリズムがあります。
また、歯にまつわる話が非常に分かりやすく書かれており、親御さんも安心して治療を任せられますね。

子供向けと言ってもWebサイトを実際に見る(利用する)のは大人の場合が多いので、かわいさだけでなく「誠実さ」を感じられる点がポイントかと思います。

かわいさはバランスが大事


デザイン全般に言えることですが、やはりバランスが大事!
装飾を加えすぎると、甘すぎるお菓子みたいになってしまいます。

ご紹介したデザインにあったように、あんまりかわいくしすぎないようにしたいな〜という時はモノクロや寒色系でまとめてみたり、逆に甘さを添えたい時は罫線に凝ってみたり、淡いピンクや黄色でまとめたりすることで、かわいさをプラスさせることもできます。

それと、別のエントリーでもお話ししましたが、Web上だけでなく身の回りのモノに「かわいい」のヒントが沢山あります
個人的には洋菓子屋さんのデメルキルフェボン、PAUL & JOEの化粧品のパッケージなどを見ると「かわいいなあ」とうっとりしてしまいます。

そんなわけで、デザインに行き詰まった時はデパートなどに行ってインスピレーションを刺激するのがオススメですが、素敵なものが多いので、色々と買いすぎてしまわないように注意しましょう(笑)

株式会社ライズウィル

株式会社ライズウィル

〒110-0016
東京都台東区台東1-27-11 やわらぎビル2F
TEL : 03-4590-3200
FAX : 03-4590-3201
E-Mail : info@risewill.co.jp
URL : https://www.risewill.co.jp

海上コンテナ輸送管理システム「海コン魂!」
海コン魂!
面接予約・スタッフ管理システム「WebWORKS.」
WebWORKS.