ECサイトを1から設計する手順6ステップ｜成功のための注意点を解説

ECサイトの作成には細かな設計が重要

大きな収益が見込めるECサイトは、国内外を問わず多くの企業が新たな販路として注目しています。経済産業省のデータによると、令和3年の日本国内のBtoC向けEC市場規模は20.7兆円でした。前年比からは7.35%増に拡大し、需要は伸び続けています。

ECサイトで失敗せず、競合の中で生き残っていくにはしっかりとした設計が大事です。今後ますますECサイトの増加が見込まれるなかで、ユニークな魅力を持つECサイトを生み出せるかどうかが大きなポイントとなるでしょう。

魅力的なECサイト構築ができるよう、サイト設計方法を解説します。

参照：経済産業省｜電子商取引に関する市場調査の結果を取りまとめました

【事前準備】定義・コンセプトを確定する

まずはECサイト設計を進めるにあたり、事前準備が必要です。事前準備の段階では、自社で作成するECサイトの定義やコンセプトを確定します。

サイトの制作において最も重要なのが「サイトのコンセプトを定めること」です。定義づけやコンセプト設定をおこなうために、次の6つに取り組みましょう。

市場やメインターゲットの設定

事前準備の1つに、市場やメインターゲットの設定をおこなうことが挙げられます。自社で参入したい市場やサイトに訪問してもらうターゲット、サイトへ掲載する商品ニーズなどの調査を実施することが重要です。

一般的には、以下の方法を組みあわせて調査・分析をおこないます。

とくに、メインターゲットを具体的に設定することが大切です。ターゲットが曖昧のままECサイトを作成すると、誰にも刺さらないサイトになる可能性もあるため注意しましょう。

売上目標の設定

売上目標の設定も事前準備の段階でおこなうといいです。ECサイトで得られる売上と想定される原価、必要経費を設定します。

ECサイトを初めて運用する場合はいきなり年間の売上を立てるのは難しいでしょう。まずは1日の売上目標を設定し、年間の売上を算出するのが一般的です。

訪問者数や客単価などの各種目標値の設定

事前準備ではECサイトへの訪問者数や客単価などの具体的な各種目標値を設定することも大事です。以下の項目を事前に設定しておくといいでしょう。

訪問者数は、無料で利用できるGoogle Analyticsを利用し、半年または1年後の予測を立てるといいでしょう。アクセス数が多いほど大衆の目に触れる機会も増えるため、売上げアップが期待できます。

CV(コンバージョン)とはECサイトの場合、サイトへ訪れたユーザーが商品を購入することです。売上目標を達成するには、サイト訪問者のうちどの程度のCV率があればいいのかを検討しましょう。アクセス数やCV率、売上目標などを考慮して、客単価を設定しておくことも大切です。

コスト上限の確認

ECサイトの作成にあたり、企業はどれほどの資金を用意しているかを確認しておくことも大切です。

ECサイトを制作する方法には「フリーソフトの活用」や「デザイン会社への外注」など数多くの選択肢があり、それぞれ必要となるコストは異なります。企業で用意している金額によって選べる選択肢も限られるため、予算を確認しておきましょう。

事業計画の策定

事前準備の段階で、事業計画の策定もおこないましょう。具体的には、ECサイトの設計から実装、本番リリースまでの全体スケジュールを立てます。

ECサイトの開発は長期にわたり、とくに初めての場合は余裕を持ったスケジューリングが大切です。なかなか要件が固まらないことや、トラブルによって工程の手戻りが発生することも想定し、半年〜1年は見ておくといいでしょう。

ほかにも、ECサイトの場合はオープン記念のキャンペーンやクーポンの発行などを実施することもあります。リリース後スムーズに運営できるよう、キャンペーン内容をECサイトにどう組み込むかを考慮してスケジュールを立てることが重要です。

担当人員の確保

ECサイトには設計や開発のときの人員だけではなく、リリース後も運用をおこなうための人員確保が必要です。せっかくサイトを立ち上げたのに担当者がいなければ、顧客対応や不具合対応ができずに失敗に終わることも想定されます。

たとえば、ECサイトの運用だけでも以下の業務が考えられます。

もしECサイトを外注している場合でも、外注先とのやりとりや指示出しには専門知識をもった人員が必要です。

各工程で必要なときに人員を探してもすぐには見つからないことも多いため、事前に想定できる業務を洗い出し、人員を確保しておきましょう。

ECサイトを1から設計する手順6ステップ

事前準備ができれば、いよいよECサイトの設計に入ります。具体的な手順は以下の6ステップです。

1. コンテンツの設計

まずはコンテンツの設計です。ECサイトにおけるコンテンツとは、サイト内の各ページや機能がまとまった情報のことです。

具体的には次の7つのコンテンツにわけて、自社のECサイトにおける内容を設計しましょう。

• トップページ
• カテゴリページ
• 各商品ページ
• ショッピングカート
• 問い合わせフォーム
• ご利用マニュアル
• 企業情報

トップページ

トップページとは、ECサイトの入り口となるページです。おすすめの商品や新商品など、購買意欲を高める情報を掲載することで、ユーザーがサイトに興味を持つきっかけになります。ほかにも、商品ごとの各カテゴリページへのリンクも設置しましょう。

トップページはユーザーが初めてサイトを目にする場所であることから「ファーストビュー」とも呼ばれています。ファーストビューでユーザーの興味や関心を惹きつけないと、サイト離脱の原因になりかねません。

どのような情報を載せるのか、各情報をどこに配置するかなどを慎重に検討しましょう。

カテゴリページ

カテゴリページとは、商品のカテゴリを分類するために設置するページです。販売している品目が多い場合は設置することをおすすめします。カテゴリページを設置することでユーザーが商品を閲覧しやすくなり、CV率にもつながるでしょう。

販売している商品が1つしかない場合は基本的に設置は不要です。

各商品ページ

各商品ページとは、販売している商品のデータを掲載したページです。商品の詳細な説明や価格、写真などを掲載する必要があります。

関連する商品もあわせて表示する場合、専用のバナーを用意しましょう。加えて、ショッピングカートへのリンクを設置することで購入までの難易度がグッと下がります。カートへのリンクボタンはできる限りわかりやすく、目立つように配置することが大切です。

ショッピングカート

ショッピングカートとは、ユーザーが購入したい商品を表示するページです。商品の送付先や決済情報の入力システムを準備しましょう。注文内容の最終確認と完了画面もあわせて設計する必要があります。

くわしくは下記の記事を参考にしてください。

問い合わせフォーム

問い合わせフォームとは、ユーザーがECサイトの運営会社へ質問や問い合わせができるページです。ユーザーの名前やメールアドレス、問い合わせしたい内容を入力できるフォーマットを用意します。

ユーザーの問い合わせる手間を極力減らすために「よくある質問」の設置や、チャットボットやFAQなどのシステム導入も検討するといいでしょう。

利用マニュアル

利用マニュアルとは、ECサイトの利用方法から、決済の方法や発送に関する説明、およびキャンセルした場合の取り扱いなどを掲載するページです。

ECサイトでは個人情報の取り扱いを記載することが重要であるため、自社のコンプライアンス部門と相談しながら作成するといいでしょう。

企業情報

企業情報は商品購入の際の安心や信用の証になるため、ECサイトに記載することが望ましいです。昨今のネット通販詐欺などにより、企業情報が明記されていないサイトはユーザーも購入に慎重になり、購買のハードルが上がってしまいます。

住所や電話番号、会社の外観写真などは、会社が実在することの証明になるため掲載しましょう。ほかにも、社長や従業員・スタッフの顔写真、自己紹介などを掲載すると、より信頼度や親近感が増します。

企業への信頼感を抱けなければ、ユーザーは購入に至らずサイト離脱する可能性が高まるため、注意が必要です。

2. サイト構造の設計

次はサイト構造の設計です。サイト構造では、各ページ間のつながりや階層などを構築します。具体的には、以下の3つの項目を検討しましょう。

• カテゴリ単位で構成する「階層構造」を採用する
• パンくずリストを設定し内部リンク強化を図る
• タグ機能を活用する

カテゴリ単位で構成する「階層型構造」を採用する

サイトの階層構築にはさまざまな方法がありますが、ECサイトでは多くの場合「階層型構造」が採用されています。階層型構造とは、商品をカテゴリごとに分類し、階層を作る手法です。

サイト内の各ページのつながりを図表にして、サイトの構造全体を把握します。階層数が明確になることで、商品を購入するまでに何ページ分の遷移が起こるかを把握できるでしょう。

多くのユーザーはページの移動が多くなるほど、めんどうに感じてサイトを離脱する傾向にあります。階層数が5層以上ある場合は、サイトの構造を見直しましょう。ECサイトは「トップページ」「カテゴリページ」「各商品ページ」の3層構造が理想的です。

パンくずリストを設定し内部リンク強化を図る

サイト構造では、パンくずリストを設定することをおすすめします。パンくずリストとは、サイトに訪れたユーザーが今どこの階層ページにいるのかを瞬時に判断できる誘導表示のことです。

一般的には、ECサイト内のページのリンクがリストアップされ、階層順に並べられています。パンくずリストを設定して商品ページにリンクされているページが増えると、内部リンクが強化されてSEO対策にも効果的です。

検索エンジンは1つの商品に対して1ページまでしか認識できないため、1商品に複数のカテゴリは設置しないよう注意しましょう。

タグ機能を活用する

サイト構造を決める際は、タグの活用も考慮に入れておきましょう。タグとは、商品カテゴリとは異なる自由な切り口で、カテゴリを横断的にページ分類できる手法のことです。

たとえば、色やサイズ、シチュエーション、関連項目を設定することで、同じタグを持つ商品を一覧表示できます。カテゴリから探せる「あの商品がほしい」というニーズ以外にも「この色でいい商品はないかな」などの幅広いニーズに応えられるため、CV率アップが期待できるでしょう。

3. ナビゲーションの設計

次に、ナビゲーションの設計です。ナビゲーションとは、サイトを訪問したユーザーを購買ページまで誘導する、またはユーザーがたどり着きたいページまで誘導する表示のことです。

目的のページの場所がわかりづらく、すぐにたどり着けない場合はユーザーの離脱率が上がる原因となるため注意して設計しましょう。

ECサイトでは主に次の3つのナビゲーションがあります。

• グローバルナビゲーション
• パンくずナビゲーション
• ダイナミックナビゲーション（検索窓）

グローバルナビゲーション

参照：ディノス（dinos）

グローバルナビゲーションは階層型ナビゲーションとも呼ばれ、ページ構造のなかでも最高層の各ページをメニュー化して表示したものです。ECサイトで最も広く利用されており、ユーザーにとっても操作に慣れているため扱いやすいサイトになるでしょう。

上記のサイトでは「商品カテゴリ」「カタログから探す」「テレビショッピング」「家事レンタル」「特集・キャンペーン一覧」「SALE」の各項目が横一列に並んでおり、それぞれのページへのリンクが設定されています。

パンくずナビゲーション

参照：ZOZOTOWN

パンくずリストを設定する場合はパンくずナビゲーションを表示させましょう。ユーザーが今表示しているページに至るまでの階層を、左から順に表示させることが一般的です。

ユーザーは今どこの階層ページにいるのかがわかりやすく、たどってきた階層の途中まで飛ぶことも可能です。サイトの操作性アップも期待できるでしょう。

上記のECサイトでは、トップページから商品詳細ページまでの階層を、商品画像の上部に表示しています。リンクを押下することで、トップページまですぐに戻ることが可能です。

ダイナミックナビゲーション（検索窓）

ECサイトの代表的なナビゲーションといえば「サイト内検索機能」でしょう。「ダイナミックナビゲーション」と称される機能ですが、一般的には「検索窓」と呼ばれています。

ダイナミックナビゲーションでは、商品名や型番などを入力することで簡単に閲覧したいアイテムを見つけることが可能です。

ただし、検索機能のクオリティーは導入するソフトによって大きく左右されるため、よく選定する必要があるでしょう。

4. 画面の設計（ワイヤーフレーム）

ECサイト設計の4つ目の工程では、サイト画面の設計です。画面の設計図は「ワイヤーフレーム」と呼ばれています。ワイヤーフレームを作成することで情報を整理でき、UIやUXを向上させることが可能です。

画面設計はユーザーから見たサイトの印象に大きく影響するプロセスのため、慎重にコンテンツの位置決めをおこなう必要があります。

ワイヤーフレームを作成する際は、一般的なペイントソフトでも問題ありません。より精密なワイヤーフレームを制作したい場合、サイト制作の専用ソフトを活用するといいでしょう。

ワイヤーフレームの具体的な作成工程は次の3つです。

• サイトマップを作成する
• トップページの構成を決定する
• 下層ページの構成を決定する

サイトマップを作成する

まずはサイトマップを作成しましょう。サイトマップを作成することでサイト全体のページを把握できるとともに、検索エンジンにページの存在を認識してもらえます。

作成の際はサイト内に必要なページを洗い出し、階層構造を決定することが大切です。どのページが必要かわからない場合は、他のECサイトを参考にすると漏れがなく作成できるでしょう。

トップページの構成を決定する

サイトマップ作成後は、トップページから画面の構成をはじめましょう。細かいデザインはこの後の工程で決定していくため、今の段階では具体的なデザインまで作り込む必要はありません。

アイキャッチ画像やナビゲーションメニューなど、全体の構成を考えながらコンテンツを配置することが大切です。ECサイトの最終目的はユーザーを購買行動へ促すことであるため、購入までの導線やわかりやすさを考えた配置にすることをおすすめします。

下層ページの構成を決定する

次は下層ページの画面構成を決定します。下層ページのコンテンツが事前に決まっている場合は、ワイヤーフレームの中に細かい情報を入れていくと後でデザインを構築する際に楽になります。

5. デザインの選定

ワイヤーフレームが完成したら、デザインの選定です。ECサイトでは、以下の3つの点に配慮してデザインしましょう。

• シンプルで初めての人にもわかりやすいデザイン
• スマホファーストのデザイン
• 購入までの導線がスムーズなデザイン

シンプルで初めての人にもわかりやすいデザイン

ECサイトにおいて、情報量やコンテンツが多いデザインはユーザーにとって見づらく、操作性も悪くなるため離脱率が上がる要因になります。

できるだけシンプルに、規則性を持った配置にすると見やすさや操作性が上がり、CV率がアップするでしょう。

スマホファーストのデザイン

近年のスマホの普及により、スマホからECサイトを利用するユーザーが多いです。狭い画面でも見やすいデザインを意識するといいでしょう。ページ内に情報を詰め込みすぎると、スマホでは見づらく、ごちゃついた印象を与えてしまいます。

デザインが完成したら複数の端末から確認することが大切ですが、とくにスマホから見たときに表示ズレがないかを最終確認しましょう。

購入までの導線がスムーズなデザイン

ECサイトでは、購入までの導線がスムーズなデザインにすることが大切です。商品を購入したいと思っても、途中で広告が入ったり、わかりづらい場所に購入ボタンがあったりすると、途中で諦めてサイトを離脱されます。

ECサイトの最終目標はユーザーに購買してもらうことであるため、購入までの導線デザインは何度もテストをおこない確認しましょう。

6. システムの設計

ECサイト設計の最終段階は、システムの設計です。これまでに決めたサイトのデザインや詳細をどのようなシステムで実装するか決定します。

自社でECサイトを作成する場合、担当者のWEBサイト制作に関する知識や経験レベルを細かくチェックしましょう。WEBサイトを作ったことがある人でも、パッケージソフトを利用していた場合はHTMLやJapaScriptのソースを書けない可能性があります。

商品ページだけではなくコラムなども掲載する予定であれば、以下のCMSを活用すると便利です。有償のCMSであれば、カスタマーサポートを受けられるメリットがあります。

他にも、レンタルサーバーやサイトドメインなどの検討が必要です。

ECサイトの実装・本番リリース

ECサイトの設計が完了したら、実装や本番リリースの段階に入ります。主な手順は次のとおりです。

1. 設計に基づいてサイトを実装する

ECサイトの実装は、レンタルしたサーバー上で実際に組み上げていきます。CMSを活用して制作することもあれば、ECサイト制作専用に公開されているフリーソフトを利用してページを作っていくこともあるでしょう。

最近では、より簡単かつスピーディーにサイト制作ができるよう、法人向けにパッケージ化されたソフトも販売されています。

実装作業は、最初から高度な複数の機能をコーディングせずに、まずはベースとなるサイトを完成させます。完成したベースに機能を追加していくことで、テストでエラーが発生した場合に「どこの工程でバグが生じたのか」がすぐにわかり、修正もしやすいです。

2. 動作確認を実施する

実装後は動作確認をおこなうテスト工程に入ります。動作確認をせずにECサイトを公開すると、不具合に気づかずにユーザーへダイレクトに影響をおよぼす可能性があるため、必ず実施しましょう。

テスト項目は詳細に決めておくことが重要ですが、なかでも念入りに確認しておくべき項目は以下のとおりです。

とくに決済画面の確認は重要であるため細かいチェックが必要です。ECサイトが「セキュリティーに関して信頼性が低い」と評価を受けてしまうと、ユーザーの信頼を取り戻すのは容易ではありません。

PCやスマートフォンなど、システムの異なる端末でも正確に入力ができることを確認しましょう。

3. 本番環境へリリースする

動作確認で問題ないことを確認したら、ECサイトを本番リリースします。リリース後、最初の1週間程度はサイトが予定どおりに稼働するか、常にモニタリングしましょう。

ECサイトの開発を外注した場合は、不具合や障害対応はすべて委託業者が担ってくれます。ただし、ユーザーから寄せられる問い合わせは自社内で対応しなければならないことを覚えておきましょう。

ECサイトの運用が軌道に乗ってきたら、改善できる箇所や追加するべき機能がないかを確認します。PDCAサイクルをまわすことで、ECサイトの完成度を徐々に高めていきましょう。

ECサイトを設計する際の注意点

ECサイトを設計する際は以下の5つの項目に注意しましょう。

• ユーザーの視点を常に持つ
• 更新や調整が容易なデザインにする
• 商品ページにこだわる
• 時間に余裕を持った工程表を作る
• 外注する場合はコミュニケーションを密にする

ユーザーの視点を常に持つ

ECサイトを作成する際は、ユーザー視点を常に持つことが大切です。人気のあるECサイトはいずれも「ユーザー視点」を念頭に置いた設計をおこなっています。

「企業側が何をアピールしたいか」ではなく「ユーザー側が何を知りたいか」「ECサイトにどのような機能があったらいいと感じているか」などのニーズを常に満たすようサイト構築をおこないましょう。

競合他社が運営するECサイトの機能を実際にチェックしてみるのもいい方法です。売り上げが高いサイトと伸び悩んでいるサイトを比較することで、自社のECサイトに必要な機能と不要な機能の振り分けができます。

更新や調整が容易なデザインにする

ECサイトの設計やデザインを考える際は、機能の更新や調整がしやすい構成となるよう留意しましょう。ECサイトでは、ユーザーからの要望を受けて機能を追加する場合や、新商品を追加したり、販売が終了した商品を削除したりすることが頻繁に起こります。

実装時は、各コンテンツの独立性を確保しておくことを意識しましょう。サイト内のコンテンツがしっかりと区分されていれば、更新したことで1つの機能に不具合が起こったとしても、ほかの機能の共倒れを防げます。

サイトの調整が難しいと、担当者を変更した際にトラブルが起こりやすいです。特定の担当者にしかわからないようなシステムにしないよう注意しましょう。

商品ページにこだわる

ECサイトは、商品ページにこだわりましょう。よくあるミスが「トップページの仕上がりにこだわりすぎる」ことです。ユーザーがECサイトで取得したい情報は「商品に関する情報」であり、サイト運用会社の情報ではありません。

商品ページでは、製品の写真が見やすい位置にあること、価格がわかりやすく表示されていることが大切です。配送料を含めた価格が一目でわかると好印象を受けやすいです。

カートへ入れてから決済までの画面遷移がスムーズであることも大切です。個人情報の入力に時間がかかると「すでに個人情報を登録してある他のサイトで買い物をしよう」と思われるため注意しましょう。

時間に余裕を持った工程表を作る

作業のために十分時間を確保できるよう、余裕を持った工程表を作成することが大切です。時間に追われてしまうと、細部の確認が甘くなったり、ミスが発生したりするリスクが高まります。

クオリティーの高いECサイトを作りたい場合、プロジェクトを駆け足で進行することがないよう心がけておきましょう。

外注する場合はコミュニケーションを密にする

ECサイトを外注する場合は、最初の段階から積極的にコミュニケーションを図り、こちら側の意向を伝えておくことが大切です。「基本的にお任せ」のスタイルを取ってしまうと、ほぼ完成に近い状態まで報告を受けることなく進んでしまうことがあります。

最終段階で意図していたものと異なる場合、リリース時期を遅らせざるを得ない重大なトラブルにつながるでしょう。遅れた分、制作コストが跳ね上がることも考えられます。

ECサイトのコンセプトや絶対に必要な機能などを外注先とすりあわせて、各工程で進捗や仕上がりを細かく確認することが大切です。

まとめ

売れるECサイトを構築するには、段階を踏んだ細かい設計が大切です。本記事では、ECサイトの設計方法や設計時の注意点などを紹介しました。

「WEBデザインに詳しい人材が社内にいない」「ECサイトに関して信頼できる相談相手を探している」とお困りの場合は『比較ビズ』に相談してみてはいかがでしょうか？

『比較ビズ』では、必要事項を入力する2分程度で、ホームページ制作に対応できる業者を探せます。複数の業者に無料で相談できるのも嬉しいポイントのため、ぜひ利用してみてください。

監修者のコメント

株式会社ラテラルリンク

代表取締役 岩井昌弘

徳島県出身　名古屋大学情報文化学部卒業。同大学院人間情報学研究科修士課程修了。2006年有限会社ラテラルリンクを設立。名古屋市で、Webシステム開発を中心に、Web構築全般、Web活用支援に従事。クライアントは、中小・零細企業から東証一部上場企業、国立大学まで幅広いニーズに対応。経済産業省認定「スマートSMEサポーター」。

詳しく見る

カテゴリの設計においては、複数の切り口を考えておくと良いでしょう。例えば、ベビー用品であれば、ベビーベッドや、まくら、おもちゃ、といった商品そのものの分類だけではなく、対象年齢や利用シーン（おでかけ、通園、自宅）、デザイン（色や柄）といった切り口も想定できます。取り扱う商品と、設定したメインターゲットを考慮して、どういったカテゴリがあれば、商品を探しやすくなるか十分に検討しましょう。

商品ページについては、商品のスペック情報はもとより、その商品を購入、使用した後に得られるベネフィット（利益）を盛り込むことで、ユーザーは具体的なイメージがしやすくなります。ベネフィットを考える際には、ユーザーを主語として、その商品を買う（使う）とどうなるか、を想像するとよいでしょう。

商品ページを外部の業者へ委託する場合、必ずしも商品に対する理解が深いとは限らないので、十分な理解を促した上で制作を進めましょう。要件にもよりますが、ベネフィットの提案がある、つまり商品への十分な理解（あるいは理解しようとする姿勢）がある業者を選ぶようにしましょう。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。