Shopify未経験の新入社員がストアを構築するまで

こんにちは。本ブログの筆者は、2023年度ECX本部に配属された新卒社員です。この記事では、Shopifyの知識が全く無かった新卒社員が、実際にストア構築を行うまでの流れをまとめておりますので、初めてShopifyストア構築を行う方の参考になれば幸いです。

Shopifyサイト構築にあたっての作業時間、工程

こちらが実際に筆者が構築したECサイトになります。今回は化粧品販売のECサイトを作成してみました。作業時間としては、10日間のShopify学習と2週間のストア構築作業となります。

TOPページ

商品詳細画面

工程については以下の通りで進めていきました。

①学習
②テーマ決め
③他ECサイトを見て情報収集
④商品、レイアウト、使うアプリを決める
⑤実際に作っていく
⑥足りない要素を追加していく
⑦完成

特に今回は初めてECサイトを構築するので、有名なECサイトを見て回り売り上げているECサイトはどのようなレイアウトにしているか、どのような工夫をしているのか情報収集をしました。

次に工程について掘り下げていきたいと思います。

①学習

学習は「いちばんやさしいShopifyの教本」という参考書 を使用して行いました。https://www.amazon.co.jp/dp/4295012572

毎日学習するページ量を決め、一冊読み終わったらもう一周して復習するという学習方法を取りました。後でECサイトを作るときに役立てたいので大事だと思ったり、活用したい技術はメモを取りながら進めていきました。

メモ一例
・カゴ落ち（後ほど詳細説明）
・関連商品について
・購入に繋がるパーツは上部に配置
・メール、SNS、広告の活用方法

②テーマ決め

筆者が実際に構築したECサイトは化粧品のECサイトです。
初めて自分で構築するECサイトなので自分が興味が沸くテーマにしました。

化粧品のブランドテーマは以下のようにしました。
・ドラックストアコスメではなくデパートコスメのような価値の高いブランドにしたい
・キラキラしたい女性がターゲット

このように化粧品の中でも詳細を決めることでECサイトの作りや方向性を以下の様に決めていきました。

・価値の高いブランドにしたいため、ECサイト構築時にはブランド価値、売上アップに繋がることを意識
・キャッチコピーを「輝く自分へ」としサイトの配色も明るいイメージにした

統一感のあるECサイトを作りたかった為、このように大きな軸をしっかり決めてから細かいところを考えていくようにしました。

③他ECサイトを見て情報収集

情報収集のため他ECサイトを閲覧し、以下のような機能を取り入れました。

・ランキング
・季節の商品
・限定パッケージ
・顧客へのサービス（今回はARカラー診断とメイクアップ講座）
・有益情報のバナー（送料無料情報など）
・マウスオーバーをすると違う商品画像を見れる

このように他サイトで情報収集したものはとても有益で活用できるものだったのでプロのものを見ることはとても大事だと感じました。

④商品、レイアウト、使うアプリを決める

​​​​​​​商品
今回のECサイト構築のために用意した商品は以下の通りです。
全11種類
・LIP　→　４種類（リップグロス、リップスティック、リップバーム、グリッターリップスティック）
・EYE　→　２種類（アイシャドウパレット、シングルアイシャドウ）
・FACE　→  ３種類（ファンデーション、炭パック、美容液）
・OTHER → ２種類（アロマオイル、バスボム）
以上の中から以下のように限定商品を作成したりしました。

季節限定商品→限定で購買率アップ
・サマーコレクション　→　夏限定のアイシャドウ、リップ

レイアウト
使用テーマ：Dawn
理由：デフォルトテーマであり、普段の業務でDawnが使われることが多いと聞き、今からDawnに慣れて理解する必要があると感じたため。

https://themes.shopify.com/themes/dawn/styles/default?locale=ja

配色
メインカラー：白
アクセントカラー：黄色

配色の理由：キラキラした女性がターゲットなので白と黄色で明るく輝いている印象の配色にしました。

トップページのレイアウト画面
1.画像スライドショー
　・すべての商品
　・季節の商品（サマーコレクション）
　・ブランド紹介
2.季節の商品
　→目立たせたい
3.ベストセラー商品
4.ランキング
5.おすすめコンテンツ
　・ARカラー診断
　・メイクアップ講座
6.カテゴリー別商品

使用アプリ

・Product Reviews
※Product Reviewsは現在Shopify アプリストアからインストールできません。

-商品のレビューをストアに表示できるアプリ、星を付けて全体的な評価も表示
→お客様が購入判断材料にできる、レビューがあることで安心
　→購買意欲促進が見込める
→こちらで削除など管理ができる、返信もできる

Product Reviewsの紹介記事もありますので是非ご覧ください。↓
https://transcosmos-ecx.jp/blog/shopify/112

・CRM PLUS on LINE
https://apps.shopify.com/socialplus?locale=ja&show_store_picker=1

-LINE公式アカウントの連携設定をする
-マイページに連携追加・連携解除を表示させる
-購入完了後のサンクスページでLINEのID連携を促す
　(LINE限定のお得な情報をお届け,おすすめの商品情報をお届け)
　→LINEで繋がって購買率アップに繋げる
-LINE連携した人にはチェックアウトリマインドなどをお届けできる

サンクスページの例

https://crmplus.socialplus.jp/function/customize-the-thanks-page

・送料無料バー.amp
https://apps.shopify.com/shipping-bar-1?locale=ja&show_store_picker=1

-「あと10000円で送料無料！！」などを表示して更なる購入を促す
　→表示するページを選択できる

以下の画像のように画面の上部などにバナー表示が出来る。

・Promorayer
https://apps.shopify.com/promolayer?locale=ja&show_store_picker=1

 -LINE友達追加のディスプレイ
　→友達追加を促して、LINEを定期的に送ることでShineCosMeを日常的に思い出してもらう
　→購買率アップに繋げる

-カゴ落ち防止ディスプレイ
　→カゴに商品が入っている状態で購入を辞めようとするとクーポンが発行される
　　→購買意欲アップに繋げる
　→表示回数、コンバージョン率、クリック数などがみれる（グラフでも見れる）
　→メールを入力していただいた方のメールアドレスが記憶され管理できる
　　→クーポンを取った方も日時まで記憶

LINE友達追加のディスプレイの例

https://promolayer.io/demo/

⑤実際に作っていく

上記工程にて得られた知識や決定した内容を基に、実際にストア構築を行います。

⑥足りない要素を追加していく

実際に作っていくと追加したい要素が出てくるので補填します。
実際に計画の時点より追加したものは以下の通りです。
・カスタムCSSを使用し文字や画像の大きさ、色などの変更
・ヘッダーメニューの常時表示
・メタフィールド機能を使用し商品のキャッチコピーを決定

⑦完成

といった工程でECサイトを作成してみました。

実際にshopifyサイトを構築してみて

ShopifyでECサイトを構成するうえで最も重要だと感じた要素を説明します。それは、カゴ落ち対策です。

カゴ落ちとは、お客様が商品をカートに入れたままサイトを離れてしまい購入まで至らないことを言います。2023年7月のデータで世界の様々なECサイトでのカゴ落ち率の平均値は70.19％にも上るそうです。（出展:https://baymard.com/lists/cart-abandonment-rate）カゴ落ちの確率は高いので、ここに注目してECサイトの仕組みを考えると購入率アップに繋がります。Shopifyにはカゴ落ち対策の機能があるのでこれを活用することが出来ます。どのような機能かというと、商品をカートに入れたままサイトを離れていってしまったお客様には後からメールを送る機能です。そうすると買い忘れてしまった方や購入を悩んでいた方が商品を購入してくださるというメリットがあります。皆さんもECサイトを活用した際にこのようなメールが送られてきたことがあるのではないでしょうか。カートに入れたままの商品があるという事を伝えられて、リンクをクリックすればECサイトに遷移しそのまま購入することが出来るようになっております。

https://www.shopify.com/jp/blog/abandoned-cart-emails

このようにカゴ落ち機能をサイトに付けて購入率を上げることはとても重要だと感じました。他にもメールでカゴ落ちを知らせる以外にもアプリを使ってLINEやディスプレイを表示して知らせる方法がありますので、そちらはまた別の記事でご紹介したいと思います。メールやLINE、ディスプレイ広告など、様々な機能を用いてカゴ落ち防止対策ができるため、サイトを構築の際には活用してみることをお勧めします。

まとめ

以上のように新卒で入社してからshopifyによるECサイト構築を行っていきました。この時代、普段から触れることが多いECサイトを実際に構築してみると消費者の時には考えもしなかったカゴ落ち対策などの機能を触れられて、よりECサイトへの理解が出来ましたし、興味がわきました。
そして自分で一からプログラムを書いて構築しようとなると労力も知識も大量に必要ですが、Shopifyなら簡単にECサイトが作れる事を学びました。より凝ったECサイトを構築するのにはもちろんそれ相応の費用や委託が必要な場合もあるかと思いますが、 新卒の筆者でもオシャレなレイアウトやカゴ落ち機能を付けるなどして、ここまでShopifyサイトを完成させることが出来ました。皆さんもぜひShopifyでECサイトを作ってみてはいかがでしょうか。