幼稚園・保育園のホームページ参考デザイン20選事例まとめ【2024年4月最新版】

「幼稚園のサイトを作りたいけれど、具体的にどんなことに気をつけたらいいかわからない！」
この記事はそんな方向けの解説記事です。

幼稚園や保育園のサイトを作る目的は「新しい園児の入園につなげること」。
しかしサイトを作れば自動的に入園につながるわけではありません。

入園につなげるために重要なのはズバリ「安心感」と「信頼感」です。
サイトを見る保護者の立場に立って考えると、幼稚園・保育園のホームページに入れるべき内容、情報の見せ方がわかってきます。

今回はWebデザイナーである筆者がデザイナーの視点で「幼稚園・保育園のホームページ を制作するときに押さえるべきポイント」を解説します。

この記事では以下の流れでポイントをご紹介します。

• 「安心感」「信頼感」のある幼稚園のサイトを作るコツ
• 参考にしたい幼稚園・保育園ホームページの事例
• 幼稚園・保育園のホームページに絶対入れるべきコンテンツ

「 保護者の方に信頼されるサイトを作りたい」とお考えのWebご担当者様はぜひお読みください。

※幼稚園・保育園に強いホームページ制作会社をお探しの方はこちらをご覧ください。

【プロが厳選】保育園・幼稚園に強いホームページ制作会社まとめ！

幼稚園・保育園のホームページを作るなら押さえるべき３つのポイント

保護者をターゲットにしたデザインを心がけよう

ホームページをを見るのは子どもたちの保護者、とくにお母さん方です。
お母さん方は「うちの子を預けても大丈夫かどうか」を検討するためにホームページを見ています。かなり真剣に見るはずですね。

そんなお母さん方が知りたいであろう情報を「先回りして」「見やすく」「簡単にたどり着けるように」配置しましょう。

ホームページに入れるべき具体的な項目は後ほど解説します。

写真素材は力を入れよう

写真コンテンツは非常に重要です。写真がいいだけでもホームページの安心感と信頼感がグッと上がります。

• 子供達（園児達）のいい笑顔の写真
• 園や施設の様子がよく分かる写真

上記の２種類を入れましょう。施設の写真からは「園の様子」が、園児の笑顔からは「園の雰囲気」が伝わります。

しかし、いざ自分で撮ると今ひとつ心に響かない写真になりがちです。
重要なので繰り返しますが、写真がいいだけでホームページの印象はグッと上がります。

可能であれば写真撮影はプロに依頼したほうがいいですね。お近くの写真屋さんでもいいですし、ココナラのようなサービスを利用するのもいいでしょう。

スマホ対応は絶対にしよう

ホームページのスマホ対応は今や必須です。なぜならスマホやタブレットからホームページを見る人のほうがPCで見る人より多いからです。

幼稚園や保育園を探すお母さんたちもスマホを使ってホームページを見る可能性が高いです。

しかし、スマホの画面は小さいです。見づらければすぐに離脱されてしまいます。ですからスマホ対応をしっかり行なっておくことが重要です。

【無料】幼稚園・保育園のホームページについて相談する

参考にしたい幼稚園・保育園ホームページのデザイン事例20選

ここでは、実際に幼稚園・保育園のホームページ制作で参考にしたいデザインを20事例ご紹介。
各事例で参考にすべき点を解説しています。ご自身の園のホームページ作りにお役立てください！

当サイト、Web幹事に登録されている実績はこちらからご覧ください。
費用の目安・制作期間・作成した制作会社まで全て閲覧できます。

幼稚園・保育園のホームページデザイン事例を見る

幼稚園のホームページデザイン事例9選！

佛教大学附属幼稚園

「イラスト」と「手書き風フォント」を使って親しみやすく楽しい雰囲気のサイトになっています。絵本をめくる感覚で思わず最後までスクロールしてしまいます。

子供たちの写真が大きく使われていて園内の楽しい雰囲気が伝わってきます。文字情報は余白がしっかり取ってありストレスなく読めるようになっています。

佛教大学附属幼稚園のホームページを見る

駿河台幼稚園

イラストを大胆に使いつつ、情報は非常にコンパクトにまとめられています。

ファーストビューから１回スクロールすればすべての情報にアクセスできます。
「カレンダー」や「お知らせ」といった更新性のあるコンテンツによって保護者の利便性が考慮されているだけでなく、サイトがきちんと運用されているのがわかります。

サイトがきっちりと運用されていることも「信頼」や「安心」につながりますよね。

駿河台幼稚園のホームページを見る

のだ山幼稚園

一瞬「企業サイト」かと思うほど直線的でクールなデザインです。イラストもなく色づかいも暗めで、いわゆる「幼稚園っぽいかわいいサイト」ではありませんが、「きちんとした幼稚園」である印象を与えます。

幼稚園・保育園のホームページとしては「珍しい」かもしれません。しかし、だからこそ明確に「差別化」でている好例でもあります。

実際、イラストを入れるのは費用の面でコストが非常にかかります。コストを抑えつつ園のよさをアピールする例としてとても参考になるサイトです。

のだ山幼稚園のホームページを見る

愛宕幼稚園

幼稚園・保育園のホームページでは手書き風のフォントやゴシック体のフォントがよく使われますが、愛宕幼稚園のサイトでは明朝体のフォントが効果的に使われています。

仏教系の幼稚園ということもあり落ち着いた雰囲気を醸し出しています。
写真を大胆に使いつつも随所にイラストやパターンを加えることで、和風のおしゃれさが感じられるサイトになっています。

入園を検討されている保護者が知りたい情報が網羅されわかりやすく配置されており、ユーザーに信頼感を与えます。

愛宕幼稚園のホームページを見る

学習院幼稚園

東京都豊島区目白という都会に立地してありながらも、ホームページ上に多くの自然や園児が外で遊ぶ写真を掲載！それゆえに、園がかかげる"遊びをとおして豊かな基礎づくりを"という教育の理念が明確に伝わってくるホームページとなっています。

また、園の雰囲気がよく伝わるよう季節ごとに分けたフォトギャラリーがあり、100枚以上の写真で園の雰囲気を創出！
フォトギャラリーを作っている園のサイトは少ないので良い参考になるのではないでしょうか。

学習院幼稚園のホームページを見る

豊多摩幼稚園

笑顔の動物のイラストを各所に散りばめ、丸みがかったフォント、そして薄緑の背景や水色といった落ち着いた色を使用！
The幼稚園のホームページと言わんばかりの可愛らしさを醸し出しています。

また園児の写った写真を積極的に使うことにより、園での1日の生活や一年を通しての行事などをわかり易く表現！楽しそうな園児たちの生活が見受けられます。

豊多摩幼稚園のホームページを見る

御国幼稚園

ファーストビューが動物の口の中に園児たちの写真が表示されるようになっており、可愛らしい印象を与えます。
そしてとにかく多くの写真を使用し、楽しそうな園児の生活や清潔な園内の様子がわかり、自分の子供も同じように楽しんでくれたらなと思わせてしまいます。

また仏教徒の幼稚園であるため、大仏やお坊さんのイラストがあるが、馴染みやすいよう可愛らしくデザインされており、親しみやすさ倍増です！

御国幼稚園のホームページを見る

こくぶ幼稚園

笑顔の園児の写真がトップページに大きく載っているのが特徴。遊んだり、給食を食べたりしている写真から子どもたちの楽しそうな様子が伝わってきます。「自分の子どもも楽しく過ごせるかも」と想像をかき立てられます。

「教育について」のページでは「音楽教育」「英会話」など種類別に、教育内容を丁寧に説明しているのもポイント。英会話に関しては担当者のKEVIN先生から「国際的な子どもに育てるために意識していること」の説明もあり、安心感を与えることができます。

また、年間行事を写真付きで紹介していて、遠足や運動会などの活動を子どもたちがイキイキと楽しんでいる様子が伝わってきます。

こくぶ幼稚園のホームページを見る

大原幼稚園

園内のフロアガイドをオリジナルのイラストを使って示しているのがポイント。手描きのような雰囲気で、温かみが感じられます。

※画像引用：大原幼稚園

さらに「バスコース」のページでは幼稚園の送迎バスがどのエリアを回るかを図で示しています。「うちの地域も送り迎えしてくれるかな？」という点を気にする親御さんも多いため、地図などを使って対応エリアを示すと親切です。

大原幼稚園のホームページを見る

【無料】幼稚園・保育園のホームページについて相談する

保育園のホームページデザイン事例8選！

パレット保育園

パレット保育園は他の幼稚園・保育園とは違って、グループ全体の保育園をまとめて掲載するホームページです。
グループ全体の保育園のホームページであるため、1つの保育園のページよりもコストをかけることができ、規模を大きくすることが可能！多くの保育園を経営している場合は真似する価値があるのではないでしょうか。

また全体的に写真が大きく、パッと見たときの印象がGood。
多くの保育園のホームページであるため、頻繁にサイトが更新され、安心感・信頼感のあるサイトとなっています。

パレット保育園のホームページを見る

茶々保育園

茶々保育園もまた、グループ全体の保育園をまとめて掲載するホームページです。

幼稚園・保育園のホームページにはあまりなかった、ファーストビューで動画を使用し、ホームページに高級感を出すことで、保護者に信頼できる保育園だと思ってもらうことが可能！

ブラウン系の色を多く使い、雰囲気を統一。ホームページをおしゃれに見せています。

茶々保育園のホームページを見る

アイン保育園

一般的な幼稚園・保育園のホームページでは丸みを帯びた文字や写真により優しさを表現！
ところがアイン保育園のホームページでは写真もほとんど切り抜かれず四角のまま。角ばった文字を使用しており、きちんと教育してくれるといった印象を持つことができます。

また毎日ブログが更新されており、常に園児たちの様子がわかることも保護者から見ると安心して子供を預けられる要素となるでしょう。

アイン保育園のホームページを見る

ひより保育園

大企業のECサイトかと思わせるほどの落ち着きを放ち、写真撮影・選択に相当な力を投入していることがうかがえます。
スライドショーに写る写真は田舎のような雰囲気で統一されており、皆さんがホームページを制作する際の参考になるのではないでしょうか。

また職員全員を写真とQ&Aとともに紹介。親しみやすさを表現しており、保護者が安心して子供を預けられる要素となるでしょう。

ひより保育園のホームページを見る

松翠保育園

今までご紹介してきたホームページに比べると、かなりシンプルです。
しかしその分、情報が探しやすい構造になっています。

ページトップではグローバルメニューに、コンテンツエリアではサイドバーにメニューの項目がまとめられています。色分けされているので見やすいですね。

「手作りおやつ・おかず」の写真が使われているのも、保護者の興味・関心を引きます。写真の明るさや鮮やかさを少し調整すると、より美味しそうな写真になります。

調整はむずかしそうに感じるかもしれませんが、スマホのアプリやカメラの標準機能でも簡単にできますよ。

松翠保育園のホームページを見る

木ノ下保育園

今まで紹介してきた幼稚園・保育園のホームページとは大きく異なり、写真よりもイラストの方が多くなっています。
イラストには、見る人に物事を想像させる効果があり、幼稚園・保育園の場合は保護者に子供の園での生活を想像させ、ホームページへの滞在時間を長くする可能！

またシンプルなサイト設計で、どこに何が書いてあるかがわかり易くなっています。

木ノ下保育園のホームページを見る

東筑保育園

園児たちの写真を載せたフォトギャラリーのページで、月々の活動を写真付きでイキイキと伝えているのがポイント。卒園式前のプレゼント作りやゲーム大会、クリスマス会などを元気に楽しむ子どもたちの様子が伝わってきます。

また、可愛らしいイラストがあちこちにあしらわれているのもポイント。明るく、温かみのある雰囲気が伝わります。

東筑保育園のホームページを見る

のぞみ保育園

トップページに動画を載せているのがポイント。保育園の先生が笑顔で子どもたちに接している様子が伝わり、親御さんに安心感を与えることができます。

また、保育の方針を詳しく説明しているのも特徴です。ハンガリーから取り入れた「マイバ方式」という独自の方針で保育を行い、子どもたちの自主性を尊重していることを保育園の1日の流れや、 0～2歳児、3～5歳児のクラスごとに丁寧に説明しています。子どもたちが笑顔でのびのびと遊ぶ様子の写真や動画も多くあり、親御さんに信頼感を与えます。

園内マップやアクセス情報で手書き風の独自のイラストを用いているのも特徴で、温もりが伝わってきます。

のぞみ保育園のホームページを見る

【無料】幼稚園・保育園のホームページについて相談する

こども園のホームページデザイン事例3選！

押原こども園

保護者の方が気になる「園の方針」を明確にわかりやすく提示しています。

「押原こども園はどんなところなのか」がキャッチフレーズから始まって徐々に詳しくわかるように設計されています。
ざっと知りたい人にはひと目で、詳しく知りたい人にはしっかりと内容が伝わるように情報が整理されています。

押原こども園のホームページを見る

おおやけこどもえん

情報の配置がシンプルで、テンプレートデザインを使っても少しのカスタマイズで実現できそうです。しかしかけるべきところにはきちんと手がかかっています。

ベージュを基調にしてところどころにイラストを入れて、ホームページ全体が「こども園」であるかのように演出されています。

また園の様子を伝えるためにトップページで動画を使っているのが特徴的です。
動画はよりいきいきと園の様子を伝えられる一方で、表示に時間がかかったり制作費用がかかったりします。予算に合わせて検討するのがGoodです。

おおやけこどもえんの場合は、動画で興味をもってくれた方がすぐに入園募集の情報にアクセスできるようになっており、動画が効果的に使われています。

おおやけこどもえんのホームページを見る

風と緑の認定こども園

動画を多く載せているのがポイント。トップページにも大きく動画が載っていて、子どもたちが自然豊かな環境の中で木登りをしたり、泥遊びをしてのびのびと楽しんでいる様子が伝わります。

また「園の様子MOVIE」というページでは、同園の紹介動画を視聴でき、子どもたちが楽しめるように園舎のデザインにこだわっていること、給食は毎日調理員の方が手作りしていることなどが詳しく説明されています。子どもたちが元気に楽しく過ごすために様々な配慮がなされていることが伝わり、安心感を与えることができます。

風と緑の認定こども園のホームページを見る

【無料】幼稚園・保育園のホームページについて相談する

幼稚園保育園のホームページに載せるべきコンテンツ（文章の内容）

コンテンツには「入園を検討している保護者の方が知りたい情報」を入れていきます。
詳しく見ていきましょう。

園の教育方針

ほとんどの幼稚園保育園が掲載している内容です。
「園の教育方針」はホームページに来た初期段階に見られるコンテンツです。
誰でも自分の子をいい加減な園に預けたいとは思いません。それだけに「園の教育方針」は関心が高いのです。

このコンテンツがしっかりしていなければ早々に離脱を招く可能性があります。しっかりと作り込みましょう。

園内の情報

保護者の方は、自分の子供をどういう園に預けるか非常に注意してサイトを閲覧します。
そのため、下記のようなしっかり園のことがわかるコンテンツを掲載しましょう。

• 施設の外観・内観などの写真
• 先生の紹介
• 年間行事のスケジュール

これらのコンテンツが園での生活のイメージをかきたてます。きちんとした写真を使って、園の雰囲気をアピールしましょう。
施設に関する情報は、掲載されていることが非常に多いです。必ず掲載しましょう。

食事について

給食の場合、献立表を掲載しておくことで、保護者に対して「安心感」を提供できます。
なかにはアレルギーも持っているお子さんもいますので、どんな食事が提供されるかは非常に重要な情報なのです。

献立表を掲載する場合、定期的な更新が必要になりますが、やり方は２通りあります。

• CMSを導入して、園内の職員で更新できるようにする
• 制作会社と運用契約を結び、更新をお願いする。

園の職員で更新する方が手っ取り早く、急な変更にも対応できるのでおすすめです。
ブログを書いたり、ネットで買い物ができる方ならむずかしくないでしょう。一度トライしてみるといいですよ。

いずれにせよ定期的に更新できる体制を整えましょう。

CMSとは？ CMSとはコンテンツ・マネジメント・システムの略称。Webの専門知識がないユーザーでも、管理画面経由でホームページのコンテンツ、構成、デザインなどを更新できるようになるシステムのこと。WordPressなどが有名。

アクセス・送迎の情報

幼稚園や保育園の検討材料として非常に重要なのがアクセス情報です。
所在地を示すのによく使われるのが「Googleマップ」です。ホームページに埋め込んだりリンクとして利用しましょう。

ここでひとつポイントです。アクセス情報には園までのルートを具体的に書くとGoodです。
行き方は交通手段によっても変わりますし、時間によっては渋滞などの制限がかかるかもしれません。

例として「おへそグループ」のアクセス情報を挙げておきます。

どこから入ってどっちへ抜ければいいかが地図を見ればひと目でわかるようになっています。また時間ごとに注意すべき点がまとめられていて非常に親切です。

お勤めをされている保護者の方は、園のアクセスによっては送迎が困難になる場合があります。
アクセスに関する情報は必ず掲載するようにしましょう。

園バスなどで送迎を行う場合は、対応エリアや利用料金も合わせて掲載しておくと効果的です。

入園案内・費用

入園を検討されている保護者にとってなくてはならない情報です。

• 募集要項
• 申し込みの流れ
• 支給認定の説明と手続き方法
• 保育料

などの詳細な情報があるとGoodです。

入園に関する情報を見るのは、かなり前向きに入園を検討されている方です。
見学や資料請求などのアクションに繋がるよう申し込みフォームを用意しておくのもいいですね。

お問い合わせになりやすい重要な項目なので、できるだけ詳細に情報を掲載して、保護者の方がスムーズに理解できるようにしておきましょう。

保護者の声

入園してもらうための追加情報として、卒園した園児の「保護者の声」が非常に効果的です。

園を利用した人の口コミは体験談として信憑性があり、入園を検討する際によく読まれます。
「保護者の声」を掲載する場合、可能な範囲で下記のような情報が開示できると、より信頼感が増します。

• 保護者の方のお名前
• 写真
• 卒園年度

こういった情報がないと「これ本当に保護者が言ったの？」と疑われてしまい、口コミの信頼感が損なわれます。
ホームページなどで掲載することがある旨を伝えた上で、卒園時期や行事の際にアンケートで「声」を集めておくといいでしょう。

【無料】幼稚園・保育園のホームページについて相談する

幼稚園・保育園のホームページを作成できる
無料のツール3選

お金をかけないで、自分でホームページを作りたい！という方のために、無料でホームページを作成できるツールを紹介します。

初心者向きでカスタマイズもできる 「Wix」

画像引用：Wix公式サイト

Wixのおすすめポイント ・テンプレートの種類や写真・動画素材が豊富
・質問に答えるだけでAIが自動作成する機能「Wix ADI」

Wix（ウィックス）は、世界190カ国で2億人以上が利用するホームページ作成ソフト。
テンプレートが800種類以上あり、写真・動画素材が2万点以上用意されています。豊富なテンプレート、素材の中から自由に選んで作成可能です。

直感的な操作で作成できるのもポイントで、マウスでドラッグ＆ドロップして作成できます。また、質問に答えるだけでAIがホームページを自動作成する「Wix ADI」という機能もあります。業種や好みのデザインなど、いくつかの質問に答えるだけで、AIが最適なレイアウトや画像、テキストを組み合わせてサイトを自動作成します。

有料プランは4種類あり、独自ドメインの利用が可能になる他、プランに応じて以下の機能が追加されます。

スマホだけでもホームページ作成ができる「Crayon」

画像引用：Crayon公式サイト

Crayonのおすすめポイント ・スマホアプリからのみでも、簡単なサイト作成が可能
・専門的な知識は不要、簡単な操作で作成できる
・パソコンを持っていない人にもおすすめ

Crayon（クレヨン）はスマートフォンのアプリから簡単にホームページ作成できるサービスです。テキストや写真をパーツとし、それを組み合わせることでWebサイトを作成できます。

スマホで写真を撮って、そのままホームページに載せることも可能です。専門的な知識は必要なく、パソコンを持っていない人にもおすすめのツールです。

無料プラン「フリー」は、お問い合わせフォームの作成やブログ投稿が可能です。ただし公開できるのは3ページまで、登録画像は10枚までです。ページ数や登録画像数を増やしたい場合は、有料プランにする必要があります。有料プランは2種類あり、プランごとに以下の機能が追加され、さらに独自ドメイン取得可能、広告非表示になります。

オリジナリティあるサイト作成が可能「WordPress」

画像引用：WordPress公式サイト

WordPressのおすすめポイント ・豊富なデザインテーマ
・独自性あるホームページを作ることができる
・サイト作成にある程度慣れた人から上級者向き

WordPress（ワードプレス）は、世界でもっとも利用されるホームページ作成ツール。
Webサイト全体の43％がWordPressを利用して作成されており、デザインテーマは数千種類以上と豊富。

すべて自分で選択し作り上げる必要があるため、ある程度操作に慣れた人から上級者向きのツールです。HTMLやCSSの知識があれば、独自性あるホームページを作成できるでしょう。

一般的なホームページ作成プランのうち、有料プランは3種類あり、独自ドメインの使用や以下の機能が追加されます。有料のビジネスプランであれば、機能を追加するための「プラグイン」というツールを使って、自由にカスタマイズ可能です。お問い合わせフォームの作成やセキュリティ強化など、さまざまな機能を追加できます。

【無料】幼稚園・保育園のホームページについて相談する

【コラム】格安のテンプレートデザインは要注意？

テンプレートを使えば、決まった型にはめ込むだけで手軽にサイトを作ることができます。

• 制作期間が短い
• 制作費用が安い

というメリットがあり、おもに費用を抑えたい場合によく利用されます。

一方で以下のようなデメリットもあります。

• デザインによる差別化がむずかしい
• できることが限られているため、希望通りのサイトにはならない

ここで考えていただきたいのは「そもそもなぜホームページを作りたいのか」ということです。

新規の入園につなげることが目的だとすると、はたしてテンプレートで作ったホームページで目的は達成できるでしょうか。少なくとも今回ご紹介した事例のようなサイトはテンプレートでは作れません。

ご紹介したホームページは漠然とかわいいものや楽しそうな雰囲気のものを作ろうとしてああなったわけではありません。

「園のどういったことを知ってもらいたいか」「どうしたらうまく伝えられるか」を考えた結果、それぞれのデザインになっているのです。

テンプレートで制作するホームページの安さは、できることの少なさの現れでもあります。条件が合えばテンプレートは経済的でいい選択肢となるでしょう。

テンプレートを使われる際には「目的に合ったサイトができるか」をよく検討してください。
費用面だけで判断するのはおすすめしません。

【無料】幼稚園・保育園のホームページについて相談する

幼稚園・保育園のホームページデザイン・コンテンツまとめ

幼稚園・保育園のホームページは「安心感」と「信頼感」を与えられるものにしましょう。

大事なのは、保護者の方が見たいであろう情報を「先回りして」「見やすく」「探しやすいように」配置することです。

さらに見やすさを高めるために「写真に力を入れる」「スマホ対応を絶対にする」の２点を押さえておけばかなり印象のよいサイトになるはずです。

幼稚園・保育園のホームページはとかく「かわいい」「楽しそうな」ものになりがちですが、そこが肝ではありません。

園の姿勢や内容を保護者の方にわかりやすく提示することを第一に考えて、ホームページのデザインに取り組んでみてください。

幼稚園・保育園のホームページをプロに依頼したい場合

幼稚園・保育園のホームページをプロに依頼したいが、下記のようなお悩みをお持ちの方は多いかと思います。

• ホームページ制作会社がたくさんあって選べない
• 制作会社の具体的な費用が良くわからない
• 本当にこの制作会社でいいのか判断できない

そのような時は、当サイト「Web幹事」にご相談ください。

Web幹事は、あなたに最適なホームページ制作会社を「人力で」マッチングするサービス。
実際にWeb制作を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です！

コンサルタントのご紹介 岩田 Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。

様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください！

あなたの目的や予算に合わせて最適な制作会社をご紹介させていただきます。
ご相談からご紹介まで全て無料で利用できます。また紹介された制作会社に必ず発注する必要はありません。

【無料】幼稚園・保育園に強いホームページ制作会社を紹介してもらう