ECサイトを設計する流れを簡潔に紹介！事前に準備することも解説

ECサイトを設計するにあたって、まずは設計を実施する前に定義やコンセプトを決めることが大切です。コンセプトが決まれば、ECサイトに必要なものが自然と明確になります。さらに、市場やメインターゲットを決めると、企業側が購入してほしいと考えるユーザーに対して刺さるサイト設計ができるようになります。また、具体的な数値目標を設定しておくと、設計したECサイトのフィードバックを行う際に、分かりやすい指標となるでしょう。

ここでは、ECサイトを設計していくにあたって、どのような手順で進めていけばよいかを紹介します。スムーズに設計を進めるためには、事前に手順を把握して計画を立てることが大切です。

手順1：コンテンツ設計

まずは、コンテンツ設計を行っていきます。この手順では、ECサイトに必要な情報をリストアップしていく作業が発生します。サイトに必要となる主なコンテンツは以下の通りです。

コンテンツとは、サイト内における各ページや機能がまとまった情報を指しており、商材やターゲットに対して、どういうストーリーで購入に至ってもらうかを考えて設計する必要があります。例えば、カートシステムはECの土台ですが、ほかにLPを用意したほうがよい商材なのか、記事や動画など紹介するデータとしてどのようなものが必要なのかを検討する必要があるでしょう。

手順2：サイト構造設計

次に、サイト内のページ同士のつながりや階層を構築する作業を行っていきます。構造を設計することでコンテンツ全体が可視化でき、完成後のサイトをイメージしやすくなるでしょう。サイトにアクセスしたユーザーが、どの階層ページにいるか分かるよう、パンくずリストを設定するのも一つの手段です。コンテンツ設計に対して、どういう構造がよいのか、どこに文章や画像などのボリュームを持たせたり、機能的なものを配置したりするのかを検討しましょう。

例えば、ファッションで男性女性の両方への商材であれば、性別ごとの打ち出しやページの構造をそれぞれ検討する必要があったり、性別に関係ない場合は目玉としてジャンル（カテゴリ）の打ち出しをするための構造を検討したりする必要があります。

手順3：ナビゲーション設計

ナビゲーションとは、サイトにアクセスしたユーザーを購買ページまで誘導するための設計です。代表的なナビゲーションは6つあります。

ナビゲーションが分かりにくかったり不足していたりすると、離脱率が上がってしまいます。そのため、コンテンツ内容や構造に合わせ、ストーリーに沿ったナビゲーションが明確になっているかという点も確認が必要です。ECのシステムで実現ができる機能、おすすめやランキング、セール表示などを確認しておく必要があるでしょう。

手順4：画面設計（ワイヤーフレーム）

ワイヤーフレームとは、Webサイト制作で一番初めに作成されるサイト画面です。サイトマップの作成・トップページの構成決定・下層ページの構成決定の順で行われるのが一般的で、ワイヤーフレームは、UI/UXの参考にもなります。ECのシステムで実現ができる機能、おすすめやランキングなどや、セール表示などを確認しておく必要があります。 また、それぞれのデバイスでどのように閲覧するのかを想像しながら、情報の表示優先度やサイズを検討して進める必要があり、デバイスによって表示されないものや、順番が大きく変わるのは避けた設計を行うことが大切です。

手順5：デザイン制作

デザイン制作では、ワイヤーフレームにもとづいてECサイトを制作していきます。パソコンからだけではなく、スマートフォンやタブレットからも閲覧することを想定してデザインを作成する必要があります。幅広い層のユーザーが使いやすいよう、シンプルで分かりやすいデザインを意識することが大切です。

手順6：システム設計

システム設計では、決定したサイトのデザインやコンテンツなどをどのようなシステムで実装するか決めていきます。構築は、ECパッケージやサービスで使われている言語をベースに、画面はHTMLやCSSなどを用いて実装していきます。ECサイトの構築が完了して終わりではなく、運用を想定して問題なく機能するか必ずチェックすることが大切です。

ここでは、効果的なECサイトを設計するためのポイントを3つ紹介します。

ユーザー目線で設計する

ECサイトを設計する際は、企業側のアピール内容を盛り込むだけではなく、ユーザーの知りたい情報を載せるよう意識しましょう。購入を促すためにも、ユーザーにとってどのような情報があると便利かを考えることが重要です。またシンプルで使いやすいデザインや設計をベースに、検索のしやすさやカテゴリーのわかりやすさを意識して、商品を探しやすくすることも、多くのユーザーに受け入れてもらいやすいでしょう。

商品ページの見やすさを意識する

ECサイトは商品を購入してもらうことが目的のため、商品ページの見やすさを意識しましょう。写真や配送料含めた価格が分かりやすく表示されていると、ユーザーの不安や疑問が解消されやすいといえます。使用感やレビューなども盛り込むと、購入を検討しているユーザーが、具体的なイメージをしやすいでしょう。

更新や調整がしやすい設計にする

ECサイトでは、ユーザーからの意見を反映させて、機能を追加させたり商品を追加したりする場合があるため、更新や調整のしやすい設計にしておくと、あとから変更が発生した際もスムーズに進められます。また、各コンテンツの独立性を確保しておくと、一つの機能に不具合が発生してもトラブルが広がりません。メンテナンスと同時にアクセス解析を導入すると、よりよいコンテンツ設計に役立つでしょう。

理想のECサイトを設計するためには、事前に流れや手順を把握しておくことが大切です。設計は、一般的にコンテンツ設計・サイト構造設計・ナビゲーション設計・画面設計・デザイン制作・システム設計と進めていきます。事前に設計に何が必要かを確認し、一つひとつの手順をスムーズに進められるようにしましょう。

株式会社デパートでは、調査から企画、分析、Webサイト構築など、すべての設計をデザインと定義してサポートを行っています。ECサイトの設計から運用、運営まで支援が可能なため、ECサイト設計にお悩みの方は、お気軽にご相談ください。