ワイヤーDL大善寺自動車学校
料金も講習も、手描きの車種イラストのカードから選ばせる。
webcan analyze www.zousan-no-ouchi.com
SCHOOL · 山口県 · PICKED 2026.11.03
ぞうさんのおうち（大島子育て支援センター）学校・教室のホームページデザイン参考 — イラスト・縦書き・手描き風
出典：www.zousan-no-ouchi.com ↗確認日 2026.11.03
EDITOR'S NOTE編集部の視点
灰色のぞうのイラストと、更新が続く活動報告でできた短いトップページ。
山口県周防大島町の子育て支援センターのサイト。ファーストビューは灰色のぞうのイラストと縦書きの名前で、写真を使っていない。続いてインタビュー・子育て支援内容・移住メリットの3枚のカード、お知らせ、8件の活動報告を並べるだけの短い構成で、更新される情報が最も目立つ。
- 01ファーストビューを、ぞう・木・海のイラストと縦書きの文字だけで作っている
- 023枚のカードの右上の角を、黄・緑・ピンクの丸い形で色分けしている
- 03活動報告を写真つきカードで8件並べ、日付とカテゴリのラベルを付けている
3 VIEWPOINTS3つの視点で見る
デザインの視点
紙の質感の背景に、ぞうのイラストと縦書きの名前だけを置く、余白の広いファーストビューが特徴。下の3枚のカードは、角の色（黄・緑・ピンク）と丸い写真で区別している。イラストと少ない色で温かさを出す参考になる。
集客の視点
ファーストビューの直下にインタビュー・子育て支援内容・移住メリットの3枚を置き、知りたいことへすぐ進める形を真似したい。周防大島という地名を軸に、お知らせと活動報告で2026年11月の更新を見せ、活動が続いていることを伝えている。
Webディレクターの視点
ファーストビューのあとに3枚のカード、お知らせ、活動報告を並べる短い構成が参考になる。カードを3枚に絞ることと、更新欄をお知らせと活動報告の2種類に分けることを真似したい。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 2か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線10月育児相談
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
移住を考える人への入口をカードで用意する
3枚のカードの1つを「移住メリット」にして、「島での育児はこんなにお得！」「モデルケースのご案内」と書いている。地域の外の人にも読む理由を作っている。
活動の様子を写真で続けて見せる
活動報告にはリトミックやおはなし会などの写真と日付が並び、2026年11月の投稿も載っている。今も活動していることが、トップページだけで分かる。
インタビューを入口のカードにする
インタビューのカードに人物の写真を丸く切り抜いて置き、「大島での子育てについてセンター長にインタビュー」と書いている。施設の説明より先に、人の話へ進める入口を作っている。
チェック項目は 2026.11.03 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F4F4F4背景
#E1AE3Bカードの差し色 · イエロー
#33A256カードの差し色 · グリーン
#E16889カードの差し色 · ピンク
#74B7D1イラストの海 · ブルー
#000000見出し・ボタン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文・ナビ）
- 使用フォント
- 游ゴシック
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 32px / 700 | 1.50 | 26px / 700 |
| h3 | 24px / 700 | 1.50 | 24px / 700 |
| 本文（p） | 14px / 400 | 1.50 | 14px / 400 |
| ボタン | 18px / 400 | 1.50 | 18px / 400 |
実測値（PC 1440px・SP 375px、2026.11.03 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.03 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01写真が少なくても、ひとつのイラストを大きく置いてファーストビューを作る
- 02カードの角に色を付けて、項目を色で見分けられるようにする
- 03トップページの大半を、更新される情報の一覧にする
- 04地域の外の人に向けた入口（移住のメリット）を1枚用意する
FAQよくある質問
ぞうさんのおうちのサイトで使われているフォントは？
実測では見出し・本文・ナビとも游ゴシックです。ファーストビューの「ぞうさんのおうち」は、本文とは違う書き文字で見せています。Webフォントを使わなくても、イラストで個性を出している例です。
トップページの情報が少なくても大丈夫ですか？
このサイトのトップページは、3枚のカードから詳しいページへ送り、お知らせと活動報告を並べるだけの短い構成です。詳しい説明を下の階層に分けることで、トップは更新情報を中心にできています。
どんな業種の参考になりますか？
子育て支援施設のほか、保育園・幼稚園・地域の教室・NPOなど、日々の活動を見せることが信頼につながる団体に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はぞうさんのおうち（大島子育て支援センター）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの学校・教室の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の学校・教室サイトを。
「ぞうさんのおうち（大島子育て支援センター）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。