閉じる

BUTTERFLY(バタフライ)
サイトリニューアル

CLIENT
株式会社タマス様
CATEGORY
Webサイトの企画立案 / クリエイティブ制作 / サイト構築(HTML・CMS)
URL

OUTLINE

卓球ブランド「BUTTERFLY(バタフライ)」を
もっと愛されるブランドに。

株式会社タマス様は、BUTTERFLY(バタフライ)の名で知られている卓球用具メーカー。今回のコーポレートサイトのリニューアルでは、商品ディテール部分も美しく伝え、ユーザーがBUTTERFLY(バタフライ)のことを深く知ったり、用具を比較検討するためのツールとして利用できるサイトを構築しました。

MISSION

卓球人気の高まりを背景に
より具体的な用具選定の参考サイトへ。

2012年にTAMにてリニューアルしたコーポレートサイトを、2016年12月に再度刷新。前回のリニューアル時はメディアで卓球が取り上げられる機会が増えていた頃であり、コーポレートサイトの役割をこれまでの「卓球全般の情報発信をするサイト」から「マーケティングツール」へシフトしていました。そして今回のリニューアルでは卓球人気のさらなる高まりを背景に、「マーケティングツール」としての役割を強化。卓球用品を魅力的に伝え、用具選定の参考になるサイトとして再構成を行うことになりました。

従来の卓球イメージからの脱却と美しさの追求。

これまでの卓球のイメージは、どちらかと言えば地味、マイナーといったものでした。そんな中でもBUTTERFLY(バタフライ)は圧倒的な技術力と品質を持ち、世界中のトップ選手に使用されるなど、トップブランドとしての地位を確立。2014年にブランドロゴ、2015年にラバーパッケージを一新して、さらにそのブランドステータスを高めてきました。
今回のサイトリニューアルでは、ベンチマークとして品格とプレミアム感を持ち、ものづくりをしているブランド、メーカーを設定。圧倒的な品格や高品質さを打ち出すために、サイト全体でウェブフォントと高解像画像/ベクター画像の採用を行い、どのデバイスでも統一されたデザインをユーザーへ届けれるようにしています。

スマホ中心のコンテンツと画面&導線を設計。

リニューアル前はスマホのセッション数がPCを上回るという状況。そこで今回のリニューアルではスマホを中心とした改善案をご提案しました。
実制作にあたっては、ワイヤーフレームはSP版のみ作成。すべてのワイヤーフレームをプロトタイピングツールで確認できる状態にしました。そうすることで、文字の読みやすさやレイアウト、動きのイメージ、導線といった重要な要素の確認を実際のスマホ画面で行え、プロジェクトに関わるメンバーが同じ認識で制作を進めることができました。
また、コンテンツでは読み物に加えて製品比較機能も充実したものに。多くの卓球用品の中から、製品同士の比較をする機能でありながら、本番サイトではデータベースを持たない環境としているので、フロント側で比較を行えるように工夫をしている点もポイントです。

こちらのサービスを利用しております。 Prott(株式会社グッドパッチ) https://prottapp.com/ja/

タマス様で運用更新がしやすい環境と
管理画面を構築。

リニューアル前はMovable Typeですべてのコンテンツを管理。さらに、Movable Typeを本番サーバーで運用していることにも課題がありました。そこで今回のリニューアルでは「Movable Typeクラウド」を導入して、CMS環境と公開環境を分離。アクセス状況によらず管理画面で作業ができるほか、公開前に事前確認を行うことができるようになりました。
さらにバナーの表示順を変更するだけでも、一手間かかる運用をしていたため、運用の方法を一新。管理画面のカスタマイズをご提案しました。カスタムフィールドを150個ほど必要とするブログは、カスタムフィールドのグループ化と管理画面のCSS調整、カテゴリによる出し分けをし、必要な登録情報だけを入力できるように工夫しています。

RESULT

モバイルユーザーの回遊率と更新スピードがアップ。

スマホサイト中心の設計としたことで、タマス様からはモバイルユーザーの回遊率がアップしたとの声を頂戴しています。また、シーズンごとに個別で新製品ページを作成していましたが、コーポレートサイト内、タマス様自身で打ち出しを行えるように。キャンペーンなど他に必要なページを準備できるようになるなど、更新スピードのアップにも高い評価をいただいています。

TOP