Web Design

Webデザインのかわいい参考サイトまとめ【女性や子供向けもあり】

2021年6月25日

Webデザイン職業訓練

キーワード設定(集客)→ Webデザイン かわいい
① 読者が抱える問題 → 読者が抱えている悩みや問題を明確にする
顕在ニーズ(なぜ知りたいのか?読者が気づいている悩み)かわいいキュートなWebデザインの参考サイトを知りたい
潜在ニーズ(次に知りたいことは?読者が気づいていない悩み)女性向けや子供向けのWebデザインも参考までに知りたい
② 記事を読む価値 → あなたの記事を読むとどうなるのかを具体的に伝える
かわいいキュートなWebデザインの参考サイトがわかる
女性向け、子供向けのWebデザインの参考サイトもわかる
③ 記事の根拠信頼性 → ②で示した結果が出る根拠を伝える
2019年1月からWordPressで当ブログ開設(最高で月間62,000PV)
2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)
使用テキスト:Webデザイン良質見本帳

④ 行動 → 読者の行動は?(マネタイズ設計)
Webデザイン参考サイト集を途中に入れる
最下段でWebデザイン基礎知識へリンク
書籍の購入(まとめで3冊紹介)

Webデザインのかわいい参考サイトまとめ【女性や子供向けもあり】

職業訓練Webデザイン

 【前提】かわいいキュートなデザインの作り方

色 → 明度を上げた明るい色で構成する
書体 → まるみがかった文字(やわらかい印象)、明朝体(フェミニン、おしゃれ)
パーツ → 背景(網がけ、水玉、水彩)、レース、リボン、花や植物、手書き風アイコン

» 参考:Webデザイン良質見本帳

かわいいWebデザインの参考になるサイト5つを紹介していきます。

レースやチェック、花飾りを使ったサイト

Webデザインかわいい参考サイト

オカメインコ専門店『Bay Birds』様のサイトです。
» 参考サイト:Bay Birds

 サイトを見て、感じたこと

ファーストビューで何屋かわかる
最新情報の更新があり、来訪時の期待感あり
オカメインコを飼ったときの未来が見える(行動)
他社にはない3つの強み(トリのオチもある)
Twitterのアイコンがインコになっている(差別化)
お客さまの声の代わりに、お客さまからの写真がある(信頼性)
「オカメインコ 専門店」で検索1位(権威性)

 サイトデザインの特徴

ふんわり黄色、ピンクの水彩の花模様
グローバルナビに手書き風のアイコン、レース模様
植物の飾り枠やハート、見出しテキストの点線

先日、職業訓練校でサイトを作りました。
自分で作ってみたからこそ、気づけたことです。

サイトを作る前にも『Bay Birds』さんのサイトを見ましたが、上記のような気づきはなかったです。
なんとなく「かわいいサイトだなぁ」くらい。

職業訓練校で実際にサイト制作をして、初めて違いがわかりました。
同時に『Bay Birds』さんのレベルの高さに恐ろしさを感じました。

ベジータがフリーザの底知れぬ強さに気づき、絶望して涙する。

ベジータと同じ気持ちです。

こーいち
正直なところ、泣きたくなるような圧倒的な差を見せつけられました。

ペールトーンの配色でまとめたサイト

Webデザインのかわいい参考サイトまとめ

香水の『puriettte』様のサイトです。
» 参考サイト:puriettte

 サイトを見て、感じたこと

ファーストビューで何屋かわかる
配色がきれいで、おしゃれ
香水が欲しくなるような可愛いサイト
リボンの商品見出しもこだわり感満載
3つの単位で商品詳細の説明がありわかりやすい
オンラインストアのページはシンプルな印象に変わる

 サイトデザインの特徴

花やリボンの飾りもあり
アクセントカラーにゴールド
ペールトーンのやわらかいピンク、水色、黄色

「こんなデザイン、思いつく?」という印象です。
自力でやっていては、私のレベルでは到底無理。

何年かかるかわかりません。
たくさんの良質なサイトを見て、吸収するしかないです。

配色が可愛い、丸いデザインのサイト

Webデザインのかわいい参考サイト

海外のケーキショップ『Sweet Cake』様のサイトです。
» 参考サイト:Sweet Cake

 サイトを見て、感じたこと

ファーストビューで何屋かわかる
配色がかわいい
丸みを帯びたボックス
丸みを帯びたアイコン、キャッチ画像
作っている人の顔がわかる(それぞれのSNS掲載)
Blogで更新情報あり、どんな店舗かわかる
何ができるかのスキルリストがある
送信しやすい簡易なコンタクトフォーム

シンプルでありながら、細かい工夫があります。
小さなロゴマークやフォントや配色の統一感。

マカロンの色合いを使っているのかもしれません。

こーいち
働いている人の顔、人となりが見えるのは好印象でした。

まるいフォントのサイト

Webデザインかわいい参考サイト

『おくやま動物病院』様のサイトです。
» 参考サイト:おくやま動物病院

 サイトを見て、感じたこと

ファーストビューで何屋かわかる
ファーストビューで営業時間、休みがわかる
ファーストビューでMapへアクセスできる
ファーストビューで働いている人の顔も見える
ロゴも犬と猫でかわいい(微笑み)、目立つ配色
今、どのページを見ているのかカテゴリバーの色でわかる
色合いが統一されていてきれい、白もベースカラーに
スタッフの顔写真、声も掲載
ブログは院長先生だけでなく看護師様や他スタッフ様も書いている
信頼性の担保あり(経歴や医療器具など)

 サイトデザインの特徴

丸みを帯びたフォント(やわらかさ、親近感)
WebフォントにLato、Noto Sans CJK JP
見出しは丸みのあるフォントをSVGで書き出し

恐ろしいサイトです。
お手本のようなサイト。

大切なペットを預けられるかどうか、お客さまが安心できるかどうか。
どうしたらお客さまに信頼してもらえるか。

ファーストビューの大切さも学びました。

こーいち
「素晴らしい」以外の言葉が、出てきません。

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.