microCMS

【ヤマハミュージックジャパン様】サイト更新のリードタイムが2週間→数日に。microCMSでブランドの特色を表現できるサイト運営を実現

microCMS編集部

楽器や音響機器の卸売や小売、音楽教室や会員サービスの運営などを広く手掛ける株式会社ヤマハミュージックジャパンでは、同社が取り扱っているブランドの情報サイトにmicroCMSを活用しています。

 

今回は、株式会社ヤマハミュージックジャパン管理部DX推進課の関口宏司さん、岡田美浦さん、ウェブ制作を担当する株式会社シナップのディレクター大川貴裕さんに、microCMSの導入経緯や利用状況などをお聞きしました。

導入の背景:取り扱いブランドごとの特色を伝えやすいサイトへリニューアル

microCMSの導入前にはどんな課題があったのでしょうか?

 

-関口さん

ヤマハミュージックジャパンでは、ヤマハの製品だけでなくヤマハ以外の国内外のブランドの製品も仕入・販売しています。従来のウェブサイトでは、画面左上にヤマハロゴがあり、その下に取り扱いブランドのロゴが表示される二重構造になっていたんです。当社で取り扱っているヤマハ以外のブランドの製品をヤマハ製品だと誤認される恐れがありましたし、ブランドの特色やイメージを適切に伝えられていませんでした。

 

当社はヤマハ株式会社の国内営業部門が分社化された会社で、ヤマハ以外のブランドを扱うグループ会社と統合したという経緯もあります。現在、製品情報を掲載するWebサイトについては、全世界のヤマハグループで共通のCMSを使っているため、デザインには様々な制約がありました。結果的にブランド誤認の起こりやすいサイト設計になっていて、改善が必要でした。

(従来のウェブサイト(左)では自社ロゴと取り扱いブランドのロゴが表示され、ブランド誤認の恐れがあった。現在(右)は改善されている)

 

-岡田さん

社内で既に利用されているCMSはヤマハグループ共通のものだけで、仕様や規模の面で取り扱いブランドの製品サイトで活用するには課題がありました。今回、先にお伝えしたデザインやブランド訴求の改善にあたって、各ブランドの担当者が自身で使いこなせるCMSを使い、事業規模に応じたサイトの構築をしたいと思いました。

microCMSを選んだ決め手はなんだったのでしょうか?

 

-岡田さん

リニューアルのプロジェクトが始まった頃にヘッドレスCMSに関する記事を見かけて、高速で運用しやすいサイトをつくれるのではないかと思って調べたんです。そこで見つけたのがmicroCMSでした。

 

microCMSは日本製で、ドキュメントやヘルプページなどが日本語で書かれていて読みやすいところが気に入りました。特にウェブサイトの更新作業をする担当者は日本人ですし、社内に新システムの導入申請をするときにも日本語の方が説明しやすいなと思ったんですよね。

 

-シナップ・大川さん

当社にウェブ制作のご相談をいただいた時点で、すでにmicroCMSを利用したサイトリニューアルをすることが前提になっていたのですが、要件定義の際にあらためてCMSの選定分析を実施したんです。サイトに掲載されている製品数がかなり多かったため、移行作業時に掛かるコストも慎重に検討しています。運用チームの想定人数や管理のしやすさといった要素も含めてフィット&ギャップ分析を行い、総合的な判断をして、microCMSを使うことに決めました。

活用の状況:ブランドイメージに合わせた個別のサイトデザインを実現

現在はmicroCMSをどのように利用されていますか?

 

-岡田さん

ヤマハミュージックジャパンの「取り扱いブランド」ページ内のコンテンツを管理しています。ブランドによっては独自ドメインのページが用意されている場合もあるのですが、多くの取り扱いブランドではmicroCMSで当社サイト内にページを作成しています。 

ページごとにデザインフォーマットを変更できるようにAPIスキーマが組まれているので、たとえば「バイカウント」のページはヘッダーも本文背景も白ですが、「クリングオン」のページでは黒背景に白文字で表示しています。

 

-関口さん

リニューアル以前はブランドごとの特色を伝えきれていませんでしたが、現在は柔軟なデザインが可能になり、適切なイメージを表現できるようになったと思います。

 

今後、新規に取り扱いブランドが増えたときはシナップさんにページを作成していただく予定ですが、普段の運用や更新作業は当社の担当者が作業しています。

 

-シナップ・大川さん

技術的には、フロントエンドはVercelでホスティングされていて、使用しているフレームワークはNext.jsです。ヤマハミュージックジャパンさんとしても新しいことにチャレンジしたい意向があり、このようなモダンな技術スタックを受け入れていただけました。


サイトリニューアル時のデータ移行作業について教えていただけますか?

 

-岡田さん

従来使用していたCMSとmicroCMSのデータの持ち方はまったく違っていたので、移行作業はかなり苦労しましたね。

 

-シナップ・大川さん

CSVファイルで吐き出されたデータを移行用に整形し、APIを利用して一括アップロードしました。リニューアルプロジェクトをしていた時期にはまだ画像アップロードのAPIがなかったので、画像に関しては工夫が必要でした(※現在はAPI経由で画像をアップロードできるようになりました)。

 

移行にあたっては、製品データを整えてAPIで製品情報ページの生成ができるようにしました。すべての取り扱い製品をmicroCMS上で検索可能になったので、コンテンツ管理の効率が大幅に向上しているはずです。

導入の効果:使いやすい管理画面で、サイト更新の効率も大幅アップ

導入してから、microCMSの良さは感じられましたか?

 

-関口さん

「ブランド誤認のリスク」と「ブランドごとの特色が出ない」という2つの課題はどちらも改善されました。ヤマハのブランドイメージよりも尖ったイメージを持つ取り扱いブランドも多いので、サイト閲覧時のギャップが特に懸念点だったのでそこが解消されたのは良かったですね。

 

-シナップ・大川さん

ブランドイメージと合致するウェブサイトを用意することは、ユーザー体験として重要なポイントです。ページの表示速度の向上などと合わせて、UXの改善に貢献できたのではないかと思っています。

-岡田さん

管理画面も使いやすい設計になり、運用しやすくなりました。サイトの更新は各取り扱いブランドのマーケティング担当者が行っています。リニューアルしたときに作業マニュアルを作成して配布し、研修を1回実施しただけですが、たまに問い合わせがあるくらいで運用のトラブルは起きていません。

 

microCMSの導入前は、社内で更新指示書を作成してから制作会社に作業を依頼していました。現在は担当者が自分でmicroCMSの管理画面に入ってサイトを修正し、レビュー機能を使って上司の承認を得て、すぐに公開しています。

 

以前はページを更新するのに2週間ほど時間が掛かっていましたが、いまでは1日〜数日で情報を更新できるようになっています。リードタイムの長さは課題としてはあまり顕在化していなかったのですが、その点も大きなメリットですね。

 

柔軟に拡張させて、さらに使いやすいウェブサイトを目指す

microCMSに期待していることはありますか?

 

-シナップ・大川さん

今回の移行作業でも大変なポイントでしたが、大量の商品データをまとめてインポートできるようなAPIが用意されているとありがたいですね。

 

-岡田さん

構成要素の多いページをプレビューするときの画面がわかりにくくて気になっています。プレビュー用サーバとのつなぎ方を工夫することで改善できそうだということなので、大川さんとも相談しながら検討してみたいですね。

microCMSの今後の活用計画はありますか?

 

-岡田さん

microCMS上の製品の情報をAPI経由で利用できるように整備したので、機会があれば他のサイトでもこの製品情報を活用していきたいですね。

 

-シナップ・大川さん

基本的な運用は問題なくできるようになったので、今後さらに取り扱いブランドが増えていってもスムーズにサイト構築できるかと思います。microCMSはAPIの追加や変更がしやすいので、運用するうちに不便なところが出てきたら、柔軟に変化させつつ、より使いやすいサイトにしていきたいです。

 

取材協力:エディット合同会社(ライター:藤井亮一 撮影:関口佳代)



まずは、無料で試してみましょう。

APIベースの日本製ヘッドレスCMS「microCMS」を使えば、 ものの数分でAPIの作成ができます。

microCMSを無料で始める

microCMSについてお問い合わせ

初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。

お問い合わせ

microCMS公式アカウント

microCMSは各公式アカウントで最新情報をお届けしています。
フォローよろしくお願いします。

  • X
  • Discord
  • github

ABOUT ME

microCMS編集部
microCMS関連情報や技術情報など役立つコンテンツをお届けします!
株式会社シナップ 認定パートナー
クライアントのビジネスの立ち上げ、サービスの継続的発展をサポートする。 成長をデザインするクリエイティブ・カンパニー。
https://microcms.io/partners/sinap
制作を依頼する