コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]

パーツ一覧

コマースクリエイター>パーツ

ECサイトにコンテンツとして表示できるパーツの一覧です。

パーツを作成するだけでは、ECサイトには表示されません。レイアウトに配置する必要があります。

合計で10,000件までパーツを追加できます。

未契約/解約したオプションに関するレイアウトに配置されているパーツ・削除されたレイアウトに含まれているパーツ・削除されたパーツは、一覧・CSVに表示されません。

スタートアップテーマでは、ECサイトの動作上必須となる「システムパーツ」、およびフッタ・ヘッダ・パンくずなどの汎用的なパーツはすでに用意されており、レイアウトに配置済みです。

構成を参考にしていただきながら、デザインカンプ段階に、どのようなパーツ構成にするかについて検討いただくと、後の運用がしやすくなります。
※配置されているパーツの一覧はスタートアップテーマのご利用方法をご覧ください。

目次

パーツとは

パーツとは、ECサイトの表示内容を入力し、レイアウトに配置することで、任意のページデザインを構築できる機能です。
ECサイトの表示内容の一部をパーツとして追加・変更できます。パーツは、どのテーマのどのレイアウトにも配置できます。

イメージ図

利用方法としては以下を参考にしてください。

  1. デザインカンプを作る
  2. 各ページのデザイン要素やコンテンツを分割し、それぞれを「パーツ」として作成する(※分割のポイント
  3. 表示したいデザインやコンテンツを構成する「パーツ」を各テーマレイアウトに配置する
  4. ページが表示されます。
  5. ページを更新したい場合は、更新したいコンテンツを構成している「パーツ」の内容を変更する、もしくは、更新用にあらたな「パーツ」を作成し、差し替える

※分割のポイント

  • 更新頻度が高いコンテンツ(例えばキャンペーンバナーなど)は独立した「パーツ」にする
    レイアウトから「パーツ」を外すと簡単に非表示にでき、さらに差し替え用の「パーツ」を配置すれば簡単に更新できます。
  • 特定の条件でのみ表示させていたコンテンツ(例えば新規会員のみに付与する特典など)は独立した「パーツ」にする
    表示条件を利用し、コンテンツを表示・非表示にできます。
  • 複数のページや複数のテーマ(デバイス最適化で作成する場合)に共通で表示したいコンテンツは独立した「パーツ」にする
    更新・修正の場合、該当「パーツ」を一つ変更するだけで、全ページ、全デバイスに反映されます。

パーツの種類

パーツには以下の種類があります。

フリーパーツ

フリーな(形式が決まっていない)HTMLタグを直接入力できるパーツを追加できます。
HTMLタグを使用できるコメント欄として使用できます。

置換文字を利用できます。
パーツ置換文字を使用することで、他のパーツを読み込み表示(include・入れ子)できます。
アイテム置換文字を使用することで、アイテム一覧にアップロードしたファイルのパスを表示できます。
商品情報や会員情報を表示する置換文字も使用できます。

CSSや外部サービス連携用のタグのみの記述にも利用できます。

スタートアップテーマでの利用例(一部)

  • ヘッダーナビゲーション
  • 特定商取引法の表示本文
  • 会員サービス案内バナー
  • 売れ筋商品見出し
  • OGPタグ
  • レコメンド(ランキング・futureRecommend2)※futureRecommend2利用時の出力タグ/初期配置は、2023.7.31以前からコマースクリエイターをご利用の店舗様のみ  

パネルパーツ

複数のパーツをまとめてレイアウトに配置できます。

レイアウトでは一つのパーツとして表示されます。
管理画面のUIでパーツの読込表示(include・入れ子)を設定できます。
ヘッダやフッタ、サイド部分などの共通部分の管理に適しています。

スタートアップテーマでの利用例(一部)

  • headタグ共通(スマートフォン)
  • サブエリア(メニュー等・PC)
  • 告知バナーパネル

パターンパーツ

あらかじめシステムで用意した形式(パターン)のパーツを管理画面UIを利用して追加できます。
最小限のHTMLタグ入力で、ECサイトによくあるパーツを追加できます。
下記の種類があります。

トップページなどにあるカルーセルを追加できます。
スライドの1枚ごとに画像・キャプション・リンクを設定できます。
スタートアップテーマでの利用例(一部)
  • トップページカルーセル
コラムパーツ
画像+見出し+本文で構成されるコラムを追加できます。
一つのコラムパーツで1から4コラムまで作成できます。
コラムを追加した後、コラムの表示順を変更できます。
コラムの配置の縦・横も簡単に設定できます。
スタートアップテーマでの利用例(一部)
  • トップページコラム
  • 商品グループ共通告知
箇条書きパーツ
箇条書き形式でパーツを追加できます。
行頭文字(リストマーカー)なし・記号・数字に加え、注釈(※)、パンくずリンク(フリーページ用)にも対応できます。
行を追加した後、行の表示順を変更できます。
スタートアップテーマでの利用例(一部)
  • 最新情報
メニューパーツ
ECサイトのメニュー(ナビゲーション)を追加できます。
任意のメニュー項目を追加、配置できるできるだけでなく、商品グループ情報を読み込み、グループの親子関係を自動的にメニューの階層に設定できます。
スタートアップテーマでの利用例(一部)
  • ヘッダーナビゲーションメニュー
  • 商品カテゴリメニュー
  • フッターメニュー
任意商品表示パーツ
商品番号を登録するだけで、商品を横に並べて表示できるパーツです。
20商品まで登録でき、カルーセル形式で横にスライド(フリック)できます。
スタートアップテーマでの利用例(一部)
  • 売れ筋商品
  • 新着アイテム
  • おすすめ商品

その他のパーツ

パーツ一覧に表示されませんが、以下のパーツがあります。

システムパーツ
レイアウトに配置される、ECサイトのシステム制御部分をパーツとしてレイアウト上に表示したものです。
パターンパーツ・フリーパーツ・パネルパーツと同様にレイアウトに配置できます。
レイアウトパーツ
レイアウト変更画面でのみ使用する特殊なパーツで、パーツ配置エリアにてパーツを囲むタグを設定したり、階層表示できます。
また、表示条件機能により会員ログイン状態や商品によってパーツの表示・非表示を制御できます。

パーツ一覧

パーツを検索し、一覧表示できます。
全件が初期表示され、種類順にソートされています。条件を指定して検索し、操作対象のパーツを一覧に表示します。

パーツの上限は全デバイス合計で最大で10,000までです。

検索条件

キーワード
パーツをキーワードで検索できます。文字数:100字
検索対象は「パーツ名」「パーツ置換文字」「更新者」です。
部分一致で検索できます。半角・全角や英字の大文字・小文字については、区別して検索できます。
複数指定する場合は、空白で区切ってください。AND検索になります。
表示内容を検索対象にする
表示内容を検索対象にするにチェックすると、フリーパーツの「表示内容」をキーワード検索対象にできます。
表示内容に記載した置換文字でも検索できます。
管理タグ
パーツを管理タグで検索できます。文字数:50字
管理タグ欄を選択すると、候補が表示されます。
インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
複数指定した場合は、OR検索になります。
状況
パーツを「全て」「利用中」「利用なし」で検索できます。
種類
パーツを種類で検索できます。
フリーパーツ/カルーセル/コラム/メニュー/箇条書き/任意商品表示/パネルパーツから検索できます。
複数指定した場合は、OR検索になります。

なお、システムパーツはパーツ一覧から変更できないため、検索できません。
システムパーツはメッセージまたは管理画面の各種設定項目に従って出力されます。
詳しくはシステムパーツ一覧をご覧ください。
検索するボタン
指定した条件でパーツを検索できます。

一覧表示項目

状況
コマースクリエイターでレイアウトに配置されているパーツは「利用中」と表示されます。選択すると並び替えできます。
種類
パーツの種類が表示されます。選択すると並び替えできます。
パーツ名
パーツの名称が表示されます。選択すると並び替えできます。
更新者
最終更新を行った管理者の「アカウント名」が表示されます。
保存せずに各パーツ設定画面を閉じた(作業途中)場合は、該当作業者の「アカウント名」は出力されません。
選択すると並び替えできます。
更新日時
パーツの更新日時が表示されます。選択すると並び替えできます。

変更する

パーツを変更します。変更ボタンを押下すると、パーツ種類ごとの変更画面へ遷移します。

複製する

パーツを複製します。複製ボタンを押下すると、複製ダイアログが表示されます。
複製ダイアログでパーツとパーツ置換文字を入力し、「パーツを複製する」ボタンを押下すると、複製されます。
複製元パーツの内容をコピーして新しいパーツを追加できます。

パーツ名は、文字数:100字、置換文字は、半角英数・記号(._-):100字

パーツ置換文字をコピーする

押下すると、パーツ置換文字をコピーできます。
フリーパーツ表示内容やフリーページ本文に、パーツ置き換え文字を貼り付ける際に使用します。

パーツを追加する

フッタ部分にあるパーツを追加するボタンを押下します。
パーツを追加するボタンを押下すると、パーツ選択ダイアログが表示されます。
なお、パネルパーツとフリーパーツを追加する場合は、選択肢から直接追加できます。(ショートカットメニューです。)
その他のパーツを追加するを選択すると、パーツ選択ダイアログが表示されます。

追加ボタン
ショートカットメニュー
パーツ選択ダイアログ

パーツ選択ダイアログ上にて、パターンパーツ(カルーセルパーツコラムパーツ箇条書きパーツメニューパーツ任意商品表示パーツ )またはフリーパーツパネルパーツの中から、追加するパーツを選択してください。

パーツを選択すると、各パーツの追加画面に遷移します。
各項目を設定し、[保存する]を押下すると保存され、パーツ一覧に表示されます。

パーツを保存した時点では、どのレイアウトにも配置されていませんので、ECサイトに表示されることはありません。
ECサイトに公開せずに、構築作業を続けられます。

作業完了後、作成したパーツを有効なレイアウトに配置すれば、ECサイトに表示できます。レイアウトをご覧ください。

パーツ情報を出力する(CSV)

[パーツ情報を出力する]ボタン
パーツ情報出力モーダル

[パーツ情報を出力する(CSV)]を押下すると、「パーツ情報出力」モーダルが表示されます。
モーダル内で「全パーツの配置数をCSVファイルで出力」「全パーツの詳細な配置状況をCSVファイルで出力」のいずれかを選択し、[ダウンロードする]ボタンを押下すると、 該当の情報をCSVにてダウンロードできます。

未契約/解約したオプションに関するレイアウトに配置されているパーツ・削除されたレイアウトに含まれているパーツ・削除済みパーツは出力されません。件数カウントもされません。

「未配置」パーツは、出力します。

「全パーツの配置数をCSVファイルで出力」選択時

<CSVファイル仕様>

ファイル名 part_list_detail_yyyymmddhh24mmss.csv
区切り文字 ,(カンマ区切り)
改行コード CRLF
文字コード UTF-8(BOMあり)

<CSVファイル出力仕様>

更新日時「降順」で表示されます。

「配置先(親)」に複数件の同じパーツを設置した場合は1件としてカウント

項目名 文字種別 出力形式 出力内容 表示例
パーツ置換文字 文字列 goodsCommentTab
fs.panel.footerArea_min
種類 文字列 フリーパーツ
パネルパーツ
パーツ名 文字列 各「パーツ設定」画面で設定した「パーツ名」が表示されます。 レビュー件数表示
headタグシンプル(PC)
配置テーマ件数 数値 各パーツが利用されている「テーマ」の件数が表示されます。
※削除済のテーマは除外
5
1
配置レイアウト件数 数値 各パーツが利用されている「レイアウト」の件数が表示されます。
※削除済のレイアウトは除外
5
15
配置パネルパーツ件数 数値 パネルパーツ内で利用されているパーツの件数が表示されます。
※削除済のパネルパーツは除外
5
15
配置フリーパーツ件数 数値 フリーパーツ内で利用されているパーツの件数が表示されます。
※削除済のフリーパーツは除外
5
15
配置フリーページ件数 数値 フリーページ内で利用されているパーツの件数が表示されます。
※削除済のフリーページは除外
5
15
更新者 文字列 最終更新を行った管理者の「アカウント名」が表示されます。
保存せずに各パーツ設定画面を閉じた(作業途中)場合は、該当作業者の「アカウント名」は出力されません。
mirai
Taro
更新日時 文字列 yyyy/mm/dd hh24:mm:ss.fff 最終更新を行った日時が表示されます。
保存せずに各パーツ設定画面を閉じた(作業途中)場合は、該当の作業日時は出力されません。
2023/8/25 17:05:27
2020/12/11 11:54:24

「全パーツの詳細な配置状況をCSVファイルで出力」選択時

<CSVファイル仕様>

ファイル名 part_list_detail_yyyymmddhh24mmss.csv
区切り文字 ,(カンマ区切り)
改行コード CRLF
文字コード UTF-8(BOMあり)

<CSVファイル出力仕様>

更新日時「降順」で表示されます。

「配置先(親)」に複数件の同じパーツを設置した場合は1件としてカウント

項目名 文字種別 出力形式 出力内容 表示例
パーツ置換文字 文字列 average_rating
fs.carousel.topKeyVisual
種類 文字列 フリーパーツ
カルーセル
パーツ名 文字列 各パーツが利用されている「レイアウト」の件数が表示されます。 レビュー平均点(数字)
トップページカルーセル
テーマ名 文字列 各パーツが利用されている「テーマ」名が表示されます。 スタートアップテーマ(PC/タブレット)
スタートアップテーマ(スマートフォン)の複製
配置レイアウト名 文字列 各パーツが利用されている「レイアウト」名が表示されます。
※削除済のレイアウトは除外
商品グループ(PC)
トップページ(PC)
配置パネルパーツ名 文字列 各パーツが利用されている「パネルパーツ」名が表示されます。
※削除済のパネルパーツは除外
headタグ共通(PC)
サブエリア(メニュー等・PC)
配置パネルパーツ置換文字 文字列 各パーツが利用されている「パネルパーツ」の置換文字が表示されます。 fs.panel.bannerGroup_announcement
fs.panel.footerArea
配置フリーパーツ名 文字列 各パーツが利用されている「フリーパーツ」名が表示されます。
※削除済のフリーパーツは除外
0609freeincolumn
0609freeincarousel
配置フリーパーツ置換文字 文字列 各パーツが利用されている「フリーパーツ」の置換文字が表示されます。 0609free
0609freeincarousel
配置フリーページ名 文字列 各パーツが利用されている「フリーページ」名が表示されます。
※削除済のフリーページは除外
LINE ID連携でお買い物が便利に
店舗紹介
配置フリーページURL 文字列 各パーツが利用されている「フリーページ」のURLが表示されます。 line-intro
shoplist02.html