ECサイトの制作は、必要なページ構成(サイトマップ)を理解してテンプレートの有効活用がおすすめです。ECサイトの構築方法には、スクラッチ型、ECパッケージ利用、ASP/Saas/クラウド型のシステム等、様々ありますが、どの方法を選んだ場合でもECサイトをオープンさせるためには、ECプラットフォーム上でのサイト制作が必要です。
ECサイトにおける商品販売は、購入者が実際に手にとって商品が確認できない為、ブランドイメージや世界観、イメージや素材感などが伝わるようなサイトを制作する必要があり、魅力的な商品やコンテンツを最大限に活かすためのサイトデザインやユーザーインタフェースをしっかりと考えることが重要です。
本記事では、ECプラットフォーム上に構築するTOPページや各種テンプレートページの制作方法について解説し、ECサイトをオープンさせる上で必要な工程(手順)と、クラウド型ASP利用における制作費用の概算をお伝え致します。
ECサイトの構築方法やカートシステムの比較検討が必要な場合は以下記事をご参考ください。
ECカートシステムの比較・選定ポイント【主要21サービス一覧表付】
ECサイトの制作に必要なページ構成(サイトマップ)
ECサイトをオープンさせる上で用意が必要なページ構成は、ある程度決まっています。ECサイトを設計する際に使われる構成図(=サイトマップ)上でこれを表すと、一般的なECサイトのサイトマップは以下のようになります。
TOPページ
├商品詳細ページ
├商品一覧ページ(カテゴリ一覧、検索結果一覧など)
├カートページ等の個人情報入力ページ
├ショッピングカートページ
├会員登録ページ
├問合せフォーム
└マイページ
├フリーページ
├会社概要ページ
├特定商取引法の表記ページ
├プライバシーポリシーページ
├ご利用ガイドページ(購入ガイド)
└お知らせページ
└ランディングページ
このサイトマップをベースに、自社ECの運用に必要なページを洗い出し、必要なテンプレートを用意していきましょう。
TOPページ
ECサイトの顔となるTOPページは当然ながら重要な役割を持ちます。自社ECのコンセプトやブランドイメージを反映させ、サイト閲覧者に対して世界観に導くようにデザインすることが重要です。ファーストビューの設計やTOPページにどのようなコンテンツを表示させるのか、しっかりと作り込んでいきます。
商品詳細ページテンプレート
商品詳細ページは購入に直結するページでもあり、考え方によってはTOPページよりも重要な役割を担っています。カートに入れるボタンやオプション選択肢等の操作系ボタン類のユーザビリティについて十分に考慮し、ボタンデザインにはブランドカラーを加えることで、オリジナル感を演出することが可能です。商品価格や送料などの金額に関わる記載や、お届け予定日などの購入時に必ず確認してもらいたい事項を、どのように配置するかの設計も必要です。アイコン機能なども活用することで視認性が向上します。
参考)標準のテンプレート(左図)と、同一のECプラットフォーム利用にて「カートに入れるボタン」にブランドカラーを反映させた赤福オンラインショップ様(右図)の事例を比較
これらを設計したものをテンプレートとして用意します。商品のジャンルやカテゴリによって見せ方を変えたい場合は、複数のテンプレートを用意しましょう。
商品一覧ページテンプレート(カテゴリ、検索結果など)
商品一覧ページとは、カテゴリページや商品検索を行った際に表示される商品の一覧ページが該当します。このような商品一覧系のページでは、表示形式(サムネイル型/リスト型)や並び順の切替え(新着順/おすすめ順/商品価格の高いor安い順)の仕様や、リード文やバナー設置可能エリアの仕様など、ECプラットフォームの仕様を理解した上でテンプレート化していく必要があります。アイコン表示、ボタンデザインで工夫し、商品をカートに次々に投入できる機能や、まとめてお気に入り登録できる機能、在庫切れの商品の表示優先度を自動的に下げる機能などがあれば、積極的に活用していきましょう。
カートページ等の個人情報入力ページ用のレイアウト
カートページ、会員登録ページや問合せフォーム等、ECサイト利用者が情報操作を行う各種ページや、マイページにログインする画面やログイン後のマイページ画面では、情報の入力や閲覧に集中させるため、サイドメニューが無い1カラムレイアウトが最近の主流です。ヘッダーもフッターのコンテンツも極力シンプルにし、情報入力操作中に他のページへ移動させない工夫も重要です。レイアウト制作中は、実際に商品をカートに入れて注文フローや画面遷移といったユーザー導線を確認しながら、ユーザビリティを第一に作成していきましょう。
フリーページ用テンプレート
ECサイトを運営させる上で、以下のページが必要になってきます。これらのページのレイアウトは、商品詳細ページや商品一覧用のテンプレートを流用することで運用可能な場合があります。
・会社概要ページ
・特定商取引法の表記ページ
・プライバシーポリシーページ
・ご利用ガイドページ
・お知らせページ
ランディングページ用テンプレート
ランディングページ(LP)とは、ECサイトにおける商品購入や会員獲得等のコンバージョンを獲得することを目的としたページです。コンテンツを最大限に生かすためのヘッダーやフッターを極力シンプルにした専用のレイアウトが一般的です。カートページ等の個人情報入力ページ用として用意したいレイアウトがこれに近い為、うまく活用できる可能性もあります。
ECサイトの制作手順
このようなECサイトの運用に必要なページやテンプレートを用意するにあたり、作成手順を解説します。社内にて内製できるリソースが不足している場合や、しっかりと作り込みたい場合は、協力会社に支援を受けることを検討する必要があるため、費用感もお伝えします。
事前準備として、利用するECプラットフォームに備わっている機能や仕様を理解し、制作事例や成功実績もできるだけ確認しておきましょう。ASP/Saas/クラウド型のECプラットフォームを利用するならば、用意されているテンプレートをベースに進めることで早く安価にサイト制作することが可能です。
1.ワイヤーフレーム作成
ワイヤーフレームとは、「サイトの設計図」です。デザインを作成する前工程として、ECサイトの完成イメージを線と枠で描いたモノクロのラフ案を作成します。ワイヤーフレーム上で、必要なコンテンツや操作ボタンをユーザビリティーを考慮しながら配置し、レイアウトを定めていきます。
ワイヤーフレームの作成は、ひと昔前まではPC版から着手するのが一般的でしたが、既に認識されている通りECサイトの利用デバイスはスマートフォンが主流になっているため、モバイル版(スマートフォン版)を中心に設計する、モバイルファーストの考え方が重要です。表示領域の異なる各デバイスによって、表示させる情報量を最適化させるといった考え方も一部あるかもしれませんが、どのデバイスでアクセスした際にも目的の情報に辿り着けるような設計していきます。
ワイヤーフレームの作成ツールにはCacoo、Fireworks、PowerPoint、Excel、Word等があります。
特にCacoo(カクー)は、ワイヤーフレームを作成しやすいユーザーインターフェースで、クラウド上で図の作成や共有ができるため、社外の担当者を含め複数人での閲覧や作業にも適しています。
2.デザイン案の作成
ワイヤーフレームが完成したら、デザイン案の作成に取り掛かります。内製、外部委託を問わずデザイナーに依頼する際には、自社ECのカラーや特徴、コンセプトやユーザー層をよく理解してもらい、デザイン案は何パターン用意してもらえるかも確認しておきましょう。ロゴやサイトデザインに利用したい商品画像などの素材が準備できている場合、このタイミングで提供しましょう。
3.コーディング
デザインが確定したらコーディングに入ります。1つのHTMLとCSSの調整によりマルチデバイス向けのページ構築に対応したレスポンシブコーディングを採用することで、制作コストはもちろん、その後の管理コストの削減にも繋がります。ECサイトのコーディング時には、サンプルとなる商品情報やカテゴリ情報を登録しておき、動作確認をしながら進めるとスムーズです。
4.商品情報/コンテンツの登録
コーディングの完了後、あるいはコーディングと同時並行で商品登録やカテゴリ登録を行います。多くのECプラットフォームではCSV一括登録/更新機能が用意されているため、最初の数商品は管理画面上で登録を行い、ある程度のパターンができたらフォーマット化し、CSV活用で一括登録して完成へと仕上げていきます。
以下記事にてECサイトデザインの参考事例を商材別でまとめていますので併せてご参考ください。
ECサイトデザイン事例43選|売れるECサイトのデザインとは?
また制作会社を選定する際のポイントについても以下記事で解説していますのであわせてご参考いただけますと幸いです。
ECサイト制作会社の選定ポイント
制作費用
以上の制作工程を外部委託する場合の費用感をまとめました。
制作費用相場(ディレクション費用を含む) | ワイヤーフレーム作成 | デザイン・コーディング |
---|---|---|
TOPページ | 5~20万円 | 15~40万円 |
商品詳細ページテンプレート(1種類) | 2~10万円 | 5~20万円 |
商品一覧ページテンプレート(1種類) | 2~10万円 | 5~15万円 |
カートページ等のSSLページ(1種類) | 5~10万円 | 20~30万円 |
フリーページ(会社概要ページの基本ページ) | 5~20万円 | 10~20万円 |
ランディングページ(1ページ) | 5~20万円 | 20~40万円 |
デザインとコーディングは、例えば協力会社にデザインを依頼し社内でコーディングする、という方法もありますが、デザイナーの意図をページにしっかりとに反映させるためには一貫して任せる方が上手くいきやすい為、まとめて記載しております。
ASP/Saas/クラウド型ECプラットフォームの場合、商品詳細ページテンプレートや商品一覧ページテンプレートや、カートページ、会員登録ページ、マイページ、問い合わせフォーム等のSSLページは、利用するECプラットフォームの仕様により制約が生じる場合もありますが、予めテンプレートが用意されている場合は低価格に抑えることも可能です。
また、ECサイトをオープンさせるためには、各種ページ制作の他にもデータ登録が必要です。自社で実施出来ない場合は、外部の協力会社に委託することになりますが、その場合の概算イメージもお伝えします。商品画像や説明文などのデータがすべて揃った状態での登録代行費用の相場は以下で、登録する点数や項目や内容によって費用は前後します。
商品登録代行 | 10万円~ |
商品カテゴリ登録代行 | 5万円~ |
スタートアップテンプレートの活用
クラウド型ECサイト構築ASPのaishipシリーズでは、簡単にECサイトを構築することができるスタートアップテンプレートを提供しております。
EC運営に必要な機能を取り揃えたスタートアップテンプレートでは、ロゴの差し替え、画像差し替え、商品登録、カテゴリ登録、販売者情報の変更、決済設定、送料設定、デザインテイストを調整等これらを管理画面から編集するだけで簡単にオープンができます。
HTML/CSS/JavaScript編集にも対応しており、ブランドイメージや世界観など、訴求したいイメージをそのままサイトに反映可能な為、様々な構築事例サイトのベースにもなっております。詳しくはこちらのページをご確認ください。
テンプレート構築パックの利用
また、クラウド型ECサイト構築ASPのaishipシリーズでは、安価にECサイトの構築が可能なテンプレート構築パックもご用意しております。売れるECサイトに必要な要素を厳選し、パッケージ化することでスピーディなサイト制作を実現しております。詳しくはこちらのページをご確認ください。
WordPress制作
ECサイトにおいて、SEO目的やコンテンツマーケティングを実施する上でWordpressの活用事例が増えております。WordpressはECプラットフォームとは別システムになるため、外部委託する場合は別途制作費用が発生しますが、広く知られているプラットフォームで扱い慣れている人も多く、これまで運用していた場合、移管することも可能です。
ECサイト連携させて運営させている事例をこちらの記事にて公開しておりますので、Wordpressの活用を検討されている場合はあわせてご確認ください。
まとめ
いかがでしたでしょうか。ECサイトの新規構築やリニューアルは、頻繁に実施するようなものでもありませんが、ECサイトの制作が必要なタイミングで本記事を参考にして頂き、できるだけ手間やコストがかからないよう、計画立てて実施頂けますと幸いです。
またECサイトの構築・リニューアルをご検討の際は以下の記事もご参考いただけますと幸いです。
ECサイト構築のポイント|立ち上げの方法・費用・手順・成功事例を解説
ECサイトリニューアル成功のポイント|売上40%増の成功事例から手順・費用まで解説