webcan analyze miho-youchien.com

SCHOOL · 神奈川県 · PICKED 2026.10.25

みほ幼稚園学校・教室のホームページデザイン参考 — ブルー・グリーン・丸ゴシック

出典：miho-youchien.com ↗確認日 2026.10.24

みほ幼稚園学校・教室 · 神奈川県

サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

入園を考える家庭に向けて、マンガのPDFとLINE公式アカウントで園のことを伝えている。

横浜市緑区の幼稚園のサイト。ファーストビューは園児が絵本を読む写真や塔のある園舎の写真のスライドに、うさぎのロゴを重ねている。教育目標の文章と4つのページへの写真リンクのあと、お知らせ・ブログ・リクルート・「マンガでわかるみほ幼稚園」・LINE公式アカウントの案内と続き、緑のフッターで締めている。

01固定したヘッダーの右上に、受話器のアイコンつきの電話番号を緑の文字で置いている
02「マンガでわかるみほ幼稚園」のバナー2枚から、園の生活や満3歳児保育を解説したPDFを開ける
03LINE公式アカウントの案内を緑の点線の枠で囲み、QRコードを添えている

CONVERSION集客の工夫

✓電話番号をヘッダーに常設PC・ファーストビュー

✓タップで電話できるSP・tel:リンク 2か所

－SPの追従ボタンSP・画面下に固定

✓予約・問い合わせ導線お問い合わせ

✓LINEで相談・予約LINE公式アカウント

－営業・診療時間の明記トップページ内

入園前の疑問をマンガで先回りする

「マンガでわかるみほ幼稚園」で、満3歳児保育の制度や体制、教育や安全対策、預かり保育や課外活動を解説している。文章の募集要項より手に取りやすく、入園を考え始めた家庭が読み進めやすい。

まだ先の家庭とLINEでつながる

「入園はまだ先だけれど、情報は受け取りたい」という人に向けて、LINE公式アカウントで園見学や行事、小さい子ども向けのイベントを知らせている。入園の検討が始まる前から接点を持てる。

電話番号をいつでも押せる位置に

ヘッダーを固定し、PCでもスマホでも右上に電話番号を出している。スマホではタップで電話をかけられるので、園見学や入園の問い合わせにすぐ進める。

チェック項目は 2026.10.24 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景

#0068B6ロゴ・ボタン · ブルー

#1EAB3Aヘッダーの電話番号 · グリーン

#00BF6Dフッター背景 · ライトグリーン

#333333本文テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途: 見出し・本文（和文）
使用フォント: M PLUS Rounded 1c
無料で近いもの: M PLUS Rounded 1c

用途: ナビ・ボタン
使用フォント: Lato / Noto Sans JP
無料で近いもの: Lato / Noto Sans JP

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h2	40px / 400	1.20	22px / 400
h3	14px / 700	1.50	14px / 700
本文（p）	16px / 400	1.80	14.4px / 400
ボタン	13px / 400	1.80	13px / 400

実測値（PC 1440px・SP 375px、2026.10.24 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

01
ヘッダー
左にロゴ、中央にナビ7項目、右に受話器のアイコンつきの電話番号。上部に固定。
ヘッダー／電話番号＋予約ボタン常設型
02
ファーストビュー
園児や園舎の写真のスライドに、白いうさぎのロゴを重ねる。左右に矢印。
ファーストビュー／全面写真＋コピー型
03
教育目標と案内
教育目標の文章の下に、みほ幼稚園について・園の特色・子育て支援・入園についての写真リンク。
メニュー・サービス／アイコン／写真グリッド型
04
お知らせ
バナー画像つきのカードを4列で。「もっと見る」のボタン。
お知らせ／お知らせ一覧型
05
ブログ
記事・メディア／記事カードグリッド型
06
リクルート
求める人物像の文章と、先生と園児の写真。
コンセプト／写真＋メッセージ型
07
マンガでわかるみほ幼稚園
バナーからPDFを開く。各バナーの下に内容の説明。
イベント・キャンペーン／特集バナー並び型
08
LINE公式アカウント
緑の点線の枠にLINEのアイコン、説明文、QRコード。
行動喚起／メルマガ・LINE登録型
09
お問い合わせ
園舎の写真の上に電話番号。
行動喚起／電話＋Web予約の2ボタン帯型
10
フッター
緑の背景にサイトマップ、ロゴ、住所、MAPと送迎バスルートのリンク。
フッター／店舗情報＋ナビ型

PARTSパーツ別に見る

みほ幼稚園のファーストビュー（PC） — 02ファーストビューファーストビュー／全面写真＋コピー型

みほ幼稚園のファーストビュー（スマホ） — 02ファーストビューファーストビュー／全面写真＋コピー型

みほ幼稚園の教育目標と案内（PC） — 03教育目標と案内メニュー・サービス／アイコン／写真グリッド型

みほ幼稚園の教育目標と案内（スマホ） — 03教育目標と案内メニュー・サービス／アイコン／写真グリッド型

みほ幼稚園のマンガでわかるみほ幼稚園（PC） — 07マンガでわかるみほ幼稚園イベント・キャンペーン／特集バナー並び型

みほ幼稚園のマンガでわかるみほ幼稚園（スマホ） — 07マンガでわかるみほ幼稚園イベント・キャンペーン／特集バナー並び型

みほ幼稚園のLINE公式アカウント（PC） — 08LINE公式アカウント行動喚起／メルマガ・LINE登録型

みほ幼稚園のLINE公式アカウント（スマホ） — 08LINE公式アカウント行動喚起／メルマガ・LINE登録型

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.24 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

SVGをダウンロードする
Figmaのキャンバスにファイルをドラッグ＆ドロップする
セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

01入園前に知りたいことを、マンガなど読みやすい形でまとめる
02入園がまだ先の家庭とも、LINEなどでつながる入口を作る
03電話番号をヘッダーに固定し、問い合わせへの距離を短くする
04園舎や園児の写真をスライドで見せ、園の雰囲気を最初に伝える

FAQよくある質問

みほ幼稚園のサイトで使われているフォントは？

見出しと本文の和文は M PLUS Rounded 1c、ナビやボタンは Lato と Noto Sans JP です。すべて Google Fonts で無料で使えます。

幼稚園のサイトにLINE公式アカウントの案内は必要ですか？

このサイトは、入園がまだ先の家庭にも登録を呼びかけ、園見学や行事の告知をLINEで届けています。検討を始める前から情報を受け取ってもらえるので、募集の時期に知らせる相手を増やせます。

どんな業種の参考になりますか？

幼稚園・保育園・認定こども園のほか、習い事の教室や学習塾など、保護者が時間をかけて比べて決める業種に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はみほ幼稚園および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの学校・教室の参考サイト

ワイヤーDL

SCHOOL · 山口県 · 2026.11.03

ぞうさんのおうち（大島子育て支援センター）

灰色のぞうのイラストと、更新が続く活動報告でできた短いトップページ。

#イラスト#縦書き#手描き風#子育て支援

学校・教室のすべてを見る7件

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の学校・教室サイトを。

「みほ幼稚園のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら

みほ幼稚園学校・教室のホームページデザイン参考 — ブルー・グリーン・丸ゴシック

EDITOR'S NOTE編集部の視点