河野裕衣バレエスタジオ　＃１日１サイトレビュー

河野裕衣バレエスタジオ

【概要】

大阪府豊中市にあるバレエ教室の公式サイト

【ターゲットと目的】

・ターゲットはバレエを習いたい子供〜大人と幅広い年齢層だが、サイト内の画像からメインターゲットは小学生くらいの子供と推測

・バレエ教室の詳細の認知〜レッスンの体験・入会を目的とする

・バレエを通して強く、豊かに「生きる力」を身につけてほしいという思いと、年齢別のクラス、スキル別のクラス、美容を目的としたクラスなど多種多様なプログラムを展開していること、駅から3分というアクセスのしやすさ、明るいスタジオであることを伝えたい

【印象】

上品で落ち着きのある印象

【構成】

・認知させたい教室の思い（コンセプト）を紹介してから、クラス紹介、レッスンスケジュール、料金などの詳細を案内

・TOPページに含まれるコンテンツはConcept、Lesson、Studio、Diary（お知らせ）、ハンドメイドティアラ

・お知らせ（Diary）はTOPページの下部の方に配置→重要度は低め？

・TOPページにはお問い合わせフォームのボタンが画面右側に固定で配置

【メインビジュアル】

・左側にハンバーガーメニューとロゴのヘッダーが固定で配置

・メニューの項目はTOPページの項目とメールフォーム、電話番号のボタン

・画像はフルスクリーンで配置

・レッスンをしている全体の様子やシューズを履いている様子、教室内の一部の様子などの5種類の画像がカルーセルで表示（間隔約5秒）

・スクロールを促すアイコンは中央下部に配置

【コンテンツ】

・基本シングルカラムレイアウト

・Diaryはグリッドレイアウト

・画像は横幅広がって配置、テキストやコンテンツは左右に余白を維持して配置

・各コンテンツの見出しに背景画像が配置

・レッスンの様子の画像が多く配置→どのような教室か見れて安心できる、自分または子供がレッスンを習う様子が想像しやすくなる

・余白が多いことや、あしらいが少ないことで画像やテキストに注目しやすい、読みやすいデザインになる

・あしらいは主にクラス紹介のクラス名の部分の水彩→クラスごとに色が異なり、良いアクセントに

・ボタンのホバーは色が変わる、ロゴやナビゲーションのホバーは色が白っぽくなる

・アニメーションはTOPページの各コンテンツの表示のみで全体的にアニメーションや動きが少ない

・コンテンツは交互に配置

【文字組み】

・欧文はCambia Math（セリフ体）、和文はRo本明朝新がなPro M（明朝体）

・見出しは26、27px、本文は14px

・行間は1.8〜2

・本文の字間はあまり広くない（0.02em）、見出しの字間は少し広め（0.15em)

・強調している部分はTOPページの各コンテンツの中見出しとAboutの中見出しのテキスト

・ジャンプ率は低めで上品で落ち着きがある印象に

【カラー】

・ベースカラーは白（#ffffff）と薄いクリーム色（#fdfdf5）

・メインカラーは少し彩度が低いピンク（#eb7971）と少し薄い黒（#4d4d4d）で柔らかい印象に

・全体的に彩度が低く、柔らかいパステルカラーで統一→優しい、上品な印象に

【レスポンシブ】

・ハンバーガーメニューとロゴの固定は左側から上部に配置（ハンバーガーメニューのオープン状態は変わらず左側配置）

・MVの画像がPCと異なる

・Aboutの講師紹介のプロフィールはボタンで開閉できるように→省略部分

・クラス紹介とスケジュールは一覧表からスライド表示へ変化

【サイトを通じてどのように目的を達成するか】

目的：バレエ教室の詳細を認知してもらい、体験・入会をしてもらう

●目的達成の動線

・まずMVでレッスンやスタジオ内の様子を画像で見せ、雰囲気を感じ取ってもらう

・次に教室のコンセプトや思い、しっかりとした経歴のある講師がいることを伝え、安心してもらう

・クラスやレッスン内容、スケジュール、料金などの詳しい情報を見せ、検討してもらうようにする

・駅から3分というアクセスのしやすさ、明るいスタジオ内で安心感がある

・スタジオ内の画像を多く載せることで自分や子供がレッスンを受ける様子を想像してもらう

・教室のコンセプト、落ち着きのある上品なwebデザインでスタジオの雰囲気を感じ取ってもらい、通いたい、子供を通わせたいと思わせる