見やすい保育園・幼稚園のホームページデザイン事例17選と制作のポイント【テンプレートも紹介】
この記事では、保育園や幼稚園を運営されている法人様やホームページ担当になった先生方に向けて、保育園・幼稚園のホームページの優れたデザイン事例やホームページを簡単に作成できるテンプレートソフトを紹介した上で、ページに掲載すべき内容、制作時のポイントについてもデータを参照しながら丁寧に解説します。
記事を読むことで、保育園・幼稚園の効果的なホームページを作成する上で重要なポイントを理解することができます。
目次
見やすい保育園・幼稚園のホームページデザイン事例17選
保育園・幼稚園のホームページのデザインを検討する上で参考になる優れた事例を17園分ご紹介します。おへそ保育園
佐賀県佐賀市のおへそグループ（おへそ保育園、おへそこども園など）のホームページです。
散りばめられたイラストやかわいらしいあしらいによって、親しみやすい雰囲気が全面に感じられます。
同時に、ブルーを基調にした配色や秩序のあるレイアウトにより信頼感も担保されており、総じて非常に優れたデザインのホームページです。
おへそ保育園のホームページのメインコンテンツ
- おへその気持ち（園の理念、延長挨拶、園の概要）
- 保育について
- 入園案内
- 食育について
- お知らせ
- アクセス
- 寄付金について
いろは保育園
熊本県熊本市のいろは保育園のホームページです。
大きな特徴として、お知らせを除き各コンテンツが下層ページに分かれておらず、トップページだけで情報を閲覧できる構成になっています。
ページ遷移が必要無いためホームページ訪問者がストレスを感じづらい点、また制作費を比較的抑えられる点がこの構成のメリットだと考えられます。
また、多くの幼稚園・保育園のホームページでは丸みを帯びた文字が使用されていますが、いろは保育園では端正な書体のみが用いられており、信頼感を覚えやすいデザインになっています。
いろは保育園のホームページのメインコンテンツ
- スタッフブログ・お知らせ
- 当園について
- 保育園の一日
- 年間スケジュール
- 入園案内
- Q&A
愛宕幼稚園
新潟県十日町市の愛宕幼稚園のホームページです。
アニメーションやカラフルな配色が特徴的で、心地よい賑やかさが感じられるデザインです。
ページ遷移の度に幕が切り替わるようなエフェクトが入り、技巧を凝らした印象を受けます。
愛宕幼稚園のホームページのメインコンテンツ
- 幼稚園のこと（園の概要、施設紹介、歴史、サービス紹介、OBの声）
- 教育と保育（園の理念、園での1日、年間行事、カリキュラム、先生の紹介）
- 入園のご案内
- 子育て支援
- よくあるご相談
- 10の魅力
- お問い合わせ
こどもの丘ナーサリー
長崎県雲仙市のこどもの丘ナーサリーのホームページです。
くすみのある赤と青の配色で、柔らかさの中に落ち着きも感じさせるバランスのよいデザインになっています。
SNSとの連携や動画の活用など、複数のメディアをうまく使った構成も好印象です。
こどもの丘ナーサリーのホームページのメインコンテンツ
- 園のこと
- 保育のこと
- 入園案内
- 病児保育
- こだわりランチ
- るんるん cafe（地域交流活動）
- お問い合わせ
- 採用情報
GreenHouse新大阪園
大阪府大阪市のGreenHouse新大阪園のホームページです。
情報設計がわかりやすく、ざっと眺めただけで園の特徴が理解しやすいです。
また、園内見学などの問い合わせ導線が常に画面に追従してくるため、園に興味を持った保護者をスムーズに来園に誘導できる点も優れています。
施設マップではGoogle マップの360°ビューを閲覧でき、園舎を視覚的にイメージしやすい点も魅力的です。
GreenHouse新大阪園のホームページのメインコンテンツ
- 入園案内
- 施設紹介
- 私たちの想い
- 園の特長
- 園での生活
- アクセス
- お問い合わせ
わかば保育園
大阪府羽曳野市のわかば保育園のホームページです。
「親しみ・柔らかさ」と「端正さ・誠実感」が両立されたデザインの好例です。
メインビジュアルの写真の切り替わりがグラスのような模様を伴うエフェクトで実装されており、技巧を凝らした印象を受けます。
わかば保育園のホームページのメインコンテンツ
- 園のこと
- 保育のこと
- 職員紹介
- 入園案内
- お知らせ
- 給食だより
- 採用情報
- アクセス
- お問い合わせ
- フォトアルバム
もぐし海のこども園
熊本県天草市のもぐし海のこども園のホームページです。
自然に直接タッチすることを大事にする園の理念を反映して、園児が生き物や砂などを触っている写真が全面に押し出されています。
波や海の生き物のイラストなどがふんだんに配置されていて、「きれいな海まですぐ近くの園」という情報が視覚的に理解しやすいデザインになっています。
もぐし海のこども園のホームページのメインコンテンツ
- 園について
- 園の特色
- 園の生活
- 入園案内
- お問い合わせ
- アクセス
- 自然にタッチ（体験型のコンテンツ）
- 牛深町のこと
大光寺保育園
群馬県伊勢崎市の大光寺保育園のホームページです。
カラフルな配色や丸みを帯びたフォント、フリーハンド感のある円など全体的にかわいらしさが色濃く感じられるデザインです。
機能面の特徴として、自動応答のチャットボットが設置されており、ページの訪問者が感じた疑問点をその場で解決できる設計になっています。
大光寺保育園のホームページのメインコンテンツ
- 当園について
- 1日の流れ
- 年間行事予定
- 交通アクセス
- お問い合わせ
- 保護者専用ページ
- 採用情報
無二保育園
東京都葛飾区の無二保育園のホームページです。
ロゴのデザインをベースに、サイト全体が「円を連結させた模様」で描かれています。
行き過ぎない範囲で個性を出したデザインの好例だと感じます。
無二保育園のホームページのメインコンテンツ
- 園について
- 年間行事
- 園の一日
- 保育園だより
- 子育て広場（施設の無料開放）
- お知らせ
- アクセス
- お問い合わせ
さくらいこども園
大阪府東大阪市のさくらいこども園のホームページです。
乗馬している園児の写真をメインビジュアルとして掲載しており、「動物を触れ合う機会が多い」という園の特色が一目で伝わりやすいデザインになっています。
さくらいこども園のホームページのメインコンテンツ
- 今日の保育
- 事務所だより
- 園だより
- 給食だより
- 園の紹介
- 園の保育
- 動物たち
- アクセス
- 入園の案内
- 法人概要
いふくまち保育園
福岡県福岡市のいふくまち保育園のホームページです。
カラフルな配色が多い保育園のホームページの中では珍しく、ブラウンを基調とした落ち着きのあるカラーリングを採用しています。
縦書きや特徴的なテイストのイラストなど、全体的に個性が光るデザインです。
いふくまち保育園のホームページのメインコンテンツ
- わたしたちのこと
- くらしの様子
- いふくまちの保育
- みんなの古小烏公園
- 募集要項
- おしらせ
- 書式ダウンロード
- お問い合わせ
ひより保育園
鹿児島県霧島市のひより保育園のホームページです。
「こどもたちの、『親友』でありたい。」というメインコピーが印象的で、配色もくすんだピンクと濃いグレーと少し個性を感じさせるデザインになっています。
職員紹介が充実しており、どのような方に預けることになるかが分かりやすく、安心感を覚えやすい印象です。
ひより保育園のホームページのメインコンテンツ
- 園のこと
- 入園案内
- 職員紹介
- 給食室より
- ひよりブログ
- お問い合わせ
- アクセス
- みんなの写真館
たかしろ乳児保育園
高知県高知市のたかしろ乳児保育園のホームページです。
保育園・幼稚園のページはどこもかわいらしい雰囲気ですが、たかしろ乳児保育園は特にその傾向が強く、クレヨンやマスキングテープ風のあしらいなどかなり柔らかさを感じるデザインです。
たかしろ乳児保育園のホームページのメインコンテンツ
- 園について
- 入園のご案内
- アクセス
- お問い合わせ
国分幼稚園
福岡県久留米市の国分幼稚園のホームページです。
1951年に設立した伝統のある幼稚園であることがしっかりアピールされた構成になっています。
デザイン面では落ち着きはあるものの伝統園としてのハードルの高さを感じさせるような雰囲気があるわけではなく、親しみやすい印象です。
国分幼稚園のホームページのメインコンテンツ
- 当園について
- 教育について
- 園での生活
- 入園のご案内
- 未就園児教室
- 3号認定（1・2歳児）
- アクセスガイド
- よくある質問
- ようちえんのきろく（ブログ）
- お問い合わせ
も、の保育園
神奈川県横浜市のも、の保育園のホームページです。
子どもの創作活動をサポートするという特色を持つ園だけあり、ホームページのデザインも美術館のような雰囲気です。
コンテンツの量は少なめですが、園のコンセプトやデザイン賞の受賞実績など重要な情報が伝わりやすい設計になっています。
も、の保育園のホームページのメインコンテンツ
- コンセプト
- 特徴
- 保育園概要
- アクセス
- お問い合わせ
- 採用情報
小浜幼稚園
長崎県雲仙市の小浜幼稚園のホームページです。
メインビジュアルがサーカスのテント風の形状に切り抜かれており、楽しげな印象を覚えます。
InstagramやFacebookと連携しており、SNSへの投稿がホームページ上で確認できます。
小浜幼稚園のホームページのメインコンテンツ
- お知らせ
- 園のこと
- 教育と保育
- 入園案内
- フォトアルバム
- お問い合わせ
- よくあるご質問
- 採用情報
- アクセス
浦和つくし幼稚園
埼玉県さいたま市の浦和つくし幼稚園のホームページです。
メインビジュアルにコピーが入りされておらず、代わりに動画を全面に表示させる構成になっている点が特徴的です。
浦和つくし幼稚園のホームページのメインコンテンツ
- 園のご紹介
- 1日の様子
- 入園案内
- 園舎のこだわり
- つくしプレスクール（未就学児教室）
- お知らせ
- お問い合わせ
- アクセス
- 課外教室
- よくあるご質問
- 在園児各種書類
保育園・幼稚園のホームページのおすすめテンプレート
上記でご紹介してきた保育園・幼稚園のホームページはどれも素敵なデザインですが、いずれも専門の制作会社に発注が必要なレベルなので、同等のものを作成しようとすると費用は数十万円以上かかることが多いでしょう。
「ホームページを作成したいけど、そこまでのお金は用意できない」という場合は、ホームページ作成ソフトのテンプレートを活用するのもおすすめです。
特に「とりあえずHP」という初心者に特化したソフトなら、ITの専門知識をお持ちでない幼稚園や保育園の先生でも、日々の業務の隙間時間で下のようなページを簡単に作成することができます。
料金は初期費用¥4,950(税込)と月額費用¥2,970(税込)のみで、サーバー代もかからず、ホームページ制作会社に発注するよりもかなり低予算で利用可能です。
今なら無料体験も実施中なので、興味がある方はとりあえずHP公式サイトから詳細をチェックしてみてください。
保育園・幼稚園のホームページに載せるべき内容
ホームページに載せる内容は、実際に保護者の方がどのような検討軸を持って保育園や幼稚園を選んでいるのかを踏まえて検討することが効果的です。
実際の統計データを見てみましょう。下記は「子ねくとラボ」の「保育園を選んだ決め手のランキング」の調査です。
- 家からの距離：60.5%
- 認可・認可外：50.0%
- 保育カリキュラム：43.0%
- 保育時間：36.0%
- 保育園の広さ・定員数：31.4%
- 保育理念・保育方針：30.2%
- 保育職員の雰囲気：30.2%
- 園庭の有無：27.9%
- 清潔感：24.4%
- 保育士の人数：19.8%
- 運営母体（公立、社会福祉法人・NPO法人、株式会社など）：17.4%
- 慣れ保育の有無：16.3%
- ご近所さん・先輩ママからの口コミ：16.3%
- インターネット・SNS等での口コミ：11.6%
- 公式サイト・チラシの仕様：7.0%
- その他：4.7%
- 特になし：1.2%
- 保育園見学はしていない：0.0%
- わからない：0.0%
- 答えたくない：0.0%
このようなデータを元に掲載内容を検討することで、保護者の興味関心に沿った効果的なホームページを作ることができます。
実際にデータ上の上位項目から必須コンテンツを洗い出すと、下記のようになります。
- アクセス情報
- サービス情報（カリキュラム、保育時間など）
- 概要情報（認可・許認可、定員数、運営母体など）
- 理念、方針
- 施設情報（広さ、園庭の有無、清潔感など）
- 職員紹介（人数、雰囲気など）
上記は押さえた上で、さらに、各園の特色が表れているコンテンツを追加していくのがおすすめです。
保育園・幼稚園のホームページ制作のポイント
保育園や幼稚園のホームページを作成する時は、下記のポイントを押さえるようにしましょう。
- スマホには必ず対応する
- 「シーンの網羅」を意識して写真を掲載する
- お問い合わせ・見学予約・資料請求などの導線を目立たせる
スマホには必ず対応する
昨今のインターネットでは、多くの人はPCよりもスマホからホームページにアクセスします。
例えば、SISTRIXの調査では、日本の検索の75.1%がモバイルからというデータが示されています。
つまり、PCでしか正常に表示されない仕様にしてしまうと、7~8割の人にとって相当見づらいページになってしまいます。
そのため、ホームページを作成する際は、必ずスマホでもきちんと表示されるようにすることが重要です。
スマホ対応の方法にはいくつか手段がありますが、前述したとりあえずHPという初心者向けホームページ作成ソフトでは自動的にスマホ対応が為されるため、特に何も気にせずこの点をクリアできます。
「シーンの網羅」を意識して写真を掲載する
保育園・幼稚園のホームページを見た時に、「実際に子どもを通わたらどうなるか」を具体的にイメージできることは重要です。
そのため、掲載する写真では「シーンの網羅」を意識するとよいでしょう。
例えば、ロケーションとしては「教室」「園庭」「園外」、被写体としては「子ども同士」「子どもと先生」、シチュエーションとしては「アクティビティ中」「給食中」など色々なパターンが考えられます。
これらのパターンを組み合わせて、「この保育園・幼稚園に通わせたら体験することになるシーン」を網羅することで、その園を選んだ未来を想像しやすくなり、保護者の背中を後押しすることができます。
お問い合わせ・見学予約・資料請求などの導線を目立たせる
素敵なホームページを用意して保護者の興味を喚起できたとしても、実際に来園に結びつかなければ意義が半減しています。
そのため、「お問い合わせ」「見学予約」「資料請求」などの導線はページ上で目立たせるようにしましょう。
例えば、お問い合わせボタンが常に画面の中で追従してくるようにすれば、意欲が引き上がったタイミングでスムーズに誘導することができるためおすすめです。
気軽につくれる、素敵なホームページ「とりあえずHP」
とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。
＼ 保育園・幼稚園にピッタリのHP作成ソフト ／