はじめてのECサイトリニューアル＆shopifyカート移行 〜未経験から学んだこと〜
こんにちは。Hamee本店サイトを担当している平山と申します。
Hameeには新卒として入社し、はじめの3年はUI/UXデザイナーとしてキャリアを積み、現在はコマース事業領域のWEBマーケティング部門で、本店ECサイトの運営担当者として従事しています。
今回は、社内で10年近く課題としてささやかれていた自社ECサイトのカート移行を、未経験なりにどう進めたのかを話していきたいと思います。
はじめに
Hamee本店サイトは今年で15周年という節目を迎え、2021年4月頃に初のカート移行を伴うリニューアルを行いました。
これまでも、サイトのリニューアルは何度か行われてきた当サイトですが、カート移行を伴うリニューアルは、今回がはじめてのことでした。
私はHamee入社後、主にECサイト周りのLPやバナー作成をメインに、Hameeで運営しているオウンドメディア「hameefun」やブランドサイト「iFace日本公式サイト」などのサイト設計などUI/UXデザインなどを担当していました。
その中でも、「Hamee本店」サイトの改修周りは、メイン担当として制作サイドから3年近くサポートしていました。はじめにサイト構造に携わった時は、システムの仕様や連携状況を把握するのに、手こずっていたのを覚えています。そのおかげでサイトの内部構造の仕様はある程度理解が進んだのですが……。
しかし、あくまでWEBサイト構造上のお話で、ECサイトは、コーポレートサイトやブログサイトのようなWEBサイトとは配慮するべき機能や仕様が異なります。そのため、EC運営において必要な受注や在庫連携などのバックエンド業務はほとんど理解が足りていませんでした。
当時の課題感としては、ECサイトを良くしていくためには、デザインだけでなく、アクセス分析や集客/マーケティングなどの知識はもちろん、運用/保守面からも業務改善を図り、アップデートしていく必要があると考えていました。
その折、ちょうどWEBのマーケティング部門に異動する機会もあり、自らがHamee本店サイトの運営担当として一歩踏み込むことによって全体感の理解も進むし、一貫して分析と改善活動を進めてみたいという思いがありました。この転機もふまえ、長年社内でも検討されていたカート移行を推進していくことになります。
▲2006年モバイル周辺アクセサリーのEC販売「ストラップヤ本店」から
現「Hamee本店」までのサイト変遷
リニューアルの背景は？
サイトのカート移行に踏み切ることに決めた大まかな理由は3つです。
1．カートシステムの老朽化（保守面での課題）
2．販促機能面の不足（プロモーション/マーケティング面での課題）
3．仕様が煩雑化（運用面での課題）
内政的な事情もありましたが、今後もユーザーに対しサービスの向上を続け顧客の体験価値を高めていくために、これらの課題を改善し地盤を整えていくことがなにより必要だと感じていました。
先任の担当者の間でも度々カート移行も兼ねたリニューアルの構想は挙がっておりましたが、システムの移行ともなると、
・SEOの構造や評価は引き継げるのか
・商品/顧客データは移せるか
・機能拡張による細かい仕様は引き継げるのか
・必要な販促機能面は網羅されているか
・Hameeの多店舗展開上必要なネクストエンジンの受注在庫周りの連携
はどうか、など機能面の問題。
インフラ面、カスタマーサポート、商品ページ制作のフローの見直し、経理周りや法務関連の確認、長年積立ててきた運用面での確認など、配慮するべき点がたくさんあり、他にも移行にかける費用やリソースの確保といった問題もあります。これらの条件が揃わず、移行の話は何度も浮上しては、事業部での体制や担当者の変遷もあり、実現できずにいました。
私は本店に携わる期間が長かったこともあり、本店店舗への理解がある程度備わりつつあったため、リニューアル実現に向けて動き出すことができました。
進める前に体制構築、リニューアルのためのリサーチ活動
リニューアルを推進していく前に、まずは体制の構築とリニューアル手順の理解が必要でした。
現行のECサイトの売上をあげつつ、担当としてリニューアルを推進するためには定常業務の他に、どうにかして手をあける必要があったため、リソース確保のためHameeのEC運営部門では初となるBPOを推進し、業務をサポートしていただきました。こちらは上長や各運用に関わるメンバーに諸所多くを調整いただきました。
ちょうど、この期間に体制を整えつつ、並行してカートの仕様調査を行ったり、リニューアルのセミナーなどに赴き必要な手順を固め、約1年ほどかけて、リニューアルのプロジェクトを進めるための事前準備を行いました。
下準備期間を得て、ようやくリニューアルプロジェクトスタート
ECサイトリニューアルで行った大まかな流れは下記です。
1．企画書を作る（目的や予算、スケジュールなど）
2．関係各所にお伺いしリニューアル体制をつくる（プロジェクトチームなど）
3．要件定義（要件を整理し、RFP/WBSなど）
4．制作会社を決める（各社比較しな がら相見積をとり選定）
5．設計〜制作（デザイン設計やシステム要件定義、移管データの準備や作り込み）
6．運用準備（切り替え時の確認、新サイトの運用フローの確認、顧客案内の準備など）
7．リリース＆その後の運用調整
【企画整理】目的の明確化を行い企画書をつくる
目的を明確化するために、今後の事業戦略にも合わせ、顧客の体験価値を向上させていくための、サイトの在り方や方針を、上長とも議論を交わしながら企画構想を固めていきました。
また、ECサイトとして販促を強化するために、売上をあげるための基本法則である集客×客単価×CVRと、リピート率などのKPIを並べ、目標値としての数値を策定しました。そこに向けて、集客をあげるためには、SEO設計が足りない、広告運用が不十分など、そこに紐づく細かやかな課題を抽出しました。
【企画整理】現状分析と課題整理
目的が定まってきたら、それを解決していくために必要な要件を整理しました。まずは現状のECサイトの機能をリスト化した上で、足りない機能などを付け足し、必須項目と要望内容に振り分けながら、要件を整理していきました。
ASPカートでいくのか、オープンソース、パッケージカートでいくのかも迷うところですが、その中でも様々な種類のカートシステムが存在します。カートの仕様は各システムでカートの標準機能表などがあるので、それをベースに他社カートを比較しながら、エクセル表などで実現したい要件内容を見比べ、条件に見合うカートを選定しました。
今回の選定基準としては、大きく2つ
・他モールでの多店舗展開上、受注在庫面でネクストエンジンが連携対応しているか
・細かい仕様に対応できる拡張性があるか
上記を肝としていたため、ある程度目星を付けていたカートシステムの中でも、最終的には受注/在庫/出荷の自動連携が揃っており、API連携や連携アプリが豊富で拡張性も高いShopify Plusカートに決めました。
▲shopify × ネクストエンジン 自動連携アプリの詳細はこちら
【企画整理】リニューアルのプロジェクトづくり
リニューアルを推進していく上で、社内で必要な部署やメンバーへの相談は不可欠です。ECサイトリニューアルは、普段EC運営で携わっている運営担当者やバックエンドのカスタマーサポートメンバーだけでなく、サイトデザインをするメンバー、社内システムを連携していくうえでの開発担当、インフラ担当、経理や法務監査といった会社全体に関わってくるものも多いです。また別に外部の開発会社との連携も必要になってきます。
コンテンツの作り込みやデータ整理、移行進行における議論や調整など、店舗運営業務を並行しながら進める場合には、進行担当とは別に、サポートしてくれるメンバーも必要でした。
【企画整理】要件定義
サイトリニューアルの手引きを見ると大体「要件定義」が重要といったことが繰り返し書かれている事が多いのですが、振り返ってみるとリニューアルにおいては、やはりここが重要なポイントだったなと思い返します。洗い出しや要件を詰めたつもりでも、後々ここが決まってない、ここはどうする？といった箇所が何度も浮上しました。
◇機能要件の整理
ECサイトを構築する上で、必須な機能というものがありますが、これは0→1ベースで組み上げていくと大変です。
有名なカートシステムであれば、ある程度これらの必須機能要件の一覧があるので、そこをベースに足りないもの、必要ないものを選定していくのがよいかと思います。
◇RFPの作成
RFPは提案依頼書とも呼ばれておりますが、システムの目的や概要、要件や依頼範囲、制約条件などをまとめたものです。実際に制作会社に依頼するときには、こちらのRFPなどの要件に沿って、対応是非を検討いただきます。
リニューアルの「背景」「目的」「課題と解決策」「実現したいこと」「スケジュール」「制作予算」「体制と役割範囲」「依頼対象範囲」「ウェブサイトの全体要件」「機能要件」「デザイン要件」「データの移行要件」「インフラ要件」「アプリケーションの運用保守要件」など、サイト設計において必要な要件を整理します。
これはECサイトリニューアルの全体像を記載した内容になるため、社内での共通認識のすり合わせとしても役立ちます。
◇WBSの作成
次にプロジェクト全体の作業を把握するために、RFPの内容を具体的にタスク化して、遂行順序を整理するためにWBSを細かく設定しました。
ある程度サイトのデザイン設計期間やシステム構築期間をおおよそ見積もっていたとしても、制作会社と要件を詰めていくと、内容が変わってきたり、想定より時間がかかる機能などがでてくるので、ある程度バッファをもたせることも必要だと感じました。
WBSでの整理により自分や各メンバーが行う作業がどれくらいあり、細かいタスクに抜け漏れが起こりにくくなるので、プロジェクトの指針、品質を保つには必要なフレームワークだと改めて感じました。
【設計/デザイン】制作会社選定
RFPなどがまとまり、カートシステムなどの要件もある程度絞り込んだら、開発会社のリサーチを行いました。
WEBサイト制作では、コンペ形式で制作会社を選定することもあるそうですが、今回は行わず、RFPを元にした打ち合わせと対応可否のヒアリングで、選定を行いました。
並行して案件を請け負っている会社も多く、要件対応可否のヒアリングは想定以上に時間がかかる場合もあり、きちんと各社と要件を詰めるには、1ヵ月くらいは余裕をもっておいた方がよいと思いました。
細かい仕様に対して、ヒアリングした結果、対応できないといったところも多い中で、うまく予算感と要件の対応可否にハマる会社を見つけることができたのは、本当に運が良かったと思います。
【設計/デザイン】サイトデザイン制作
デザイン制作においては、社内にデザインの部署があるため、内製で進行しました。
カートシステム類には、ある程度構造の一貫性を保つため、提供されているテンプレートなどが存在します。Shopifyに関しては商材やジャンルによってデザイン性が高いテーマがたくさん存在しています。Shopifyはこれらの優れたテーマをベースとして、拡張性が高いため自社サイトとしての特徴も取り入れることが可能でした。
優良テーマをベースにしながらも、設計意図をうまく読み取ってもらい、素材類の受け渡し工数もなく、即座にサイトデザインに落とし込みを行ってもらえるのはデザイナーがインハウスにいる強みです。
サイトデザインについては、細かい部分もデザイナーと意見を交わしやすく、修正が可能だったため、イメージの相違もなくスムーズに進行できました。
【設計/デザイン】機能要件定義
具体的な機能の要件について細かく詰め、どのように実装するかを決めるフェーズになります。こちらはシステムに詳しい制作会社サイドにて、要件をもとにシステムの機能仕様書を作成してもらうのですが、担当側である程度固めていた要件定義も、より専門的な制作会社と要件を見直すと、内容の粒度が細かくなり、要件の見直しが度々発生しました。
例えば、ソート・フィルター機能にしても、人気順や新着順などのソート項目に何を用意するのか、デフォルト値はどう設定するのか、商品カテゴリのフィルタリングに使う項目は、価格や種類などのようなものを出すのかなど、事前の要件のすり合わせをふまえ、連携アプリで実装するのか、テーマのデフォルト機能を使うのか、スクラッチで実装するのかなど、実装方法と必要仕様のすり合わせがありました。
特に、配送方法や決済部分など、既存システムで、特殊な仕様を幾年に積み重ね入れていたこともあり、それに対応する機能を実装するには、大変だったと思います。カートシステムの根幹となる注文フローなどの部分は、後世の運用も考え検討する必要があります。
【構築/データ移行作業】データ移行準備
ECサイトのリニューアルの場合、元々運用していたリニューアル前のECサイトから商品データや顧客データ、構造的に可能であればカテゴリのデータ、レビューデータなどを移行します。
ECサイトを構成しているデータは、だいたいはCSVなどによるファイル形式で一括登録機能などがあるため、まずは移行するカートシステムのデータ形式を調べました。登録する際のサンプルファイルなどが公開されていたりするので、既存システムのデータと見比べて対応可能な項目を整理します。もともと登録していたデータ類をきれいに整え、見直す機会にもなりました。
データ移行の前に、サイト設計段階で、カテゴリの階層構造やSEO対策に不可欠なメタ情報の見直し、不要な商品データやファイル類などの削除など、ある程度リスト化して整理しておく必要もあります。
【構築/データ移行作業】構築/コンテンツ制作
既存サイトのコンテンツデータはもちろん移行するのですが、作り込んでいたHTMLデータなどはスタイルを調整する必要もでてきたり、このタイミングで既存コンテンツの見直しが必要と感じていれば、そちらの作成なども必要になってきます。
旧サイトでは、古いページなどでメンテナンスが行き届いていないものも数多く残っていたので、リダイレクトで対応するページなどを一新したり、SEO対策に新規に作成したりもします。
カートシステムを移行する際には、既存の決済システムを見直すことも必要になってきます。決済代行会社によって、手数料などの利率は変わってくるので、システムを移行する際には提携している決済サービスがどれくらい変わるのか、注文件数や決済方法利用割合などを加味しながら費用の変動や同様の決済手段を残すのか否かなどを検討します。
【運用/公開準備】計測ツールやアフィリエイト設定
Google Analyticsなどの計測ツールはGoogle Tag Managerで設置する方法もありますが、Shopifyには基本設定でGoogle Analyticsのコードを設定する機能もありました。
ASPカートにおいては、アフィリエイトのトラッキングなどにも注意が必要です。カートシステムが提携しているアフィリエイトサービスなどであれば、注文完了時のCVのトラッキングが連携しているものもあると思いますが、Google Tag Managerなどを用いての動的なタグ設定が必要となるものもあります。こちらも制作会社と事前に要件の中に盛り込んでおく必要があります。
【運用/公開準備】メルマガ/メール設定
送信メールなども、システムを入れ替えた際には再設定が必要な場合がほとんどだと思います。注文メール、配送メールなど、旧サイトで送信していたメール類の洗い出しを行い、文面を用意しておくことも必要です。
メルマガなども、ツールが変わるようであれば、メール作成方法を把握しておくことや、送信リストなどを整理する必要があります。
【運用/公開準備】テスト/確認
移行した商品ページやカテゴリデータなどレイアウトは崩れていないか、顧客データは問題なく移行できているか、ネクストエンジンとの受注在庫連携は問題ないか、外部システムとの連携や決済のフローは問題ないかなど、要件リストと照らし合わせながら、チェックを行います。
【運用/公開準備】マニュアル作成
旧システムから新システムが変わる場合、運用のマニュアルなども作り直すことになりました。Shopifyの場合は基本的なシステムのマニュアルはShopify側でマニュアルもあり、基本的な操作方法や設定方法は事足ります。
旧サイトから引き継いでいる運用フローも多く、根本的に大きく変わる部分は少なかったため、運用のマニュアルも管理画面部分の操作説明などの修正などになりました。
【運用/公開準備】リリース
リリースの際には、移行時のフローを確認しておくことが必要です。システムが変わる場合、直近の受注処理などしばらくは旧システムも稼働させながら、新システムを運用していきます。
キャンセル処理や返金処理などのオペレーションの確認や、カートシステムのサーバーが変更になるのであれば、ドメインのDNS切り替えの確認など、当日のタイムスケジュールや、フローを準備しておきます。
【運用/公開準備】公開後の運用
リリース後の運用においては、移行後のオペレーション変更により、ページ制作やカスタマーサポート、経理処理など普段の運用で関わってくる部門などについては、慣れるまで負担をかける形になってしまいました。こちらは社内メンバーの対応に感謝するばかりです。
特に気にしていたのは、SEOへの影響ですが、長年の運用で拡充されていたURL類が大きく変更となるので、301リダイレクトをかけていたとしても移行後しばらくはそれなりに影響がありました。移行時のリダイレクト設定がうまくいっていても、検索順位には影響があるので、最短でも1~3カ月以上は様子を見ながら、長い目で調整していく必要があると思います。
そんな調整や不安も混じえながら、カートシステムの一新やUIなどの見直しにより、レビュー件数が5倍に増えたり、メルマガ会員が300%に増えたりと嬉しい兆しがありました。また、データ分析や連携サービス類が導入しやすくなり店舗改善の可能性が広がったりと、基盤が整えられ今後のサービス向上や売上拡大に向けて、一歩前進できたと感じています。
まとめ
今回は、カート移行を伴うECサイトのリニューアルにおいて、未経験なりに調査進行した中で必要と感じたことや注意点、全体的なフローを紹介いたしました。
細かい希望点など思うようにいかないこともありましたが、リニューアル後もサービス改善などは積み重ねていけるものなので、要件定義の時点でリニューアルで叶えたい重点ポイントを抑えることが大切だと思います。
実際に手をつけると、想定していたよりもはるかに細やかな調整と、移行に対して障壁となる問題が何度も浮上しては、関係各所に細やかな調整をしていただき、そのおかげで成し遂げることができました。
リニューアルしたことがゴールではなく、リニューアル後の運用改善を重ね、それがベースとして売上改善の相乗効果に紐づいてくると思いますので、引き続きユーザー視点に立ち、これからもECサイトの改善活動/サービス向上に努めていきたいと思います。
▲Hamee本店ではトレンドを意識した商品ラインナップは変わらず、
人気ブランド「iFace」などのスマホケースをはじめとした、保護フィルムや充電器、ストラップ、ワイヤレスイヤホンといったスマホアクセサリーを販売しております。
◆この記事を書いた人
PROFILE：平山 智也（ひらやま・ともや）
2015年にHameeに新卒入社。
UI/UXデザイナーとして3年間デザイン部門に所属し、主にEC店舗周りのデザイン業務を担当。その後WEBマーケティング部門に異動し、Hamee本店担当としてサイト改善他、自社メディアHameefunなどの運営を行う。クラフトビールにハマり小田原から都内のビアバーに足繁く通うも、自粛によりビールサブスクで我慢中。