---
title: 管理画面よりECの設定を行う
category: EC
weight: 2
---

Kurocoを利用してECサイトを作成する方法を説明します。
KurocoでECサイトを構築するには大きく3つの作業が必要です。

1. 管理画面よりECを設定する（本ページ）
2. [ECサイト構築に必要なAPIの設定を行う](/ja/docs/tutorials/ec-api/)
3. [フロントエンドを作成する](/ja/docs/tutorials/ec-front-end/)

本チュートリアルでは、Kuroco管理画面のECメニューより、店舗情報の設定方法と商品の追加方法を説明します。

## 店舗情報の設定
ECサイト構築にあたり、最初に下記情報を設定します。

|項目   |説明  |
| :--- | :--- |
|店舗情報|店舗の運営者情報を設定します。|
|支払い方法|購入時の支払い方法を設定します。|
|販売方法|商品の販売方法を設定します。|

### 店舗情報を設定する
[EC] -> [店舗情報設定]をクリックし、店舗情報設定ページに遷移します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7447683f223f35a68f9360b678b2bb66.png)

店舗情報設定のページで配送時の無料条件や決済サービス（Paygent）との連携設定を行います。  
今回は例として下記のように登録します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c2a5e520beb2932330f82124f0ef4cf0.png)

|項目   |内容  |
| :--- | :--- |
|会社名|株式会社Kuroco EC|
|商品注文受付（管理者宛）<br/>メールアドレス|`no-reply@example.com`|
|通貨|円|
|おまとめ配送|利用しない|
|送料無料条件|1000|
|送料計算方法|カート単位で計算|
|決済代行サービス情報|決済代行サービス未使用|

:::tip
店舗情報設定の詳細は[管理画面マニュアル -> 店舗情報設定](/ja/docs/management/ec-shopmaster-edit/)をご確認ください。  
:::

### 支払方法を設定する
[EC] -> [支払い方法設定]をクリックし、支払い方法設定一覧ページに遷移します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/dcb14a6fc1c1521916c647d1c62eb0f5.png)

[支払い方法設定一覧](/ja/docs/management/ec-paymenttype-list/)のページから[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/457c02934446973533e3046b64d60ffe.png)
  
ここでは下記のように銀行振込を設定し[追加する]をクリックします。  

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/af67cb8a46e88384670117a071779a15.png)

|項目   |内容  |
| :--- | :--- |
|支払種別|銀行振込|
|支払い方法|銀行振込|
|手数料|0|
|対象金額|0 〜 999999|
|並び順|未入力|

:::tip
支払方法設定の詳細は[管理画面マニュアル -> 支払方法編集](/ja/docs/management/ec-paymenttype-edit/)をご確認ください。  
:::

:::tip
今回のチュートリアルでは銀行振込による決済を利用するため、外部の決済サービスは使用しませんが、Kurocoではデフォルトの決済サービスとしてPaygentを利用出来ます。
Paygent設定の詳細は [Paygentと連携するには](/ja/docs/tutorials/ec-paygent/) をご確認ください。  
:::

### 販売方法を設定する
[EC] -> [販売方法設定]をクリックし、販売方法設定一覧ページに遷移します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5b56c6d6e23db01963bdfd87c53302cf.png)

販売方法設定一覧のページから[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/329fe7724d41580f6bdf6e29881b3746.png)
  
下記のように設定し[追加する]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/c5f2c1e100bb677826f801aaa3abd689.png)

|項目   |内容  |
| :--- | :--- |
|販売方法|一般商品|
|支払い方法|銀行振込|
|商品種別|宅配|
|サービス名／配送業者名|未入力|
|説明|未入力|
|サービス利用料／配送料|220|
|サービス利用料／配送料 (配送先別設定)|未入力|
|送料無料の対象に含めない|未入力|

:::tip
支払方法設定の詳細は[管理画面マニュアル -> 販売方法編集](/ja/docs/management/ec-delivery-edit/)をご確認ください。  
:::

以上で、店舗情報の設定が完了です。

## 商品の追加
ここからは販売商品の登録方法を説明します。
今回は「衣料品」と「靴」というSKUを設定し、それぞれ商品を追加する方法を説明します。

### コンテンツ定義・SKU設定を設定する
まずはSKUの設定をします。  
Kurocoでは商品はコンテンツ定義で設定し、値段や配送方法、在庫数の設定を商品設定で管理します。そのため、先にコンテンツ定義を設定します。  

:::tip
コンテンツ定義とSKU設定は1対1で紐付きます。
:::

コンテンツ定義のページから[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e5ca05b33f98348925bb0f3db12d55da.png)

「衣料品」のコンテンツ定義を追加します。今回は下記設定で追加し、[追加する]をクリックします。  

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/10e48029159c616fe13dae5c19d6813a.png)

|項目   |内容  |
| :--- | :--- |
|グループ名|衣料品|
|並び順| 1000|

:::tip
コンテンツ定義の詳細は[管理画面マニュアル -> コンテンツ定義編集](/ja/docs/management/content-structure-topics-group/)をご確認ください。  
:::

同様に「靴」のコンテンツ定義も追加します。  

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/2680df1b96c1e55d6beadfb4f9bba87f.png)

|項目   |内容  |
| :--- | :--- |
|グループ名|靴|
|並び順| 900|

以上で「衣料品」と「靴」のコンテンツ定義の追加ができました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/dc2dbd89d5e7b5ddb6946b914dbfae44.png)

次に、SKUを設定します。  
[EC] -> [SKU設定を追加]をクリックし、SKU設定を追加ページに遷移します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2d2094ae8b44e04d9f54c6f65a062779.png)

今回は、先ほど作成したコンテンツ定義「衣料品」と紐付けてSKU設定を追加します。
今回は下記設定で追加し、[追加する]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/6cbd5238b397035e5c32c5eecaf34618.png)

|項目   |内容  |
| :--- | :--- |
|SKU設定名|衣料品|
|コンテンツ定義|衣料品|

:::tip
SKU設定の詳細は[管理画面マニュアル -> SKU設定](/ja/docs/management/ec-sku-setting/)をご確認ください。 
:::

以上で「衣料品」SKU設定完了です。  

同様に「靴」のSKU設定も追加し、SKU設定の追加は完了です。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/96bdd77f5492b8d91b61d557f358625c.png)

### SKUを追加する
次に商品アイテムを特定するSKUを追加します。  
今回のSKUは商品規格(色（赤、黒..）、サイズ（S、M、L...）)の組み合わせとします。 

[ECメインメニュー]より[EC]プルダウンをクリックし、[SKU設定一覧]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/96fb886235402559c3abe9b41bb2fe7d.png)

SKU設定一覧のページより「衣料品」の[設定]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c46c15c9a0392ce1004a1564df057d1c.png)

[SKU/規格]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b4b24e39ee6de96b1c3b310a7ccec0b9.png)

[規格を追加]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/9382b165384c14c80beb8e39f79ce22e.png)
商品規格編集ページが表示されるので、サイズに関する規格を追加します。  
今回は下記のように設定し、[追加する]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/62ff7215a0e358964affc0e482d0691c.png)

|項目   |内容  |
| :--- | :--- |
|規格名|サイズ|
|分類| Sサイズ<br/>Mサイズ<br/>Lサイズ|

同様にカラーに関する規格を追加します。今回は下記のように設定します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1800c7d6524339299867cd4196bc9bff.png)

|項目   |内容  |
| :--- | :--- |
|規格名|カラー|
|分類| ブラック<br/>ホワイト<br/>レッド|

規格が追加されたことを確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d53ebfe6ba94bef944a4d863f1774084.png)

:::tip
商品規格編集の詳細は[管理画面マニュアル -> 商品規格編集](/ja/docs/management/ec-class-edit/)をご確認ください。
::: 

次にSKUを追加します。[SKU追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2e2c1b8b3fc48d94c630ca5c0c04ef6a.png)

商品規格SKU編集ページが表示されるので、下記のように規格の組み合わせを設定し、[追加する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0f7e99874e5be2c8b8745906de61c37c.png)

|項目   |内容  |
| :--- | :--- |
|サイズ|Sサイズ|
|カラー|レッド|

同様に、必要なパターンだけSKUを追加します。  
SKUを追加すると[SKU一覧]にて下記のように確認ができます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a6c596b4e8b3d04d5e8c34c3326d33be.jpg)

:::tip
[商品企画編集](/ja/docs/management/ec-class-edit/)のページの[全てのSKUパターンを作成]のボタンや、[SKU一覧](/ja/docs/management/ec-combination-list/)のページの[CSVアップロード]もご活用ください。 
:::

「靴」に対しても同様の流れで規格とSKUを追加します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/451e8fc57847cdc360ffc59ca1a89c1e.png)

### 商品を追加する 
次に商品を追加します。Kurocoでは、1つのコンテンツに対して各SKUの商品を作ることができます。
商品設定では価格、配送方法、在庫数、DL商品の場合は電子データなどを設定します。

今回は下記のイメージにて商品を追加します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/0812e7516e2704a31be7a1572f53352b.png)

コンテンツから[衣料品]をクリックし、右上の[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cf66c26857fd677a502d16524cec2572.png)

今回は下記のように記載し、[追加する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/9122df3757ed50fa709792944ff0bfeb.png)

|項目   |内容  |
| :--- | :--- |
|タイトル|ジャケットA|

同様に「ジャケットB」「コートC」「コートD」を追加すると下記のように衣料品一覧が確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ef1de3c4fca2631812a3151a85e4ed34.png)

次に商品(SKU)を追加します。
衣料品一覧でタイトルをクリックして、衣料品編集ページに遷移します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/98ff5667c0c7f1bc7d42b4e967c1b64e.png)

商品(SKU)の[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6693134f9d5d5a93198c2bbcb82ea4ea.png)

商品規格SKU編集のページに遷移します。規格(サイズ・カラー/)の組み合わせを設定して[追加する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/61d9411fb7ab5497043ea79e86ad145c.png)

商品設定編集のページに遷移します。今回は下記のように記載し、[追加する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/838cac26f4c38d363b2a56dcfbfe1bfe.jpg)

|項目   |内容  |
| :--- | :--- |
|商品名|ジャケットA_S_R|
|販売価格|10000|
|在庫数| 10|
|販売方法|一般商品|

同様に必要な商品を追加していきます。追加した商品は[商品一覧](/ja/docs/management/ec-product-list/)のページで確認ができます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/cf11839c102b53cbf29f638817f4cfcc.png)
「靴」も同様の流れで商品を追加します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ce6d59c37cf84cf2f68c5b49fca7b452.png)

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

:::tip
商品設定の詳細は[管理画面マニュアル -> 商品設定](/ja/docs/management/ec-product-edit/)をご確認ください。 
:::

## メールの設定を行う
商品購入時、入金確認時、および商品発送時に購入者に対してメール通知を行いますので、そのメールの文面を設定します。  
[オペレーション] > [メッセージひな形]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/be3fdd5c65007a98fd554828930f3384.png)

### 購入完了メール（銀行振込）
注文申し込みが行われた際にお客様へ送信するメールの内容を変更します。

「購入完了メール（銀行振込）」のテンプレート名をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c0fab555b2109c42d5c45bc5241055ed.png)

編集画面が表示されます。
今回は銀行振込を利用するので、振込先の口座番号の記載や、振込記述等必要情報を追記してください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bae46597c36b919c97f95099754ed7ef.jpg)

### 決済完了メール（銀行振込）
入金を確認した後お客様に送るメールの内容を変更します。

「決済完了メール（銀行振込）」のテンプレート名をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/17cd2ae0813f9f5ee7a7263d221a77bc.png)

編集画面が表示されますので文言などを変更して下さい。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/20d3afdb39c4a66340da30d4efdbc6a4.jpg)

お客様からの入金確認後、注文情報の`入金日時`部分にある「入金済みにする」にチェックを入れ、更新することで入金確認（決済完了）のメールを送ることが出来ます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/0da54661e780e176a8a2e52361b2139e.png)

### 商品発送メール(会員購入) 
商品を発送した際にお客様へ送るメールの内容を変更します。

「商品発送メール(会員購入)」のテンプレート名をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/463bf3f63926b49118b233511479034e.png)

編集画面が表示されますので文言などを変更して下さい。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d94d7ac266d79ec9b6bc9ed4bb92b5bd.png)

:::caution
今回会員制ECサイトを想定しているので「商品発送メール(会員購入) 」の変更となりますが、非会員による購入が可能な場合は「商品発送メール（ゲスト購入）」メールも合わせて変更して下さい。
:::

### メール送信方法について
メールの送信は「売上/配送管理」画面より対応します。
[EC] -> [売上/配送管理]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0eeaddd5b4eb9a767c290d95098bffaa.png)

「売上/配送管理」画面から「発送メールを送信する」を選択して配送処理を行うことで商品発送メールを送ることが出来ます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/32a3fdf08622a19e6328e09f0b3d8fbd.png)

以上で管理画面での設定が完了です。

次に、APIを設定します。[ECサイト構築に必要なAPIの設定を行う](/ja/docs/tutorials/ec-api/)をご確認ください。