Webサービス|ヤマハミュージックメンバーズ
音楽を楽しむすべての年代へ
会員制サービスサイトリニューアル
音楽を楽しむ人々やヤマハ製品をご愛用のお客さまに向けて、充実した音楽ライフのためのさまざまな情報をお届けするヤマハミュージックジャパンの会員制サービスサイト。リニューアル前の課題となっていたブランドの世界観との不一致を、デザインレギュレーションを設計することで叶えました。ヤマハブランドの世界観を表現しながらも、UI/UX設計とシンプルなレイアウトにより、年代を問わず快適にご利用いただけるWebサービスを実現しました。
プロジェクト期間とスコープ
サイト内の世界観がブレないよう、まずはブランドの本質理解から。
制作期間はおよそ3ヶ月。情報設計・UI/UX設計から、デザイン、コーディング、CMS構築まで携わったリニューアルプロジェクトでした。ヤマハのアイデンティティを随所に感じさせるサイト全体のトーンと、どの年代にも隔たりのないニュートラルなレイアウトデザインが特徴です。老若男女問わず音楽を愛してやまない人へ向け、幅広い層をターゲットにしています。誰にとっても使いやすいデザインを目指しました。
戦略
クリエイティブガイドラインを元に、
世界観の再現性を叶える設計。
リニューアル前のサイトでは、各部門が制作した画像や記事を掲載することにより、デザインのトーンがバラバラになってしまうという課題がありました。また先方からは、「ヤマハのクリエイティブガイドラインを適用したデザインにしたい」という強いご要望がありました。
プロジェクト進行中には、ヤマハのクリエイティブガイドラインの世界観を再現することを目的としながらも、ビジュアルやグラフィックに力を入れ、世界観を表現するために写真やイラスト制作にも注力しました。また、デザインフォーマットの作成にも取り組み、サイトに統一感を持たせました。ブランドの世界観を表現するだけではなく、長期的な維持性も考慮した設計を行いました。
デザイン
音楽を愛するすべての年代へ届けたいヤマハのアイデンティティ
今回のデザインでは新しいトーンは求められていませんでしたが、ブラッシュアップできる部分を見つけてクライアント様のご要望を叶えることもクーシーの大事な強みです。ブランドブックの世界観を再現しながらも、どなたでも使いやすくスムーズに受け入れられるサービスサイトを目指しました。
ヤマハのクリエイティブガイドラインには、大きな写真やグラフィックがレイアウトされ、タイポグラフィやカラーパレットに特徴的な要素がありました。その世界観を踏襲しつつ、クーシー内でグラフィックを制作しました。クリエイティブガイドライン内のグラフィックと組み合わせながら、キーとなるイラストを制作しました。
画像の面積を多く取ったレイアウトや長体のタイポグラフィ、ブランドブックの要素を持ったグラフィックを随所に取り入れることで、ヤマハブランドの世界観を表現しました。また、サイト内の装飾を減らし、レイアウトをシンプルにすることによって、どの年齢層でも違和感なく使いやすいニュートラルなサイトを作ることができました。
まとめ
レギュレーションにより、
崩れないレイアウト設計を維持
サイトのリニューアル後、レイアウト設計が揺らぐことを避けるために、当初のデザイン目標を再現できるデザインレギュレーションを設計しました。このレギュレーションには、デザインのルールや全体的なサイト設計が含まれており、ページタイトルや見出し、ボタンなどがテンプレート化されています。各部門のコンテンツを新たに追加したとしても、レイアウトが大きく崩れることはありません。このように、デザインレギュレーションの設計により、サイトのレイアウト設計が維持され、サイトのコンテンツが増えても統一感が保たれるのです。
Webサービスの制作実績
-
晴海フラッグの魅力を伝えるオウンドメディア「ハルフラ」
東京晴海のオリンピック選手村跡地に誕生した晴海フラッグ。このたび、都市開発で新しい街となって生まれ変わりました。そんな晴海フラッグの魅力を伝えるオウンドメディア「フルフラ」の制作を担当させて頂きました。
記事を読む
-
サイトデザインを一新。クラウド録画サービスの未来を伝える。
セーフィー株式会社のサービスサイトリニューアルを担当させて頂きました。同社のクラウド録画サービスを分かりやすく伝えること。テック感を出しつつも、優しさや親しみやすさが感じられるようなサイト設計を目指し、デザインを行っています。
記事を読む
-
2つのサービスを1つのサイトで
サービスサイトリニューアル社労士向けの「KiteRa Pro」と企業向けの「KiteRa Biz」。ターゲットが違う2つのサービスを統一された世界観で紹介できるように、規程業務効率化サービス「KiteRa」のサービスサイトリニューアルを行いました。
記事を読む
Webサイトやアプリの
お問い合わせ
Webサイトのご相談・お見積りは
こちらから。
お問い合わせする