「プログラミングの知識がないと、本格的なECサイトは作れない」と思っていませんか？
実は、専門知識がなくても、デザイン性の高いECサイトをスピーディーに構築できるサービスがあります。それが、今回ご紹介するShopify（ショッピファイ）です。
Shopifyを使えばプログラミングの知識がなくても本格的なECサイトが作れるうえ、高単価な副業として成り立ちます。
この記事では、副業を始めたい初心者の方に向けて、Shopifyを使ったECサイト構築の全手順を、誰でも再現できるように詳しく解説していきます。
【前提】ECサイト構築が副業として狙い目な理由
ECサイト構築の仕事が注目されている理由は、需要の高さと仕事の専門性にあります。
過去最大の市場規模と急増する需要
2023年の日本国内におけるBtoC（企業から消費者向け）のEC市場規模は、24.8兆円と過去最大を記録しました。
これは、全国のスーパーとコンビニの年間売上を合わせた額に匹敵するほどの巨大な市場です。
特にコロナ禍以降、オンラインで商品を販売したいと考える事業者が急増しており、小規模事業者のEC参入率は2019年と比較して約2倍に増加しています。
作れる人材が不足している「売り手市場」
需要が高まっている一方、ECサイトには決済システムやセキュリティ、在庫管理といった専門知識が不可欠で、多くの事業者にとって自社での構築はハードルが高いのが現状です。
だからこそ、ECサイトを構築できる人材への需要が大きく高まっているのです。
一般的なWebサイト制作の仕事と比べても単価が高い傾向にあり、まさに今が副業として始める絶好のチャンスと言えます。
数ある選択肢の中で「Shopify」が最強な理由
ECサイトを作る方法はいくつかありますが、現在主流なのが「EC構築プラットフォーム」を利用する方法です。
オンライン販売に必要な決済やサーバー管理といった複雑な仕組みがすべて最初から用意されているサービスで、これを使えば、事業者はデザインや使いやすさの向上に集中できます。
数あるプラットフォームの中で、最もおすすめなのがShopifyです。
Shopifyは世界でNo.1のシェアを誇るECプラットフォームで、2023年の世界での流通総額は約33兆円にものぼります。
日本でも「日清食品」や「土屋鞄製造所」といった大手企業から、人気キャラクター「ちいかわ」の公式ショップまで、個人・法人を問わず幅広いジャンルで利用されています。
Shopifyがこれほどまでに選ばれる主な理由は4つあります。
- 世界最高水準のセキュリティ
常に最新の状態で高い安全性が担保されており、個人情報を扱うECサイトとして安心してストアを運営できます。 - 豊富なアプリによる高い拡張性
「レビュー機能を追加したい」「サブスク販売をしたい」といった要望も、後からアプリで簡単に追加でき、ストアの成長に合わせて柔軟にカスタマイズできます。 - プロがデザインした美しいテーマ
デザイン性に優れたテンプレート（テーマ）が豊富に用意されており、ブランドイメージに合ったプロ級のサイトを簡単に作成できます。 - 海外展開にも対応できる越境
EC機能将来的に海外へ商品を販売したくなった際にも、多言語・多通貨にスムーズに対応が可能です。
これだけの高機能なECサイトが、月額3,650円から利用できるのも大きな魅力です。（※2025年11月時点）
STEP1：Shopifyパートナーアカウントの開設と初期設定をする
本格的なサイト構築を始める前に、まずは開発環境を整えましょう。クライアントのECサイトを制作する場合、Shopifyパートナープログラムに登録するのが一般的です。
Shopifyパートナーになると、クライアントのストアを構築するための「開発ストア」を無料で作成できます。
この開発ストアは、サイトが公開されるまで月額料金がかからないため、安心して制作に取り組むことができます。
Shopifyパートナーアカウントを作成する
まずはShopifyパートナーのアカウントを作成します。一つひとつの手順を丁寧に見ていきましょう。
1：パートナープログラムのページへアクセス
ブラウザで「Shopify パートナー」と検索し、検索結果に表示される「Shopifyパートナーになりましょう」というタイトルのページをクリックします。
2：アカウント作成の開始
ページを少し下にスクロールし、「パートナーになる」というボタンをクリックします。
3：アカウント情報の入力
「Shopifyアカウントを作成する」という画面が表示されます。今回は「メールアドレスでサインアップ」で進めます。
メールアドレス、氏名、任意のパスワードを入力し、「Shopifyアカウントを作成」ボタンをクリックします。
4：パートナーとしての目的を選択
「パートナーとしてどのように始めたいですか？」という質問が表示されます。
今回はクライアント向けのサイト制作が目的なので、「クライアント向けに新しいShopifyストアを構築する」を選択し、「次へ」をクリックします。
5：組織情報の入力
「ロケーション」で住んでいる国を選択します。
その下のビジネス名や住所などの項目は任意なので、入力してもしなくても構いません。
入力が終わったら、「パートナー組織を作成」ボタンをクリックします。
6：メールアドレスの認証
登録したメールアドレスに、Shopifyから「メールアドレスをご確認ください」という件名のメールが届きます。
メール本文内にある「メールアドレスを確認」ボタンをクリックします。
「確認されました」というメッセージが表示されれば、アカウントの登録は完了です。
最初にやっておくべき2つの設定
パートナーアカウントの開設が完了したら、本格的な作業に入る前に、まず2つの初期設定を行っておきましょう。
1：プロフィールの言語設定を日本語に変更
管理画面が英語で表示されていると作業しづらいため、日本語に切り替えます。
パートナーダッシュボード（管理画面）の左下にある、ご自身の名前が表示されている部分をクリックします。
表示されたメニューから「あなたのプロフィール」を選択します。
プロフィール画面を少し下にスクロールすると、「言語」という項目があります。
ここが「English」などになっている場合は、プルダウンメニューから「日本語」を選択して保存します。
2：クライアント用の「開発ストア」を作成
次に、実際にECサイトを構築していくための作業場所である「開発ストア」を作成します。
パートナーダッシュボードの左側メニューから「ストア管理」＞「ストアを作成する」ボタンをクリックします。
「このストアの主な目標は？」という項目では、「クライアントのためにストアを作成する」を選択してください。
「ストア名」の欄に、これから作成するサイトの名前を入力します。今回は練習として雑貨屋さんの「craft-art」にしましょう。
このストア名は後からでも変更可能なので、現段階では仮の名前でも問題ありません。
「ビジネスのロケーション」が「日本」になっていることを確認し、右下にある青い「開発ストアを作成」ボタンをクリックします。
しばらく待つと、作成した「craft-art」というストア専用の管理画面に切り替わります。
これで、ECサイトを構築するための準備がすべて整いました。
STEP2：サイトを構築する
開発環境の準備が整ったら、いよいよサイト構築のステップに進みます。
ここからは、雑貨ストア「craft-art」を例に、具体的な構築手順を解説していきます。
まず、作業を始める前に、ストア管理画面の言語設定を日本語に変更しておきましょう。
- 管理画面の「設定（Settings）」をクリック
- 表示されたメニューから「言語（Languages）」を選択
- デフォルト言語が「English」になっているので、「変更（Change）」をクリックし、「日本語」を選択して保存
商品情報の登録
ECサイトの主役である「商品」の情報を登録します。
商品数が多い場合は、CSVファイルを使って一括でインポートするのが効率的です。
CSVファイルで商品を一括インポート
管理画面の左側メニューから「商品管理」をクリックし、画面中央付近の「インポート」ボタンを押します。
ポップアップが表示されたら、「ファイルを追加」ボタンをクリックし、事前に用意したShopifyフォーマットのCSVファイルを選択しましょう。
ファイルが選択されたら、「アップロードしてプレビューする」ボタンをクリックします。
プレビュー画面で商品名や価格などに間違いがないか確認し、問題なければ「商品をインポートする」ボタンをクリックしてください。
日本語だとSNSでシェアした際などにURLが文字化けしてしまうため、注意してください。
商品画像を登録する
先に画像をShopifyにアップロードします。
- 左側メニューの「コンテンツ」をクリックし、表示されたサブメニューから「ファイル」を選択
- 画面右上の「ファイルをアップロード」ボタンをクリックし、商品画像をすべて選択してアップロード
後で使うファーストビュー用の画像なども、ここで一緒にアップロードしておくとスムーズです。
次に、アップロードした画像を各商品に紐付けます。
- 左側メニュー「商品管理」に戻り、画像を設定したい商品をクリックする
- 商品編集画面の中程にある「メディア」というセクションで、「既存のファイルを追加する」をクリックする
- ファイル一覧が表示されるので、その商品に対応する画像を複数選択し、右下の「完了」ボタンを押す
画像が読み込まれたら、画面右上の「保存する」ボタンをクリックするのを忘れないようにしましょう。
他の商品も同様の手順で画像を設定していきます。
コレクションの作成
「コレクション」とは、商品を特定のカテゴリでグループ分けする機能です。
「新商品」や「セール品」といった括りで商品をまとめることで、お客様が目的の商品を探しやすくなります。
今回は「ART」「TABLE WEAR」「DECORATION」の3つのコレクションを作成します。
- 左側メニュー「商品管理」＞サブメニュー「コレクション」をクリック
- 画面右上の「コレクションを作成する」ボタンをクリック
まずは、ARTのコレクションから作成していきましょう。
- 「タイトル」の欄に「ART」と入力
- 右側の「画像」セクションにある「画像を追加」をクリックし、カテゴリ用の画像を選択
- 「コレクションの種類」では、設定した条件に合う商品が自動でこのコレクションに追加される「スマート」を選択
- 「条件」セクションで、最初のプルダウンを「商品タグ」、次のプルダウンを「次の値に等しい」、そしてテキストボックスに「ART」と入力
これで、「ART」というタグが付いた商品が自動で集められます。
必要であれば「説明」欄にコレクションの説明文を入力し、右上の「保存する」ボタンをクリックしましょう。
同様の手順で、「TABLE WEAR」「DECORATION」のコレクションも作成します。
ブログ記事の作成
ブログ機能を使って、新商品のお知らせやブランドのこだわりなどを発信できます。
- 「オンラインストア」＞サブメニュー「ブログ記事」をクリック
- 「ブログ記事を作成する」ボタンをクリック
- 「タイトル」と「コンテンツ」（記事本文）の欄に、用意したテキストを入力
- 「画像」セクションで「画像を追加」をクリックし、記事のアイキャッチとなる画像を選択
最後に「公開/非公開」の項目が「公開」になっていることを確認し、「保存する」ボタンをクリックします。
テーマの選択と設定
「テーマ」はサイト全体のデザインテンプレートです。今回は、公式の無料テーマである「Dawn」を使用します。
テーマのインストール
左側メニュー「オンラインストア」＞サブメニュー「テーマ」をクリックします。
「テーマライブラリー」というセクションまでスクロールし、「テーマを追加」ボタンのドロップダウンから「テーマストアにアクセスする」を選択しましょう。
テーマストアが開いたら、「Dawn」を探してクリックし、「テーマを試す」ボタンを押します。
管理画面に戻ると、テーマライブラリーに「Dawn」が追加されているはずです。
テーマ名の横にある「アクション」ボタンから「公開」を選択し、確認のポップアップでもう一度「公開」をクリックします。
これで「Dawn」がサイトに適用されました。
テーマの基本設定
有効化したテーマの横にある「カスタマイズ」ボタンをクリックすると、サイトのデザイン編集画面が開きます。
ロゴとファビコンの設定
画面左側の設定パネルにある、歯車のアイコン「テーマ設定」をクリックします。
リストから「ロゴ」を選択し、「画像を選択」ボタンから事前にアップロードしたロゴ画像を選びましょう。
同様に「ファビコン」の項目でも、「画像を選択」からファビコン用の画像を設定します。
配色の設定
「テーマ設定」＞「配色」をクリックします。
今回はアナウンスメントバー用に、背景が緑色の配色パターン（スキーム）を作成しましょう。
スキーム2を選択し、「背景」の色をシックな緑色（#A8B1AD）に、文字色が映えるように「テキスト」の色を白（#FFFFFF）に設定します。
次に、サイト全体の基本となる「スキーム1」に戻り、「ソリッドボタン」の「背景」を落ち着いたグレー（#5F5F5F）に変更してください。
タイポグラフィー（フォント）の設定
「テーマ設定」＞「タイポグラフィー」をクリックします。
「見出し」の項目で「変更」ボタンを押し、フォントライブラリから日本語フォント「Noto Serif JP」を検索して選択します。太さは「レギュラー」を選びましょう。
同様に「本文」のフォントも「Noto Serif JP」の「レギュラー」に設定します。
ブランド情報とSNSの設定
「テーマ設定」＞「ブランド情報」で、ストアの簡単な説明文を入力します。
「テーマ設定」>「SNS」で、Instagramなどの公式アカウントのURLを入力しておきます。
完了したら「保存」ボタンを押しましょう。
トップページのカスタマイズ
テーマの基本設定が完了したら、サイトの顔であるトップページを編集していきます。
トップページは、さまざまな「セクション」というパーツを組み合わせて作ります。
ファーストビュー（メイン画像）の設定
まずは画像を設定します。
- 左側のセクションリストから「画像バナー」をクリック
- 右側に表示された設定パネルで「画像を選択」をクリックし、メインビジュアル用の画像を選択
- 画像が少し暗く表示されている場合、「オーバーレイの不透明度」のスライダーを動かして「0%」に調整
- 配色はスキーム1に変更
続いて、見出しやボタンのテキストを編集します。
- 「見出し」ブロックをクリックしてテキストを「ALL PRODUCTS」に変更
- 「ボタン」ブロックをクリックしてボタンのラベルを「全てを表示する」に変更
テキストが画像に重なって見づらい場合は、「画像バナー」のメイン設定に戻り、「デスクトップのコンテンツの位置」を「左中央」などに変更して、余白部分にテキストを配置します。
アナウンスメントバーの設定
左側のセクションリスト最上部にある「アナウンスメントバー」をクリックします。
テキストを「1万円以上のご購入で送料無料」などに変更し、「配色」の項目で先ほど作成した緑背景のスキームを選択します。
各セクションの追加と設定
左側パネルの下部にある「セクションを追加」をクリックすると、さまざな機能を持つパーツを追加できます。
ブランド説明
「リッチテキスト」セクションを追加し、見出しや本文にブランドのコンセプトを入力します。
不要なボタンは、ブロックをクリックして右下の「ブロックを削除」で消すことができます。
余白は上下各100pxで設定し、テキストのカラーを#5F5F5Fに変更しましょう。
新着商品・ランキング
「特集コレクション」セクションを追加し、見出しを「NEW」に変更します。
「コレクション」の項目で、表示させたいコレクションを選択します。
コレクションの商品数を4に変更して、残りは「全てを表示する」をクリックすると確認できるように設定します。
ランキングも同様に複製して作成しましょう。
カテゴリー（コラージュ）
「コラージュ」セクションを追加し、デフォルトのブロックを削除した後、「ブロックを追加」から「コレクション」を3つ追加します。
それぞれのブロックで「ART」「DECORATION」「TABLE WEAR」を選択し、カテゴリへの導線を作成します。
見出しを「CATEGORY」と入力し、見出しサイズを「小」で設定します。
Aboutセクション
「テキスト付き画像」セクションを追加します。
左側に画像、右側にテキストが表示されるので、画像にはABOUT用の画像を、見出しやテキストにはブランド紹介文を、ボタンには「続きを読む」といったテキストを入力します。
背景色を薄いグレー（#F6F6F6）に変更し、上下の余白も調整すると、他のセクションとの違いを際立たせることが可能です。
ブログ（ブログ記事）
「ブログ記事」セクションを追加し、見出しを「BLOG」などに変更します。
ホーム画面から「コンテンツ」＞「ブログ記事」へ進み、各ページで表示させたい部分の文章を「抜粋」に入れましょう。
ヘッダーとフッターの作成
最後に、サイトの全ページで共通して表示されるヘッダー（上部）とフッター（下部）を整えます。
下層ページの器を作成する
メニューに項目を追加する準備として、先にページの器だけ作っておきましょう。
管理画面に戻り、「オンラインストア」＞「ページ」へ進み、右上の「ページを追加する」をクリックします。
タイトルに「ABOUT」と入力し、コンテンツは空のまま「保存」します。同様に「FAQ」「COMPANY」も作成します。
メインメニューを設定する
管理画面の「オンラインストア」＞「メニュー」に進み、「メインメニュー」をクリックします。
既存の「カタログ」をクリックし、名前を「CATEGORY」に変更しましょう。
「メニュー項目を追加する」から、「ABOUT」「FAQ」などの項目を追加し、リンク先として先ほど作成した同名のページを選択します。
同様に「ART」「TABLE WEAR」「DECORATION」も項目として追加し、リンク先として対応するコレクションを選択してください。
追加した「ART」などをドラッグし、「CATEGORY」の下に少しずらしてドロップすると、階層構造のメニューが作成できます。
フッターを設定する
カスタマイズ画面に戻り、ページ最下部の「フッター」セクションをクリックします。
「ブロックを追加」から「メニュー」を選択し、表示するメニューを先ほど編集した「メインメニュー」に変更します。
不要な見出しは削除し、メルマガ登録フォームが不要な場合は、目のアイコンをクリックして非表示にしましょう。
STEP3：ページの詳細を作り込む
トップページの骨格が完成したら、次はお客様が商品を探したり、ブランドについて知ったりするための各ページを作り込んでいきましょう。
下層ページの作成
まずは、トップページ以外の固定ページの中身を作成します。
Shopifyでは、ページごとに異なるデザインテンプレートを適用することで、それぞれに特化したレイアウトを実現できます。
各ページ専用のテンプレートを作成・紐付けする
各ページのテンプレートを紐づけしていきましょう。
テンプレートの作成
- 「カスタマイズ」画面の上部中央にあるプルダウンメニューをクリック
- メニューの中から「ページ」＞「テンプレートを作成する」を選択
- ポップアップが表示されたら、名前の欄に「ABOUT」と入力し、「テンプレートを作成する」ボタンをクリック
これでABOUTページ専用のデザインテンプレートが作成されました。
同様の手順で、「FAQ」「COMPANY」のテンプレートも作成しておきましょう。
テンプレートの紐付け
- Shopifyの管理画面に戻り、左側メニュー「オンラインストア」＞「ページ」をクリック
- 先日作成した「ABOUT」ページをクリックして編集画面を開く
- 画面右下にある「テーマテンプレート」という項目で、プルダウンメニューから先ほど作成した「ABOUT」テンプレートを選択
- 右上の「保存」ボタンを押す
同様に、「FAQ」ページには「FAQ」テンプレートを、「COMPANY」ページには「COMPANY」テンプレートを紐付けて保存します。
各ページを編集する
再度「カスタマイズ」画面に戻り、上部中央のプルダウンから、編集したいページを選択します。
ABOUTページ
デフォルトで表示されている「ページ」セクションの目のアイコンをクリックして非表示にします。
「セクションを追加」から「画像バナー」を追加し、背景にABOUTページ用の画像を設置します。
不要なボタンなどはブロックを選択して削除しましょう。
画像バナーの下に「リッチテキスト」セクションを追加し、ブランドの想いやストーリーを記述します。
文章が中央寄せになっている場合は、「リッチテキスト」のセクション設定で「コンテンツアラインメント」を「左」に調整すると読みやすくなります。
FAQページ
同様に「ページ」セクションを非表示にし、「リッチテキスト」セクションで見出しとして「FAQ」と入力します。
その下に「セクションを追加」から「折りたたみ可能なコンテンツ」を追加します。
それぞれの「折りたたみ可能な行」ブロックに見出し（質問）と本文（回答）を入力していきましょう。
ブロックが足りなければ「ブロックを追加」、不要なら「ブロックを削除」で調整します。
会社概要（COMPANY）ページ
同様に「ページ」セクションを非表示にします。
「画像バナー」と「リッチテキスト」を使い、会社名、住所、代表者名などの情報を記載します。
お問い合わせ（CONTACT）ページ
Shopifyにデフォルトで用意されているお問い合わせフォームの上に、「リッチテキスト」セクションを追加し、「3営業日以内にご返信いたします」といった案内文を配置すると、より親切なページになります。
開発中のサイトを他の人に確認してもらう
サイト制作の途中でクライアントなどに進捗を確認してもらう場合、プレビュー画面のURLを共有します。
ただし、開発中のストアにはパスワードがかかっているため、相手が閲覧できるように設定を変更しておきましょう。
- 管理画面の左側メニュー「オンラインストア」＞「各種設定」に進む
- 「パスワード保護」セクションにある「訪問者へのメッセージ」の下に、現在のパスワードが表示されているのを確認する
- 覚えやすい簡単なもの（例：「test」など）に変更して「保存」する
プレビュー画面のURLと設定したパスワードを一緒に伝えることで、相手もサイトを閲覧できるようになります。
商品関連ページの設定
お客様が商品を選び、購入に至るまでの動線となる商品一覧ページと商品詳細ページを整えます。
商品一覧ページ（コレクションページ）
カスタマイズ画面の上部プルダウンから「コレクション」＞「デフォルトのコレクション」テンプレートを開きます。
左側パネルの「セクション」から「商品のグリッド」をクリックします。
画像の比率を揃える
右側に表示される設定パネルで、「画像の比率」を「正方形」に設定します。
これで商品画像の縦横比がバラバラでも、一覧で見たときに高さが揃い、統一感が生まれます。
絞り込みフィルターを配置する
「絞り込みと並べ替え」という項目にある「フィルターレイアウト」で「垂直」を選択します。
お客様が価格などで商品を絞り込むフィルターが常に左側に表示されるため、使い勝手が向上します。
商品詳細ページ
上部プルダウンから「商品」＞「デフォルトの商品」テンプレートを開きます。
左側パネルの「セクション」から「商品情報」をクリックします。
画像のレイアウト
「メディア」セクションで、「デスクトップのレイアウト」を「スタック」に設定します。
写真が大きく縦に並ぶため、商品の魅力を伝えやすくなります。
PCアイコンをクリックし、モバイルアイコンに切り替えることでチェックできます。
「今すぐ購入」ボタンの表示/非表示
設定パネルを下にスクロールし、「購入ボタン」という項目にある「動的チェックアウトボタンを表示する」のチェックを外します。
これでカートボタンのみが表示され、お客様が他の商品も見て回りやすくなります。
関連商品セクションの編集
左側パネルに戻り、「関連商品」セクションをクリックします。
見出しを「You may also like」から「こちらもおすすめ」といった自然な日本語に変更しましょう。
カート・決済ページの設定
お客様が購入手続きを行うカートページや決済ページも、サイトの雰囲気に合わせてデザインを調整します。
管理画面左下の「設定」＞「チェックアウト」をクリックします。
画面上部にある「カスタマイズ」ボタンを押すと、決済ページの編集画面が開きます。
- ロゴの設置：「ロゴ」セクションで、ストアのロゴを設置し、「ロゴのサイズ」を「中」や「小」に調整
- 配色の設定：「配色」セクションで、「アクセント」や「ボタン」の色をサイトのブランドカラーに合わせて変更
各種設定とポリシーページの作成
最後に、管理画面の「設定」から、ストア運営に必要な裏側の設定を済ませておきます。
ストア情報の設定
管理画面左下の「設定」＞「ストアの詳細」をクリックします。
ストア名、連絡先メールアドレス、電話番号、住所など、事業者情報を正確に入力し、保存します。
配送料金の設定
「設定」＞「配送と配達」に進み、「一般配送料」の横にある「管理」をクリックします。
まず、「国内」エリアの横にある「…」から「ゾーンを編集」を選び、チェックボックスから「北海道」と「沖縄」のチェックを外して「完了」します。
次に「料金を追加」をクリックし、料金名に「国内一律（北海道・沖縄除く）」、価格に「500」円と入力しましょう。
「条件を追加」で「注文額に基づく」を選び、最高価格に「9999」と入力して「完了」します。
同様に「料金を追加」から、料金名「送料無料」、価格「0」円、条件「10000」円以上の設定も追加します。
最後に「新しいゾーンを作成」から北海道と沖縄エリアのゾーンを作り、同様の手順で料金（1500円と送料無料）を設定すればOKです。
ポリシーページの作成
「設定」＞「ポリシー」をクリックします。
「特定商取引法に基づく表記」のテキストエリア内にある「テンプレートを挿入」ボタンを押すと、雛形が自動で入力されます。
事業者名や住所などの[ ]で囲まれた部分を、ご自身の情報に書き換えていきます。
同様に「利用規約」や「プライバシーポリシー」もテンプレートから作成し、必要な箇所を修正します。
最終的には必ずクライアントに内容を確認してもらい、承認を得てください。
入力が終わったら、「公開する」ボタンをクリックします。
作成したポリシーページは、自動的にフッターにリンクが追加されます。
STEP4：機能拡張＆最終チェックをする
サイトデザインと基本的な設定が完了したら、いよいよ公開前の総仕上げです。
ここでは、アプリを使った機能拡張の方法と、サイト全体の最終チェックを行っていきます。
レビュー機能を追加する
お客様の購入意欲を高める重要な要素の一つが「レビュー（お客様の声）」です。
Shopifyでは、アプリを追加することで簡単に実装できます。
今回は、無料で始められる人気のレビューアプリ「Judge.me」を導入してみましょう。
1：アプリをインストールする
管理画面の左側メニュー下部にある「アプリ」をクリックし、「すべてのおすすめアプリ」を選択します。
Shopifyアプリストアが開くので、検索窓に「Judge.me」と入力して検索し、表示された「Judge.me Reviews」をクリックしましょう。
「インストール」ボタンを押し、次の画面でも「インストール」ボタンをクリックして、自分のストアにアプリを追加します。
2：初期設定とウィジェットの有効化をする
インストールが完了すると、Judge.meの初期設定画面が開きます。
Settings language（設定画面の言語）は「English」のまま、Widgets and emails language（お客様に見える部分の言語）を「Japanese」に設定し、「Start setup」をクリックしてください。
「Enable app embed」というボタンをクリックすると、テーマのカスタマイズ画面に自動で移動します。
画面左側の「アプリ埋め込み」セクションに「Judge.me」が追加され、スイッチがオンになっていることを確認し、「保存」ボタンをクリックします。
3：レビューウィジェットを設置する
Judge.meの設定画面に戻り、「Install Review Widget」ボタンをクリックすると、商品詳細ページにレビューウィジェットが自動で設置されます。
設置場所を確認し、「わかりました」をクリックします。
これでレビューの投稿・表示欄が設置されました。
4：星評価（スターレーティング）を設置する
次に「Install Star Ratings」ボタンをクリックします。
商品一覧ページや商品詳細ページに、星評価の平均点を表示するパーツが自動で設置されます。
商品詳細ページでは、星評価は商品名のすぐ下に表示されるのが一般的です。
自動で設置された場所が異なる場合は、カスタマイズ画面のセクションリストで「★ Star Ratings (Page)」をドラッグ＆ドロップし、商品タイトルの下に移動させて「保存」しましょう。
5：テストレビューを投稿して表示を確認する
設定が完了したら、お客様からどのように見えるかを確認するために、自分でテストレビューを投稿してみましょう。
- プレビュー画面で任意の商品ページを開く
- 設置したレビューウィジェットから、星評価やコメントを実際に入力して投稿する
- 投稿が完了した後、ページを更新してレビューや星評価が商品名の下に正しく表示されるかを確認する
星の色やレビューを依頼するタイミングを変更できるので、適宜調整してください。
6：レビュー投稿の設定を変更する
最後に、お客様からのレビューを自動で公開するか、手動で承認してから公開するかを設定します。
- Judge.meの管理画面に戻り、上部メニューの「Manage Reviews」＞「Reviews」タブを選択
- 左側メニューから「Settings」＞「Moderation」をクリック
- 「Auto-publish reviews」の項目で、「Publish reviews manually」（レビューを手動で公開する）にチェックを入れ、「Save settings」で保存
お客様からレビューが投稿されると、一度管理画面で内容を確認してから公開できるようになり、不適切なレビューを防げます。
テスト決済で注文の流れを確認する
サイトが公開された後、お客様が問題なく商品を購入できるかを確認するために、テスト決済を行います。
テスト決済とは、実際にお金は動かさずに、注文から完了までの流れをシミュレーションする機能です。
テスト決済サービスを有効にする
管理画面の「設定」＞「決済」をクリックします。
「決済サービス」の中から「（テスト用）Bogus Gateway」を選択し、有効化します。
実際に商品を購入してみる
オンラインストアのプレビュー画面を開き、任意の商品をカートに追加して、「購入手続きへ進む」をクリックします。
連絡先情報や配送先住所の欄に、テスト用の情報を入力します。
- カード番号：1 を入力します。
- カード名義人：Bogus Gateway と入力します。
- 有効期限：未来の日付を入力します。
- セキュリティコード：任意の3桁の数字を入力します。
「今すぐ支払う」ボタンをクリックし、「ご注文は確定しました」という画面が表示されれば成功です。
確認したいシミュレーションによって、数値が変わります。
取引成功：1 取引失敗：2 例外：3
各種メールの受信確認
テスト注文が完了すると、入力したメールアドレスに2種類のメールが届きます。
- 注文確認メール（お客様向け）： 購入者として、注文内容が記載されたメールが届くか確認
- 新規注文通知メール（ストアオーナー向け）： ストア運営者として、新しい注文が入ったことを知らせるメールが届くか確認
両方のメールが問題なく届いていれば、注文システムは正常に機能しています。
管理画面での注文情報の確認
最後に、Shopifyの管理画面に戻り、「注文管理」を開きます。
先ほどのテスト注文がリストに表示されていることを確認しましょう。
STEP5：クライアントにストアを引き渡す
サイトの構築と最終チェックが完了したら、いよいよクライアントにストアを引き渡し、インターネット上に公開します。
ここでの操作は元に戻せないものも含まれるため、慎重に進めましょう。
ストアの所有権をクライアントに移行する
開発ストアはShopifyパートナーのアカウントに紐付いているため、ストアのオーナー（所有者）をクライアントに変更する必要があります。
この作業を「所有権の移行」と呼びます。
パートナーダッシュボードに移動
開発ストアの管理画面ではなく、Shopifyパートナーの管理画面（パートナーダッシュボード）を開きます。
対象ストアを選択
左側メニューの「ストア管理」をクリックし、今回作成したクライアントのストア（例：craft-art）を見つけます。
所有権移行の開始
ストア名の横にある「アクション」メニューをクリックし、「所有権を移行する」を選択します。
新しいオーナーの情報を入力
ポップアップが表示されたら、以下の情報を正確に入力します。
- 新しいストアオーナーのメールアドレス： クライアントのメールアドレスを入力
- 新しいストアオーナーの姓・名： クライアントの氏名を入力
- 確認のためのパスワード： Shopifyパートナーアカウントのパスワードを入力
移行の実行
入力情報に間違いがないことを確認し、「ストア所有権を移行する」ボタンをクリックします。
すべての作業が完了していることを必ず確認してから実行してください。
クライアント側で承認作業をする
移行手続きをすると、クライアントのメールアドレスにShopifyから招待メールが届きます。
クライアントには、そのメールの指示に従ってアカウントを作成し、招待を承諾してもらいましょう。
その後、クライアントはShopifyの料金プランを選択し、クレジットカード情報を登録して契約を完了させます。
これで、ストアの所有権は正式にクライアントのものとなりました。
決済設定を有効化する
実際にお金を受け取るための決済設定を有効化します。
今回はシークレットモードでログイン画面を開き、オーナーアカウントでログインしましょう。
テスト決済の無効化
ストアの管理画面にログインし、「設定」＞「決済」に進みます。
現在有効になっている「（テスト用）Bogus Gateway」を「管理」から「無効化する」で停止します。
Shopifyペイメントの有効化
「Shopifyペイメント」の項目にある「アカウント設定を完了する」ボタンをクリックします。
画面の指示に従い、事業形態、事業情報、個人の身分証明書、売上金を受け取るための銀行口座情報を登録しましょう。
すべての情報が承認されると、Shopifyペイメントが有効になり、クレジットカード決済などが利用できるようになります。
利用したい決済方法を選択する
Shopifyペイメントを有効化すると、主要なクレジットカード決済やApple Pay、Google Payといったウォレット決済が利用可能になります。
クライアントの要望に応じて、より多くの決済方法を追加することも可能です。
利用可能な決済方法の確認
管理画面の「設定」＞「決済」に進み、「Shopifyペイメント」の横にある「管理」をクリックします。
下にスクロールすると、現在有効になっている決済方法の一覧を確認できます。
「対応決済サービス」のセクションから、PayPalを追加したり、コンビニ決済やQRコード決済などをアプリ経由で導入したりすることも可能です。
さらに、「手動の決済方法」セクションでは、銀行振込や代金引換といったオフラインでの決済手段の追加設定もできます。
Shopifyペイメントのテスト決済を行う
アカウント設定が完了したら、最後にShopifyペイメント自体が正しく機能するかをテストモードで確認します。
- 「設定」＞「決済」＞「Shopifyペイメント」の「管理」に進む
- ページ最下部の「テストモード」で「テストモードを使用する」にチェックを入れる
- Shopifyのヘルプページに記載されているテスト用のクレジットカード番号を使い、Bogus Gatewayの時と同様に自分で商品を購入する
成功する取引と、わざと失敗させる取引の両方をシミュレーションし、システムが正しくエラーを検知することも確認しましょう。
テストが完了したら、必ず「テストモードを使用する」のチェックを外して保存するのを忘れないでください。
パスワードを解除してストアを公開する
いよいよ、ストアをインターネット上に公開します。
1：決済設定を本番モードに戻す
まず、テスト注文に使っていた決済設定を、実際にお客様が購入できる「本番モード」に戻します。
「設定＞「決済」を選択し、「Shopifyペイメント」の横にある「管理」ボタンを押します。
画面を一番下までスクロールすると「テストモード」というセクションがあるので、「テストモードを使用する」のチェックを外し、設定を保存しましょう。
2：公開前の最終チェックを行う
「保存」ボタンを押した瞬間にストアは誰でもアクセスできる状態になります。
公開後に慌てないよう、以下の点などを最終確認しましょう。
- 商品価格や情報に間違いはないか？
- 送料の設定は正しいか？
- 各ページへのリンクは切れていないか？
- 誤字脱字はないか？
3：パスワード保護を解除してストアを公開する
最終チェックが完了したら、いよいよパスワードを解除します。
- 管理画面の左側メニュー「オンラインストア」＞「各種設定」に進む
- ページを一番下までスクロールすると、「パスワード保護」というセクションを見つける
- 「パスワードを有効にする」のチェックを外し、右上の「保存」ボタンをクリックする
4：公開されたストアを確認する
「オンラインストアが誰でもアクセスできる状態になっています」というメッセージが表示されれば、公開は完了です。
管理画面の「オンラインストア」の横にある目のアイコンをクリックし、パスワード入力なしでサイトが表示されることを確認しましょう。
まとめ：副業としてShopify構築を始めよう！
Shopifyを使えば、HTMLやCSSといったコードを書く必要がなく、複雑な技術スキルを身につけるための長い学習時間も必要ありません。
そのうえデザイン性が高く、機能も充実したECサイトをスピーディーに構築でき、高単価な副業として成り立ちます。
ECサイトは作って終わりではなく、公開してからが本当のスタートです。
クライアントは商品を販売していく中で、「新しいキャンペーンページを追加したい」「セール機能を使いたい」「SNSとの連携を強化したい」といったさまざまな要望が出てきます。
その際に、構築を担当したあなたが運用サポートや追加カスタマイズを請け負うことで、継続的な収入にもつながります。
一度スキルを身につければ、単発の制作案件だけでなく、長期的なパートナーとしてクライアントのビジネス成長を支えることができるのも魅力です。
これから副業を始めたいと思っている方は、Shopify構築を選択肢の一つとして考えてみてください。
未経験からShopify構築を勉強するならデイトラShopifyコースがおすすめ！
デイトラShopifyコースは、ECサイト制作を仕事にする本格スキルが学べるコースです。
ストア構築の方法だけではなく、Shopify導入のための提案トークから実案件の流れ、ストア公開後のマーケティング戦略まで、ストア構築者が知っておくべき基礎知識がまるっと詰まったカリキュラムになっています！
学習しながら構築していくサイトは、実在するアパレルブランドのサイトです。限りなく実案件に近い制作課題に取り組むことで、実案件のときにも困らない力を身につけられます。
Shopifyはアップデートの頻度が高く、最新機能が続々と追加されるのが特徴。デイトラでは最高の学習環境を提供するため、随時教材をアップデートしています。一度受講したらアップデート内容も追加費用ナシで閲覧可能です。
ECサイト制作・Shopify構築のスキルを身につけたい方は、ぜひデイトラShopifyコースをチェックしてみてください！
今村紅さん（@cocoron_design）
Shopifyディレクター。30件以上のECサイト構築を手掛け、運用支援や広告運用も含め、個人事業主から中小企業まで幅広くサポートしている。デイトラではShopifyコースのコースマネージャーを務める。