2018年9月12日水曜日

音楽教室のWEBデザインを担当しました

【Webデザイン】

音楽教室のロゴデザインに続き、同じ音楽教室のWebデザインも制作しました。


はなまる音楽教室(Hanamaru.y)


もともとクライアント自身で作られたホームページがあり、そこから改めてデザインに起こしていくかたちでした。
スクロールして見る、LP(ランディングページ)型にしました。


ウェブデザインはイラレで制作、自分でイラストも


ワイヤーフレームを確認してもらい、デザインをイラレで起こします。
デザインを起こす過程で、写真以外にターゲットに合わせたイラストが欲しいなと思い、描きました。



鉛筆で描き、Photoshopで色付け


下絵を鉛筆で描きスキャンし、Photoshopで色付けし構成していきます。
動物も植物もバラバラに切り取り、色を塗ってます。
その方が後で修正しやすいです。
現に、実際のイラストではクマの向きが反転してます。
植物も動物の位置に合わせて配置してます。

動物たちが囲んで演奏を聞いている
イメージのイラストにしました。


イラストはトップ部分、その他にお問い合わせ部分とフッター部分に入っています。
先生の似顔絵も描いてます。

Webサイト全体のカラーはロゴに合わせて決めました。
LPでスクロールして長くなるのでトップにメニューを固定してスクロールしてもずっと付いてきます。



Webデザインの仕事はここまで


私がデザインを、
HTMLとCSS・WordPless化を株式会社ペルケオさんが担当してくださいました。
Webアプリケーション制作のエンジニアさんなのに、WordPressもいじれるのすごいなぁと思います!

もっとフレキシブルな数値指示をすれば良かったなと反省してます。
たぶん、デザイン起こすの大変だったと思います。
ペルケオさんありがとうございます!!



後日談


はなまる音楽教室様のホームページを「ブログで紹介してもいい」とご許可の連絡をくださった時に、「問い合わせがありました!」と報告をもらいました。

とても嬉しかったです!
実は、ペルケオさんとの打合せ時に、これまでもwebから問い合わせがあった実績を聞いていて「はなまる音楽教室様はもともとの引き寄せ力あるな〜」と思ってました。
そのさらなる手助けとして今回のデザインが作用してくれたと嬉しく思ってます。

教室が楽しく、生徒いっぱいになることを願ってます٩( ´◡` )( ´◡` )۶