URL https://miki-portfolio.net/ikoi_musicschool_cafe/
【ベーシック認証】
ユーザーID：works
パスワード：works
ターゲット
趣味を探している大人の方、楽器初心者の方
制作の目的
Webデザインスクールの卒業制作として、自身で企画・制作したサイトです。
私は音楽が好きで、コロナ禍に楽器を始めようとしたことがありますが、独学で挫折してしまったり、一人でモチベーションが続かなかったりした経験がありました。
特に大人の方で、楽器を始めたいけどハードルが高い、今からだと遅いのではないか、などと思っている方に寄り添えるような、そして音楽をきっかけに新たな交流が生み出せるようなお店があったらと思い、企画しました。
コンセプト
自分のペースで好きなように音楽を楽しめて、ほっと一息できる場所
制作期間
3ヶ月（＋修正1ヶ月）
こだわったところ
トップページで、まずどんなお店か知ってもらうような案内・デザインを目指しました。
音楽教室とカフェそれぞれの機能を持ちつつ、さらに音楽とカフェを融合した「カフェ店内演奏会」を実施しているという、このお店の特徴を簡潔に案内しています。
トップページ途中にMusic School・Cafeページへのリンクボタンはあえて入れないことで、最後までスクロールしてもらうことを優先しました。
また、店内画像を固定しパララックスを2か所入れることで奥行きを出し、店内の雰囲気が伝わるよう工夫をしました。
重要な情報である音楽教室の料金は、tableタグを使用し金額を比較しやすいようにしました。
お問い合わせは、音楽教室の無料体験レッスンと、その他のお問い合わせの入力がしやすくなるように、「お問い合わせ種別」の「無料体験レッスンに申し込む」「その他」のラジオボタンを、JavaScriptでそれ以降の入力欄の表示・非表示を切り替えられるようにしました。
配色：人々が集まる憩いの場をイメージし、優しいベージュをベースカラーとし、その他ボタンも同色系の茶色にすることで、落ち着いた雰囲気が出るようにしました。
音楽教室のページは楽しいイメージでオレンジをアクセントカラーとし、カフェのページは落ち着くイメージで緑をアクセントカラーとしました。2色とも柔らかい色味にすることで、ページ全体に統一感が出るようにしました。
フォント：ターゲットが大人の方・楽器初心者の方のため、落ち着いた、柔らかいイメージで、本文にZen Kaku Gothic New（Google Fonts）を使用しました。
見出しは読みやすさを意識し、IBM Plex Sans JP（Google Fonts）を使用しました。
ロゴは、音楽教室とカフェの要素を入れるため、音符の符頭がコーヒー豆になったマークをデザインしました。
使用ツール
コーディング：Dreamweaver/VS Code
画像加工：Photoshop
ロゴ制作：Illustrator