No.021「こぐま保育園」のからくり

No.021 こぐま保育園- ワンピースの楽譜 | Webサイト100選

サイト概要
こぐま保育園の公式ウェブサイトです。こぐま保育園は、東京都多摩市永山にある保育園です。園の1日の流れや年間行事などを、動画や画像も交えて紹介しています。その他、園に通っていない親子向けの「あそぼう会」などの情報も載せています。

No.021 こぐま保育園-ワンピースの楽譜 | Webサイト100選

ここが魅力！
・園の紹介動画を見られる！例えば、今のご時世（新型コロナウイルスが収束しきっていない状況）では、入園希望であっても見学に行きづらい、また、実施自体がされなくなるなどといった場合があるが、動画を見ることで、園長先生の人柄や、子どもの園で過ごす様子など、静止画では伝わらない園の雰囲気が分かる！
※動画はサイトに埋め込みではなく、「どんなところ？」ページのリンクテキストをクリック（タップ）すると「YouTube」サイトの対象動画ページへ移動するようになっている。

・「（0歳から2歳の子どもたちを対象に、週１～２回開かれている）あそぼう会」や「みんなの輪（例：パパ友ネットワーク作りを目的として年に1〜2回開催しているおやじの会）」など、園に通っていない子どもと保護者や、園による、通わせている保護者など様々な対象への情報が載っている！

（「あそぼう会」のお知らせ例）

No.021 こぐま保育園-あそぼう会からのお知らせ例
-ワンピースの楽譜 | Webサイト100選

（「みんなの輪」）

No.021 こぐま保育園-みんなの輪-ワンピースの楽譜 | Webサイト100選

構成
・FV

No.021 こぐま保育園-FV-ワンピースの楽譜 | Webサイト100選

→「園児＋先生」、「園の外観」、「園児」の順に3枚の写真がふわっと切り替わる（数秒間隔でフェイドアウト・フェイドインを繰り返す）デザイン。
写真を埋め込んでいる枠が手書き風で、柔らかさがある。また、背景画像が木目である点は、自然との触れ合いを大切にしていそうという印象を受ける。真ん中の写真だけが動くため、写真に視線がいきやすい。

・header、nav

→メインビジュアル（MV）をheaderに含めている。グローバルナビゲーションのカテゴリ名の上にマウスをかざしたときの変化は、カーソルが指マークに変わるのみで、文字色の変化などはない。

・footer

No.021 こぐま保育園-footer-ワンピースの楽譜 | Webサイト100選

→サイトマップはなく、内容は所在地やコピーライト表示、運営元である「社会福祉法人多摩福祉会」のみ（＝外部リンクは1つ）で、すっきりとしている。

使用パーツ・アイコン

バナー

分析・考察
■ターゲット：親子、地域の人
[理由]園児以外の子どもへの情報（あそぼう会など）が載っているから。また、「あそぼう会」ページの「子育て福祉センター」の説明内に「これからも子どもから高齢者まで、すべての年代のための福祉の充実を願って、地域・世代間交流を進めていきます。」という文章があったから。

■特徴：
・見出しの枠が、保育園の名前にも使われている「こぐま」の形になっている。また、トップページや下層ページのあらゆるところに、くまの足跡や様々な場面のくまのイラストが配置されているため、見つける楽しさがある。

No.021 こぐま保育園-見出しデザイン-ワンピースの楽譜 | Webサイト100選

・画面遷移時にふわっとフェードインでページ全体を表示するデザインになっている。
・園児や保護者向けの情報、コンテンツではなく、「オンライン就職説明会」（求人関連のバナー）をトップページのメインビジュアル（MV）のすぐ下に貼っている。また、footerのすぐ上にも求人に関するバナーを貼っている。＝トップページに求人関連のバナーが2つある。
※「オンライン就職説明会」のバナーに関しては、「詳細はこちらから！」ではなくその右側の、リンクが貼ってある「お知らせ」、また、その下の「エントリーはこちらから！」ではなくその右側の、リンクが貼ってある「エントリーフォーム」にそれぞれ枠をつけ、その枠のどこでも押せるようになっているほうがボタンのように見えて分かりやすいかつ、押しやすいと感じた。