ピアノ教室を探している保護者
看板、チラシ、ネットの情報などからピアノきょうしつ音を知ってくださった方

教室特有な情報をわかりやすく伝え、体験レッスン申し込み・お問い合わせにつなげる

まずはABOUTで教室への想いと雰囲気を伝えユーザーに興味を持ってもらい、更にリード文の『どんなコも、自分のために弾ける場所』であることをより伝えるために、これまでの生徒さんの事例をスライドショーの写真と共に紹介。 子供がレッスンに通うことに対する不安を払拭できる設計を意識。 忙しい子育て世代の方でも迷わず知りたい情報がすぐわかるようにメニューと問い合わせボタンは常に上に配置しました。

使用する写真は、"みんなが楽しく"ではなく”それぞれが楽しく”ピアノを弾いて欲しいというクライアントの想いを表現するために、あえて笑顔の写真よりも夢中になって弾いている瞬間的なものを多く取り入れました。 アクセントカラーに使用した教室のイメージカラーの赤は、温かみのある写真と調和するよう彩度の微妙な調整に気を配りました。 配色は、基本的に三色に抑えながらも生徒さんの事例を紹介するセクションだけカラフルな配色にし、様々な生徒さんが通っていることが視覚的に伝わるようにしました。

ワイヤーフレーム/デザイン/コーディング

Illustrator / Photoshop / XD / Visual Studio Code

illustratorのペンツールで作成。ピアノきょうしつ音様のオリジナルキャラクターオト君と実際に通っている生徒さんの写真を参考に描きました。サイトの柔らかな色合いの中でも浮かないように、ブラシは『木炭画ーぼかし』を使用。