【day62】社会福祉法人小浜会 こどもの丘ナーサリー #1日1サイトレビュー

社会福祉法人小浜会 こどもの丘ナーサリー | 長崎県雲仙市の企業主導型保育園

【概要】
長崎県雲仙市の企業主導型保育園のサイト

【選んだ理由】
保育園のサイトを作ってみたいなあと思っていて、参考サイトを増やすため！

【参考になるデザイン（PC）】
・エリアを本に見立てて本をもっている手、ページの両サイドやページ最下部に植物、各エリアのあしらいに園児や生き物の手書きイラストが配置されている
→手書きのイラストが多用されていることで楽しい、あたたかい、にぎやかな印象を与える
・ヘッダーはスクロール追従ではなく、各ページにあわせたイラストと一緒に配置
→リンクの文字はロゴと同じ色で、イラストだけ青色になっていてアクセントになっている
・SNSの記事はそれぞれのSNSの仕様にあわせたデザインになっている
→馴染みのあるデザインで、どういう内容をツイートしているのかわかる
・ページトップボタンが本のような蝶々になっていて、クリックするとぱたぱたと動くアニメーション
・フッターにはヘッダーのリンクに加えて、アクセス、「企業の皆様へ」「お問合わせ」のリンクが配置されている
→「企業の皆様へ」「お問合わせ」はホバーすると周りの点線円が回転する
・コンテンツのレイアウトの横幅マックスの域が揃っている
→例えば「保育のこと」の園の過ごし方では縦のレイアウトが階段のようになっているけど、横幅がそろっているからごちゃっとならない
・「園のこと」のたてものについてのエリアで、園内図に虫眼鏡マークが配置されているデザイン
→上下に弾むアニメーションでクリックできることを可視化
→設計のコンセプトもPDFで見れるリンクを配置していて、こだわりを感じる
・「病児保育」のもってくるもののリストでは、アイテムをクリックするとチェックボックスのようにチェックがつく
→サイトをメモ帳のように使えて、子どもを預けたい親御さんのよりそったデザイン
・写真に手書きイラストが重なっているデザインが多い
→ただ配置しただけではなく、重なり＝奥行きを感じる
→ただ整列している写真ではなく、手のイラストと組み合わせてサイトに動きがでている

▼PCサイズ 写真と手がきイラストが組み合わさったデザイン

【目的】
保育園のことを知ってもらう
問い合わせをしてもらう
→園の雰囲気や取り組みを知ってもらって、信頼してお子さんを預けてほしい
職員の応募をしてほしい
→園の雰囲気や取り組みを知って働くイメージをしてもらって、応募してほしい

【フォント】
タイトル：秀英丸ゴシック B
本文：游ゴシック Medium

【カラー】
背景：FFF、FAE1E0（薄ピンク）
タイトル（メインカラー）：E06168（柔らかい赤色）
タイトル（サブカラー）：0099CB（青色）
本文：000

【レスポンシブ（SP）】
・LINEの病児保育アカウントのリンクはPCサイズではQRコードで、SPサイズではLINEへのリンクボタンに変更している
・メニューはハンバーガーメニューで、開くとヘッダーとフッターのデザインを合わせたデザインになっている

▼SPサイズ ハンバーガーメニューを開いたキャプチャ

【感想まとめ】
線画のイラストと秀英丸ゴシックがマッチしてて、ほんわかあたたかい印象を受けるサイト！かわいいなあ〜〜

▼PCサイズキャプチャ