「ここでいい」を「ここがいい」へ。発注先探しなら比較ビズで

ecサイトを開設したい!どのような手順で制作・設計したら良いのか学ぼう

公開日:2021年06月01日 最終更新日:2021年12月23日
 株式会社ラテラルリンク
監修者
代表取締役 岩井昌弘
ecサイトを開設したい!どのような手順で制作・設計したら良いのか学ぼう

コロナ禍により外出を控える人が多くなる中で、企業の売上を支える大きな柱となりつつあるのが「ecサイト」です。Wi-Fi環境があれば簡単にショッピングを楽しむことができるため、幅広い年齢層から支持されています。そのため、新たにecサイトの開設を目指している企業は少なくありません。この記事では、ecサイトの開設を目指す経営者や担当者へ向けて、どのように設計したらよいのかという点を解説していきます。

ecサイト全体を構築する流れとは

ecサイトを立ち上げるにあたり、全体の流れを理解しておくのは大切なことです。プロジェクトの概要を把握しておくことにより、各工程において必要な人員や発生するコストなども計算しやすくなることでしょう。ecサイトのプロジェクトは通常、以下の5ステップで進められていきます。

  • 定義・コンセプトの確定
  • サイトの設計
  • サイトの作成
  • 動作確認
  • サイトオープン

定義・コンセプトの確定

サイトの制作と聞くと、「どのようなデザインにするか」という点に目が向きがちでしょう。とはいえ、ecサイトの制作において最も重要なのは「サイトのコンセプトを定めること」です。具体的なポイントとしては、以下の3つが挙げられるでしょう。

  • メインターゲットの設定
  • 各種目標値の設定
  • コスト上限の確認

メインターゲットの設定

ecサイトを立ち上げる目的は当然「売り上げのアップ」です。ですから、サイトのメインターゲットとなるのは誰なのか、どんな商品を提供するのか、どのように購買意欲を高めるのかといった点を最初に決めておきましょう。こうした点が明確になっているなら、制作が行き詰まってしまった時やプロジェクトチーム内で判断が分かれた時などに振り返ることで、制作の方向性を改めて定めることができます。

各種目標値の設定

サイトのコンセプトを決定する際には、サイトを訪れたユーザーに関するCV(コンバージョン)率の目標値や、1日当たりの訪問者数、理想とする客単価なども具体的に設定しておきましょう。こうした情報はサイトを設計する際に大きな助けとなります。

特に、各ページへどのようなコンテンツを設置したら良いのか、どんな機能を付与するのが最善かといった点を見極めやすくなるでしょう。また、ecサイトをリニューアルする際にどんな点を改善したらよいのかを判断するための指標ともなります。

コスト上限の確認

ecサイトを制作する方法には「フリーソフトの活用」や「デザイン会社への外注」など数多くの選択肢があり、それぞれ必要となるコストは異なります。ですから、サイトの開設にあたり、会社としてプロジェクトにどれほどの資金を用意しているのかという点も確認しておくことは大切です。これがはっきりしていると、続くステップであるサイトの設計を円滑に進めることができます。

サイトの設計

ecサイトの集客力は丁寧な設計を実施するかどうかにかかっています。どれほど良い商品やサービスを販売していても、サイトが使いやすくなっていなければ人気を獲得することは難しいでしょう。ecサイトの設計作業は以下に示す6つのプロセスで進められていきます。

  • コンテンツの設計
  • サイト構造の設計
  • ナビゲーションの設計
  • 画面の設計
  • デザインの選定
  • システムの設計

コンテンツの設計

コンテンツの設計とは、ecサイト内に作成するページの種類、および各ページに掲載する内容を決定する作業です。一般的なecサイトには以下に示す6つのコンテンツが含まれていなければなりません。

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

トップページ

ecサイトの入り口となるページです。おすすめの商品や新商品など、購買意欲を高める情報を掲載する必要があります。また、カテゴリページへのリンクも設置しましょう。

カテゴリページ

商品のカテゴリを分類するために設置するページです。販売している品目が非常に多い時に設置します。販売している商品が1つしかない場合、基本的に設置は不要です。

各商品ページ

販売している商品のデータを掲載したページです。商品の詳細な説明や価格、写真などを掲載する必要があります。また、関連する商品を合わせて表示したいなら、専用のバナーを用意する必要があるでしょう。加えて、ショッピングカートへのリンクも準備します。

ショッピングカート

ユーザーが購入したい商品を表示するページです。商品の送付先や決済情報の入力システムを準備しましょう。注文内容の最終確認と完了画面もこのページに含まれます。

問い合わせフォーム

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

ご利用マニュアル

決済の方法や発送に関する説明、およびキャンセルした場合の取り扱いなどに関して情報を掲載するページです。

サイト構造の設計

サイト内における各ページの繋がりを図表にすることでサイトの構造全体を把握する作業です。ecサイトに関しては多くの場合「階層型構造」で作成されます。この作業を行うことでサイトの階層数が明確になり、商品を購入するまでにどれほどのページ遷移が起こるかも把握できるでしょう。

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

ナビゲーションの設計

ナビゲーションとは、サイトを訪れたユーザーが閲覧したい商品を簡単に見つけられるようサポートするシステムのことです。ナビゲーションがしっかりと設計されていないと、ユーザーは希望する商品ページへなかなかたどり着くことができません。その結果、「使い勝手の悪いecサイト」という評判が出来上がってしまうでしょう。

ecサイトの代表的なナビゲーションといえば「サイト内検索機能」でしょう。一般的に「検索窓」と呼ばれるこのシステムは「ダイナミック・ナビゲーション」とも呼ばれ、商品名や型番などを入力することで簡単に閲覧したいアイテムを見つけ出すことができます。

ただし、検索機能のクオリティーは導入するソフトによって大きく左右されるため、よく選定する必要があるでしょう。Proboやポップファインド、AccelaBizSearchなどは、ecサイト向けの高い検索機能を持っているのでおすすめです。

画面の設計

ecサイトの画面上で、各コンテンツをどのように配置して表示させるかを決定する作業です。この過程は「ワイヤーフレーム」と呼ばれることもあります。ユーザーから見たサイトの印象に大きく影響するプロセスですから、慎重にコンテンツの位置決めを行っていく必要があるでしょう。

画面の設計を進める中で、それぞれのコンテンツが本当に必要か、予算の観点から導入が可能かといった点も明らかになります。デザイナーにとって、ワイヤーフレームはecサイトをソフトウェアで実装していく際の青写真となる部分ですから、リンクやバナー、ヘッダーやフッターの位置などに関しても細かく設定しておきましょう。

画面の設計作業は一般的なペイントソフトを使っても構いません。ただし、より精密なワイヤーフレームを制作したいのであれば、サイト制作の専用ソフトを活用しましょう。例えば、Adobe XDやCacooなどのソフトは、正確なワイヤーフレームの作成に大変適しているのでおすすめです。

デザインの選定

画面に表示させる各コンテンツのデザインやカラーを選定していきます。このデザイン次第で商品の見え方は大きく変わりますから、「ターゲットにとって魅力的なデザインになっているか」「企業イメージとマッチしているか」といった点を考慮しながら1つ1つのデザインを決定していきましょう。

アイデアを収集するうえで、WordPressなどのCMSで公開されているテンプレートを参考にするのは良い方法です。また、ターゲット層から人気を集めているさまざまなサイトを閲覧してみるのも良いでしょう。そうして魅力的なデザイン案が見つかったなら、それらをすべてリストアップして、エッセンスとなる部分を自社のecサイトに組み込んでみましょう。

システムの設計

これまでに決めたサイトのデザインや詳細をどのようなシステムで実装するか決定します。自社内の人材でecサイトを作成していくのであれば、担当者がWEBサイト制作に関してどれほどの知識と経験を有しているのか、細かくチェックしましょう。

「ウェブサイトを作ったことがある」という人でも、実際にHTMLやJapaScriptのソースを書けるわけではなく、ホームページビルダーなどのパッケージソフトで制作しただけということがあり得ます。ですから、実践的なスキルがどれほどなのかを確認することは不可欠です。

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

ecサイトのシステムが決まったなら、サイトを実装するためにレンタルするサーバーおよびサイトのドメインなども話し合いましょう。

サイトの作成

サイトの各コンテンツに関して詳細な設計が完了したら、それをレンタルしたサーバー上で実際に組み上げて実装していきます。CMSを活用して制作することもあれば、ecサイト制作専用に公開されているフリーソフトを利用してページを作っていくこともあるでしょう。

最近では、より簡単かつスピーディーにサイト制作ができるよう、法人向けにパッケージ化されたソフトも販売されています。サイトの作成作業では、最初から高度な複数の機能をコーディングして実装するのではなく、ベースとなるサイトを完成させて、そこへ1つずつ機能をプラスして積み上げていくというスタイルをおすすめします。

これにより、テストでエラーが発生した場合に「どこの工程でバグが生じたのか」という点がすぐに分かりますから、データの修正もしやすくなることでしょう。サイトで販売する商品情報を登録する際には、製品やサービスに関するデータが最新のものかどうか、よく確認しておきましょう。

動作確認

CMSなどを使ってサイトの制作が完了したら、動作確認を実施します。理論上は正しく機能するという確信があるとしても、動作確認をせずにecサイトを公開するということがあってはなりません。

ChromeやFireFox、Safariなど、異なるブラウザを使ってサイトへアクセスしてみましょう。その中で、すべてのページ画面がきちんと表示されるか、どこかのデザインが不明瞭になったり崩れたりしていないかといった点を確認します。

スマートフォン対応のサイトにするなら、各種端末によるテストを行う必要もあるでしょう。Android端末とiPhone端末でフォントに乱れがないか、商品の情報や画像が正しく表示されるかといった点も細かくチェックしていきます。

カートおよび決済画面は個人情報を取り扱う重要な部分ですから、エラーが生じないか入念にテストをしましょう。ecサイトが「セキュリティーに関して信頼性が低い」という評価をいったん受けてしまうと、そこからユーザーの信頼を取り戻すのは容易ではありません。

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

サイトオープン

企業内でのテストをクリアしたら、ecサイトをオープンすることになります。最初の1週間程度は、サイトそのものが予定通りに稼働するか、常にモニタリングする必要があるでしょう。

特に、サイトを自社内のチームで作成した場合、どれだけ入念に設計してテストをしたとしても、オープン当初にはエラーが起こるものです。ですから、1つ1つのエラーを丁寧に対処していくよう心がけましょう。

ecサイトの制作および開設作業を外注した場合、エラーへの対応はすべて委託業者が行ってくれます。ただし、ユーザーから寄せられる問い合わせは自社内で対応しなければならないということを覚えておきましょう。

ecサイトの運用が軌道に乗ってきたら、アクセス解析や利用者の口コミチェックなどを行って改善点を浮き彫りにしましょう。ユーザーの離脱が起こりやすいページはどこか、利用した人が不満に感じたのはどんな機能かといった点をチェックして、その都度改善していきます。

また、拡張すべき機能があるかという点も話し合いましょう。こうしたサイクルを続けることで、ecサイトとしての完成度は徐々に高まっていくのです。

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

ecサイトの設計段階では、プロジェクトメンバーからさまざまなアイデアが提案されることでしょう。とはいえ、あまりに複雑なサイト構成にしてしまうと、ユーザーからはあまり評価されないことがあります。ですから、設計の際には、以下に示す5つの注意点を銘記しておきましょう。

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

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

人気のあるecサイトはいずれも「ユーザー視点」を念頭に置いた設計を行っています。ですから、「企業側が何をアピールしたいか」ではなく、「ユーザー側が何を知りたいか」「ecサイトにどんな機能があったら良いと感じているか」といったニーズを常に満たすようサイトのデザインを進めていきましょう。

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

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

ecサイトの設計やデザインを考える時には、更新手続きがしやすい構成となるよう留意しましょう。ecサイトに限らず、どのサイトも運用していく中でいろいろな改善点が見つかるものです。

どれほど事前に検討を重ねたとしても、1回で理想的なサイトが完成するということはまずありません。また、ユーザーからの要望を受けて特定の機能を追加するということもあるでしょう。

さまざまな商品の販売を行うecサイトでは、新商品の情報を追加したり、販売が終了した商品の情報を削除したりということも頻繁に起こります。ですから、更新しやすいデザインになっていることはメリットが非常に多いのです。

大切なのは、各コンテンツの独立性を確保しておくことでしょう。サイト内のコンテンツがしっかりと区分けされていれば、何かのコンテンツを更新したために他のコンテンツでも微調整が必要となるということがまずおこりません。

そのため、更新作業は非常に短くて済みます。一方、複数のコンテンツが複雑に連動していると、少しの調整でも膨大な工数を要する作業になってしまうのです。

サイトの調整が難しいと、担当者が代わった時に更新に関わるトラブルが起こりやすくなります。ですから、特定の担当者にしか分からないようなシステムにしないというのは非常に重要です。

商品ページにこだわる

ecサイトを制作する際に起こり得るミスが「トップページの仕上がりにこだわる」というものです。会社の紹介を行うコーポレートサイトを開設するのであれば、顔となるトップページにこだわっても問題ありません。

一方、ecサイトでは、トップページではなく商品ページにこだわることがより重要となります。というのも、ユーザーがサイトを訪れている目的は「商品に関する情報」であり、サイトを運営している会社に関する情報ではないからです。

商品ページでは、製品の写真を見やすい位置に配置しましょう。また、価格を分かりやすく表示することも大切です。特に、配送料を含めた価格が一目でわかるようにすると、消費者からは「良心的なデザインのサイト」という良い評価を受けやすくなります。

また、カートへ入れてから決済までの画面遷移がスムーズであることも大切です。個人情報の入力などに時間がかかると、ユーザーとしてはだんだん面倒になってきて、「すでに個人情報を登録してある他のサイトで買い物をしよう」という思いになってしまうでしょう。ですから、決済に関しては可能な限りシンプルな構成をおすすめします。

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

ecサイトの設計は先述の通り幅広い分野が関係しています。ですから、作業のために十分時間を確保できるよう、余裕を持った工程表を作成することが大切です。時間に追われてしまうと、細部の確認が甘くなったり、ミスが発生したりするリスクは高まります。

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

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

ecサイトの制作をすべて外部の業者へ委託するという選択をする企業は珍しくありません。そのように外注をする場合、最初の段階から積極的にコミュニケーションを図り、こちら側の意向を伝えておくことが大切です。

「基本的にお任せ」というスタイルを取ってしまうと、ほぼ完成に近い状態まで報告を受けることなく進んでしまうということが起こり得ます。最終的な段階になって「まったく意図していたものと違う」ということになると、サイトの開設を遅らせるなどの重大なトラブルに繋がってしまうでしょう。

制作のコストが跳ね上がることも考えられます。ですから、ecサイトのコンセプトや絶対に必要な機能などを徹底的に話し合い、各工程で進捗や仕上がりを細かく確認するという作業が大切です。

まとめ

ecサイトは大きな収益を生み出す新たな販路として、国内外を問わず多くの企業から注目を浴びています。 とはいえ、ecサイトが人気を獲得するためには、サイトへ初めて訪れる人でも使いやすく、魅力的なデザインになっていなければなりません。これからますますecサイトの増加が見込まれる中で、ユニークな魅力を持つecサイトを生み出せるかどうかは大きなポイントとなってきます。

「WEBデザインに詳しい人材が社内にいない」「ecサイトに関して信頼できる相談相手を探している」という人は、ぜひ弊社が運営する「比較ビズ」をご覧ください。サイト内ではecサイトの制作に関連した興味深いコラムを閲覧できることに加えて、WEBサイトの制作に関して豊富な実績を持つ事業者の検索や見積もりの依頼も可能です。「どこから手を付けたらよいか分からない」という方もどうぞお気軽にお問い合わせください。

監修者の一言

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

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

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

 株式会社ラテラルリンク
代表取締役 岩井昌弘
監修者

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

ホームページ制作・デザインを一括見積もりで発注先を楽に探す
比較ビズへ掲載しませんか?

一括見積もりで発注先を探す