業務用を主力に長年事業を続けてきた老舗の食品メーカー様。コーポレートサイトとECサイトが別々の環境に取り残され、スマートフォンでは満足に見られない・買えない状態が続いていました。futureshopでのECサイトリニューアルとコーポレートサイトの刷新を同時に担当し、数百点規模の商品を統一フォーマットで並べ直したうえで、公開後はEC運営代行として伴走しました。
プロジェクト概要
| 項目 | 内容 |
|---|---|
| クライアント | 業務用を主力とする老舗の食品メーカー様 |
| 提供スコープ | ECサイト構築 / EC運営代行 |
| 使用技術・ツール | futureshop（テーマカスタマイズ・レスポンシブ対応）／WordPress（コーポレートサイト・多言語対応）／GA4／各種SNSアカウント開設支援 |
こんな方に読んでほしい記事です
- futureshopでのECサイト構築・リニューアルを検討しているが、どこまで作り込めるか判断できない
- 業務用が中心の食品メーカーで、これから一般消費者向けのECを育てていきたい
- コーポレートサイトとECサイトがバラバラに増築され、ブランドの世界観が伝わっていない
- 公開して終わりではなく、その後の運営代行まで含めて任せられるパートナーを探している
長く事業を続けてきた企業ほど、サイトは「必要になるたびに足された」状態になりがちです。今回ご紹介するメーカー様も、同じ状況からのスタートでした。
導入前の課題：サイトはあるのに、今の買い方に追いついていなかった
背景：プロの現場に選ばれ続けてきた一方で、Web上の見え方は止まっていた
ご支援先のクライアント様は、素材を厳選した加工食品を製造し、長年にわたり業務用の取引先から支持を得てきたメーカーです。品質へのこだわりと品質へのこだわりとつくり方に独自性があり、看板となるブランドを複数展開されています。
一方で、Webの整備は事業の歩みに追いついていませんでした。コーポレートサイトもECサイトも、必要に迫られて別々のタイミングで作られ、長年、更新の手が入っていない状態。「商品は評価されているのに、それがオンラインでは伝わらない」というギャップが、少しずつ機会損失として積み上がっていました。
課題① スマートフォンで見られない・買えない状態が続いていた
既存のECサイトはPC時代に設計されたもので、レスポンシブに対応していませんでした。スマートフォンで開くと文字は小さく、購入までたどり着くには何度も拡大と横スクロールが必要な状態です。一般消費者の入口として機能していないことは明らかでしたが、カートごと作り替える判断には踏み切れずにいました。
課題② コーポレートサイトとECサイトが分断され、ブランドが伝わらなかった
会社を紹介するサイトと商品を売るサイトが、別々の管理環境で動いていました。デザインのトーンも構成もそろっておらず、「会社を知る」から「商品を買う」への導線が途切れている状態です。さらに海外からの問い合わせも届いていましたが、受け止められる英語のページがありませんでした。
課題③ 数百点規模の商品情報を、自社で育てられなかった
既存ECには数百点規模の商品が登録されていたものの、商品説明の粒度も画像のサイズもバラバラで、追加や修正のたびに外部へ依頼が必要でした。商品情報を自社で育てられないことが、新商品の掲載やキャンペーンの実施を止める要因になっていました。
社内にEC専任の担当者を置けない中で、構築だけでなく公開後の運営まで含めて任せられるパートナーが必要でした。EC構築とEC運営代行の両方を一社で担えること、食品メーカー様の支援実績があることを評価いただき、オタツーが参画しています。
導入プロセス：2サイトを同時に作り替え、公開後の運営から逆算して設計
STEP1｜現状整理と、2サイト同時リニューアルの要件定義
最初に行ったのは、コーポレートサイトとECサイトを「どちらから作るか」ではなく「どう役割分担させるか」の整理です。ブランドストーリーや製法、会社情報はコーポレートサイトに集約し、商品を選んで買う体験はECサイトに集約する。そのうえで両者を相互に行き来できるようにする——この役割分担を先に決めたことで、以降のページ設計とデザインの判断がぶれなくなりました。
ページ一覧、画面構成（ワイヤーフレーム）、掲載する商品情報の項目、サーバー・ドメインの移行方針まで、決めるべき論点をシート化し、「クライアント様に判断いただくこと」と「こちらで設計すること」を分離しています。オタツーはEC支援16年・4,000社超の実績をもとに、どの工程でつまずきやすいかを織り込んだ進行管理を強みとしており、初めての大規模リニューアルでも判断に迷わない状態を保ちました。
あわせて、公開後に何を見て改善するかもこの段階で決めています。GA4での計測を前提に、どのページからECへ流れ、どこで離脱しているのかを追えるようにしておくことで、公開後の改善を感覚ではなく数字から始められる状態にしました。
STEP2｜コーポレートサイトの再構築と、多言語対応
コーポレートサイトはWordPressで再構築しました。テーマをベースにデザインをカスタマイズする方針を採り、フルスクラッチにせず必要な差分だけを実装することで、コストと公開までの時間を抑えています。会社案内・沿革・ものづくりのこだわり・拠点案内といった基本ページに加え、複数ブランドをそれぞれ独立した読み物として見せる構成に整理しました。
さらに、これまで受け止められていなかった海外からの問い合わせに応えるため、英語版のコーポレートサイトを新設。問い合わせフォームとプライバシーポリシーまで含めて用意し、海外の取引先が自社で判断できる情報量をそろえています。サーバー設定・SSL・メールアカウントの整備、ドメインまわりの移行も、公開日から逆算してスケジュールに織り込みました。
STEP3｜futureshopでのECサイトリニューアルと、数百点規模の商品登録
ECサイトのプラットフォームにはfutureshopを採用しました。決め手は、テーマをカスタマイズしながらレスポンシブ対応のサイトを構築でき、公開後にクライアント様自身でも運用しやすいことです。用意されたスタートアップテーマをベースに、コーポレートサイトとトーンをそろえたデザインへ作り込み、トップページ、商品一覧・詳細、カート、お買い物ガイド、各種ポリシーページまでを順に制作しています。
商品登録では、登録項目を定義した雛形シートを先に用意し、記載粒度をそろえたうえで数百点規模の商品を再登録しました。画像もfutureshopの仕様に合わせてリサイズ・書き出しのルールを定めたため、以降は同じ手順で社内でも追加・更新できる状態になっています。リニューアルオープンに合わせたトップページのスライダーや、キャンペーン用のバナー、SNSアカウントの開設までを同時に進め、公開初日から告知できる形を整えました。
STEP4｜公開後のEC運営代行と、サイト保守での継続支援
公開はゴールではありません。現在はEC運営代行として、商品ページの追加・更新、キャンペーンの実施、会員向けの案内といった日々の運用を継続して担当しています。あわせてコーポレートサイト側も、月次でのシステム・プラグイン更新とバックアップ取得、テスト環境での事前検証をルール化した保守体制を敷き、更新作業が原因でサイトが止まらない運用にしています。
制作から運営までを一社で完結できるため、「作った会社」と「運用する会社」の間で仕様の確認に時間を取られることがありません。この一気通貫の体制が、公開後のスピードを支えています。
導入成果：会社を知るところから買うところまでが、一本の線になった
- コーポレートサイトとECサイトを同じ世界観で同時刷新し、「会社を知る」から「商品を買う」までを一本の導線に統合
- 全ページをレスポンシブ対応とし、スマートフォンからの閲覧・購入が可能に
- 数百点規模の商品を統一フォーマットで再登録し、以降は社内でも追加・更新できる運用体制を構築
- 英語版のコーポレートサイトを新設し、海外からの問い合わせを受け止める窓口を用意
- 公開後はEC運営代行と月次保守で継続伴走。更新作業はテスト環境での検証を経て実施
成果の核は、2つのサイトを別々に直すのではなく、役割を決めたうえで同時に作り替えたことにあります。ものづくりの背景を伝える場所と、商品を選んで買う場所が分かれていながら行き来できる構造になったことで、これまで伝わりきっていなかった品質へのこだわりが、そのまま購入の理由として機能するようになりました。
ご担当者様の変化も印象的でした。当初は「何から手をつければいいのか分からない」状態でしたが、商品情報の項目と画像ルールが定まったことで、新商品の掲載を自社で判断・依頼できるようになり、サイトを「作ってもらったもの」ではなく「育てていくもの」として扱う姿勢に変わっていきました。
お客様の声
「長く使ってきたサイトだったので、作り替えるとなると何を決めればいいのかも分かりませんでした。会社のサイトとお店のサイトの役割を先に整理していただけたので、社内でも話が進めやすかったです。公開した後も運営を続けて見ていただけるので、単発の制作会社ではなくパートナーだと感じています」
（業務用を主力とする老舗の食品メーカー様 ご担当者）
オタツー担当者からのコメント
長く続いてきた企業様のリニューアルは、技術的な作り替え以上に「何を、どちらのサイトで伝えるか」を決めることが本質だと改めて感じたプロジェクトでした。今回は役割分担を先に固められたため、デザインもページ構成も迷いなく進められました。
商品情報の項目と画像のルールを最初にそろえておくと、公開後の更新スピードがまったく変わります。「古いサイトをどう作り替えればいいか分からない」とお悩みの事業者様は、ぜひ一度ご相談ください。公開はスタートですので、これからも伴走していきたいと考えています。
この事例に関連する提供サービス
サイトのリニューアルは、公開した瞬間よりも、その後に何度更新できたかで成果が決まります。本事例では、futureshopでのECサイト構築と、公開後のEC運営代行をセットで提供しました。「古いECサイトをリニューアルしたい」「作った後の運営まで任せたい」という方は、以下をご覧ください。
古いECサイトのリニューアルと、その後の運営に、お悩みですか？
まずは、現状をお聞かせください！ 無料相談をしてみる
