ピアノ教室サイト（デモ）

POINT 制作のポイント

1. 1

   JSが動かなくても、内容が見えるようにする

   JavaScriptが読み込めなくても、本文や写真が見え、レイアウトが変わらない作りにしました。

   CSSで先に内容を隠さず、動きに必要な処理はJavaScript側にまとめています。

2. 2

   差し替える情報を、ひとつにまとめる

   教室名や紹介文、料金、連絡先など、教室ごとに差し替える項目をTSV（タブ区切りの表）の1行に集約しました。

   Pythonのビルドスクリプトで、その1行から教室ごとのサイトを生成する設計です。

3. 3

   未確認の情報は載せない

   教室概要や数字などの項目は、空欄なら要素ごと消す仕組みにしました。

   LINE・InstagramのURLも、空欄ならボタンごと非表示にしています。リンク先のないボタンを残しません。

4. 4

   料金と連絡先を、見つけやすくする

   料金を大きく見せ、レッスンを検討する方が見つけやすいようにしました。

   連絡・教室の様子を見る入口として、TEL・MAIL・LINE・Instagramの4種類を用意しています。架空の教室のデモでは、LINE・Instagramは設定せず非表示にしています。