幼稚園・保育園・こども園のホームページデザイン事例｜用途別の選び方と制作のポイント

公式案内から比較できる点

東京都府中市の幼稚園です。教育方針、一日の流れ、課外活動、預かり保育、未就園児向け案内、募集・学費、在園家庭向け書類、採用情報を掲載しています。2027年度のWeb出願案内と2026年度の案内もあるため、対象年度を区別して読みます。

自園で取り入れる場合：個別見学には電話での案内もあり、すべてをWeb予約とまとめないようにします。募集年度・対象年齢・申込方法を案内ごとにそろえ、在園家庭用の情報も分けます。

公式案内から比較できる点

福岡と東京の6園を案内するサイトです。公式では認可保育園2園、小規模保育園4園と説明しています。「子ども」「保護者」「働く人」別の情報、各園の紹介、採用、ブログを設けています。

自園で取り入れる場合：読者別の案内から希望する施設へ進めるようにします。園ごとの区分・対象年齢・所在地・申込窓口・連絡先を確認し、グループの案内と個別園の条件を分けます。

公式案内から比較できる点

愛知県豊田市・みよし市で、小規模保育、デイリー・月極め保育、幼児教室、親子向け教室を案内しています。デイリー・月極め保育はみよしのサービスとして掲載されています。運営は株式会社リトルベルです。

自園で取り入れる場合：保育と教室を区別し、施設ごとに提供するサービスを示します。連絡先や休業日も施設で異なるため、共通の問い合わせ先だけで説明を済ませないようにします。

公式案内から比較できる点

長崎県大村市のグループです。社会福祉法人とみのはら福祉会とNPO法人トライアングル・サークルを案内しています。こども園・小規模保育に加え、子育て支援、放課後児童クラブ、障がい福祉サービスなどを掲載しています。

自園で取り入れる場合：一つの園としてまとめず、利用目的から施設を探せる分類を設けます。サービスごとの運営法人、対象者、利用条件、申込窓口をそろえます。

公式案内から比較できる点

宮崎県国富町の保育所型認定こども園です。保育理念、異年齢保育、園舎、食育、アトリエ、STEAM教育などの取り組みを案内しています。2024年の園舎建て替えも紹介しています。

自園で取り入れる場合：短い紹介文と詳しい保育方針を組み合わせます。取り組みの紹介を、個々の子どもへの効果が実証されたという説明に置き換えず、見学や入園の相談先を明記します。

公式案内から比較できる点

東京都世田谷区代沢の保育園です。保育目標、ハンガリーの保育から学ぶ取り組み、園概要、一日・年間の流れ、日々の様子、採用、各種書類を掲載しています。財務情報やモデル賃金の公表もあります。

自園で取り入れる場合：入園を考える家庭、在園家庭、求職者が必要な案内を分けます。公開用の園生活の紹介と、家庭に配布する書類・個人情報の扱いを区別します。

公式案内から比較できる点

佐賀県白石町の保育所型認定こども園で、運営は社会福祉法人白石福祉会です。保育、入園、連絡先、地域のつどいの場、自己評価、財務情報を案内しています。2027年度の1号認定の募集と2026年度の案内が併記されています。

自園で取り入れる場合：募集年度と認定区分を明確にします。保育方針の紹介、入園条件、地域向けの活動を分け、募集人数や受付期間は最新の案内へ進めるようにします。

公式サイトの画面で確かめられる点

園児が土に触れる活動の写真が、最初の画面いっぱいに置かれている。

上部のメニューは手描き風のアイコン付きで、項目は8つある。

縦書きのコピーが写真の中に入り、写真の下端は斜めに切れている。

自園で取り入れる場合：園の日常がわかる写真を1枚大きく使い、保護者の掲載許可を先に取っておく。メニューはアイコン付きにして、項目を8つ前後に絞る。

公式サイトの画面で確かめられる点

桜の下で口を開けた園児の写真が全面に使われ、手書き風の大きな見出しが重なっている。

見出しは「遊んで学ぶ 学んで育つ」の2行で、何を大切にする園かが最初の画面で分かる。

上部のメニューは6項目で、右上に国際認定の表示がある。

自園で取り入れる場合：園の方針を1〜2行の見出しにして、写真の上に置く。文字が読める明るさの写真を撮り下ろしで用意する。

公式サイトの画面で確かめられる点

写真が大きな不定形の白い枠で切り取られ、ロゴが中央上に置かれている。

メニューはロゴを挟んで左右に分かれ、左端に縦書きのSNSリンクがある。

右下に丸いボタンが3つ並び、下部にお知らせの帯がある。

自園で取り入れる場合：ロゴの色を枠や飾りに使い、写真に園の色をつなげる。お知らせは最初の画面の下端に1行だけ出す。

公式サイトの画面で確かめられる点

空と木々の風景写真が全面に置かれ、中央に園のマークと英字名が重なっている。

縦書きの短い文が右側にあり、左上に在園児専用サイトなどのボタンが3つ並ぶ。

園庭で遊ぶ子どもたちは、画面の下端に小さく写っている。

自園で取り入れる場合：園の環境（自然・園庭）を主役にした写真を1枚選び、マークと園名を中央に置く。在園児向けと入園希望者向けの入口は別のボタンにする。

公式サイトの画面で確かめられる点

笑顔の園児2人の写真が、雲のような形で切り抜かれ、色のにじみが縁を囲んでいる。

緑の丸い文字で縦書きのコピーが置かれ、右上にアクセスと問い合わせの2つのボタンがある。

丸いロゴが左上にあり、メニューの文字は細く小さい。

自園で取り入れる場合：切り抜きの形と色を園のロゴから決める。アクセスと問い合わせのボタンは、色を変えて最初の画面の隅に固定する。

公式サイトの画面で確かめられる点

亀を抱えて笑う園児の写真が使われ、右側に青い帯の縦書きコピーが重なっている。

上部には海の生き物のイラストと、アイコン付きの6項目のメニューが並ぶ。

園名ロゴが中央にあり、右上に緑とグレーのボタンが2つある。

自園で取り入れる場合：園の立地や活動（海・生き物）をイラストにして、メニューのアイコンにも使う。コピーは縦書きの帯にして、写真の顔を隠さない位置に置く。

公式サイトの画面で確かめられる点

木の梁が見える保育室の写真が、丸みのある窓の形に切り抜かれて中央に置かれている。

背景は淡い緑で、白樺のようなイラストが左右の端にある。

上部のメニューは5つで、それぞれにアイコンが付いている。

自園で取り入れる場合：園舎の内部がわかる写真を1枚選び、建物の特徴（木造・吹き抜けなど）を伝える。背景色はロゴの色から決める。

公式サイトの画面で確かめられる点

複数の写真が重なって切り替わる途中の画面で、アーチ形の枠に収まっている。

白い帯の文字で「こどもの やってみたいを 育てる保育」が右下に置かれている。

上部のメニューは細い文字で7項目あり、左上にロゴがある。

自園で取り入れる場合：園の方針を1文にして、写真の上に帯で置く。写真は活動中の様子を3枚ほど用意し、切り替えを使うなら動きを短くする。