LP制作(企画/PC・SPデザイン/コーディング)
SHElikesでのWebデザインコースの卒業制作として架空のダンススクールのLPを作成しました。【制作期間:4ヶ月】 【使用言語:HTML・CSS・Jquery・JavaScript】 【使用ツール:Photoshop、SublimeText】
学生時代ダンスサークルに入っており、ダンスに関わるWebサイトを作成したいと考え、架空のダンススクールのLPを作成しました。
デザインカンプの画像は一番下に載せています。
こちらからサイトがご覧いただけます。
● 企画した内容
目的:
ダンスレッスンの予約
内容:
SERVICE、PRICE、INSTRUCTOR、NEWS、無料体験レッスンの申し込み
ターゲット:
・20代〜30代の社会人の男女
・ダンスを久しぶりにやりたいけどスクールに通うほどではない人
・学生時代ダンスをやっていたけど、最近はやる機会がない人
ペルソナ:
都内で一人暮らしをしている25歳の女性。学生時代ダンスをやっていたが、社会人になってからは忙しいためダンスをする時間がなく、運動不足で少し太った。金融の会社に勤めていて映画鑑賞や舞台を観に行くことが好き。
●ワイヤーフレーム
1枚目
2枚目
● 制作のポイント
*色味や装飾などの統一感
若者向けのポップな印象にしたかったので、オレンジと水色をアクセントカラーにしました。 あしらいとして小さい図形を写真の横に散らして動きが出るようにしたり、ボーダーやドッド柄の図形を背景として入れました。 タイトルの装飾を工夫して見ていて飽きないようにしました。
*INSTRUCTOR のボタン
「全ての講師を見るボタン」をクリックするとページが広がり、ボタンの中の文字も「閉じる」に切り替わるようにJavascriptで作成しました。
*CTAボタンを目立つ位置に配置
ヘッダーにCTAボタンを置いて固定表示させ、無料体験レッスンにアクセスしやすいようにしました。
*レスポンシブ対応でのあしらいの配置
図形の大きさや位置を調整して、どの画面幅でも自然なデザインになるようにしました。
*アニメーション
サイトの雰囲気を大切にしたいと思い、左からふわっとスライドしてくるようにしました。