こんにちは！ディーエムソリューションズでマヌカハニー専門店BeeMeを運営しています、ECの虎チームの岸川です。
こちらの記事では私が自社内でECサイトを運営する中で成功したことや失敗したことを包み隠さず公開していきます！
今回はECサイトってどうやってできていくのかあまりイメージがついていない…という方のために、BeeMeサイトがどのようにして作られていったか、ご紹介したいと思います。
ぜひECサイト構築の参考にしてみてくださいね。
目次
まずはどのような流れでECサイトを作っていくのか、概要として書き出していこうと思います。
それでは次からは制作の流れを細かくご紹介していきます。
まず最初にやっておかなければならないのがサイトの方針を固めること。
どんな人にECサイトへ訪問してもらって商品を買ってもらいたいかをチーム内でしっかりと共有する作業です。
ペルソナとは、製品やサービスを利用する架空のユーザー像を指します。
販売する商品を買ってくれるユーザー像を細かにイメージすることで、以下のようなメリットがあります。
ペルソナの詳しい設計方法やサンプルが見てみたい方はこちらに詳しく載っているのでご覧ください。
⇒マーケティングに欠かせないペルソナ設定の方法とサンプル5選
ペルソナ設計のポイントはできるだけ細かい部分までユーザー像をイメージしておくことです。
ECサイトを制作する場合にどのようなユーザーに見てもらうサイトなのかによってデザインや入れたいページ・コンテンツも変わってきますよね。
例えば40代女性/部長クラスの収入がある/独身/都内に住んでいる、といった女性像に買ってもらいたいとしましょう。
サイトのデザインは上記からスタイリッシュなデザインや綺麗で読みやすいフォントが適しているなどデザイン面でのイメージは何となくつきそうですね。
ただ、これだけだとまだ不十分で、下記のようなユーザーの細かい行動まで設定してみましょう。
設定していた40代女性像の中でもインターネットを積極に使う方もいればあまり積極的に使わない方もいますよね。またペットを飼っているのか、お酒を飲むことが好きなのかなどによっても生活パターンは違うはずです。お酒が好きな方なら広告を出す時にもコンテンツを作る時にもお酒が好きな方を想定しているなら「お酒が好きなあなたにおすすめしたい〇〇」のようなアプローチもできますね。
このようにペルソナの動向に合わせてどのようなコンテンツを用意すると良いかが見えてくるうえ、マーケティング活動においてもどのようなアプローチをすべきかが見えてくるため、ペルソナ設計ではかなり細かいプロフィールまで設定しておくことがおすすめです。
それでは、BeeMeで最初に設計したペルソナをご紹介します。
まず、BeeMeではもともと楽天店舗で先に販売をしていたため、楽天ユーザーの購買層から30代～50代女性がターゲット。最も多いのが40代女性。という大枠のターゲット層がわかっていました。
この情報と競合調査やブレストを用いて以下のようなペルソナが出来上がりました。
井上 雅美は1995年9月に不動産会社を経営する夫である忠と結婚。
元々は不動産会社の事務をしており、結婚を機に退社、専業主婦。
30歳の時に長男、33歳で長女を出産。
趣味は読書、料理、ジョギング。ウェブサイトの利用はオーガニック食品やオーガニックコスメの購入で利用。また、趣味の料理のためにクックパッドなどのレシピサイトもよく閲覧する。
幼少時代はアトピー体質で体が弱かったため、両親が心配し、オーガニック食品を使っていたため、自身も自然とそのような食品、食生活となった。
そのため、健康志向が強く、食材や調味料もある程度値段が高くても購入する傾向にある。
マヌカハニーはあるテレビ番組で紹介されているのを見て、オーガニック食品にも関わらず、高い抗菌効果を持つマヌカハニーに興味を持ち、まずはお試しのボトルから試してみようと考えている。
いかがでしょうか？かなり細かく設定していますよね。こう見てみると「レシピサイトをよく見る」「オーガニック食品に興味がある」「健康に不安がある」といった点はサイトを作るうえでポイントになってきそうです。
このペルソナからブランドコンセプトやサイトのキーメッセージを立てたほか、コンテンツのイメージやデザインのイメージ、注力キーワード（検索結果で上位表示を積極的に狙っていきたいキーワード）もある程度固めていきました。
ECサイトの大きな方向性が決まったら、次はどのようなページがサイトに必要か洗い出し、どのような構造（親子関係）にするか決めていきます。
サイトマップというとSEO界隈でいうとXMLサイトマップのようなクローリングに必要なファイルを指すことが多いですが、今回はWeb制作のディレクションに使う資料を指します。
例えばサイトマップは以下のような構造図で、TOPページからリンクでどのようなページが派生してさらにその配下ページの配下にはどのようなページを作るか分かるようにしたものです。下記図で見ると左がTOPページで左右の線で繋がっているものが親子関係となるページです。右に行くにつれて階層が深くなっていきます。
サイトマップはあまり階層を深くせず、分かりやすい構造にすると良いとされています。
理由としては以下のようなものがあります。
また、URLの記述についてもユーザーがパッと見て分かる名前にすることと、親ページとの関係性が整理されているのが好ましいとされています。
詳細はこちらのページにまとまっているので気になる方はご覧ください。
⇒SEOを意識したWebサイト設計（ディレクトリ構造）とは？
BeeMeで作成したサイトマップがこちらです。
小さくてあまり分からないと思いますが…笑。
このようにどのようなページが必要か洗い出したあと、親ページは何になるか、その子ページはどれにあたるかを図にして整理しておきましょう。
どのようなサイトにするかおおよその要件が決まったら、いよいよ予算取りと制作会社探しです。
ただ、このあたりのフローは会社によってまちまちで最初にECサイトの製作費はいくらとプロジェクトで決められてしまうこともあるかもしれませんし、懇意にしている制作会社さんがいたり、社内で対応できたりする場合は制作会社を探す手間はありません。
予算も制作会社決めもこれからの場合はまず制作会社を探して相見積もりを取り、見積り金額から社内での予算取りをしていきましょう。
制作会社探しのポイントを4つご紹介します。
デザインはもちろんプラットフォーム選びにも関わってくるためECサイトでこんなことがやりたい！というのはあらかじめまとめておきましょう。
例えば以下のようなものです。
ECサイトはただデザインするだけでは成り立たず、デザインデータの完成後HTMLファイルなどのWebページとしてデザインしたものを表示させるためのファイルへコーディングする作業、カートシステムなどのECプラットフォームへ商品を登録したり店舗の設定を行ったりHTMLファイルなどのファイルを繋ぐといった構築作業が必要になります。
制作会社には色々なサービス内容の会社があり、デザインのみ請け負ってくれる会社や、デザイン～コーディング～システム構築まで一貫して対応してくれる会社もあります。
デザインのみ任せてコーディング以降は別会社にお任せする方が安いのか、一貫してお願いできる会社のほうが安いのかは一概には言えません。
ただ、別会社の場合はデザイン⇒コーディングの時に別途指示書が必要になりますし、互いに認識の齟齬が起こらないような工夫が必要になります。とはいえ別会社でもパートナー企業で長年の付き合いがあればそこまで問題ではないケースが多いです。
その他にもECCUBEやShopifyなどプラットフォームによって対応の可否も分かれます。どのプラットフォームでサイトを作りたいか決まっていればそのプラットフォームでの実装が対応可能な会社を探してみるのもいいですし、まだどれにするのがいいか決まっていない場合はまずデザインのできる制作会社へ相談してみるのもいいかもしれません。
デザインのみ請け負っている制作会社ではヒアリングをしたうえで最適なプラットフォームを提案し、コーディング～構築までできるパートナー企業を紹介してもらうケースもあります。
また、ECサイトを制作するときに用意しなければならないのが大量の商品画像。既に持っている場合や社内で対応できる体制であれば問題ないですが、一から用意しなければならず、社内でできる環境にもない場合は制作会社のほうで商品画像撮影もパートナー企業へ依頼して格安で対応してくれるところもあるようです。
社内の状況やサイトの要望に沿って希望条件を出して制作会社を探してみましょう！
予算も制作会社も決まりいよいよ制作開始です！ペルソナやサイトのイメージを制作会社へ伝えてサイトデザインのイメージをすり合わせしたら、制作会社でワイヤーフレームを作成してくれるので、大まかなレイアウトが問題ないか確認しましょう。
ワイヤーフレームとは、どこに、なにが、どのように書かれているかを記載したWebサイトの設計図です。社内で作成するときに必須なのはもちろん、外注する場合にもイメージの共有を助けてくれるツールです。
ワイヤーフレームは、Webサイトを作成する上で「Webサイトに関わる人全員で完成イメージを共有し、作業内容を確認する」ことができます。つまり、ワイヤーフレームはWeb制作を進める上での「コミュニケーションツール」という役割があります。Webサイトの完成図が見える化されているので、複数人で作業する際も同じイメージを持って作業をすすめることができます。
ワイヤーフレームが問題なければ制作会社のデザイナーのほうで実際にデザインに落とし込んだデザインデータの制作が進んで行きます。
以下がBeeMeで作成したワイヤーフレームの草案の一部です。
これはExcelで作ったものになります。
コンテンツの名前と領域、配置を一覧に表していて、デザインに落とし込む前に全員でイメージを合わせることができます。
ページをデザインする中でイメージ画像が必要になる場合も出てきますよね。例えば外で商品を使って雰囲気の良い写真を撮ったり、スタジオで人を使って商品と写真を撮ったりといった通常の商品画像とは違った写真を入れたい場合があると思います。
依頼した制作会社でできれば良いですが、依頼が難しい場合は自分たちで探すか、制作会社にパートナー企業がいれば価格次第で依頼してしまっても良いかもしれません。
デザイン進行と同時に、システム面や他の仕様についても確認していきます。例えば前述にもありましたが、クーポンやポイントを導入したい、決済方法はAmazonPayを使いたいなど要望にあわせて最適なECプラットフォームを決めていきます。
ECプラットフォームはECサイトを構築するベースとなるシステムのことであり、自社ECの場合は中・小規模のECサイトならカスタマイズ性は低いですがサーバ不要で手軽に始めることができる「BASE」や「Shopify」といったカートシステム（ショッピングカードASP）を選ぶのが昨今のトレンドです。
⇒Shopifyとは？覚えておくべき使い方とメリット
⇒【BtoB向け】ECカート10選の費用や機能を徹底比較！
BeeMeでは以下の要望がありました。
SEO/コンテンツマーケティングについて具体的に紹介すると、SEOではキーワードチューニング表、ディレクトリ構造のカスタマイズ、構造化マークアップといった作業を行い実装しました。
コンテンツマーケティングはWordpressを導入してコラム投稿ができるようにしました。
このようにSEOやコンテンツといった施策をがっつり行うことと、制作当時の状況からBeeMeではオープンソースと呼ばれる種類のプラットフォーム「ECCUBE」でシステム構築をすることになりました。
ECCUBEはカスタマイズ性があり、上述した施策の実装が可能であることと、プラグインが豊富なためメルマガやクーポンなどはプラグインの追加で簡単に実装可能な点から選定されました。
ワイヤーフレームのレイアウトから実際のデザインに起こしたものが納品されるので確認、必要に応じて修正指示～修正をしてもらいます。OKを出せばそのままHTML、CSSといったページを構成するファイルへコーディングが行われます。
テスト環境等でコーディングしたWebページが確認できる状態になるので、以下のことを中心に確認をしましょう。修正点があれば修正をお願いします。
Webページの表示内容が問題なさそうであれば出来上がったファイルをシステムへ繋ぎこみする作業に入ります。
同時に店舗情報や決済方法、商品情報の登録など販売するためのあらゆる設定を行っていきます。
商品情報はCSVで登録することが多いので構築会社から指定されたフォーマットに合わせて商品情報を記載したCSVを準備して渡します。
決済についても決済会社と契約をして決済システムが使えるようにするなど作業が発生する場合があります。締め日や請求サイクルを確認しながら契約を進めていきましょう。
また、システムの作業に入るまでに、店舗の細かな運営ルールも決めておきましょう。
例えば以下のようなものです。もっと早い段階でシステムの構築会社と相談して決めている場合もあります。
システム構築ができたらテスト環境か本番の非公開環境で実際にサイトが出来上がったような状態になります。この状態まで来たらあと一息です！実際に購入ができるか確認していきましょう。
ただ、購入といっても購入は様々な条件で発生するものです。例えば着日指定や決済方法、商品の組み合わせ、住所、クーポン・・・どれかひとつでも設定に誤りがあるとユーザーで正常に購入できない人が出てきます。
様々な条件で購入し、その都度注文完了画面へ遷移するか、その後のメールフローも問題なく動いているか（自動化している場合）、受注システムに正常に反映されているかを確認しなければならずかなり根気のいる作業です。
不具合を見つけたらシステム会社へ
をまとめて連絡し、修正対応してもらいましょう。
不具合を書き出し、対応状況を把握するために以下のようにリスト化しました。
どんどん増えていくと思うので今のそれぞれの状況がわかるように一覧にしておくと便利ですよ！
お疲れ様でした・・・！いよいよサイトオープンです。
ただ、サイトオープンしてからもきっと様々なトラブルが発生するものです。問い合わせに漏れなく回答できるよう気を張って、不明な点が出てきたら制作会社やシステム会社へ都度質問するようにしましょう！
今回はECサイトができるまでの流れを実際の実例と共にご紹介しました！
まったく初めてだとなかなか進め方が分からないことも多いかと思いますので、これを見てイメージを掴める方が増えることをひそやかに願っています…！
それでは、今回も最後までお読みいただきありがとうございました。
インターネット上に数多く存在するECサイトの中で、自分の運営しているECサイトで商品を顧客に買ってもらうには、他社と比較して差別化を図る等の…
こんにちは。ディーエムソリューションズでECサイト運営を担当しております岸川です。 こちらの記事では私が自社内でECサイトを運営する中で成功…
こんにちは！ECの虎チーム岸川です。ECを始めるときに「どこでどう売るか」というのをまず検討しますが、大きく分けると今回ご紹介する楽天やAm…
みなさんこんにちは！ ECを今運営されている方、突然ですがEC運営って色んな業務がありますよね。お店の規模が大きければ人員も多く分担して業務…
こんにちは。ディーエムソリューションズでマヌカハニー専門店BeeMeを運営しています、ECの虎チームの岸川です！ こちらの記事では私が自社内…
こんにちは！ディーエムソリューションズでマヌカハニー専門店BeeMeを運営しています、ECの虎チームの岸川です。 こちらの記事では私が自社内…
今話題のAIによるコンテンツ自動生成機能も！SEO対策に本当に必要な機能だけを搭載した使いやすさとコストパフォーマンスに優れたWeb集客支援ツールです。
Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。
Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中！
検索順位で1位まで上げるためのSEOポイント8つ
E-E-A-Tとは？ SEOにおける重要性と評価の高め方を解説
成功確率アップ！BtoBのコンテンツマーケティング施策とは
YMYLとは？該当するジャンルとSEOにおける対策のポイント8つ
SEO内部施策とは？重要な項目16選【セルフチェックリストつき】