「宿題を、やらせない。」塾のホームページが、一冊のノートになるまで

西宮北口・定員24名の架空の学習塾を題材にした制作サンプル。捨てた2つのデザイン案と「生徒のノート」という設計、届けた5ページ、公開まで約3時間の記録です。

この事例は、学習塾のホームページがどんなふうに仕上がるかをご覧いただくための制作サンプルです。「寺子屋 かがやき」という塾も、塾長や先生も、所在地も、すべて架空のモデル店舗です。ただし、設計で悩んだことも、捨てた案も、公開までにかかった時間も、本物の制作とまったく同じ手順で進めています。そこを見ていただくためのサンプルです。

モデル店舗の設定：西宮北口から徒歩8分、定員24名の塾

兵庫県西宮市、阪急西宮北口駅から徒歩8分。自宅の1階を改装した教室で、小4〜中3を定員24名で受け入れる小さな学習塾。これがこのサンプルの設定です。1クラス最大8名の少人数、毎回の授業後に保護者へLINEで一言報告、定期テストの2週間前は毎日自習室を開放。方針は「宿題をやらせるのではなく、自分で机に向かえる子に」。塾長が自分で書いたような、短くて正直な文章が似合う塾です。

サイトの読者として想定したのは、夜10時、宿題のケンカのあとにスマホを開く母親です。「塾のサイトだ」と警戒される前に「この先生の話を聞いてみたい」と思ってもらい、2回の無料体験と30分の面談につなぐ。それがこのホームページの仕事でした。ブリーフには「大手のチラシに見えたら失格」という条件もはっきり書かれていました。合格実績を上に置くこと、青と赤のバナー、笑顔の素材写真、黄色い矢印ボタン、「合格！合格！」の連呼。どれも使わない、と。

検討して、捨てた2つの方向

A案は「夕暮れの窓」。紺の夜の面に琥珀色の窓明かりを灯し、写真主導でシネマティックな暗い基調にする案です。帰り道に見える塾の窓、という情景は魅力的でしたが、並べてみると高級予備校のサイトに見えてしまう。夜10時の母親の肩の力は、これでは抜けません。却下しました。

B案は「教科書」。明朝体を主体に、縦書きのアクセント、古典的な活版の品格を出す案です。落ち着きはあるのですが、生成りの紙に明朝という組み合わせは、塾や教育のサイトでは定番中の定番。しかも教科書は「機関の声」であって、生徒のノートではありません。これも却下です。

採用したのはC案「生徒のノート」。サイト全体を一冊のノートとして設計します。生成りの紙、紺のインク、そして子どもが自分で解けた瞬間に引かれる一本の黄色いマーカー線。「合格の光ではなく、机の上の光」という言葉が、そのままサイトの一文コンセプトになりました。ただし「ノートといえば明朝」という自動運転は避けています。見出しはゴシックの細字、本文はUD書体、ペン字を使うのは余白に置いた先生の一言だけです。

「同業他社でも同じものを出したか」を、一つずつ問う

色は紙・紺・黄の三色が設定で決まっていましたが、その中身は選び直しました。紙は「AIの定番クリーム」ではなく、本物のノート用紙に寄せて少し黄を含む色に。紺は無難な紺ではなく、万年筆のブルーブラック。罫線は日本のノートの薄い青灰。マーカーの黄色は「線」としてだけ使い、面で塗らず、ボタンの色にもしません。赤は一切使わず、エラー表示も紺と下線で見せます。注釈の薄いグレーも禁止にして、紙の上で十分なコントラストを保ちました。

書体は、読むのが保護者であることを正面から受け止めています。本文は読みやすさのために設計されたUD書体（BIZ UDPGothic）を17px以上（PCでは18px）、行間1.9で組みました。見出しの細字は Zen Kaku Gothic New の300です。「細字は見出しにだけ許す」という設定の条件を、そのまま設計のルールにしています。ペン字の Klee One は教科書体寄りの手書きで、子どもっぽくなりません。

レイアウトでいちばん大きな判断は、均等なカード格子を捨てたことです。代わりに、ノートの左マージン線をそのままグリッドにしました。PCでは左に固定幅のマージン列が縦に走り、節のラベルと先生の一言がそこに入り、本文はその右に置かれます。写真は雑誌の見開きのように非対称で大きく、紙の余白に食い込ませます。そして唯一の派手な仕掛けとして、スクロールに合わせて見出しの一語にすっと引かれる黄色いマーカー線を、全ページ・全見出しで貫きました。跳ねる動きや回転、自動で流れるカルーセルは使っていません。

電話ファーストにしなかった理由

店舗のホームページでは「電話」を第一の導線にすることが多いのですが、このサンプルでは採りませんでした。授業中は電話に出られない塾で、読者は夜10時の母親。導線は「無料体験フォーム＝LINE ＞ 電話」の順にし、電話番号には授業中は出られない旨と折り返しの案内を添えています。モバイルの画面下に固定したバーも「電話＋LINE」ではなく、「LINEで相談」と「無料体験を申し込む」の二つ。ヘッダーは下にスクロールすると隠れ、上に戻すと細いバーで戻ってくるので、無料体験のボタンはいつも親指の届く場所にあります。合格実績は設定どおり、トップの下のほうに小さく、正直に置きました。

届けた5ページ

トップ（/）は、写真一枚と「自分で、机に向かえる子に。」の一言だけの疎なヒーローから始まり、その下は誠実な密度で続きます。日付つきのお知らせ、母親の悩みに正面から答える節、塾の考え方のダイジェスト、LINE報告を実物のように見せる吹き出し、保護者の声、小さな合格実績、そして夕暮れの住宅街に灯る教室の窓の写真と「帰り道に見える塾です。」の一言。「塾の考え方」（/philosophy）は「宿題を、やらせない。」のステートメントから、自分で机に向かう・少人数・毎回のLINE報告・テスト前の自習室、という4つの柱へ。

「コースと料金」（/courses）は「料金は、これで全部です。」の一言から。税込の月謝を表にし、教材費は年6,600円のみ、入塾金なし、夏期・冬期講習は別料金、と隠さずに書き、開講時間は曜日グリッドで見せています。「無料体験・お問い合わせ」（/contact）は「まず、2回。無料で。」から始まり、申し込み→30分の面談→無料体験2回→入塾はそれから、という流れ、フォーム、よくある質問8問、駐輪場や送迎の注意まで含むアクセス案内を載せました。そしてプライバシーポリシー（/privacy）。フッターには「このサイトは制作サンプルです（架空の塾です）」の一行を入れています。

公開まで、約3時間

設計の検討からページの実装、2回の審美レビューを経て公開まで、かかった時間は約3時間（実測）です。ホームページ番頭では、AIが制作を担い、チャットでの指示で方向を決めながら、人が作ったのと変わらない品質を目指しています。写真の縁に細い紺のキーラインを入れる、モバイルの表示速度をもう一段上げる、といった細かな残タスクは次の編集で織り込む前提で、まず公開しました。

この事例のようなホームページを、あなたのお店にも。専門用語もデザインの知識もいりません。チャットで話すだけで、こんなふうに仕上がります。hpbanto.com へどうぞ。