ワイヤーDLぞうさんのおうち（大島子育て支援センター）
灰色のぞうのイラストと、更新が続く活動報告でできた短いトップページ。
webcan analyze daizenji-school.com
SCHOOL · 福岡県 · PICKED 2026.10.31
大善寺自動車学校学校・教室のホームページデザイン参考 — イラスト・キャラクター・角丸カード
出典：daizenji-school.com ↗確認日 2026.10.31
EDITOR'S NOTE編集部の視点
料金も講習も、手描きの車種イラストのカードから選ばせる。
福岡県久留米市の自動車学校のサイト。ファーストビューは「大善寺駅から徒歩3分」「バリチカ自動車学校」を手描きのイラストで見せるスライダー。トップは教習料金・講習・アクセス・お知らせ・教習スケジュールの順に並び、料金は車種ごとのイラスト入りカードから選ぶ。ヘッダーにフリーダイヤル、ページ下に「仮お申し込み」「お問い合わせ」の2色の帯を置いている。
- 01教習料金を「学生料金・一般料金」と「普通車・二輪車・トラック等」で分け、車種ごとのイラスト入りカードで並べている
- 02アクセスで、西鉄電車の路線図（大善寺駅から徒歩3分）と送迎バスの発車時刻表を表で見せている
- 03お知らせを「重要・お知らせ・キャンペーン・在校生向け」のタブで切り替え、その下に月ごとの教習スケジュールのカレンダーを置いている
3 VIEWPOINTS3つの視点で見る
デザインの視点
料金表を先に出さず、車種ごとの手描きイラスト入りカードで選ばせている点を真似るとよいです。ベージュ系の背景に白い角丸カードを並べ、電話番号をヘッダーに常に出し、申し込みと問い合わせをシアンとブルーの2色に分けています。
集客の視点
「大善寺駅から徒歩3分」をファーストビューで言い切り、固定ヘッダーにフリーダイヤルを出し続けている。さらにPCは右端、スマホは画面下に「仮お申し込み」と「お問い合わせ」の2つを追従させているので、決めた人と迷う人の入口を分ける点が真似しやすい。
Webディレクターの視点
教習料金・講習・アクセス・お知らせ・スケジュールの順で、料金表の前に車種ごとのイラストカードで入口を作っています。お知らせを対象者別のタブに分けた作りは、社内で更新しやすく、真似しやすい構成です。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 2か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / 原付講習予約について
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
駅からの近さをファーストビューで言い切る
「大善寺駅から徒歩3分」をファーストビューのイラストとタイトルの両方で伝えている。通いやすさが選ぶ決め手になる教室・スクールでは、立地の強みを最初に見せると比べられたときに残りやすい。
電話番号をヘッダーに常に出す
PC・スマホとも固定ヘッダーに「お電話でのお問い合わせ 0120-66-4121」を置き、フッターにも営業時間・受付時間と一緒に載せている。料金や送迎の細かい質問を電話で確かめたい人が迷わない。
申し込みと問い合わせを2つに分けて追従させる
PCは画面右端の縦長ボタン、スマホは画面下の固定バーで「仮お申し込み」と「お問い合わせ」を出し続けている。決めた人と迷っている人の両方に、次の一歩を用意している。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F4EFEF背景（和紙風） · ライトグレージュ
#8CAABCアクセス・スケジュールの背景 · ブルーグレー
#00A6CB仮お申し込みボタン · シアン
#0966C4お問い合わせボタン · ブルー
#FFFFFFカード
#2E2E2E本文テキスト・見出しの帯
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Zen Kaku Gothic Antique
- 無料で近いもの
- Zen Kaku Gothic Antique
- 用途
- ナビ・数字
- 使用フォント
- din-2014（Adobe Fonts）
- 無料で近いもの
- Barlow
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 24px / 700 | 1.00 | 20px / 700 |
| h3 | 28px / 700 | 1.40 | 22px / 700 |
| 本文（p） | 18px / 700 | 1.15 | 15px / 700 |
| ボタン | 14px / 500 | 1.00 | 0px / 400 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.31 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01料金表をいきなり出さず、コース（車種）ごとのイラスト入りカードから選ばせる
- 02電車の路線図と送迎バスの時刻表で「どう通うか」を具体的に見せる
- 03お知らせを対象者別のタブに分け、在校生向けの連絡と入校検討者向けの案内を同じ場所で出し分ける
- 04申し込みと問い合わせを色違いの2つのボタンに分け、ページ下とスマホの固定バーに置く
FAQよくある質問
大善寺自動車学校のサイトで使われているフォントは？
和文は Zen Kaku Gothic Antique（Google Fonts で無料）、ナビや数字は Adobe Fonts の din-2014 です。din-2014 の代わりには Google Fonts の Barlow が近い印象で使えます。
手描きイラストを用意できない場合はどうすればよいですか？
イラストの代わりに、コースごとのアイコンや写真をカードに入れても同じ構成にできます。大事なのは、料金表の前にコースを選ばせる入口を作ることです。
どんな業種の参考になりますか？
自動車学校のほか、学習塾・スイミングスクール・資格スクールなど、コースが複数あり、通いやすさと日程が決め手になる教室に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は大善寺自動車学校および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの学校・教室の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の学校・教室サイトを。
「大善寺自動車学校のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。