失敗しないECサイト制作で重要な設計作業｜注意点やワイヤーフレームのコツも解説

ECサイトを制作する際、本制作に入る前の設計がサイト運営の成否を分ける重要ポイントであることをご存知でしょうか。設計がブレてしまうと、サイトのデザインやシステム構築が理想どおりに行かないだけでなく、運用開始後のコンバージョン率にも悪影響を及ぼしかねません。

そこで今回は、ECサイト制作で特に重要な設計の工程についての基本知識を解説します。設計をする上での注意点はもちろん、実際のデザインの叩き台となるワイヤーフレーム制作のコツもご紹介しますので、成果につながるECサイトを作りたい方はどうぞお見逃しなく！

この記事を読んだらわかること

・ECサイトの基本設計
・ECサイトの設計で気をつけたい3つのポイント
・ECサイトの基本設計をまとめたワイヤーフレーム

目次【表示】

WEBコンサルタントのご紹介

弊社は、上場企業も含め50社以上のECサイト制作に携わってきました。
ECサイトは、一から構築すると莫大な費用がかかってしまいますが、弊社はWordPressを使用し、最小限に費用を抑えたECサイトの構築が得意です。ECサイトの制作で費用が気になるという方は、お気軽にご相談ください！

ZERO式ECサイト制作はこちら

ECサイトの基本設計

ECサイトの設計作業と言ってもそこにはいくつもの種類の設計があり、段階に応じてそれぞれの設計を進めていき、ようやく1つのサイトのアウトラインができていくのです。ECサイトの基本設計には、以下のような種類があります。

コンテンツ設計
サイト設計
導線設計
画面設計
デザイン設計
システム設計

それでは、それぞれの基本設計についてご説明していきます。

コンテンツ設計

コンテンツ設計とは、言ってみればECサイト内に必要な情報を整理する作業です。いかにユーザーにわかりやすく、なおかつ商材を魅力的に伝えられるかは、このコンテンツ設計によるところが非常に大きくなってきます。コンテンツ＝情報と言っても形状はさまざまで、キャッチコピー・テキストといった文章はもちろん画像やバナーも含むため、種類も分量もたいへん豊富です。

コンテンツ設計では、このECサイトにはどんな情報を掲載するべきなのか、的確に選出して整理することが重要となります。以下にどのようなコンテンツがあり、それらをどう分類・整理していくのかをご紹介します。

掲載したいコンテンツを洗い出す

ご自身が運営す予定のECサイトにどんなコンテンツを掲載するべきなのかをまずは洗い出していきましょう。その情報をどのページに載せるかは、次の工程で解説します。

ECサイトに掲載することが多いコンテンツ例
・新商品
・おすすめ商品
・商品詳細説明
・販売データ
・商品価格
・写真
・バナー
・お客様の声
・キャッチコピー
・名前入力欄
・メールアドレス入力欄
・電話番号入力欄
・お問い合わせ内容入力欄
・決済方法
・配送方法
・個人情報入力欄
・注文内容確認
・会社概要
・プライバシーポリシー
・スタッフ紹介

ざっくりお示ししましたが、サイトによっては必要なコンテンツが他にもあるでしょう。大切なのは、上記のようなコンテンツを同じ階層ごとに分類し、ユーザーが迷わず必要情報を入手して買物しやすく組み立てていくことです。

コンテンツを分類する

自社・自店のECサイトに必要なコンテンツを洗い出したら、次はどのようなページでサイトを構成すべきかイメージしながら、それらコンテンツを的確に分類する作業に入ります。分類例を次のようにご紹介します。

トップページ	商品ページ	商品カテゴリ
・新商品・おすすめ商品・写真・バナー	・写真・商品価格・バナー・販売データ・商品詳細説明・お客様の声	・新商品・おすすめ商品・アイテム別掲載・写真・バナー

お問い合わせページ	会社情報	ご利用ガイド
・名前入力欄・メールアドレス入力欄・電話番号入力欄・お問い合わせ内容入力欄・内容確認	・会社概要・プライバシーポリシー・スタッフ紹介	・決済方法・配送方法・返品方法

その他にも必要な要素として、カート機能コンテンツなどが挙げられます。

サイト設計

サイト設計は前段階で分類したコンテンツの全体図を見える化させる作業です。中でもサイト全体がどのような構造になっているのかを地図のような図表として示したものをサイトマップといいます。ECサイトの場合、トップページや商品カテゴリおよび各商品ページをもとに、情報が階層のようになった構造がほとんどです。サイト設計の注意点を以下に挙げておきましょう。

階層構造を意識して設計する

サイト設計とは、コンテンツの分類を図に起こすことです。ユーザーが商品情報を得たり買物したりしやすい導線をよくイメージし、トップページから商品カテゴリ、会社情報から商品情報などのように、自然な流れとなるような階層構造を意識したサイト設計が重要となります。また、ユーザー目線だけでなく、運営側が更新作業などの管理をするという点でも、整然とした構造設計をすることでたいへん楽になります。

なるべく階層は浅くする

階層構造は大切ですが、カテゴリをあまり細かく分類しすぎて階層を深くしてしまうと、ユーザーにとって使い勝手が悪いだけでなく、管理も煩雑となってしまいます。階層はわかりやすさを心がけつつも、できるだけ浅く設定しましょう。

導線設計

導線設計とは、ユーザーがどのようなルートで情報収集し購入に至るかを設計する作業です。どのページからどのページに移動し、最終的にどのページで購入を決めるのかといった道筋をユーザー目線で考える必要があります。

また、コンバージョン（商品購入）をどこに位置づけるのかも重要なポイントです。各ページ共有のリンクである”グローバルナビゲーション”に商品カテゴリを設置して誘導する方法や、サイドメニューに売れ筋やおすすめ商品などのバナーを設けて誘導するといったやり方もあります。

画面設計

画面設計とは、Webサイトの見た目のデザインのもとになる叩き台”ワイヤーフレーム”制作のことをいいます。ワイヤーフレームはECサイトに限らず、さまざまなホームページの設計に欠かせない設計図で、どのコンテンツをどこに配置するのかを図に表し、サイトの完成時の青写真とします。ワイヤーフレーム制作のポイントやコツは後で詳述しますが、ECサイト制作の成否を握る重要な工程となります。

デザイン設計

前述したワイヤーフレームをもとに、実際にユーザーの目に見えるECサイトをデザインしていく工程です。デザインは作り手の好みや押しつけではなく、ターゲットユーザー層との親和性が高いもの、さらに商品イメージに合うものを採用する必要があります。逆にどのような商品・企業イメージを持たれたいかというコンセプトを決める意味合いも持つ作業です。デザインツールを使いこなせる技術者を必要とする工程でもあり、デザイン設計のほかにデザイン制作と呼ぶ場合もあります。

システム設計

デザインとはあくまでユーザーの目に届く見た目の部分ですが、Webページのデザインは筆記具で描くわけではないため、これをサイト上に表示するためにはシステムという方法論が必要です。HTML・CSSなどに関するノウハウを持ったエンジニアが、このデザインにはどんなシステムをどのように構築すべきなのかを決定していきます。ECサイトでは特に買物の利便性や、引いてはコンバージョン率に関わる”ECカート”システムの構築が重要な要素となります。

参考：ショッピングカートのみ設置型ASPおすすめ比較｜ECサイト制作

売る商品やサイト内のコンテンツも重要な要素ですが、ネット上で販売していくことを考えたら、ECサイトの設計が何よりも重要になります。
いくら商品が良くてもサイト設計が曖昧では、効果がない場合もあるので注意してください。

ZERO式ECサイト制作はこちら

ECサイトの設計で気をつけたい3つのポイント

ECサイトの設計をする時には、特に気をつけたいポイントがあります。ここではECショップの売上を左右しかねない設計上の注意点を3つに分けてわかりやすく解説します。サイト設計の際には、ぜひここを意識してみてください。

設計の前に「コンセプト」「要件」「ペルソナ」をしっかり固める

正確に言えば設計前の工程ですが、公開予定のECサイトについて「コンセプト」「要件」「ペルソナ」を念入りに討議し固めましょう。この記事の冒頭に、設計がブレるとデザインやシステム構築にまで影響が及ぶとお伝えしましたが、そもそも上記の3要素が固まっていないと、設計自体がブレて先行きが危ぶまれます。

不特定多数の人に買ってもらおうとすると、誰の心にも響かないサイトができあがってしまうので要注意。誰に商品を買ってもらうのか、それに際してどのようなコンテンツを提供して訴求していくのかを明確にすることで、ユーザーは「自分のためのECサイトだ」と認識してくれるのです。

公開後の運用しやすさを考慮して設計する

ユーザー本位のECサイトであることは大前提ですが、運営側が管理・運用しやすいサイトも極めて重要です。例えばオウンドメディアの一環としてECサイトを開く場合には、オウンドメディア特有のブログで集客するため、ブログ記事の更新がしやすいWordPressやブログ機能を構築する必要があります。

商品の追加掲載や更新作業が頻繁になる予定であれば、スタッフ誰でもが操作しやすい商品ページ設計を心がけなくてはなりません。運用のしやすさが管理を行き届かせ、引いてはユーザーのためにもなるのです。

全スケジュールは明確にする

ECサイトは他のホームページと比較してかなり工数が多く、工期全体のスケジュールを綿密に決めておかないと、後々大幅に予定が狂って納期が遅れてしまうリスクがあります。設計はもちろん、その後のデザイン・構築といった工程それぞれにどのくらいの期間がかかるのか、誰がどこを担当するのかを明確にしておくことで、このリスクを軽減できます。

ECサイトの基本設計をまとめたワイヤーフレーム

ECサイト設計の重要工程の1つであるのが、先ほどもご紹介したワイヤーフレーム制作です。ここではワイヤーフレーム制作のコツと、ワイヤーフレーム作りに欠かせない構成要素をご紹介していきます。ECサイトの基本設計に不可欠な知識ばかりです。

ワイヤーフレームを作る6つのコツ

ワイヤーフレームを作る際には、ぜひ知っておきたいコツが6つありますので、ここでお伝えします。成果につながるECサイト作りの前提となる部分なので、ぜひ覚えておいてください。

誰でも閲覧できるようにする

ワイヤーフレームの作成ツールは、関係者全員がいつでも閲覧できるような共有機能のあるものを選ぶことを強くお勧めします。誰がいつ間違いに気づいても修正できる、複数人で同時に修正できるなど、ワイヤーフレーム制作の効率化と正確性の強化に役立ちます。

デザイン要素を強く出さない

ワイヤーフレームの制作段階では、最終デザインを意識した配色や装飾などをあまり使用しない方が賢明です。ワイヤーフレーム作りとは、コンテンツの配置やどんな要素を入れるかといった点を決める作業なので、余計な色や装飾を使い出すと、いつのまにかそちらに気を取られて重要な部分を見落とす可能性が出てきます。デザインは『大体こんな感じ』という程度にわかれば十分です。

サイト全体の幅を決める

ワイヤーフレームの段階でサイトの横幅を決定しておくと、実際のデザイン作業に移った時に修正が少なくて済みます。ゆったりとした横幅サイズを取るのが近頃のトレンドですが、いずれにしてもワイヤーフレーム制作時にここまで決めておけば、デザイナーも作業しやすくなるのでお勧めです。

サイトマップを元にワイヤーフレームを制作する

ワイヤーフレームは、サイト設計で決定したサイトマップをもとにして制作していくことが大事です。階層構造の最上位となる大きなメニュー（グローバルナビゲーション）や同一カテゴリ内のメニュー（ローカルナビゲーション）を設定しておき、それを基準にしてコンテンツの配置をしていくと、わかりやすい導線のサイトに仕上がります。

色の濃淡で優先順位をつける

ワイヤーフレームでは過度な色使いや装飾は控えなければならないと先ほど解説しましたが、コピーやボタンなどで優先性の高いものをデザイナーに伝えるためには、色を差別化しておくことが重要となります。さまざまな色を使うというのではなく、濃淡で表現すると重要な度合いがわかりやすくなります。

カラムの種類を決める

サイトのレイアウトで重要な作業の1つがカラム決めです。カラムとは”列”のことで、ECサイトで使用されるカラムには、1カラム・2カラムor3カラム・タイルカラムの3タイプが挙げられます。ここでそれぞれのカラムのメリット・デメリットとより詳しく理解できる参考サイトをご紹介します。

・1カラムのメリットとデメリット
太いボーダー上の配列で、サイトの横幅をゆったりと大きく使うのが1カラムです。ユーザーに与えるインパクトが強いこと、読み進めやすいことなどがメリットである一方、使用する画像やコンテンツが前面に出るためそれぞれの素材の質が問われることやスペースを持て余すことはデメリットとなります。具体的な実例は以下のサイトをご覧ください。
https://www.apple.com/jp/

・2カラムor3カラムのメリットとデメリット
2カラムはメイン部分の他にサイドメニューを設けたデザイン、3カラムは中央にメインメニューを配しその左右にサイドメニューを設置するデザインです。2カラムも3カラムも多くのコンテンツを一度に見せられ、ユーザーが見つけたい情報を素早く見つけられることがメリットです。デメリットとしては見た目がごちゃごちゃすることとスマホデザインに反映させにくい点などが挙げられます。3カラムで構成されたECサイトの実例を挙げておきます。
https://zozo.jp/

・タイルカラムのメリットとデメリット
タイルカラムとはコンテンツをタイルのように並べていくレイアウトデザインです。1ページに載せられるコンテンツを多くできる点、スマホ対応させやすい点などがメリットですが、1つのコンテンツに含められる情報量が少ない点や全てのコンテンツが同列的に読まれてしまい優先性を表現しにくい点はデメリットと言えます。参考に、トップページがタイルカラム、商品カテゴリページは2カラムデザインのサイトを以下に挙げておきます。
https://www.amazon.co.jp/