押上にある小さなバレエスタジオFleur balletのWebサイトを制作しました。実在するスタジオとなるので実際にクライアント様にヒアリングを行い、擦り合せを行いながら一から制作しました(公開は未定)。
サイトURL
https://adjustacademy.com/d230200/d230228-120692/two/
※制作ページ・・・TOPページ / 講師紹介ページ / スタジオ案内ページ
担当と所要時間
ヒアリング(2時間)/ ワイヤーフレーム(5時間)/ デザイン(18時間)/ コーディング(55時間)
使用ツールと言語
Figma / HTML / CSS / JavaScript(jQuery)
ターゲット
クラシックバレエに関心のある単身者・既婚者含む30代~60代の女性
企業情報とコンセプト
小さなバレエスタジオのWebサイトのため、過度な動きやあしらい、誇張するような文言は避け、シンプルでスタジオの理念や雰囲気、伝えたい情報の見やすさに重きを置く
目標設定
- バレエスタジオの認知拡大
- サイト訪問者にスタジオ理念や雰囲気を伝える
- 生徒数増加
デザインについて
クライアント様の伝えたいイメージや雰囲気を第一にデザインを行いました。
バレエ=ピンクのイメージですが、サイトのメインカラーを明清色にすることで、ポップになりすぎず洗練された上品なイメージに仕上げました。アクセントカラーの紫色は、全体を締めつつ、芸術を連想させる配色にしました。画像同士の重なりをつけたり、タイトルの横に伸びる線でメリハリをつけ、サイトの印象がシンプルになりすぎないようにしました。
特にメインビジュアルは、スタジオ名のFleur(花)との親和性を図る為、花を持って踊っている人物の写真の厳選に徹底的にこだわりました。
コーディングについて
初めてレスポンシブに対応したWebサイトを制作しました。画像を重ねて配置したことによる横スクロールバー出現に苦心しながらコーディングを行いました。また、jQueryを使用し、ナビゲーションメニューの色の切り替えや文章に動きを加え、サイトの見やすさを重視しながら制作しました。