ECサイト / UI/UX
株式会社佐田
音楽Webメディア制作
合同会社PeerQuest様運営の「Piano Quest（ピアノクエスト）」Webメディアの制作を担当させていただきました。
概要
ご要望
- 幅広い年代のピアノ愛好家をターゲットにした音楽メディア「Piano Quest」を立ち上げ
- 単にピアノや音楽に関する情報を伝えるだけでなく、音楽好きにとって”面白くて楽しい”と感じられるWebメディアにすることをご希望
解決方針
- 直感的で親しみやすいレイアウト ターゲット層が多岐にわたるため、デザイン面では年代や音楽の経験に関係なく、直感的で親しみやすいレイアウトを心がけました。
- 独り歩きしすぎない情報主体のデザイン“面白く楽しい”雰囲気を重視しつつも、Webメディアの核である記事内容が見やすく読みやすい状態を意識しながら制作を行いました。
🎨 居心地の良く、カジュアルに感じるトーンを選定
幅広い年代のピアノ愛好家に響くよう、モダンでありながらも温かみのあるカジュアルな雰囲気を目指しました。ピアノという楽器のクラシックなイメージを尊重しつつ、モダンでカジュアルなデザインを融合させることで、老若男女問わず、音楽に親しみを持つすべてのユーザーが居心地よく感じるデザインに仕上げました。
🎹 ピアノをモチーフとして「楽しさ」を創出
UIデザインの面では、音楽好きが親しみやすく感じるよう、視覚的に楽しい要素をバランス良く取り入れています。メニューバーやフッターにはピアノの鍵盤をモチーフにし、どこを見ても「ピアノ」を感じられるデザインにしました。
記事サムネイルのホバーアニメーションでは、楽譜をめくっているような動きが見えるようにし、ユーザーが自然に次のコンテンツに誘導される工夫を施しました。
継続して必要な記事サムネイルはテンプレートを用意し、納品後もクライアント様で統一感を持ち続けられるよう工夫しています。
⚙️ 実装
実装面では、ノーコードツール「STUDIO」を活用し、クライアント様が納品後も柔軟にコンテンツの更新や調整が行えるようにしました。特に、CMS（コンテンツ管理システム）の利便性を最大限に活用することで、コードの知識がなくても簡単に記事やメディア全体の管理ができる構造を構築。これにより、常に最新の情報を発信できる柔軟性を保ちながら、使いやすさも実現しています。
完成ページ
