webデザインの勉強

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

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

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

最近お仕事でこども向けのサイトを作る機会があり、
4つの保育園や発達支援施設のサイトを制作してきました!

半年近くたくさんのこども向けサイトを見て研究してきたので、
参考サイト集に載っている保育園はほぼ全て拝見したのではないかと思います!

そこで、私的にとても勉強になったサイトや、「すごい🥺」「かわいい😍」と思ったサイトをピックアップして、ポイント・感想とともにご紹介します^^✼

どのサイトも素敵なのできっと癒されるのではないでしょうか・・・♡

また、「こどもデザインあるある」として作るときのポイントをまとめたので、ぜひ最後まで読んで行ってください♪

こども向けデザインを制作する際に参考にしていただけると嬉しいです。

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

金蘭会学園

金蘭会学園の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サイトの画像

http://atago-kdg.com/

素敵ポイント✭

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

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

わかば保育園

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

https://wakabacare-hoikuen.com/

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

素敵ポイント✭

  • ヘッダーの形が特徴的。
  • 保育園サイトのわりに直線が多い

写真スタジオ

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

https://studio-home.jp/

保育園などの施設ではないのですが、保育園サイトらしさが詰まったデザインになっていたのでこちらも参考にさせていただきました。

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

こども向けデザインあるある!(保育園・幼稚園など)

これまで紹介させていただいたサイトをいくつかご覧になると、デザインにいくつか共通点があることに気づくかと思います。
それを「こどもデザインあるある」としてまとめてみました✭

ヘッダー

  1. 真ん中にロゴ置きがち
  2. 雲みたいにフワフワさせたり、下の辺が曲線に…優しい印象になりますよね。
  3. アイコン使いがち…カラフルな物が多い

配色

  1. カラフルにしがち
    …ブライトトーンで元気さを出すか、パステルカラーで可愛さを出すか、どっちかなことが多いですね。
こどもデザインのアイコンの使い方例の画像

これはフリー素材のアイコンに色をつけたものです。
ちょっと一手間加えるだけで、こどもっぽさを出すことができます。
濃い目の色で元気な印象♪

背景

  1. テクスチャ敷きがち

紙のテクスチャを敷いているサイトをよく見かけます。

イラスト

  1. イラスト に頼りがち
  2. 「虹・木・動物・雲・リボン」のイラスト使いがち

イラストのテイストは「水彩・ベタ塗りか、輪郭があるか」同じカテゴリのもので揃えましょう。
私は大体同じイラストレーター さんのイラストを使うようにしています!

 

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

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

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

今回のアイキャッチのイラストはフリー素材の「イラストAC」から探しました。
同じテイストのイラストを組み合わせてバランスを見てデザインしています。

フォント

  1. 丸文字系使いがち
    …必ずしも丸文字ではないですが、丸文字にすると一気にこども感が出ます。

こども丸ゴシック
こども向けフォントこども丸ゴシックの画像
こどものような丸っこいフォルム、少しにじんだ感じがやさしい文字で、漢字は小学1~3年生で習うものが入ってます。

M PLUS Rounded 1c
M PLUS Rounded 1cの画像
googleフォントではM PLUS Rounded 1c がおすすめ!
ウエイト(太さ)もが多く、7種類から選択できるので使いやすいです^^

その他

  1. ページトップボタンがいちいちかわいい!
  2. フッターもいちいちかわいい!
    …イラストを組み合わせていたり、凝っているサイトが多くフッターだけに注目していろんなサイトを見るのも勉強になります。
  3. イラストなどに動きをつけがち

 

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

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

参考サイト集

先ほど私がご紹介したサイトは参考サイト集から見つけたものです。

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

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

ピンタレスト

ピンタレストでこども向けデザインをひたすら調べていました。

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

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

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

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

❋———-❋———-❋———-❋———-❋

はじめましての方へ、最初に読んでいただきたい記事です。
このブログの説明や人気の記事などまとめてあるので、ぜひご覧ください^^

デザインブログの最初に読んでほしい記事〜自己紹介・おすすめ記事〜のバナー
デザインブログの最初に読んでほしい記事〜自己紹介・おすすめ記事〜はじめまして!Webデザイナーのshio(@shio_designer)です。 この記事では下記について書いています^^❋...

❋———-❋———-❋———-❋———-❋

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