7.制作①調査

目次

調査をする目的

調査をする目的は主に以下の4つです。

・掲載するコンテンツの候補を洗い出すため

・業界と販売する商品、またはサービス情報を把握するため

・競合のトラフィックやアクセス状況を知るため

・改善や提案できることがないか確認するため

まず調査の対象となるのは、これから制作をするECサイトと同じジャンルの商材を扱っている競合・同業サイトです。

これから制作するECサイトがリニューアルの場合は、現在のサイトも調査し、リニューアルでなくてもコーポレートサイトや採用サイトもあれば調査対象とします。

現在のサイトのトラフィックやアクセス状況、SNSやMEOの状況を把握して改善箇所がないかを確認するために自社サイトも調査を行います。

同業競合のサイトに掲載されているコンテンツ・レイアウト・アクセス状況の確認

「制作②掲載するコンテンツの整理」でどのような作業が必要かについては追ってお伝えしますが、これから作るECサイトのTOPページに掲載するコンテンツ候補を挙げていくために、同業競合のサイトに掲載されているコンテンツの確認を行います。

また、レイアウトの確認も併せて行います。

レイアウトに共通点があればユーザーが慣れ親しんでいる可能性もあると考えることができ、レイアウトも同じようにすることでインタラクションコストを上げにくいと仮説を立てることもできます。

しょうこ

例えば食料品や日用品を取り扱うネットスーパーでのサイトはパソコンで見ると左にサイドバーがあるサイトが多く、Shopifyでネットスーパーを作る場合は左にサイドバーをつけた方が利用者のインタラクションコストを上げにくいと仮説を立てることができます。

ちなみに、扱う商材や販売する商材のターゲットによって掲載するコンテンツやレイアウトを考える必要があるECサイトには、「型」がありません。

コンテンツをこのような順番で掲載すれば良いという型がある訳ではないので、案件ごとに扱う商材の同業競合サイトがどのようなコンテンツを掲載しているか、どのようなレイアウトで作られているかを確認していく必要があります。

コンテンツやレイアウトだけではなく、同業競合のサイトのアクセス状況についても確認をしておきましょう。

グーグルアナリティクスを使うと詳しいアクセス状況を確認することができますが、グーグルアナリティクスはアカウント情報がわからなければサイトのアクセス状況を確認することができません。

Similarweb(シミラーウェブ)というツールで外部からサイトのアクセス状況の確認ができますので、Similarwebを使って同業競合のサイトのアクセス状況について確認しましょう。

使用するツール

シミラーウェブ:https://www.similarweb.com/ja/

シミラーウェブを利用する場合はメールアドレスでの登録が必要となります。有料版がありますが、無料版で問題ありません。

シミラーウェブで確認する項目

シミラーウェブは新規の案件では競合・同業サイトの流入の傾向を把握する目的で使用し、リニューアルの案件では現在のサイトの改善点がないか把握するために使用します。

リニューアルの案件ではよく使用しますが、新規の案件では情報量が多い場合使用しません。(新規の案件では、使用しない案件が多いです!)

シミラーウェブでは、主にサイトパフォーマンスと利用者の分布を確認します。

サイトパフォーマンスでは以下の項目を確認します。

  • 合計訪問者数
  • デバイス分布(パソコンからのアクセスとモバイルからのアクセスの割合)
  • マーケティングチャネル
  • 月間セッション数
  • 1訪問あたりのPV
  • 滞在時間
  • 直帰率
  • 訪問者数の推移
  • 地域
  • 上位のオーガニック検索キーワード
  • リファラル
  • 流出トラフィック
  • 流出広告
  • ソーシャルトラフィック

特に、リニューアルの案件では直帰率が高くないかは確認が必要です。

直帰率は他のページに移動せずに、そのサイトから離れてしまったユーザーの割合です。

高い場合、読み込み速度が遅い、ユーザーが知りたいコンテンツが掲載されていない、出稿している広告キーワードがあっていない、モバイル対応されていないなどの原因が考えられます。

原因を特定して、リニューアル時に改善を行います。

しょうこ

ちなみに、読み込み速度が遅い場合はリニューアル後も遅くならないように読み込むフォントの種類を控え(2種類までが理想)、コンテンツが不十分な場合はリニューアル前と同じコンテンツとはせずにユーザーが知りたい情報・疑問に思う情報は何かを調べてコンテンツに掲載します。

※画像を圧縮することも読み込み速度を下げることにつながりますが、圧縮することで画質も荒くなりやすいためECサイトでは画像を圧縮することはあまり推奨できません。

(トラフィックとエンゲージメント例)

(マーケティングチャネル例)

各項目の意味

【ダイレクト】

URLを直打ちしてアクセスされたトラフィックのこと。

ブックマークからのアクセスや、ブラウザ外のURLをクリックした場合もダイレクトに含まれます。

【メール】

GmailやYahoo!メールなどWEBブラウザで開くことのできるメール内に掲載されているURLをクリックしてアクセスされたトラフィックのこと。

※ブラウザではなくOutlookのようなデスクトップメールアプリからのアクセスについては、メールではなくダイレクトにカウントされます。

【リファラル】

オウンドメディアやブログのような別サイトに掲載されたURLを経由(被リンク)してアクセスされたトラフィックのこと。

【ソーシャルメディア】

FacebookやX、Instagram、YouTubeなどのSNSからのトラフィックのこと。

※モバイル端末でSNSアプリからブラウザを立ち上げてアクセスされた場合についてはダイレクトにカウントされます。

【オーガニック検索】

検索エンジンからのトラフィックのこと。「広告」、「スポンサー」と書かれている広告のリンクや、ディスプレイ広告は含まれません。

【有料検索】(※2025年6月、「有料」という表記に変わっていました!)

Google、Bing、Yahooなどの検索エンジン上で表示される検索広告をクリックして訪問したユーザーの割合のこと。
※検索広告とは、GoogleやYahooなどの検索結果ページの上部や下部に表示されるテキスト広告のことです。

【ディスプレイ広告】

Similarwebが検知しているアドネットワークを経由の上、ディスプレイ広告や動画広告を経由したトラフィックのこと。
※ディスプレイ広告とは、Webサイトやアプリのバナー・画像・動画として表示される広告のことです。

(エンゲージング例)

(地域例)

利用者層の分布では、性別と年齢の分布を確認します。

しょうこ

新規の案件では、主に競合・同業サイトがどのようなところから流入をさせているのか傾向を調べるために活用します。
例えば競合がSNSからの流入が多い場合、これから作るサイトも公開後にSNS運用に力を入れるとSNSから流入が多くなる可能性があると仮説を立てることができます。
他社の流入傾向がわかることで他者が取り組んでいる集客方法を取り入れた際に同じように流入が増える可能性が高いので、ディレクターに提案をします。

(例)
・A8ネットという記載があり、結構な数の流入がある
→aspサービスプロバイダを使って他社サイトに流入があることをディレクターに伝える

・SNSからの流入が多い
→SNS運用もされることを提案

業界と販売する商品またはサービスの把握

これから制作する商品や業界についての知識がある程度ないと、ビジュアルを作ることもサイト設計をすることも難しくなってしまう可能性があります。

実際にECサイトのデザイン案件を受けるようになると、普段全く自分が利用しないようなジャンルの商材に関わることが度々あります。
あまり関わることのない商材の場合専門用語がわからなかったり、ユーザーがその商材を買うに当たって知りたい情報を把握するのも難しかったりします。

その分、自分にとって馴染みのある商材のECサイト制作と比較すると、ビジュアルを作るのも情報設計するのも難しくなっていきます。
また、こういった情報があったらより安心してお買い物ができるだろうという情報を見落としてしまう可能性もあります。

公開後にアクセスする人が買い物しやすいサイトを作るためにも、情報収集を必ず行うようにしましょう。

情報収集する方法としては、似た商材やサービスを試す、本や雑誌を読む、店頭で配布されているリーフレットから情報を得る、検索する、同業競合サイトに掲載されている情報を確認するなどさまざまです。

お金はかかりますが、似た商材をECサイトで買ってみるのはおすすめです。
ユーザーとなった自分がとった導線やそのサイト内でどういう情報を探していたのかがわかると、これから制作するサイト制作に活かせることもあります。

ホームページ(コーポレートサイト)の確認

実店舗があるクライアントの場合は、実店舗のサイトやコーポレートサイトがある場合があります。

何かサイトがあるような場合は、使用しているフォントやトンマナ、掲載している情報を確認しておきましょう。

これから作るECサイトに活かすことができる情報が見つかる可能性もあります。

しょうこ

フォントやトンマナを合わすケースも多いので、何か他にサイトがある場合はデザインも含めて確認をしておきましょう。

SNS・MEOの現状の把握

SNSの現状の把握

クライアントがXやInstagramといったSNSを運用している場合は、SNSの運用状況も確認しておきましょう。

リニューアルの場合は現在のサイトにSNSからの流入がどのくらいあるのか調べることもできるため、SNSからの流入が何割程度なのかチェックもします。

クライアントの中にはSNSからECサイトに流入してくると期待する方もいますが、SNSの運用方法が誤っていればサイトへの流入はあまり期待できません。

例えば、Instagramの運用を頑張っているもののハッシュタグがついていない、またはつけているハッシュタグが不適切といったことが原因でSNSからのアクセスが少ないといったケースも多々あります。

しょうこ

流入の割合以外に現在の運用方法に誤りがないかも確認し、改善の余地がある部分については提案してみるのもおすすめです。

MEOの現状の把握

また、実店舗があるようなサイトの場合はMEOもチェックするようにしましょう。

MEOでは掲載しているURLがリンク切れになっているということもありますので、公開時やリニューアル時に改善できそうな箇所がないかも確認してみてください。

ちなみにこれらはサイトのデザインにおいて何か影響を与える部分ではありませんし、かつ集客の部分に関することなのでデザイナーが本来の仕事で関わる部分でもありませんが、何か気づきがあったらディレクターに話を持ちかけてみましょう。

デザイン以外でもクライアントの目的達成に向けた提案ができるデザイナーは重宝されます。
他の方に紹介をしてもらえたり、次の案件もご相談いただけたりするきっかけにもなります◎

ECサイトのリニューアルの案件時に追加で行うこと

ここまでの内容は新しくECサイトを立ち上げる場合もリニューアルの場合も行いますが、以下の内容はECサイトのリニューアルの案件対応時に追加で行う内容です。

現在のECサイトのアクセス状況の確認

リニューアルでは、現在のECサイトのアクセス状況も確認しておきましょう。

シミラーウェブを使ってウェブサイトパフォーマンスと利用者層を確認しておきます。

アクセス数が少なくサイトのアクセス状況が確認できない場合もありますが、そのような場合は致し方ないので現在のアクセス状況の確認はせずに他の項目の確認に進みます。

シミラーウェブで確認した際に直帰率が高い場合は、ユーザーが知りたいコンテンツが掲載されていなかったりページの表示速度が遅かったりと何か直帰率が高くなっている原因があることが考えられます。

どこが原因かを確認し、これから制作するECサイトでは直帰率が低くならないように改善していく必要があります。

しょうこ

Googleアナリティクスを導入している場合はより詳しい情報を確認することができますが、細かい状況まで確認しなくても制作はできます◎
シミラーウェブでデータを見ることができない場合は、現在のサイトの利用者層はどのような層が多いか、どこからのアクセスが多いかの2点を確認してみましょう!

現在のサイトのサイトマップの確認

リニューアルの場合は、現在のサイトのサイトマップを確認しておきましょう。

現在のサイトと同じ構成でShopifyで作り直す案件はそれほど多くはなく、大半がお買い物がしやすいようにサイトマップの見直しも行います。

サイトマップは目視で確認するのみだと整理しにくいような複雑なケースもあるので、Figmaで制作するのがおすすめです。

しょうこ

以下の図は小さなサイトの簡易的なサイトマップの例ですが、サイトマップの制作では内部リンクと外部リンクを色分けしておくとわかりやすいです◎
もちろんリンク切れがある場合は、リンク切れとわかるようにしておきましょう!

(サイトマップ例)

※緑は内部リンク、紫は外部リンクです。

現在のサイトの公開日、更新頻度の確認

現在のサイトがいつ公開されたのか、また更新頻度については「Wayback Machine」というサイトを使用すると確認することができます。

使用するツール

「Wayback machine」に現状のサイトのURLを入力するとカレンダーが表示され、カレンダーの中に丸がついている箇所があります。

丸がついている箇所はサイトの更新が行われた日で、丸にカーソルを合わせると更新された時間が表示されます。

また原因は不明ですが、中には更新を行っていても丸がついていない場合もあります。

丸が多ければ多いほど、更新頻度が高いサイトと考えることができます。

しょうこ

現在のサイトで更新頻度が高いサイトはリニューアル後も更新頻度が高くなる可能性があり、更新のしやすさを重視してデザインを作っていくケースもあります。

ちなみに画面上部に表示されている年をクリックすると、クリックした年の更新頻度を確認することができるようになります。
最も過去のデータの一番初めに丸がついている日が基本的にサイトの公開日となりますが、中には公開日に丸がついておらず一番初めに丸がついている日がサイトの公開日となっていないサイトもあります。

リニューアルを依頼してきたクライアントの現在のサイトの公開日が1年〜2年前ほどと最近の場合は、現状のサイトの運用にあたって以下のような問題がある場合が多いです。

  • 更新がしにくい
  • 集客はできているものの、売り上げが上がらない
  • 公開したものの見た目に不満がある
  • Shopifyに変えたい

一方数年前から運用されているサイトに関しては、以下のような理由でリニューアルを検討される場合が多いです。

  • レスポンシブ対応されていない
  • 見た目が今風ではない
  • セキュリティが気になる
  • そろそろ新しくしたい
  • Shopifyに変えたい

リニューアル案件の場合は、「Wayback Machine」を使って現在のサイトの公開日や更新頻度を必ず確認するようにしましょう。

目次