←BACK TO WORKS一覧へ戻る
実案件FeaturedCORPORATE
もりのこ幼稚園
教育・スクール / コーポレートサイト
自然のなかでのびのび育つ幼稚園の公式サイト。深いグリーンに多色のマスコットや紙吹雪が弾ける、賑やかでポップな世界観で見学予約まで導く全12ページのマルチページサイト。
このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
CONCEPT
ダーク深緑（#082622）を地に、丸ゴシック（M PLUS Rounded 1c）と多色のテーマカラーで子どもの好奇心が弾けるポップな世界観を表現した幼稚園サイト。切り抜きした園児写真を中央放射構図に置いたヒーロー、全セクションに散る手描きマスコットと紙吹雪、ポラロイド散乱の「たからもの」、クレヨン帯のフッターなど密度の高いビジュアルで構成。トップに加え、園について・教育・園の生活（1日の流れ／年間行事）・施設・安全・入園案内（募集要項／費用／入園の流れ／FAQ）・採用・お知らせ・アクセス・お問い合わせの全12ページ。IntersectionObserverのフェード、FAQアコーディオン、疑似送信フォーム（ハニーポット付き）、追従するLINE見学予約CTA、Instagramフィード風セクションを実装した。
背景・課題
一般的な幼稚園サイトの予定調和を避け、子どもの「不思議！」が弾けるような賑やかで密度の高いポップ表現に振り切りつつ、保護者が求める安心感も損なわないトーンに整えた。多数の装飾を載せても破綻しないよう、iOS Safariで不具合の出やすいblurアニメや100vh依存を排し、svhの二段指定・prefers-reduced-motion対応・SPでの装飾間引き・レスポンシブ3段で全デバイスの安定表示を担保した。
DESIGN PERSPECTIVE
TECHNOLOGIES & FEATURES
主な機能
アニメーションフォームFAQギャラリー年間行事カレンダースティッキーCTA
使用技術
HTMLCSSJavaScript
CMSなし
フォームあり
アニメーションあり