ホームページ制作会社のM-HAND|今どきの幼稚園・保育園ホームページ研究。今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?2015-11-20今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?WEBデザインコンテンツ今回は、数ある幼稚園・保育園サイトを、いろいろチェック。そのトレンドを探ってみました。幼稚園や保育園のサイトといえば、ひと昔前までは「かわいく」まとめていれば、十分役割を果たしていたかもしれません。こども園」の創設など制度も変わり、業界は変動の時代にあるともいえます。一方の保護者は...といえば、「保活」という言葉も生まれ、多忙な中でいくつものサイトを見て入園先を早期から検討。WEBサイトの重要性は以前にも増して高まっています。このような背景のもと、効果的なホームページ制作に役立ちそうな、参考32サイトをピックアップしてみました。幼稚園・保育園ホームページ参考事例32数ある幼稚園、保育園サイトから、他園との差別化を意識し、戦略的にホームページを作成・運営していると思われるサイトを選んでいます。「1951年創立」の歴史と伝統ある園という重厚感を、トップのエンブレム風のロゴでさりげなく演出。手描き感のあるブラウンのパーツやアイコン、随所に現れるイラストなどで、子供っぽくなりすぎない程よい温かみを演出しています。情報が非常に充実しており、ブログ(園の記録)の設置、写真ギャラリー、フェイスブックページ、LINE@の連動など、様々な方法で園の最新情報がわかるようにしているところも保護者にとっては安心材料のひとつ。保護者の声や親子スナップなど、生の声が掲載されているのも参考になります。ある富士保育園のサイト。水彩画タッチのイラストを使った、かわいらしい演出がなされ、トップのメイン画像をスライドショーとして見せています。季節の行事の写真を使うことや、子どもギャラリーもしっかり作品がUPされるので、保育園の様子を知りたい保護者がたびたび訪れて楽しめるサイトになっています。「苦情申し出窓口」も設置され、決算報告書や各種届出用紙などもPODFでダウンロード可能になっているなど、保護者への情報開示や利便性提供にも努めています。長崎県雲仙市にある、認定こども園のサイトです。子どもが王冠をかぶったようなロゴがポイント。トップでは、そのロゴと一貫性をもたせたトリミングで、子どもたちの楽しそうな様子をスライドショーで紹介しています。このサイトは平成27年の園舎リニューアルに伴って作成されたようで、美しい園舎の写真が多く掲載されているところも魅力のひとつ。基本情報がわかりやすく整理されている他、ブログでも日々の様子が詳しく紹介されており、保護者の知りたいことが十分にわかるホームページになっています。http://obama-kodomoen.jp/4:たかみ幼稚園タイトルになっている「たかみようちえん」のひらがな表記や、文字間を少し広めにした見出し表現、マウスにあわせて微妙に動くアイコンなど、女子(母親)ゴコロをくすぐる小技も効かせ、ていねいに作成されています。多くの親が知りたい給食内容がブログで毎日アップされ、行事もリストになっているなど、園児の親に役立つコンテンツが充実。子どもたちのいきいきした表情の写真が美しく、制服やバス通園などの説明コンテンツにもしっかり活かしている点は、とても参考になります。http://takami-kids.com/5:駿河台幼稚園この幼稚園のサイトでは、トップページでイラストの一枚絵をダイナミックに使い、そこにコンテンツをうまく溶け込ませています。動的な要素はおさえながらも、インパクトのあるデザインにしています。スケジュールにはGoogleカレンダー機能を利用し、保護者の利便性も考慮。サイトの構造はシンプルに設計されており、更新性も考慮されているところもポイントです。先生方が手作りした壁新聞を思わせるような、温かく、楽しいトップページのサイトです。自動車や気球、虹などの子どもの夢いっぱいのイラストアイコンが動くところや、それとうまく組み合わせられた子どもたちの切り抜き画像がかわいらしいイメージ。各コンテンツの見出しも手書き風フォントで親しみやすさを演出しています。サブメニューも手書き風文字で右カラムにまとめ、全体の雰囲気を保ちつつ、サイト内で迷子にならないように配慮。堅実さと柔らかさを両立させたデザインに仕上がっています。http://www.bukkyo-u.ac.jp/kindergarten/7:教学寺幼稚園トップページでは、ボケ味を聞かせたクオリティの高い写真がスライドショーになっていて、つい見入ってしまいます。どのページにも写真が多用されているのが特徴で、イキイキとした子どもたちの表情は存在感十分。写真とテキストにメリハリがあり、テンポよく読み進められます。更新頻度高めのブログ(お知らせ)でも写真が多く掲載されているので、子どもたちの様子がよくわかり、保護者に喜ばれそうです。“http://kyougakuji-kids.com/8:翠福祉会みどり保育園と名谷みどり保育園の2園や児童施設を運営している社会福祉法人のサイトです。個々の園の情報ページの上位となる法人の総合サイトという位置づけ。トップページでは保育理念をスライドにして見せて、ポリシーをしっかり伝えています。ここからリンクしている各保育園のページも、同様のフォーマットに統一し、全体にすっきり整理されています。コンセプトムービーがある幼稚園サイトは意外と少ないのですが、ここではトップに持ってきて、動画ならではの情報や雰囲気がよく伝わってきます。質感のあるクラフトペーパーに、鉛筆やサインペンで描いたようなイラストがポイント。写真のトリミングにもそのテイストを踏襲しています。アースカラーで優しい色調をベースに、イマドキの母親が好みそうな、おしゃれなかわいさを演出しています。トップページでは、基本メニューに加え、保護者向けの「お知らせ欄」「今日の給食」が目立つようにナビゲーションをシンプルに構成。動線もわかりやすくなっています。http://www.izumi.akita.jp/child10:押原こども園2015年から認定こども園になった山梨県の園のサイト。PEOPLE」と大きくテーマを表示するなど、園の想いや方針をしっかりと伝えようとする姿勢が感じられます。それが信頼感になり、ブランディングにつながっています。表現面では、パステルカラーの色使いや囲み枠は角丸にするなどで柔らかさを演出していますが、全体としては比較的静的なサイトとして、シンプルにまとめられています。http://www.oshiharakodomoen.jp/11:のぞみ幼稚園トップに使われている季節ごとの切り絵風イラストが印象的。知りたいことが簡潔にまとまった、見やすいサイトです。ブログも頻繁に更新されて子どもたちが園の日常を伝えており、「学年だより」では子どもの育ちを語る文章に信頼感が持てます。動きのスムーズなレスポンシブWEBデザインになっており、母親のスマホ利用率の高さにも配慮されています。http://www.nozomi-koi.jp/12:みほ幼稚園パララックスデザインの活用事例として紹介されることも多かったサイトですが、ワンカラムのシングルページという構成は幼稚園サイトとしては珍しいのでピックアップしました。イラストの園児が歩いていくのに合わせて「みほ幼稚園とは」などのテキストが左右に出現。転んで泣いたり、ボールを蹴ったりしながら進んでいく園児の姿をストーリーとして見せながら、園全体をひととおり紹介するという企画がユニークです。園児の制服や背景が四季に合わせて変化するようになっているなど、細かい演出がなされています。かいドット柄をベースに、明るい差し色のピンクが印象的なかわいいデザインのサイトです。書体もこだわりを持って設定されています。イラストなどの要素は少なめでも、配色と書体でかわいさを表現できるという参考になりそうです。この幼稚園では、その日の出来事をほぼ毎日アップ。トップページにはサムネイルの写真が並び、ワンクリックで、その日の子どもたちの様子が写真も豊富に交えて見られるようになっています。保護者なら毎日欠かさずチェックしたくなりそうなコンテンツです。いうテーマにフォーカス。トップページの自然豊かな写真で、その世界観に引き込まれます。幼稚園だからとかわいいだけに振り回されず、より物事の本質を追求していくようなこだわり派のターゲットに刺さるコンセプト。都会的で洗練されたレシポンシブデザイン。Facebookページもこまめに更新されており、スマホ世代の保護者にマッチした運用をしています。http://www.nodayama.jp/15:星の光幼稚園ちょっと昭和風でかわいい動物アイコンを起用した大阪の幼稚園のサイト。一見すると今風とはいえないイメージですが、サイトは見やすいレスポンシブデザインになっています。様々な情報が詳しく丁寧に掲載されており、行間から熱意が感じられます。先生自らが情報を発信したいという園には参考になりそうです。情報公開にも積極的で、監査報告書や自己評価も余すところなく公開されています。白をベースに、赤のラインと細ケイで上品で都会的なイメージにまとめられたサイト。トップ画面は最新行事や日々の様子の画像がグリッドでレイアウトされ、企業の会社案内などに近いイメージ。コンテンツ面では、フロアマップはほかのサイトでは意外と見られなかったもの。イメージ動画は静止写真を使って編集したものですが、ひとつの差別化になっています。http://www.fuchu-minami.jp/17:神港みどり幼稚園イラストと手書き風文字がかわいく、幼稚園の「明るさ」「楽しさ」「かわいさ」のイメージが凝縮されたようなデザインといえます。保護者への配慮からか、写真は小さめに抑えられていますが、コンテンツのテキスにも手書き風のフォントを使用するなど、全体の世界観をうまく統一しています。丸く切り抜いた枠の中の写真がそれぞれスライドし、その時期の行事にあわせて、幼稚園の「今」がわかるようになっています。そこに、切り抜きにした子どもの写真をうまく加えて、動きを演出。経営者である園長じきじきのブログがしっかり更新されているのにも信頼感があります。写真アルバムや園だよりの掲載用には、認証が必要な保護者向けページが設けられ、情報管理がなされています。レスポンシブにはなっていませんが、スマホ向けサイトが別に用意されています。上品で美しいビジュアルイメージが印象的なサイトです。ヘッダー部分の縦書きのメニューがメインビジュアルとうまくマッチしており、細部まで丁寧にデザインされています。「ロザリオ通信」は、先生たちが撮影した園児の写真が掲載されるフォトギャラリー。ブログも頻度高く更新されており、園の様子がよくわかります。横幅に合わせてコンテンツ構成が変わるタイルレイアウトを採用。幼稚園のサイトとしては珍しい、ユニークなデザインだといえます。レイアウトイメージから期待するような更新性の高い情報はないものの、どのカテゴリーも明快なコピーで分かりやすく編集されています。必要な情報にすぐたどり着けるコンパクトさで、使い勝手のいいサイトになっています。http://www.kokufu.ed.jp/21:松秀幼稚園シンプルで大きな特徴はないサイトのように見えますが、「自然豊かな環境」というセールスポイントがよく表現されています。トップのメイン写真で、緑豊かな環境をアピール。「園内マップ」では、イラストマップと写真を使って園内環境が紹介されており、竹やぶやザリガニが取れる川、芝生の庭などの恵まれた環境が楽しみながら見られ、この園らしさのPRが光ります。一般には入ってみて分かることの多い父母の会情報などが掲載されているところも、保護者には安心できるコンテンツになっています。http://matsuho-kinder.jp/22:石下幼稚園アニメーションを使いながら、最小限の情報だけで構成されたサイト。メニューをクリックして各コンテンツに入れば、ページを縦スクロールすることなくすべての情報を見ることができるようになっています。幼稚園サイトによくある園の様子などの写真要素などはまったく入れず、基本情報のみで構成。園生活の様子などは別ページのブログに集約して、こちらには写真などを豊富に掲載。役割分化させたサイト構成のひとつのやり方として参考になります。創設30周年を記念して作られたマスコットキャラクター「うるたん」と「うるみん」をうまく活用したサイト。キャラクターは、沖縄の家の守り神であるシーサーをモチーフに、イラストレーターの石倉悦加さんが作成したもので、園の守り神という意味が込められているようです。「給食・おやつの考え方」が明記されているところは、保護者に安心できる要素になっています。教育番組でも活躍するアートディレクター、佐藤可士和さんデザインによるサイト。幼稚園サイトにはめずらしい、ちょっとパンキッシュな色調を起用し、他園とは強烈な差別化が図られています。トップページはタイル風、下層は2カラムと、基本構成はベーシックなものですが、遊び心のある色使いやトリミングで個性を表現しています。http://fujikids.jp/home/25:あひる保育園ヘッダーや左カラムのメニュー構成など、わかりやすいナビゲーションで、豊富な情報をうまくまとめています。サイト内に「地域への取り組み」のページを設けたり、Facebookページで地域イベント参加の様子を伝えたりなど地域コミュニティの一員としてのスタンスをアピール。Facebookページでは、保育関連の時事ニュースなども随時取り上げており、社会課題としての保育に取り組む熱心な姿勢が感じられます。白とグレーをベースにしたシンプルで洗練されたイメージのサイト。オレンジの動物のロゴマークがポイントになっています。CMSを使って構築されており、凝った作りにはせず、更新性を重視したテキストベースの構成。情報をすっきりとまとめています。されているという継続性も好印象です。http://wakohoikuen.or.jp/27:善東幼稚園トップページ最初に出てくる“虹”が象徴的なサイト。その7色を中心に、全体にポップなイメージにまとめています。「私たちの夢」などのメッセージには、素朴な思いが感じられます。保護者の声のページでは、直筆のメッセージを紹介するなど、園からの一方的な情報発信だけでなく、保護者とも協力しあって子どもをはぐくみたいという姿勢が感じられます。園児限定のコーナーは、園児の安全などへの配慮によるものと思われます。あるこの幼稚園では、園のロゴに使われている色でサイトをデザイン。落ち着いたグリーンとの組み合わせで印象的に仕上げています。目指す方」では、園長の熱意が語られ、人材に重きを置く方針も読み取れます。Facebookページをリクルートページとして、目的特化して活用する方法はユニーク。情報が整然とまとめられた可読性の高い構成ながら、手描きイメージのイラストやパララックスの動きの効果で、温かみのある雰囲気を演出しています。見やすいレスポンシブデザインになっています。「教育」のページでは園歌がBGMになった施設案内のYouTube動画、「生活」のページでは、フォトギャラリーとしてGoogle+に写真をアーカイブするなど、外部のWEBサービスもしっかりと活用しています。栃木県にある認定こども園のサイト。自然や動物をモチーフにしたイラストや、切り絵風のカラフルな見出しなど、活気のあるデザインに仕上がっています。見出しの文字に大小をつけたり、色替えしたりしてメリハリをつけたりているのも、ポイントが視覚的にわかって効果的。Q&Aページではテンポ良い問答で、保護者が知りたいことが完結にまとめられています。ある保育園のサイトです。やさしい雰囲気のイラストを使い、わかりやすい構成でまとめています。ロゴのイメージに合わせて使われている書体が、サイトの特徴を生み出しています。この園では、サイトポリシーやプライバシーポリシーの明記はもちろん、財務諸表等もPDFファイルで公開。情報開示や信頼性確保の面にも配慮しています。http://yokoho.net/32:浦和つくし幼稚園(採用サイト)幼稚園自体の紹介サイトではなく、職員採用のためのサイト。その意味では他とは異なりますが、採用ページを別サイトとして作成しているケースは、他にはあまり見られなかったので、参考として最後に取り上げました。このように独立させるだけでも、採用に力を入れていることが伝わります。内容的にも、「求める人材像」を明らかにしながらも、「先生の本音」として仕事のやりがいや職場の実態が公開されているなど、応募のハードルを低くするコンテンツも工夫されています。http://urawa-tsukushi.com/recruit/今回のまとめイキイキとした子供たちの写真が大きく扱われているホームページ、子供が好みそうなイラストを使ったホームページ、動物やキャラクターを使ったホームページなど、「雰囲気を伝える」という点では、各園それぞれの工夫が見られます。教育方針や信頼感の伝え方、給食や送迎などの保護者目線に立った具体的な情報提供、詳細な経営情報の開示などにはまだ検討の余地が大きく、その表現を十分に練っていけば差別化につながる余地があるように思えます。保護者のネット活用レベルが上がってきているので、地域コミュニティとの連携なども含め、ブログやソーシャルメディアによるきめ細かな情報提供なども、今後さらに重視すべきポイントになりそうです。この記事に関連する記事2016-01-29【WEBデザイン10選】丸を効果的に使ったデザインのサイトまとめWEBデザイン2015-12-16更新作業でサイトをダメにしていませんか?心がけたい3つのポイントWEBデザイン2015-07-27かっこいいグラフや表が簡単に!インフォグラフィック作成WEBサービス5選+WEBデザイン2015-07-01知識がなくても簡単に使える!WEBデザイン配色お助けツールまとめWEBデザイン2017-10-18パララックス、アニメーションによる画面遷移、上質な動画...ミニマルデザインを飾る3......WEBデザイン2015-10-16レスポンシブなWEBサイト制作で失敗しないために。エムハンドその他アクセスランキング月間1今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?2いまさら聞けない!フリック、スワイプ...スマホ操作の基本用語まとめ3【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ4今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ5言葉に悩むあなたに。文章作成を助けてくれる便利ツール9選6【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選7【WEBデザイン10選】ナチュラルさが上手く表現されたWEBサイトまとめ8わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!9【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ10【WEBデザイン10選】これは上手い!縦の文字組みを効果的に使ったサイトまとめ総合1いまさら聞けない!フリック、スワイプ...スマホ操作の基本用語まとめ2今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?3【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選4【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ5【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ6【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ7初めてでもできる!iPhone動画編集アプリ【厳選4つ】8【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ9【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ10【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ最新記事Web集客に必須の「ペルソナマーケティング」。ある相談事例エムハンドブログwebマーケティングインバウンドブログweb雑学・面白ヒルメシマエブログ。