『ギター・マガジン』をはじめ、楽器に特化した出版社として約40年の歴史を持つリットーミュージックは、「出版物の売上」に貢献するサイトとしてコーポレートサイトのリニューアルに着手。Movable Type の上位版 Movable Type Advanced を以前から導入済みであったため、そのまま利用し、より更新性やメンテナンス性を高めるカスタマイズが施されている。このリニューアルの詳細について同社に話を伺った。
出版物のブランディングと出版物の売上につなげる仕組みを
リットーミュージックのコーポレートサイトは、前回のリニューアルから約7年が経過していた。同社 出版営業局 オンライン販売部 兼 デジタルマーケティング室 マーケティング・ディレクターの渡邊光一さんは、「デザイン面の刷新と、スマホ最適化に着手したかった」とリニューアルの狙いを述べる。
「これまで、自社コンテンツをドメイン内のさまざまな場所で発信してきましたが、出版社のコーポレートサイトということで、自社コンテンツを集約する機能を持たせたいと考えました。また、リニューアル前は、出版物の中のインタビュー記事の抜粋や、Webオリジナルのコンテンツ、あるいは、楽器のECモールに誘導するようなコンテンツが混在し整理されていなかったので、新コーポレートサイトでは、出版売上に結びつけるコンテンツを発信しようと考えました」(渡邊さん)
渡邊さんによると、これまでWeb上で出版物のコンテンツの一部が無料で読めるということはやってきたものの、それが出版物の販売につながるかどうか、効果検証ができていなかったという。
そこで、『ギター・マガジン』『ベース・マガジン』といった雑誌や出版物のブランドを整理し、コーポレートサイトに販売につながる役割を持たせたかったのだそうだ。
「これまでは、出版社目線で、ムック、楽譜、書籍というような流通上の商品形態区分でカテゴリーが分けられていました。リニューアルにあたって、楽器を演奏したい読者さんの視点でカテゴリーを分け、情報を整理したかったのです」(渡邊さん)
管理画面のカスタマイズで運用性が向上。関連商品のレコメンドも簡単に
サイト基盤のCMSは、かねてより Movable Type(MT)の上位版「Movable Type Advanced」が採用されていた。リニューアルはこれをベースに行われることとなり、構築を担当する制作会社は、グループ会社からの紹介を得て、MTを用いたサイト構築実績が豊富な株式会社イングスが選ばれた。
「イングスさんとは2016年10月に最初の顔合わせを行い、その後、要件定義に時間をかけました。実際にサイト構築が始まったのは2017年に入ってからです」(渡邊さん)
要件定義では、上述したカテゴリーの整理、コンテンツの精査とスマホ最適化の設計という3つの要件を入れ込むことが主な作業だ。また、リニューアル後のメンテナンス性を考慮して、MTの管理画面のインターフェース改修にも注力した。
「発売日、著者など、1つの商品(出版物)に関する入力項目が多く、リニューアル前のサイトは、カスタムフィールドを多用した管理画面になっていました。しかし、カスタムフィールドが多いと再構築に時間がかかることもあり、運用パフォーマンスを考慮して、入力フィールドの整理、再設計をしました」(イングス丸永さん)
多用されているものと、そうでないものを整理し、なるべく運用しやすい管理画面を構築していった。一方、フロント側のデザインは、「商品の実物をイメージしやすい、シンプルさを重視した」と述べるのは、リットーミュージック コンテンツ・サービス部 ディレクターの余川寛樹さんだ。
「記事ページを訪問した方には、関連する商品をレコメンドし、商品ページを読んでもらうよう、出版売上につながる導線をしっかりと設計しました」(余川さん)
このレコメンド機能は、MTの管理画面をjQueryを用いてカスタマイズしやすくするプラグイン「MTAppjQuery」を用いてイングスが実装した。管理者は記事ページの作成時に、関連する書籍の著者が自動的に表示され、シリーズものの出版物はプルダウンから選択することができる。
こうした改修のベースともなるデータのフォーマット整理などは、MTプラグイン等のバックエンド開発で豊富な実績を持つエムロジックが担当した。「エムロジックさんには、打ち合わせの段階から入っていただき、必要なプラグインの要件や、データのフォーマットや変換ルールを決めていきました」とイングスの岩田さんは述べる。
こうして実現した機能が、音楽試聴のインターフェースだ。Flash で実装されていたプレイヤーを JavaScript で新たに実装、「今後の試聴プレーヤーの仕様が変わる可能性も考慮しながら」リニューアル後のUIで表示する形で独自開発し、モバイルにも対応した。合わせて、運用時の負担が大きかった管理画面のインターフェースも直感的なものに改善している。
ネイティブアプリライクなスマホサイトへのこだわり
スマートフォン最適化については、レスポンシブデザインではなく、テンプレートを分離して出し分ける形で実現している。「デスクトップサイトをレスポンシブ化するのではなく、モバイル向けに余計な機能を削ぎ落としたほうがいいと考えた」のがその理由だ。
「スマホサイトについては、イングスさんに無理を聞いてもらい、TOPページのファーストビューに表示される要素をデスクトップサイトと変え、よく使われるメニューを集約してページ下部に表示するなど、ネイティブアプリのようなUIにこだわっています。そういう作り方には、レスポンシブよりもテンプレートを変えた方がよいと判断しました」(渡邊さん)
UIにこだわり、レスポンシブデザインではなく、
あえて別テンプレートで出力しているスマートフォンサイト
リニューアルしたコーポレートサイトは、2017年6月に公開された。
Amazonでの書籍売り上げは2倍、アフィリエイトも1.2倍に増加
リニューアル後に、最も効果を実感した点は「出版物の売上向上」だ。特に、雑誌の記事を抜粋してWebに掲載したときは、そうでない日に比べ「Amazonでの書籍の売り上げが倍近く伸びる」とのことだ。
「リアル書店が減り、ネット上には情報が氾濫しており、雑誌や出版物の発売情報に対するタッチポイントが減ってきているように感じます。サイトに『発売します』と告知しただけでは、なかなかお客様には届かないのですが、コーポレートサイトから商品と連動した記事を発信できるおかげで、発売から少し時間が経ってもお客様に購入していただけるようになりました」(渡邊さん)
また、余川さんは、「商品ページの滞在時間そのものは減っており、商品ページを読んだ方が購入ボタンを見つけて遷移しているのではないか」と購入の動線がうまく整備された点を挙げる。サイト経由の売上増という点では、Amazonアフィリエイトの月間売上も、リニューアル前と比べて1.2倍ほどに増えたということだ。
一方、メンテナンス性などの定性効果については、CRMやアセットDBとのデータ連携により、更新や運用がしやすくなった点が挙げられた。
「グループで導入しているCRM(Salesforce)でカタログ商品管理機能があり、コーポレートサイトはデータ連携をしています。Salesforce側でカタログデータを更新すると、コーポレートサイトのMT側にもその結果が反映されます」(余川さん)
また、表紙画像などのアセット管理も、MT側ではなく、専用のコンテンツ管理サーバーで管理している。「MTには管理IDを入力することで、API経由で画像が呼び出され、テンプレートに反映される」仕組みで、これにより、メンテナンス性を高めている。
出版物の売上だけでなく、ECモールとの連携強化も視野に
今後の展望について、渡邊さんは「書籍販売のサポートとなる役割を今後も強化していく」と語り、出版売上につながるコンテンツを引き続き発信していくと述べた。
また、問い合わせフォームの改修など、使いやすくするための機能改修を継続的に行いつつ、記事の回遊性をさらに高めるため、レコメンドウィジェット型のネイティブ広告などにも取り組んでいきたいとのことだ。
「他にも、拡張できる機能は柔軟に拡張していきたいと考えています。たとえば、パッケージされた書籍ではなく、楽曲単位での楽譜を電子販売しているのですが、こうした電子楽譜の購買導線を組み込んでいくことも検討したいです」(渡邊さん)
楽器専門のECモール「デジマート」との連携を強化していくことも大きなテーマとなる。「コーポレートサイトのリニューアルにより情報が整理され、ECモールとの連携強化のための素地が整いました。演奏ノウハウを知りたい方と楽器を欲しい方はカスタマージャーニーが違うので、しっかりインサイトを掴んでいきたい」と抱負を述べる。
今回のリニューアルを担当したイングス、エムロジックに対しては、「難しい要望も聞いてくれて、信頼感のあるコーポレートサイトにリニューアルしていただいた」と謝意を述べる渡邊さん。余川さんも「リニューアル後も保守でご対応をいただいている。これまで通り、スピーディな対応をお願いしたい」と要望を語る。
今後も、訪問者が情報を得やすく、かつ幅広くECモールの売上向上に貢献するコーポレートサイトに成長していくため、MTやイングス、エムロジックに求められる役割はますます大きくなっていくに違いない。
写真左から、イングス 丸永英男さん、橋本真人さん、
リットーミュージック 渡邊光一さん、余川寛樹さん、
イングス 岩田亮二さん、エムロジック 田島誠さん
事例データ
- サイトURL: https://www.rittor-music.co.jp/
- 使用した製品: Movable Type Advanced
- 制作を担当したのは: 株式会社イングス、エムロジック株式会社
- リニューアルサイトのオープン: 2017年6月
- リニューアルサイトの目的: スマホ最適化をはじめ、デザイン面の刷新と、各出版物のブランディング強化、および出版物の売上向上
- どのような手ごたえがありましたか?: サイトに情報を掲載した商品の1日のAmazon売上はリニューアル前の2倍以上、サイト経由のAmazonアフィリエイトの売上もリニューアル前の1.2倍に増え、購入までの導線がうまく整備された