webデザインの勉強

保育園サイトを4つ作ったwebデザイナーが考える【こども向けデザイン】のポイント

webデザイナーが考えるこども向けデザインのポイントのバナー

こんにちは!
webデザイナーのshioです^^

前職は保育の仕事をしていたこともあり、こども系のデザインをお願いされる機会が多く、保育園・幼稚園・発達支援施設のサイト5つ以上制作してきました!

こども向けのwebサイトをたくさん見てデザインの研究をしてきたので、
参考サイト集に載ってる保育園・幼稚園のサイトは大体拝見したと思います!

そこで、勉強になったサイトや、「すごい🥺」「かわいい😍」と思ったサイトをまとめたのでご紹介します^^✼

こどもデザインあるある」としてこども向けデザインを作るときのポイントもまとめたので、

  • デザイン勉強中の方
  • こども向けのサイトやチラシをデザインする方
  • ノンデザイナーの保育士さんでイベントのポスターなどを作っている方

の参考になれば嬉しいです。

shio
shio
Canvaで使えるテンプレートやイラストも紹介してます^^

こども向けデザイン(保育園・幼稚園)参考サイト

金蘭会学園

金蘭会学園のwebサイトの画像

https://kinran-hoiku.jp/

素敵ポイント
  • テクスチャを使った薄い色の背景濃いめのイラストを使ってメリハリを付けている!
  • キリンのロゴも「金蘭会学園」のフォントもかわいい。
  • イラストがサイトに合っていてかわいい。
  • ページを開いた後の下からスルッと出てくる動きもいい感じ♪
  • スクロールしていくと左右から木が出てきたり細かい部分まで凝っている。

有明保育園

有明保育園のwebサイトの画像

https://ariakehoiku.com/

素敵ポイント
  • セクションごとの区切りがなみなみでかわいい!賑やか!わくわく感!
  • 黄色がアクセントになっている。
  • タイトルにリボンのあしらいがあって子どもっぽい!
  • 海の近くなんだなっていうのが伝わるデザイン。デザインテーマがしっかりしている
  • 水玉の使い方が上手!
  • フォントもこどもらしさを表現している。

デザインテーマがしっかりしているとデザインがぶれないので、全体的に統一感が出ます。
そして、クライアントとのイメージの相違をなくせます。

ウェルビューいずみこども園

ウェルビューいずみこども園のwebサイトの画像

http://www.izumi.akita.jp/child

素敵ポイント
  • 白黒のハンコのようなイラスト色が付いた模様の背景組み合わせが良い
  • 落ち着きのある可愛らしいデザインですが、動物の動いているイラストがあって賑やかさを出している。
  • 水彩の使い方が上手

個人的には一番雰囲気が好きでした!
とってもかわいい♡

GreenHouse新大阪

greenhouseのwebサイトの画像

https://greenhouse.fun/

素敵ポイント
  • イラストと背景の使い方、色の使い方が素敵。
  • PCで見たときに右側に見学予約や資料請求など重要な物が固定されている

北欧っぽい雰囲気の保育園のサイトを作っていたときに参考にさせていただいたサイトです。

高木学園附属幼稚園

高木学園附属幼稚園のwebサイトの画像

https://takagi-kids.ed.jp/

初めて見たとき「インディアンな雰囲気がかわいい!」と思いました。
おしゃれですよね*
保護者のお母さんに好印象だと思います。

shio
shio
ありがゾロゾロと動いているフッターがかわいい!
一番後ろのありの動きが特にかわいいので注目して見てみてほしいです!!!
高木学園附属幼稚園のwebサイトのフッター画像

愛宕幼稚園

愛宕幼稚園のwebサイトの画像

http://atago-kdg.com/

素敵ポイント

レトロさ、和な感じが出ています。
このサイトは私が作る保育園の雰囲気とは違っていたのですが、「デザイン素敵!」と思ってサイトの隅々まで拝見しました。

どの参考サイト集で調べても大体掲載されていました✨

わかば保育園

わかば保育園のwebサイトの画像

https://wakabacare-hoikuen.com/

こちらも調べていてよく見かけたサイトです。
他のサイトに比べるとシンプルですね。

素敵ポイント
  • ヘッダーの形が特徴的。
  • 直線が多いけど全体的に優しい雰囲気がある。

写真スタジオ

写真スタジオのwebサイトの画像

https://studio-home.jp/

保育園なではありませんが、保育園サイトらしさが詰まったデザインでしたので参考にさせていただきました。

shio
shio
保育園のデザインは、実はこどもの保護者向けなのです。
なので保護者ウケするような子どもらしさを感じるかわいいデザインでありつつ、子どもを預けたいと思ってもらえる信頼感のあるデザインにする必要があります。
ペルソナは20代後半〜30代後半くらいの女性になりますね^^

※ペルソナとは、デザインを届けるターゲットのことです。

こども向けデザインあるある!

紹介したサイトから、こども向けデザインの共通点を見つけられましたか??
私が見つけた共通点を「こどもデザインあるある」としてまとめてみました!
こども向けデザインをするうえで、押さえておきたいポイントです◎

ヘッダー

金蘭会学園のwebサイトの画像
  • 真ん中にロゴ置く
  • 雲みたいにフワフワさせたり、下の辺を曲線にする
  • ボタンにアイコンを使う

曲線要素があることで、優しい印象になります。
カラフルなアイコンを入れているサイトが多いです。

(※ヘッダーページの一番上のメニューの箇所のことです)

配色

カラフルなお遊戯会のチラシのテンプレート画像
  • カラフルな配色にする

ブライトトーンで元気さを出すか、パステルカラーで可愛さを出すとこども向け感が出ます!

私は・・・
保育園だったら赤ちゃんも過ごす施設なので優しいパステルカラーを使い、
幼稚園は子どもが過ごす施設なので元気なブライトトーンを使うことが多いです😊

こどもデザインのアイコンの使い方例の画像

これはフリー素材のアイコンにブライトトーンの色をつけたものです。
ちょっと一手間加えるだけで、こどもっぽさを出すことができます。

背景

ウェルビューいずみこども園のwebサイトの画像
  • テクスチャを敷く

子ども向けデザインでは、紙のテクスチャを敷いているサイトをよく見かけます。
ベタ塗り背景より、優しい温もりを感じることができますよね。

イラスト

greenhouseのwebサイトの画像
  • イラストのクオリティーが大事!!!
  • 虹・木・動物・雲・リボン」のイラストを使う

イラストのテイストは「水彩・ベタ塗り・輪郭ありなし」など種類があるので、同じテイストのもので揃えましょう。
私はできるだけ同じイラストレーターさんのイラストを使うようにしています!

shio
shio
サイトに合ったイラストを見つけられたら、もういい感じのデザインができるだろうと思いテンション上がります!!!

それほどイラストは重要。

イラストの使い方の例として、Canvaクリエイターとして公開している私がデザインした子ども向けデザインのテンプレートをご紹介します。

▷Canva・Canvaクリエイターとは

保育士募集のチラシ

こども向けチラシデザインのCanvaテンプレートの画像

こちらはこども向けデザインでよく使われるイラストを入れてデザインしたチラシです。
全てデザインツールのCanvaに入っている無料素材を使い、こども要素を詰め込んでデザインしました!

輪郭がないイラストを使い、色味を調整することで、異なるイラストレーターさんのイラストを使っても統一感がでてうまくまとめることができます!

Canvaのテンプレートとして公開しているので、Canvaに登録している方は編集画面を開くとイラスト・フォント・カラーコードなどを確認できます。

「このテンプレートをカスタマイズ」ボタンから編集画面にいきます

shio
shio
保育業界では保育士不足が問題だったり、忙しくてチラシを作る時間がない園が多いと思います。
少しでも保育現場の方の力になれたら嬉しいと思って作ったチラシのテンプレートです。
保育園・幼稚園の先生に届きますように。。。
そして素敵な保育士さんが見つかりますように😊

学童・こどもクラブの節分イベントのチラシ

ポップな節分イベント学童のチラシ画像

Canvaクリエイターの島田あやさんのイラストを使わせていただきました!(背景や花などのあしらいは別)
あやさんのイラストはゆるく楽しい雰囲気のものが多いので、こども向けデザインにもオススメです^^
▷ あやさんのイラストはこちら
(「グラフィック」のタブからイラストを見られます)

同じイラストレーターさんの素材の中でもイラストのテイストを絞って(今回は輪郭があるテイスト)使用することで、見ていて心地のいいデザインになります*

保育園のクリスマスイベントのチラシ

保育園クリスマス会A4チラシのテンプレート画像

保育園のイベント用のチラシです。
水彩画や紙の素材を使って優しい雰囲気にデザインしました。

星や雪の結晶はベタ塗りのイラストにして、水彩画のイラストを目立たせてメリハリをつけました。

最初のうちはイラストの使い分けが難しいと思うので、いろいろ試してみると良いですよ^^

shio
shio
これらのテンプレートはCanvaに登録している方はどなたでもお使いいただけます!

フォント

オレンジ・ポップなこども向けYouTubeサムネイルのデザインの画像
  • 丸文字系を使う

丸文字を使うと一気にこども感が出ます!

私が良く使うこども向けデザインにおすすめのフォントをご紹介します。

こども向けおすすめフォント
  • Zen Maru Gothic
    (上のバナーで使用)
  • つなぎゴシック
    (Canvaでも使える)
  • kiwi maru
    (Googleフォント)
  • M PLUS Rounded 1c
    (ウェイトが豊富)
  • キリギリス
    (人気のカクカクしたadobeフォント)
  • こども丸ゴシック
    (少しにじんだ感じのフリーフォント)

つなぎゴシック

つなぎフォントを使用したお片付けこどもポスター画像

kiwi maru

Kiwi Maru(GoogleFonts)の画像 「Kiwi Maru」を使ったCanvaのテンプレート

M PLUS Rounded 1c

M PLUS Rounded 1c(GoogleFonts)の画像

キリギリス

adobefontキリギリスの画像 キリギリスのフォントを使用したバナー画像

こども丸ゴシック

こども向けフォントこども丸ゴシックの画像 webデザイナーが考えるこども向けデザインのポイントのバナー

その他

高木学園附属幼稚園のwebサイトのフッター画像高木学園附属幼稚園

  1. ページトップボタンがいちいちかわいい!
  2. フッターもいちいちかわいい!
  3. イラストなどに動きが付いていてかわいい!

こども向けサイトのフッター(ページの一番下のエリア)はイラストを組み合わせていたり、凝っているサイトが多いのでフッターだけ注目して研究するのもオススメ。

shio
shio
これらのあるあるをデザインに落とし込んでいけば、こども向けのデザインに近づいていくと思います♪

こども向けデザインを頭に染み込ませる方法

参考サイト集(ギャラリーサイト)

私がご紹介したサイトは参考サイト集(ギャラリーサイト)から見つけたものです。

下記記事で紹介しているギャラリーサイトから、カテゴリーを「保育園・幼稚園」「こども向け」に絞って検索してみてください^^
こども向けデザインのサイトがたくさん表示されると思います。

webデザインの参考になるギャラリーサイト|初心者にもおすすめ!の画像
webデザインの参考になるギャラリーサイト|webデザイナーおすすめ!こんにちは!shioです❁ webデザインを制作する際に、いくつか参考サイトを探すと思います。 私がよく利用して参考にしているお...

ピンタレスト

私はピンタレストでこども向けデザインをひたすら調べていました。
気になるデザインをピンしてまとめるとデザインのイメージが湧きやすくなります!

下記URLから私のアカウント内の「こども向けデザイン」のボードに飛べるので、良かったら参考にしてみてください^^

https://www.pinterest.jp/shio_designer/

最後に・・・

webデザイナーが考えるこども向けデザインのポイントのバナー今回のアイキャッチのイラストはフリー素材の「イラストAC」から探しました。
同じテイストのイラストを組み合わせてバランスに気をつけてデザインしています。
(Photoshopで作成)

こども向けデザインは前職を活かすことができるデザインなので楽しく制作させていただいています。

shio
shio
webサイトやバナーなどこども向けサービスのデザイン作成時に、ぜひ参考にしていただけると嬉しいです。

Canva公式クリエイターとしてこども向けのテンプレートもデザインしています。
プロフィールページより見ることができますので、良かったらご覧ください^^♡
フォローしていただくとCanvaのホームに新作がUPされます😊

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月8千人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー