たかはし音楽教室 HPリニューアル

デザインの方向性を、3つの案からご確認ください。

トップページの見た目を3パターン作りました。写真をクリックすると、実際に動くページが開きます。
決めるのは「雰囲気の方向」だけで大丈夫です。「P1とP2の間」「P1の色味でP3の見出し」のような組み合わせの指定も歓迎です。

2026年10月8日版 / 制作: サザナミ / このページは検索に載りません(noindex)

3案に共通していること

P1 P1 えほん パソコン表示 P1 えほん スマホ表示

えほんEHON — やわらかい・親しみやすい

トップバナーの世界観を、そのまま画面全体に広げた案です。丸ゴシックの見出し、ぽってりした角丸カード、波のような区切り線で、絵本のページをめくるような安心感をつくります。「やさしそう」「子どもが楽しそう」が、最初の1秒で伝わることを狙っています。

向いている
はじめて習い事を探す保護者。親しみやすさを最優先にしたいとき。
気をつけたい
かわいさに寄るぶん、「ゆっくりさん対応」や料金の説明が少し軽く見える可能性があります。
  • 丸ゴシック
  • 角丸カード
  • 波の区切り
  • コーラル多め

スマホで見る場合も同じリンクで大丈夫です。

P2 P2 おんがくノート パソコン表示 P2 おんがくノート スマホ表示

おんがくノートNOTE — 整っている・見通しがよい

「見通しのよさ=安心」を形にした案です。角ゴシックの見出し、まっすぐ揃えた余白、五線譜のような細い線で、情報が整理されている印象をつくります。発達に不安のある保護者が、落ち着いて最後まで読めることを狙っています。

向いている
「ゆっくりさん対応をちゃんとやっている教室」という信頼感を前面に出したいとき。
気をつけたい
3案の中では一番あっさりしています。写真の力で温かさを補う前提です。
  • 角ゴシック
  • 五線譜の線
  • セージ緑が主役
  • 余白ひろめ

スマホで見る場合も同じリンクで大丈夫です。

P3 P3 クラフト紙 パソコン表示 P3 クラフト紙 スマホ表示

クラフト紙KRAFT — ていねい・落ち着き

「ていねいさと信頼」を形にした案です。明朝体の見出し、紙のような質感、金色の細い罫線、縦書きの小見出しで、開校20年以上の落ち着きを伝えます。じっくり読んで比べたい保護者や、大人の生徒さんにも届く雰囲気です。

向いている
教室の歴史や先生の人柄を、しっかり読んでもらいたいとき。大人のレッスンも広げたいとき。
気をつけたい
子ども向けの軽やかさは控えめで、少し年配向けに見える可能性があります。
  • 明朝体
  • 紙の質感
  • 金の罫線
  • 縦書き

スマホで見る場合も同じリンクで大丈夫です。

最初の画面の文言、A案とB案

A案はバナーの「みんなと同じじゃなくていい。」をそのまま主役に。B案は仕様書の「一人ひとりのペースで、小さな『できた!』を自信に。」を主役にして、写真を差し替えています(B案の写真はAIイメージ)。どの案でも、各ページ右下のボタンで切り替えられます。

P1 B案の最初の画面
P1 × B案丸い写真に、仕様書の文言。
P2 B案の最初の画面
P2 × B案写真を右半分いっぱいに、左に文言。
P3 B案の最初の画面
P3 × B案額装した写真と、縦書きの小見出し。

見ていただきたいポイント

細かい文章や料金はこれから詰めるので、今回は「雰囲気」だけ見てください。

1. 全体の雰囲気

教室に来る保護者が、最初の画面で「ここなら安心」と感じるのはどれか。

2. スマホで

保護者の多くはスマホで見ます。お手持ちのスマホで同じURLを開いてみてください。

3. 組み合わせOK

「P1の色味でP3の見出し」「P2のコース表」のように、部分ごとの指定でも大丈夫です。

ご返信はこの形で

コピーして、分かる範囲だけ埋めてお送りください。全部埋まっていなくて大丈夫です。

■ 気に入った案:P1 / P2 / P3(複数可)
■ 組み合わせたい点:例)P1の色味 + P3の見出し
■ 最初の画面の文言:A / B / どちらでも
■ 気になった点・直してほしい点:
■ 写真について(実際の写真を用意できるか):