ワイヤーDLぞうさんのおうち（大島子育て支援センター）
灰色のぞうのイラストと、更新が続く活動報告でできた短いトップページ。
webcan analyze www.akatsuki-gakuen.com
SCHOOL · 岩手県 · PICKED 2026.10.28
暁学園（暁保育園）学校・教室のホームページデザイン参考 — 水色・丸ゴシック・雲の装飾
出典：www.akatsuki-gakuen.com ↗確認日 2026.10.28
EDITOR'S NOTE編集部の視点
雲のふちどりと空の水色で、園庭の写真と「未来へ向けて大きくはねをひろげよう」を包む。
岩手県奥州市江刺の認可保育園のサイト。ファーストビューは園舎と園庭の写真のスライドに「未来へ向けて大きくはねをひろげよう」のコピーと鳥の線画を重ね、下端を雲の形でふちどっている。右端には「公式インスタグラム」と在園児保護者向けページ「スマイル通信」の縦長のタブを固定している。教育への想い、当園の特長（言葉と文字の指導・食育）、当園について、園での生活と続き、最後に園舎・保育見学の案内と電話・メールの問い合わせ先を置いている。
- 01薄い水色の背景と白い雲の形の区切りで、セクションの境目を空の景色のように見せている
- 02文章の周りに、角丸に切り抜いた子どもたちの写真と、気球や空を飛ぶ子どものイラストを配置している
- 03右端に、Instagramと在園児保護者向けページの縦長のタブを固定している
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
見学の案内を最後にまとめる
ページの最後に「歓迎 園舎・保育見学」の見出しで、見学は事前に連絡してほしいことと、電話（受付時間つき）・メールの2つの問い合わせ先を並べている。入園を考える保護者が、次にすることがわかる。
在園児の保護者の入口を分ける
ヘッダーに鍵のアイコンつきの「在園児保護者様ページ」を置き、右端にも「スマイル通信」のタブを固定している。入園を考える人向けの情報と、在園児の保護者向けの連絡を別の入口に分けている。
特長を具体的な取り組みで書く
「当園の特長」では、あいさつや文字の書き方の指導、菜園活動やクッキング保育などの具体的な取り組みを挙げている。保育方針を、保護者が日々の様子を想像できる言葉で伝えている。
チェック項目は 2026.10.28 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#EEF4FD背景 · 空色
#FFFFFF雲・カード背景
#19307C見出し・ナビ · ネイビー
#EA5567お問い合わせボタン・強調 · コーラルピンク
#000000本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Zen Maru Gothic
- 無料で近いもの
- Zen Maru Gothic
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 24px / 700 | 1.50 | 15px / 700 |
| h3 | 18px / 700 | 1.50 | 12px / 700 |
| 本文（p） | 18px / 400 | 2.11 | 14px / 400 |
| ボタン | 0px / 400 | NaN | 0px / 400 |
実測値（PC 1440px・SP 375px、2026.10.28 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01入園を考える人向けの情報と、在園児の保護者向けの入口を分ける
- 02見学の案内には「事前に連絡を」の一言と、電話の受付時間を添える
- 03保育方針は、あいさつ・菜園・クッキングなど具体的な取り組みで書く
- 04背景色と雲の形の区切りなど、1つのモチーフでページ全体の印象をそろえる
FAQよくある質問
暁学園のサイトで使われているフォントは？
見出し・本文ともに Zen Maru Gothic です。Google Fonts で無料で使えます。
在園児の保護者向けページは、トップのどこに置くとよいですか？
このサイトは、ヘッダーのナビに鍵のアイコンつきで置いたうえで、画面右端にも縦長のタブで固定しています。毎日使う保護者が探さずに入れる位置に置き、入園を考える人向けの情報とは見た目で区別しています。
どんな業種の参考になりますか？
保育園・幼稚園・こども園のほか、学童・習い事の教室など、見学を受け付けていて、通っている家庭向けの連絡ページも持つ施設に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は暁学園（暁保育園）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの学校・教室の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の学校・教室サイトを。
「暁学園（暁保育園）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。