サムネイル

【初心者でも簡単】ShopifyでECサイトを構築する方法〜画像を使って解説

目次

【初心者でも簡単】Shopify で EC サイトを構築する方法〜画像を使って解説〜

コロナウイルスの影響もあり自社サイトの需要が高まっています。EC サイトを簡単に構築することができる Shopify は、海外で人気の EC プラットフォームです。最近、日本でも少しずつ話題になり始めています。

  • これから EC サイトを作りたい
  • 簡単におしゃれな EC サイトを作りたい
  • Shopify のサイト構築の仕方がわからない

という悩みを持つ方も多いのではないでしょうか。

この記事では、Shopify の運営・構築の業務を行っている株式会社 UnReact が、ShopifyEC サイトの構築を画像を使って詳しく解説していきます。

Shopify 構築手順

  1. Shopify アカウント登録
  2. Shopify サイト商品登録
  3. Shopify サイトテーマ変更

この手順でサイトを構築していきます。Shopify にあまり詳しくない方はから。

Shopify アカウント登録

「Shopify アカウント登録」を検索してください。現在は、無料体験がありますので初めての方は無料体験で作っていきましょう。「無料体験をはじめる」押してください。

無料体験をはじめる

次は、いくつかの質問に答えていきましょう。入力したら「次へ」をクリックして進んでいきましょう。「スキップ」を押して、ステップ 2 に進んでも大丈夫です。

無料体験のステップ1

ストアの住所を登録していきます。必要事項を入力したら「ストアに入る」を押しましょう。

ストアの住所を登録

ストアの画面に移動しました。

画面左下の設定をクリックし、一般設定を押してください。

「一般設定」をクリック

「メール認証の確認をしてください」とあるので登録したメールを確認しにいきましょう。

メール認証の確認

メールの中の「Comfirm email」を押したら、Shopify へようこそ表示されます。「あなたのストア」を押してストアに戻りましょう。

「Comfirm email」をクリック

ストア管理画面

以上で、Shopify アカウント登録は完了です。

商品登録

次に、ストアに商品を登録していきましょう。ここでは、商品写真を使いますので、実際に登録したい方は写真をご用意ください。では、始めていきます!

「商品を追加する」を押してください。「商品を追加する」をクリック

商品追加画面になりました。ここで商品の詳細を入力していきます。

上の項目から入力していきましょう。商品詳細ページ

「タイトル」には商品名、「説明」には商品の情報を入力し、「メディア」に写真をドラッグ・アンド・ドロップするか「ファイルを追加」で追加してください。商品の情報の入力

価格設定では、「価格」に販売価格を入力する。この価格の値段で顧客は購入することになります。セール価格を表示する場合は「割引前価格」に元の価格を入力する。「商品の一点あたりの費用」に商品の費用を入力するとマージンと利益を計算して表示してくれます。

在庫設定では、4 つの項目をそれぞれ必要に応じて記入していきます。

「SKU」とは、Stock Keeping Unit の略で在庫管理を行う時の最小の管理単位のこと。

例えば T シャツでカラーが赤、青、白の 3 色、サイズが S、M、L の 3 サイズある場合「9SKU」となる。

「バーコード」はご自身が使われているものを記入してください。お試しの方は、無記入でも大丈夫です。「在庫を追跡する」、「在庫切れの場合でも販売を続ける」は必要に応じてチェックを入れてください。

「在庫数」には商品の在庫の数を記入してください。

価格設定・在庫数の入力

配送設定では、配送が必要な商品なのか、必要であれば詳細を選んでいきます。

HS(統計品目番号)とは国際貿易商品の名称、分類を世界で統一した 6 桁の品目番号です。必要な場合に記入してください。

「バリエーション」では、商品に異なるサイズや色がある時に記入します。オプションを入力するときは、赤と入力したあとにカンマを入れるか Enter を押すと反映されます。複数のオプションが有るときは、「別のオプションを追加する」を押してください。入力したら、「保存」を押して登録します。「保存する」をクリック

以上で、商品の登録は完了です。

複数の商品を追加してみてください。

テーマ変更

最後にテーマの変更をしていきます。

ホームに行き、「テーマをカスタマイズする」を押してください。「テーマをカスタマイズする」をクリック

現在のテーマのカスタマイズをする場合は「カスタマイズ」をクリックして編集してください。今回はカスタマイズは解説しません。テーマを変更する際は、テーマライブラリの無料テーマか、Shopify テーマストアから購入することで変更することができます。「無料テーマを探す」をクリックしてください。「無料テーマを探す」をクリック

無料テーマの中から好きテーマを選択してください。選択したら、「テーマライブラリに追加する」を押してください。「テーマライブラリに追加する」をクリック

テーマライブラリに、テーマが追加されました。カスタマイズをクリックするとサイトの設定をすることができます。カスタマイズが終わったら、画面右上の「公開する」を押してオンラインストアに反映しましょう。

「公開する」をクリック

以上で、サイト構築は完了です。

お疲れさまでした!

構築例はから。

まとめ

今回は Shopify で EC サイトを構築する方法を解説しました。

無料テーマでもカスタマイズすることでおしゃれで、UX の高い、自分だけの EC サイトを作ることができます。

最後までご覧いただき、ありがとうございました。

おすすめ Shopify アプリ

シンプルブログタグ絞り込み|お手軽タグ一覧挿入のアイコン

シンプルブログタグ絞り込み|お手軽タグ一覧挿入

シンプルなブログ絞り込みアプリ。ストアにタグによるブログ絞り込み機能を簡単に導入できます。

シンプル会員商品割引|お手軽ログイン商品セール設定のアイコン

シンプル会員商品割引|お手軽ログイン商品セール設定

シンプルな日本製の商品割引アプリ。ログインしている顧客を対象とした商品割引を簡単に実現できます。

シンプルボリュームディスカウント|お手軽まとめ買い割引のアイコン

シンプルボリュームディスカウント|お手軽まとめ買い割引

商品毎に、割引テーブルに応じたまとめ買い割引を行えます。

シンプルノベルティ|お手軽ギフト特典のアイコン

シンプルノベルティ|お手軽ギフト特典

シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。

シンプルおひとり様一点限りの購入制限設定のアイコン

シンプルおひとり様一点限りの購入制限設定

シンプルな日本製のおひとり様一点限りの購入制限アプリ。商品毎に、おひとり様一点限りの購入制限を行えます。

シンプル期間限定セール|お手軽バーゲンセールのアイコン

シンプル期間限定セール|お手軽バーゲンセール

「シンプル期間限定セール|お手軽バーゲンセール」は、ストアの全商品に対して期間限定セールを簡単に実現できるアプリです。

シンプルVIP会員商品割引|お手軽VIP商品セール設定のアイコン

シンプルVIP会員商品割引|お手軽VIP商品セール設定

シンプルな日本製の条件に応じた商品割引アプリ。特別な顧客を対象とした商品割引を簡単に実現できます。

シンプル決済カスタマイズ|お手軽条件ごとの決済方法のアイコン

シンプル決済カスタマイズ|お手軽条件ごとの決済方法

シンプルな日本製の決済カスタマイズアプリ。チェックアウト画面で、特定の条件に基づいて、決済方法の非表示を行えます。

シンプル配送カスタマイズ|お手軽条件ごとの配送方法のアイコン

シンプル配送カスタマイズ|お手軽条件ごとの配送方法

シンプルな日本製の配送カスタマイズアプリ。指定した条件下で特定の配送方法を非表示にできます。

シンプルクラウドファンディング|お手軽自社クラファンのアイコン

シンプルクラウドファンディング|お手軽自社クラファン

シンプルなクラウドファンディングアプリ。商品毎にクラウドファンディングを実現できます。

シンプル会員初回注文割引|お手軽初回ログインセール設定のアイコン

シンプル会員初回注文割引|お手軽初回ログインセール設定

シンプルな日本製の条件に応じた注文割引アプリ。ログインしている顧客を対象とした初回購入時の注文割引を簡単に実現できます。

シンプル顧客タグ注文割引|顧客タグ BtoB 割引のアイコン

シンプル顧客タグ注文割引|顧客タグ BtoB 割引

シンプルな日本製の注文割引アプリ。顧客タグに応じて注文を割引したり、無料にしたりできます。

シンプル会員初回送料割引|お手軽初回ログイン送料無料のアイコン

シンプル会員初回送料割引|お手軽初回ログイン送料無料

シンプルな日本製の条件に応じた送料割引アプリ。ログインしている顧客を対象とした初回購入時の配送料割引を簡単に実現できます。

シンプル会員送料割引|お手軽ログイン送料無料のアイコン

シンプル会員送料割引|お手軽ログイン送料無料

シンプルな日本製の会員配送料割引アプリ。ログイン状態に応じて配送料を割引できます。

シンプル会員注文割引|お手軽ログインセール設定のアイコン

シンプル会員注文割引|お手軽ログインセール設定

シンプルな日本製の注文割引アプリ。顧客のログイン状態に応じて注文を自動割引できる。

シンプルセット商品在庫連携|お手軽セット商品管理の自動化のアイコン

シンプルセット商品在庫連携|お手軽セット商品管理の自動化

シンプルな日本製のセット商品在庫連携アプリ。在庫連携したセット商品販売を簡単に実現できます。

シンプルVIP注文割引|お手軽VIP会員セール設定のアイコン

シンプルVIP注文割引|お手軽VIP会員セール設定

シンプルな日本製の条件に応じた注文割引アプリ。特別な顧客を対象とした注文割引を簡単に実現できます。

シンプル延長保証|お手軽保証付き商品販売のアイコン

シンプル延長保証|お手軽保証付き商品販売

シンプルな保証付与アプリ。商品毎に保証付与ができます。

シンプルVIP送料割引|お手軽VIP会員送料無料のアイコン

シンプルVIP送料割引|お手軽VIP会員送料無料

シンプルな日本製の条件に応じた送料割引アプリ。特別な顧客を対象とした配送料割引を簡単に実現できます。

シンプル追従カート|追従購入ボタン(Buy Button)のアイコン

シンプル追従カート|追従購入ボタン(Buy Button)

シンプルな追従カートアプリ。ストアに追従カートを簡単に導入できます。

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料のアイコン

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料

シンプルな日本製の送料割引アプリ。顧客タグに応じて配送料を割引したり、無料にしたりできます。

シンプルパンくずリスト|お手軽 Breadcrumbsのアイコン

シンプルパンくずリスト|お手軽 Breadcrumbs

カスタマイズ性の高いパンくずをストアに表示できる!

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事