コマースクリエイターチュートリアル

初めての構築の場合

STEP by STEPでコマースクリエイターの構築手順＆特徴を学んでいただける「開店ガイド」をご用意しています。
こちらをご活用ください。

commerce creatorチュートリアル

このガイドでは、コマースクリエイターの概要と操作方法を簡単にご紹介しています。
トライアル店舗や開店前の店舗での操作を前提としています。また主にスタートアップテーマについてご説明しています。
あらかじめご了承ください。

商品情報について

トライアルアカウント（お試し）をご利用の場合

サンプル商品が登録されています。デザインなどをご覧いただくための見本となります。
実際の店舗には含まれませんのでご注意ください。

新規店舗をご利用の場合

商品グループ、商品をご登録ください。

コマースクリエイター有効化された店舗をご利用の場合

すでにご登録済みの商品グループ、商品がコマースクリエイター専用ECサイトにも公開されています。
商品情報は共有となります。（商品画像・商品説明などを除く）

準備

HOSTS設定

コマースクリエイター専用ECサイトが表示されず「このサイトにアクセスできません」「アクセスしようとしているサイトを見つけられません」「このページを表示できません」など表示される場合、HOSTS設定が必要となります。
また、以前からのECサイトを運用中に、コマースクリエイター専用ECサイトの構築を進める場合、HOSTS設定が必要となります。

管理画面へログイン

管理画面へログインしてください。
以前からのECサイトを運用されている場合、コマースクリエイター有効化後に管理画面のURLが変更されますので、ご注意ください。

管理画面のメニューを確認

管理画面ログイン後、管理画面のメニューをご確認ください。画面上部中央にある「commerce creator」のタブからコマースクリエイターへ遷移できます。
コマースクリエイターの上部にある「管理TOP」「構築」「運用」のボタンから、以前からの管理画面へ遷移できます。

なお、管理画面の推奨ブラウザは「Google Chrome」最新版です。

管理者設定

ログインしている管理者アカウントにコマースクリエイター画面を操作できる設定が必要です。
コマースクリエイター画面を操作できないアカウントは「commerce creator」のタブがグレーに表示されています。

管理TOP＞管理者設定＞管理者編集-利用機能にある「commerce creator」にチェックして登録するボタンを押下してください。

コマースクリエイター操作

「commerce creator」タブ

「commerce creator」タブを押下してコマースクリエイターに遷移します。テーマ一覧に遷移します。テーマ一覧はコマースクリエイターのトップ画面となります。

マニュアル

画面右上の「マニュアル」ボタンから、表示中の画面に対応したオンラインマニュアルを表示できます。

説明ダイアログ

コマースクリエイターの各画面を表示すると、最初に画面の使用法などが記載されたダイアログが表示されます。右上の「×」を押下すると消去されますが、画面右上の「説明」ボタンを押下すると再度表示されます。

サイトの表示

チュートリアルを行うにあたって、ECサイトを表示させます。
コマースクリエイター専用ECサイトにDNSが設定されていない場合は、HOSTS設定が必要となります。

ECサイトを（直接）表示する場合、画面右上のECサイト名が表示されたボタンを押下して、ECサイトを表示してください。

テーマ

ECサイトの表示内容やデザインを管理する機能です。テーマごとに「スマートフォン向け」「PC向けなど」全ページ分の表示内容を構築し、デバイス設定で、スマートフォンでアクセスされた場合に表示するテーマを設定します。

初期状態では「スタートアップテーマ(PC/タブレット)」がタブレットとPC（その他）に、「スタートアップテーマ(スマートフォン)」がスマートフォンに、それぞれデバイス設定されています。デバイス設定されていれば、テーマの左上に利用中アイコンと、デバイス種類が表示されます。

画面右下にある「デバイス設定」ボタンを押下してください。

デバイス設定

いわゆるデバイス判定機能の設定になります。お客様がアクセスしたデバイスによって、表示するテーマを設定できます。スマートフォン、タブレットの場合に表示するテーマと、スマートフォン・タブレットに該当しなかった場合に表示するテーマをそれぞれ選択します。

レスポンシブサイトに設定する場合は、すべてのデバイスで同じテーマを選択します。

スマートフォンを「スタートアップテーマ(スマートフォン)」から「スタートアップテーマ(PC/タブレット)に変更して右下の保存するボタンを押下してください。スマートフォンでアクセスしても「スタートアップテーマ(PC/タブレット)」が表示されます。

スタートアップテーマとスケルトンテーマ

テーマは2種類ご用意しています。
スタートアップテーマは、デザイン済みで、サンプルパーツを配置しています。またカラー・サイズ設定で色などを変更できます。
スケルトンテーマは制作会社様の構築作業の元としていただくためのテーマで、デザインは最低限となり、サンプルパーツを配置しておりません。また、カラー・サイズ設定は無効となっています。

プレビュー

プレビューは2つのモードをご用意しています。用途に応じて使い分けてください。
デザイン確認モードお申込み済みのオプション機能はすべてONになります。また非公開商品がすべて表示されます。
動作確認モード管理画面の設定どおりの動作となります。

ECサイトをプレビュー表示する場合、プレビューボタンを押下して、ECサイトを表示してください。

ページ

画面左側のナビゲーションから「ページ」を選択してください。

あらかじめECサイトに用意されている全ページが一覧表示されます。

種類の「トップページ」を選択して検索するボタンを押下してください。
トップページの変更するボタンを押下してください。ページのタイトルなどの情報を変更できます。
有効なレイアウトから、現在表示されているレイアウトへ遷移できます。利用中表示のあるスタートアップテーマ（PC/その他）の「デフォルトレイアウト」リンクからレイアウトへ遷移できます。

レイアウトはページの表示内容を変更できる機能です。

レイアウト

トップページのレイアウト変更画面です。

左側がページの表示要素である「パーツ」を配置するエリアです。「BODY」表示されている枠内が、ほぼ「bodyタグ」の内容を表示しています。
ページの表示内容を表す「パーツ配置エリア」に、表示内容である「パーツ」を配置して構築していきます。
右側が「パーツ検索」と「パーツ検索結果一覧」になっています。「パーツ検索結果一覧」からドラッグ&ドロップまたはパーツ配置エリアへ移動ボタンで「パーツ配置エリア」にパーツを配置できます。

ECサイトトップページを表示してください。レイアウト変更画面のパーツ配置エリアにあるパーツと比べてみてください。
画面上部から「ヘッダーエリア」「トップページカルーセル」「メインエリア」「フッターエリア」となっています。

レイアウト上に表示されるパーツと種類

レイアウト上ではパーツの種類を確認できます。

「ヘッダーエリア」や「フッターエリア」はパネルパーツ、「トップページカルーセル」はパータンパーツ、「メインエリア」はレイアウトパーツとなっています。（パーツ名の左に付くアイコンで種類がわかります。種類と使い方については後述します。）
操作するボタンから「パーツを変更する」を選択すると、各パーツの変更画面へ遷移できます。パーツを変更した後、保存すると元の画面に戻ります。レイアウトの変更作業内容（未保存）は、画面遷移しても破棄されず一時的に保存されます。

ヘッダ・フッタ

レイアウトに共通して初期設定されているパーツです。共通して配置するため、スタートアップテーマではあらかじめ配置しています。カート以降の画面用レイアウトと、それ以外の画面用のレイアウトでそれぞれ2種類ずつご用意しています。

レイアウトのパーツ配置エリアの操作とレイアウトパーツ

ページに設定されているレイアウトのパーツ配置エリアに配置されているパーツを操作すると、ECサイトの表示内容が変更されます。

トップページ用レイアウト変更画面のパーツ配置エリアにある「メインエリア」のパーツを開くボタンを押下します。「メインエリア」に含まれるパーツが表示されます。
「コンテンツエリア」のパーツを開くボタンを押下します。「コンテンツエリア」に含まれるパーツが表示されます。
レイアウトパーツはレイアウト上で階層（タグの入れ子）を表現するパーツです。開くボタンで階層を一つ下ります。パンくずリンクから上位階層に遷移できます。

パーツ配置エリアの右上、「BODY」の右にあるレイアウト確認ボタンを押下すると、テキストでパーツの階層構造を確認できます。右側の「bodyに含まれるパーツ」ボタンを押下してください。確認したら閉じるボタンを押下してください。

レイアウトでパーツ配置を変更する

パーツ配置エリアに配置されているパーツの配置順を変更すると、ECサイトでの出力順が変更されます。

「コンテンツエリア」に含まれるパーツの一番上に「サイト告知」、次に「トップページコラム」が配置されています。
ECサイトにも表示されていて、「サイト告知」は「メンテナンスのため、当サイトをご利用いただけません。」と記載された部分、「トップページコラム」は「FINAL SALE実施中/スタッフのおすすめ/NEW ITEM」とある部分です。
パーツ配置エリアで「トップページコラム」を「サイト告知」の上にドラッグして順番を変更してください。
変更したら画面下の「プレビュー」ボタンを押下して、プレビューを表示するボタンを押下し、プレビューを表示してください。
「サイト告知」と「トップページコラム」の順番が変わって表示されます。

パーツの配置を変更したレイアウトですが、プレビューしているのみで保存するボタンを押下していません。よってこちらは未保存の作業状態となります。レイアウト画面ではパーツの配置について、未保存でも一定期間保存されます。

レイアウトを元に戻します。レイアウト変更画面の下部に「保存されていない変更があります（破棄する）」と表示されています。「破棄する」を選択すると、未保存の作業状態は破棄され、作業する前の状態となります。

レイアウトからパーツを外す

ECサイトとしての動作に必須の一部のパーツを除いて、不要なパーツはレイアウトから外すことができます。

パーツ配置エリアにある「サイト告知」パーツの操作するボタンを押下し「パーツを外す」を選択してください。「サイト告知」パーツがパーツ配置エリアから削除されます。（パーツそのものは削除されません。）
右下の保存ボタンを押下し、ECサイトをリロードし、サイト告知パーツが表示されていないことを確認してください。

ECサイトはキャッシュが1分間隔で更新されていますので、すぐに画面が変更されない場合は、しばらくお待ちいただいてから、もう一度リロードしてください。

画面を確認したら、パーツ検索にて「サイト告知」をキーワード検索し、パーツ一覧に表示された「サイト告知」パーツのドラッグするボタンを選択してパーツ配置エリアに移動します。または、配置するボタンを押下するとパーツ配置エリアの最下段に追加されます。
パーツ配置エリアの「トップページコラム」の上に「サイト告知」をドラッグして再び配置し、保存ボタンを押下してください。

パーツ

フリーパーツ

フリーパーツはHTMLタグを自由に入力できるパーツです。

パーツ配置エリアにある「サイト告知」パーツの操作するボタンを押下し「パーツを変更する」を選択してください。
フリーパーツ変更画面に遷移します。表示内容にHTMLタグなどのコンテンツを入力できます。
「20XX年XX月XX日(X)」の日付を変更して、右下の保存するボタンを押下してください。保存するとレイアウト変更画面に戻ります。
ECサイトのトップページを見ると、変更した部分が更新されます。

コラムパーツ

コラムパーツは、画像・見出し・本文が1セットになった「コラム」を作成できるパーツです。

パーツ配置エリアにある「トップページコラム」パーツの操作するボタンを押下し「パーツを変更する」を選択してください。
コラム変更画面に遷移します。

1つのコラムパーツで、4コラムまで作成可能です。

コラムの表示順欄にある「コラム1」の変更するボタンを押下してください。
コラム変更画面に遷移します。コラムパーツ（親）に対して、コラム（子）の画面がありますのでご注意ください。見出しを任意の文字に変更して「OKボタン」を押下してください。元の画面に戻りますので「保存する」ボタンを押下してください。保存すると、レイアウト変更画面に戻ります。
ECサイトのトップページを見ると、変更した部分が更新されます。

コラム（子）変更画面で「OKボタン」を押下しただけでは、変更内容は保存されていません。
保存ボタンを押下するのを忘れないようにしてください。

箇条書きパーツ

箇条書きパーツは、箇条書き体裁のパーツを簡単に作成できるパーツです。1つの箇条書きパーツで100行まで追加できます。

パーツ配置エリアにある「最新情報」パーツの操作するボタンを押下し「パーツを変更する」を選択してください。
箇条書き変更画面に遷移します。
行の表示順欄にある「行1」の変更するボタンを押下してください。
行変更画面に遷移します。箇条書きパーツ（親）に対して、行（子）の画面がありますのでご注意ください。本文を任意の文字に変更して「OKボタン」を押下してください。元の画面に戻りますので「保存する」ボタンを押下してください。保存すると、レイアウト変更画面に戻ります。
ECサイトのトップページを見ると、変更した部分が更新されます。

行（子）変更画面で「OKボタン」を押下しただけでは、変更内容は保存されていません。
保存ボタンを押下するのを忘れないようにしてください。

任意商品表示パーツ

任意商品表示パーツは、ECサイトで公開・販売中の商品をカルーセル表示できるパーツです。1つの任意商品表示パーツで20商品まで表示できます。

パーツ配置エリアにある「売れ筋商品」パーツの操作するボタンを押下し「パーツを変更する」を選択してください。
任意商品表示変更画面に遷移します。
商品番号がなければ、入力してください。

トライアル店舗や新規店舗の場合は、サンプルとしてgd1からgd5までの5商品があらかじめ登録してあります。

任意商品表示パーツでは、非公開商品や在庫のない商品は表示されません。運用＞商品管理＞商品検索から商品を確認していだだき、必要に応じて、公開状態・在庫状態を変更してください。

表示パターンを変更すると、任意商品表示パーツの表示項目が変わります。Aが最も多く、Cが最も少なくなります。

商品番号や表示パターンを変更して、「保存する」ボタンを押下してください。保存すると、レイアウト変更画面に戻ります。
ECサイトのトップページを見ると、変更した部分が更新されます。

カルーセルパーツ

カルーセルパーツでは、画像を順次表示するカルーセルを簡単に作成できるパーツです。

パーツ配置エリアのパンくずから「BODY」を選択してください。BODY直下にある「トップページカルーセル」パーツの操作するボタンを押下し「パーツを変更する」を選択してください。
カルーセル変更画面に遷移します。
スライドの表示順欄にある「スライド1」の変更するボタンを押下してください。
スライド変更画面に遷移します。カルーセルパーツ（親）に対して、スライド（子）の画面がありますのでご注意ください。キャプションに任意の文字を入力して「OKボタン」を押下してください。元の画面に戻りますので「保存する」ボタンを押下してください。保存すると、レイアウト変更画面に戻ります。
ECサイトのトップページを見ると、変更した部分が更新されます。

スライド（子）変更画面で「OKボタン」を押下しただけでは、変更内容は保存されていません。
保存ボタンを押下するのを忘れないようにしてください。

パネルパーツ

パネルパーツは、フリーパーツ/パターンパーツ/パネルパーツを一つにまとめ、レイアウトに配置できるパーツです。ヘッダ・フッタ・サイドメニューなど、共通部分の管理に適しています。

パーツ配置エリアにある「ヘッダーエリア」パーツの操作するボタンを押下し「パーツを変更する」を選択してください。
パネルパーツ変更画面に遷移します。
「ヘッダーコンテンツ（パネルパーツ）」と「ヘッダーナビゲーション（フリーパーツ）」が配置されています。

パーツ毎ではなく、パネルパーツにまとめてレイアウトに配置することで、レイアウトにパーツを配置する（操作の）回数を減らすことができます。またレイアウトに配置されるパーツを（ワイヤーフレーム検討時のように）大きく分類できるため、変更時にパーツを特定しやすくなります。
例えば「サイドバー」というパネルパーツを配置しておけば、「サイドバー」にあるすべての要素をまとめて配置できます。

「ヘッダーナビゲーション」の操作するボタンを押下し「パーツを変更する」を選択してください。フリーパーツ変更画面に遷移します。こちらは、ヘッダーにある「新着商品」～「キーワード検索」部分のパーツです。例えば「新着商品」を「NEW」に変更して、保存するボタンを押下してください。パネルパーツ変更画面に戻ります。パネルパーツ変更画面で戻るボタンを押下すれば、レイアウト変更画面に戻ることができます。

パネルパーツにまとめられたパーツをたどることができ、変更後に元に戻れます。

メニューパーツ

メニューパーツは、ECサイトによくあるナビゲーションメニューを作成できるパーツです。ボタンを押すだけで商品グループ情報を読み込んでメニューを自動作成できるのが特徴です。

パーツ配置エリアにある「メインエリア」のパーツを開くボタンを押下します。「メインエリア」に含まれるパーツが表示されます。
「サブエリア（メニュー等・PC）」パーツの操作するボタンを押下し「パーツを変更する」を選択してください。パネルパーツ変更に遷移します。
「ドロワーメニュー」パーツがありますので、操作するボタンを押下し「パーツを変更する」を選択してください。パネルパーツ変更に遷移します。
「商品カテゴリメニュー」がメニューパーツです。

「商品カテゴリメニュー」はECサイトの左側にあらかじめ配置されています。画面が狭い場合は「MENU」ボタンを押下すると表示されます。
操作するボタンを押下し「パーツを変更する」を選択してください。

メニュー内容の上にある「商品グループを読み込む」ボタンを押下すると、商品グループ情報を読み込んでメニューを作成できます。

商品グループは「親グループ」「子グループ」の指定により、5階層まで設定できます。メニューパーツでは、どの階層まで読み込むかを選択できます。

任意のメニュー項目をメニューに追加できます。画面右側にメニュー項目が登録されています。「お問い合わせ」というメニュー項目がありますので、ドラッグするボタンを選択してメニュー内容エリアの任意の位置に配置してください。保存するボタンを押下すると、ECサイトのメニューが更新されます。

システムパーツ

ECサイトとして必要な、システム制御部分をパーツとしてレイアウト上に表現したものがシステムパーツです。必要なシステムパーツは各レイアウトに配置されています。主に商品（詳細）や商品一覧ですが、システムパーツが細かく分割されていますので、レイアウト変更画面上で配置を変更できます。これがコマースクリエイターの大きな特徴です。

画面左側のナビゲーションから「ページ」を選択してください。種類の「商品」を選択して検索するボタンを押下してください。商品詳細ページの変更するボタンを押下してください。
有効なレイアウトから、現在表示されているレイアウトへ遷移できます。利用中表示のあるスタートアップテーマ（PC/その他）の「デフォルトレイアウト」リンクからレイアウトへ遷移できます。

商品（詳細）や商品グループなどのレイアウトにある「商品詳細エリア」内で配置を様々に変更できます。

レイアウト変更画面のパーツ配置エリアにある「メインエリア」のパーツを開くボタンを押下し、「コンテンツエリア」のパーツを開くボタンを押下します。

「商品詳細エリア」という特殊なパーツが表示されます。「商品詳細エリア」の中に商品情報を表示するシステムパーツを配置できます。

「商品詳細エリア」のパーツを開くボタンを押下します。「商品名・価格など商品情報」などのレイアウトパーツがあれば、パーツを開くボタンを押下します。

「商品名パーツ」や「商品番号パーツ」というパーツがシステムパーツです。

ECサイトで商品詳細ページを表示し、商品名と商品番号をご確認ください。
レイアウト画面で「商品名パーツ」と「商品番号パーツ」の順番を入れ替えて、保存するボタンを押下してください。
ECサイトで商品詳細ページをリロードし、商品名と商品番号の表示順が変更されたことを確認してください。
同様に、レイアウト画面で「商品名パーツ」と「商品番号パーツ」の順番をもとに戻して、保存するボタンを押下してください。

パーツ一覧とパーツの追加

パーツは、レイアウトから遷移する以外にも、パーツを直接検索して変更できます。また新たに追加できます。（システムパーツ・レイアウトパーツを除く）

画面左側のナビゲーションから「パーツ」を選択してください。

パーツ名をキーワードで検索するか、種類を選択して絞り込めます。
また、パーツとアイテム（画像など）には管理タグを設定できます。管理タグはパーツ・アイテム検索用の情報で、名称以外にも用途や使用時期、表示箇所などで分類して管理できます。（「キャンペーン」「夏」「サイドエリア」など）

パーツ一覧上部にある検索条件のキーワードに「サイト告知」、種類「フリーパーツ」を選択して「検索する」ボタンを押下してください。パーツ検索結果一覧に「サイト告知」が表示されますので、変更するボタンを押下すると、パーツ変更画面に遷移できます。
変更画面でパーツを変更したら、保存するボタンを押下します。

パーツはパーツ一覧から追加する、または複製によって追加できます。

複製する場合は、パーツ検索結果一覧に表示されたパーツの複製するボタンを押下すると、同じ内容の新しいパーツを追加できます。

追加する場合は、パーツ一覧下部にある「パーツ追加」ボタンを押下してください。追加したいパーツの種類を選択してください。
「パーツ追加ボタン」右側の▲を押下しても追加できます。（パネルパーツ・フリーパーツのみ）

アイテム

画像やJavaScript・CSSなどのファイルはアイテムでアップロードできます。

画面左側のナビゲーションから「アイテム」を選択してください。コマースクリエイターにアップロードされている画像が一覧表示されます。
アップロードするには、画面左下にある「アイテムをアップロードする」ボタンを押下し、作業されている端末に保存されているファイルを選択してください。「アップロードするファイルをドロップしてください。」と表示されているグレーのエリアに、ファイルをドラッグ&ドロップしても、アップロードできます。

アイテムはECサイトと別のサーバに保存されます。ドメインが異なりますので、相対パスでは呼び出せません。

ファイルを選択すると、アイテム追加モーダルが表示されます。アイテム名とパス、管理タグ（アイテム検索用のタグ）を設定して、保存するボタンを押下すると、アップロードできます。アイテム名とパスはファイル名が初期設定されています。パスは任意に指定でき、また「アイテム置換文字」となります。

「アイテム置換文字」はフリーパーツに<img>タグなどでアイテムのパスを記載する際に使用します。「アイテム置換文字」を使用すれば、アイテムURLに自動変換されます。

メッセージ

メッセージとは、ECサイトの表示内容のうち、システムパーツに表示する内容を変更する機能です。HTMLタグを使用できます。なお、置換文字は使用できません。

画面左側のナビゲーションから「メッセージ」を選択してください。
ECサイトの画面でログイン画面を表示してください。（画面上部にリンクがあります。）
ログイン画面にある「会員登録をしていただきますと、二度目のお買い物時にとても便利です。お気に入り商品をご登録いただけるなどお買い物が便利になります。」というメッセージを変更します。
メッセージ一覧にある「キーワード」欄に「会員登録をしていただきますと」と入力してください。変更したいメッセージの内容を入力を入力すれば、キーワードとして検索できます。

以前からの管理画面

メッセージにない表示項目や、機能の利用設定は以前からの管理画面で行います。

コマースクリエイター画面上部の「構築メニュー」または「運用メニュー」を選択してください。

カラーサイズ

カラーサイズでは、ECサイトの色を簡単な操作で変更できます。テーマごとに設定できます。

画面左側のナビゲーションから「テーマ」を選択してください。テーマの左上に利用中アイコンが表示されているテーマの「カラー・サイズ」ボタンを押下してください。

ボタンでは、ECサイトの各ボタンのラベル（表記）を簡単な操作で変更できます。テーマごとに設定できます。

画面左側のナビゲーションから「テーマ」を選択してください。テーマの左上に利用中アイコンが表示されているテーマの「ボタンズ」ボタンを押下してください。

オリジナルCSS

画面左側のナビゲーションから「テーマ」を選択してください。テーマの左上に利用中アイコンが表示されているテーマの「オリジナルCSS」ボタンを押下してください。

テーマ設定

画面左側のナビゲーションから「テーマ」を選択してください。テーマの左上に利用中アイコンが表示されているテーマの「テーマ設定」ボタンを押下してください。

バリエーションの表示とレイアウト割当名

コマースクリエイターでは、カラー・サイズなどのバリエーションがある商品のバリエーション表示およびカートボタンのタイプは、レイアウトに配置するシステムパーツで変更できます。商品や商品グループごとに変更できます。

商品や商品グループごとにレイアウトを変更するには、レイアウトと商品、レイアウトと商品グループにそれぞれ同じ「レイアウト割当名」を設定します。

レイアウトパーツ（表示条件設定）

レイアウトパーツでは、表示条件を設定できます。

フリーページ

コマースクリエイターではフリーページを自動生成にて追加できます。商品グループや商品ページなどと同じ方法でフリーページを構築できます。

画面左側のナビゲーションから「フリーページ」を選択してください。