「自社サイトの雰囲気は可愛くしたい」「イメージはまだ固まっていない」など言葉で表しづらいお悩みは、ご相談いただく中で多くあります。一言で「可愛い」と言っても「ガーリーでふわふわ」「ナチュラルで優しい」「ポップでカラフル」など方向性は様々です。
本記事では、当社の事例の中から可愛いホームページを10サイト厳選してご紹介します。色使いやフォント、写真やイラストなど、世界観でファンを作るためのデザインの参考にしてみてください。
ホームページ制作をご検討の方へ
サイバーインテリジェンスは、デザインのテイストがイメージできていない方からのご相談は多くいただきます。色使いやフォントの雰囲気、ブランドのコンセプトやターゲット像を伺いながら「どのような雰囲気が合うのか」を言語化し、デザインの方向性づくりからお手伝いいたします。まずはお気軽に無料相談をご利用ください。
目次
目次
可愛いホームページの制作事例10選
MADOIRO 様
| サイトタイプ | サービスサイト |
| URL | https://madoiro.net/ |
三重県鈴鹿市のオーダーカーテン専門店、MADOIRO（マドイロ）様のサイトです。窓から差し込む柔らかい光の印象をそのままデザインに落とし込んでいます。ベースカラーは薄くて明るいベージュを採用し、全体的に角を取って見た目が柔らかい印象になるように意識しています。アクセントカラーは暖色のオレンジを採用し、デザインに暖かさをプラスしています。
ファーストビュー直下のオファー部分は、「来店予約」「訪問予約」「お見積り」「メール」「LINE」など、数あるお問い合わせ方法を少しでも整理して見やすくなるようにブロックを設けて一つにまとめています。
サービス紹介の部分では手書きのイラストを配置することで、テーマカラーのベージュと柔らかい印象を統一させています。文字は大きさと情報の重要度によって色を変更し、散らかった印象にならないようにレイアウトは規則性を持ったものにしています。
カーキッチンサクラ 様
| サイトタイプ | サービスサイト |
| URL | https://car-kitchen-sakura.com/ |
京都府三条の絶品カレーパンのレストラン、カーキッチンサクラ様のサイトです。おしゃれで可愛らしい外装の店舗で、お子さん連れの家族をターゲットとしてデザインをしました。色は全体的に淡いものを採用し、親しみやすく優しい印象を受ける配色となっています。
カレーパンを紹介するブロックでは、食欲を促進させる暖色を淡くして採用し、「カレーパン」の文字は角の取れた柔らかいゴシック体を使用して、サイト全体の可愛らしさが崩れないフォント選びを意識しています。
「店舗案内」は店内の可愛らしさが伝わるように大きめに写真を配置し、各項目には小さくアイコンを添えることで、細かい部分でも可愛らしさが出るような工夫をしています。
ウェルネス 様
| サイトタイプ | サービスサイト |
| URL | https://wellness.nojima-k.jp/ |
富山県魚津市の室内型ドッグラン、ウェルネス様のサイトです。ワンちゃんが楽しむ様子をおさめた写真を豊富に掲載しているため、穏やかな印象が伝わるように明度の高い配色でまとめています。コンテンツの配置はできるだけシンプルにまとめ、各コンテンツの形やデザインで動きを出しています。
ファーストビュー直下では、どのような施設なのかを簡潔に伝えるセクションとともに、不規則で柔らかい形でトリミングされた写真を掲載しています。また、手書きのマップを大きく掲載することで、デザインの柔らかさを更に押し出しています。
アクセスの部分では、規則的なレイアウトに加えて「Check out!」の装飾や「国道8号線 友道東すぐそば」の吹き出しなど、細かいあしらいを含めており、ヘッダーからフッターまで雰囲気を保った作りになっています。
松新開発株式会社 様
| サイトタイプ | リクルートサイト |
| URL | https://recruit.kachigawanomori.jp/ |
愛知県春日井市・日進市の学童保育、松新開発様のリクルートサイトです。リクルートサイトなので、ターゲットは子育て後のお母さん世代になりますが、学童の雰囲気を伝えるために、明るく元気な印象を与えるために、本来は3色程度でまとめるホームページを4色以上使用しています。
色鉛筆やそろばん、ハサミなどを装飾として配置して、楽しげで賑やかな印象を与えています。また、リクルートサイトということもあり、スタッフやお子様の写真をデザインの一部として取り入れて可愛らしさを出しています。
説明で使用するイラストは全てベタ塗りのものを採用し、子供らしさが出るように意識しています。見た目の賑やかさだけに全フリするのではなく、求人サイトとして会社の方針や考え方が分かりやすく伝わるように、バランスを見極めながら掲載しています。
ドッグサロンチャウダ 様
| サイトタイプ | サービスサイト |
| URL | https://dog-chauda.com/ |
岐阜県羽島市で犬のカットやシャンプー、爪切りや耳掃除などを行うドッグサロンチャウダ様のサイトです。スマホユーザーに特化した作りになっており、PCでアクセスした場合は、背景に足跡の壁紙が表示される可愛らしいデザインになっています。
「メニュー」を初めとした見出しの横にはワンちゃんのアイコンを配置したり、見出しにあしらいを設けたりすることで、単調なデザインにならず、可愛らしさを出すことができています。メニューの背景も全て同色にするのではなく、白と黄色を交互に配置することで、ユーザービリティの面も配慮したデザインになっています。
「ギャラリー」ページへの導線は、印刷された写真を貼り付けたデザインで、細かなあしらいを豊富に採用して楽しげのある可愛いデザインになっています。マップには、犬の形にトリミングされた看板の写真が掲載されており、可愛さ倍増です。
株式会社 花きぬ 様
| サイトタイプ | サービスサイト |
| URL | https://furisode.hanakinu.jp/tsu/ |
三重県津市にある振袖専門店、花きぬ様のサイトです。ターゲットが女性となるので、サイト全体のテーマカラーはピンクに設定されています。こちらも同様にスマホ特化のホームページとなっています。
「BIGプレゼント」のブロックは、プレゼントの魅力を底上げするキラキラしたエフェクトを設けています。写真が豪華なので、それに負けないデザインを採用することで、テーマが統一されています。
花きぬの強みを紹介する部分では、「1,500」の文字をピンク一色にするのではなく2色に分けたり、「地域最大級」の文字にグラデーションをかけるなど、細かいこだわりを入れています。「品揃え」の下線や「取扱いブランドの背景も可愛さを促進させるポイントです。
トラベルハウス 様
| サイトタイプ | サービスサイト |
| URL | https://travelhouse-kyoto.com/ |
京都府京都市で軽トラックキャンピングカーの販売・レンタルを行うトラベルハウス様のサイトです。アウトドアの雰囲気を全面に打ち出した、女性向けのデザインで使われる「可愛い」とは少し方向性の違う可愛いデザインです。メインの配色は、茶色や緑など、色の印象からは「可愛い」は連想しにくいですが、あしらいや写真、デザインで総合的に可愛いサイトを作り上げています。
ファーストビュー直下は、ワクワク感が伝わるコピーとともに、楽しそうな親子やキャンピングカーの写真が使用された可愛らしいデザインでまとまっています。使用する色も茶色と緑に限定せず、青系統の色もアクセントとして使用しておしゃれなデザインに仕上がっています。
使用するデザインは切り抜かれた写真だけではなくイラスト調のキャンピングカーやあしらいを使用しています。この可愛らしいデザインがあるからこそ、メインターゲットの男性だけではなく女性も見やすい雰囲気になっています。
サイバーインテリジェンス
| サイトタイプ | リクルートサイト |
| URL | https://recruit.cyber-intelligence.co.jp/ |
岐阜のホームページ制作会社、弊社サイバーインテリジェンスのリクルートサイトです。新卒の学生に向けた明るい印象を全面に打ち出したデザインで、イラストをメインで使用しています。配色は白色をベースとして、明るい「赤・黄・緑・青」を使用しています。色が多くなるとまとめるのが難しくなりますが、リクルートサイトへ訪れるユーザーは期待と不安を抱えてサイトにやってきます。そんな不安を和らげる可愛らしい印象を反映したデザインになっています。
魅力を紹介する部分は、基本的な情報の塊は規則的なレイアウトに沿っていますが、あしらいはランダム性を強めたり、ドロップシャドウは傾きを入れるなど遊び心溢れるデザインになっています。文章も短くまとめているため、読みやすくスムーズにスクロールできるのも魅力です。
職種紹介のブロックは職種ごとに色を変え、楽しそうな印象を与えつつ、余白を贅沢に使用して見やすさを意識しています。明度が統一されているため、一つの色が浮くこと無く、まとまった印象を与えることができています。
つつきの郷 様
| サイトタイプ | コーポレートサイト |
| URL | https://tsutsukinosato.or.jp/ |
京都府京田辺市の特別養護老人ホーム、つつきの郷様のサイトです。「穏やかな日常が広がる」というキャッチコピーと共に、温かい雰囲気が伝わるようにテーマカラーは暖色のオレンジを使用しています。
アットホームな雰囲気が伝わるレクリエーションの様子とともに淡い色の花やクローバーのイラストをランダム性のある配置で見せています。レイアウトにも動きがあるため、活気のある印象を受け取ることができます。
「お知らせ」付近には、葉っぱの装飾や木のイラストなど柔らかい印象を受けるあしらいを豊富に活用するとともに掲載する写真は角丸や丸形でトリミングすることで、デザインで印象が分散しないように意識しています。
入鹿亭 様
| サイトタイプ | サービスサイト |
| URL | https://irukatei.com/ |
愛知県犬山市にある入鹿池のレンタルボート店、入鹿亭様のサイトです。利用するお客様は、中年男性を中心に子連れのご家族や若いカップルなど様々で、とにかく明るい印象が特徴のお店です。親しみやすく元気な印象が与えられるように、水をイメージする青と補色の黄色を中心に使用したデザインになっています。
このサイトの目玉であるレンタルボートの部分は「初心者おすすめ」や「入鹿池初導入」のバッジをつけたりすることで、見る側のワクワク感を増進させています。サイトの途中途中に竿やルアーなどをあしらいとして入れることで、よりページを賑やかにしています。
ご家族のお子様が見ても楽しそうと思える雰囲気を目指しているため、強みを紹介する部分の「その01」を魚の形にしたり、記念撮影の利用者様の写真を掲載するなど遊び心満載のデザインになっています。
可愛いホームページの制作を依頼するときのポイント
「とにかく可愛い感じでお願いします」これだけでは、想像しているデザインが上がってくる可能性は低いですよね。自分のイメージを正確に制作会社に伝えるためにも以下の観点を意識して見てください。
目的とターゲットを共有する
まずは、「誰に向けた、何のためのホームページか」をはっきりさせましょう。
-
10〜20代女性に「可愛い世界観」でファンになってほしい
-
子育て世代のママに「やさしくて安心できる雰囲気」を伝えたい
-
サロンやショップの予約数・売上アップにつなげたい
目的とターゲットをセットで伝えると、制作会社はそれに沿って様々な提案や戦略を考えてくれます。逆に、伝えること全てが曖昧だと、抽象的で内容がふわっとしたものができてしまいます。
デザインの好みを伝えておく
他人の「可愛い」が理解し難いことがあるように、「可愛い」は幅が広いです。自社にはどんな可愛いが合うのか、具体的なイメージとなる参考サイトを見せると方向性もはっきりします。
逆に、好みではないデザインも合わせて共有しておくと、無駄な修正や大きく工程が戻るという状況を避けることができます。具体的には「派手な色は嫌」「淡い色は使用せずに可愛いを表現したい」「子供っぽいのはNG」など、自分が目指している方向性と近いけど、なってほしくないデザインテイストは、事前に共有しましょう。
写真やイラストの世界観も一緒に決める
可愛いデザインの中に、特に意図せず撮った写真をそのまま入れてしまうと、そこだけ雰囲気が浮いて見えてしまいます。そのため、どんな写真・イラストを使うのか、全体のデザインと相性が良いかどうかは、事前に制作会社とすり合わせておくことが大切です。
「写真はあとで用意します」としてデザインだけ先に進めてしまうと、あとから写真をデザインに寄せて撮影する必要が出てきます。その結果、サイト全体の世界観がちぐはぐになりやすくなるため、できるだけ早い段階で、写真やイラストのテイストも含めて一緒に決めておくことをおすすめします。
まとめ
「可愛いデザイン」のホームページで本当に差がつくのは、その可愛さがターゲットやブランドの世界観ときちんと結びついているかどうかです。今回紹介したような、意図のある可愛さがあると、「可愛くてちゃんと伝わる」「世界観でファンになってもらえる」ホームページになります。
参考サイトをなんとなく真似するのではなく、「自社に合う可愛さ」「自社らしくない可愛さ」を言葉にしながら、デザインと中身の両方を整えていくことが大切です。その視点さえ持っていれば、可愛いホームページは見た目だけで終わらず、ちゃんと成果にもつながる「入口」として育っていきます。
可愛いホームページ制作をご検討中の方へ
「自社にはどんな可愛さが合うのか」「世界観をうまく言葉にできない」と感じていらっしゃる場合は、ぜひ一度ご相談ください。サイバーインテリジェンスは、ターゲットやブランドイメージを伺いながら、「色・写真・イラスト・レイアウト」を含めた世界観づくりから相談が可能です。まずは無料相談にて、現在のサイトやお悩みをお聞かせください。
