1. マニュアル
  2. 未設定

デザインテンプレート

デザインテンプレートについて

「なるべくノーコードでデザイン構築できるようにしたい。」
のご要望にお応えしまして、デザインテンプレートを用意しました。

・管理画面の操作で内容を追加するだけ。
・画像は指定画像のみを差し替えするだけ
・文言は指定する個所を変更するだけ。

それだけで下記のイメージサイトが作れます。

デザインテンプレート利用にあたっての注意点 デザインテンプレートを使用する場合は、新規でユーザーテンプレートを作成する必要があります。

デザインテンプレートをご利用にあたって、2024年3月15日以降の機能はご利用できない場合があります。
利用するには、テンプレートファイルの差分更新を店舗様側で行う必要があります。

テンプレートファイルの差分が生じた場合は、サポートセンターからメールでご案内いたします。
また、マニュアルトップページのリリースノートにも掲載しておりますのでご確認ください。

テンプレートファイルの差分更新につきましては、適宜更新を行ってください。





デザインイメージ

デザインテンプレートを適用すると、TOPページ、商品詳細ページ、リストページが以下のデザインに変更できます。


サイトTOP

PCページ スマートフォンページ
画像を押下すると、全体のイメージを確認できます。
※[PRODUCTS]と[NEW]の個所の表示につきましては、管理画面での設定が反映されていますためイメージ画像とは表示が異なります。
・[PRODUCTS]はコンテンツ管理＞オススメ商品管理＞オススメ商品1で設定されている内容が反映されます。
・[NEW]はコンテンツ管理＞新着情報管理で設定されている内容が反映されます。


商品詳細ページ

PCページ スマートフォンページ
画像を押下すると、全体のイメージを確認できます。


商品一覧ページ

PCページ スマートフォンページ
画像を押下すると、全体のイメージを確認できます。




デザイン適用方法

デザインテンプレートをご使用するには、PC、スマートフォンのテンプレートファイルを編集する必要があります。
以下、適用方法を参考にご対応ください。


弊社作業にて、当機能の実装代行(有償)を承らせていただくことも可能です。
詳細や申込みは下記よりお願いいたします。
実装代行の申込み


PCの適用方法

STEP1からSTEP8まで順にご対応してください。

STEP1.　 テンプレートのコピーと設定
STEP1-1.　 テンプレートのコピー
デザイン管理＞PC用設定＞テンプレート設定＞テンプレートコピーよりテンプレートのコピーを行います。
① コピー元テンプレート選択：「pr_default」を選択
② 新テンプレート名：「rpst_design_template」と入力
③ テンプレートをコピーを押下してコピーする

▼設定イメージ

STEP1-2.　 テンプレートの設定
デザイン管理＞PC用設定＞テンプレート設定＞テンプレート選択よりテンプレートの設定を行います。
① ユーザーテンプレートの「rpst_design_template」にチェック
② テンプレートを設定を押下して設定する

▼設定イメージ


注意 新規の場合、テンプレートコピー後はテンプレートを必ず設定してください。
設定しない場合、STEP2の新規ブロック追加や編集ができません。


対応完了後、STEP2へ


テンプレートについては、下記マニュアルをご参照ください。
テンプレート設定_マニュアル
STEP2.　 新規ブロックの追加
デザイン管理＞PC用設定＞ブロック編集より下記のブロックを新規で作成してください。

追加ブロック 登録内容
デザインブロックーFVスライダー
ブロック名 デザインブロックーFVスライダー
ファイル名 design-slider01
デザインブロック-説明(右テキスト)
ブロック名 デザインブロック-説明(右テキスト)
ファイル名 design-explanation01
デザインブロック-説明(左テキスト)
ブロック名 デザインブロック-説明(左テキスト)
ファイル名 design-explanation02
デザインブロック-SNS
ブロック名 デザインブロック-SNS
ファイル名 design-sns
デザインブロック-よくある質問
ブロック名 デザインブロック-よくある質問
ファイル名 design-qa
① PCブロック編集画面下部の新規ブロック作成を押下
② ブロック名とファイル名を入力して登録を押下して作成完了です。

下記画像を参考に、①、②を繰り返して上記のブロックを作成してください。


※テキストアリア等はなにも記載しないで登録してください。
STEP4で、上記5つのブロックはファイルごと上書きします。

登録後は下記画像のように表示されます。




上記画像のように5つのブロックを作成したら、STEP3へ


ブロックの追加方法は下記マニュアルをご参照ください。
ブロック編集_マニュアル
STEP3.　 レイアウトの変更
デザイン管理＞PC用設定＞レイアウト設定より「TOPページ」のレイアウトを下記のように変更を行ってください。



※赤枠のブロックはSTEP2で作成したブロックです。
※「オススメ商品1」と「新着情報」は既存ブロックです。

上記の設置が完了したらレイアウトを保存を押下して設定完了です。


また、「カテゴリページ」「商品詳細ページ」のレイアウトは下記のようにブロックは全て外してください。



設定が完了したら、STEP4へ


レイアウトの設定は下記マニュアルをご参照ください。
レイアウト設定_マニュアル
STEP4.　 ファイルをダウンロードする
以下よりファイルをダウンロードしてください。
ファイルダウンロード

ダウンロードしたら、STEP5へ
STEP5.　 ダウンロードしたzipファイルを解凍する
STEP4でダウンロードしたファイルはzipで圧縮されています。
ダウンロード後に下記を参考に解凍ソフト等を使用してファイルを解凍してください。

■Windows11を使用している方
ダウンロードした「design_template.zip」を右クリックで選択し、「すべて展開」を押下することで、解凍することが可能となります。
展開された「design_template」内のファイルを使用してください。

■Macを使用している方
ダウンロードした「design_template.zip」をダブルクリックすると展開されます。
展開された「design_template」内のファイルを使用してください。

■上記以外の方
解凍ソフトをご用意いただき、「design_template.zip」を解凍してください。（解凍ソフトは、検索エンジン等で適宜お探しください。）
展開された「design_template」内のファイルを使用してください。

zipファイルの解凍が完了したら、STEP6へ
STEP6.　 ファイルをアップロードする
STEP5で解凍したファイルを以下よりアップロードしてください。
デザイン管理＞デザイン共通設定＞ファインダー

ファインダーについては下記マニュアルをご参照ください。
ファインダー_マニュアル


ダウンロードしたファイルを開くと[pc]と[sp]のフォルダがあります。 [pc]のフォルダを開きます。

アップロードするファイルは多数ありますのでアップロード方法は以下を参考にご対応ください。


STEP6-1.　 主要ファイルのアップロード

赤枠内のファイルをファインダーよりアップロードします。

アップロード先フォルダ /pc/templates/rpst_design_template



【アップロード方法】
① 上記画像の赤枠内のファイルを削除します。
削除方法は、ファインダー_マニュアルの操作概要欄の⑤を参照ください。
※削除前にファイルをバックアップ取ってください。

② 削除後、上記画像の赤枠内のファイルをアップロードします。
アップロード方法は、ファインダー_マニュアルの操作概要欄の①を参照ください。

STEP6-2.　 blockファイルのアップロード

赤枠内のファイルをファインダーよりアップロードします。

アップロード先フォルダ /pc/templates/rpst_design_template/block



【アップロード方法】
① 上記画像の赤枠内のファイルで既に存在するファイルは先に削除します。
削除方法は、ファインダー_マニュアルの操作概要欄の⑤を参照ください。
※削除前にファイルをバックアップ取ってください。

② 削除後、上記画像の赤枠内のファイルをアップロードします。
アップロード方法は、ファインダー_マニュアルの操作概要欄の①を参照ください。

STEP6-3.　 CSSファイルのアップロード

赤枠内のファイルをファインダーよりアップロードします。

アップロード先フォルダ /pc/templates/rpst_design_template/assets/css



【アップロード方法】
上記画像の赤枠内のファイルをアップロードします。
アップロード方法は、ファインダー_マニュアルの操作概要欄の①を参照ください。

STEP6-4.　 フォルダの追加

① /pc/templates/rpst_design_template/assetsのフォルダ内に[js]のフォルダを追加



② ①で追加した[js]フォルダ内に[slick]フォルダを追加



③ ②で追加した[slick]フォルダ内に[font]フォルダを追加



【フォルダの追加方法】


詳細はファインダー_マニュアルの操作概要欄の①を参照ください。

STEP6-5.　 jsファイル等のアップロード

① 赤枠内のファイルをファインダーよりアップロードします。

アップロード先フォルダ /pc/templates/rpst_design_template/assets/js



② 赤枠内のファイルをファインダーよりアップロードします。

アップロード先フォルダ /pc/templates/rpst_design_template/assets/js/slick



③ 赤枠内のファイルをファインダーよりアップロードします。

アップロード先フォルダ /pc/templates/rpst_design_template/assets/js/slick/font



アップロード方法は、ファインダー_マニュアルの操作概要欄の①を参照ください。

STEP6-6.　 画像ファイルのアップロード

画像ファイルは2.デザインイメージで表示している画像です。
必要に応じてアップロードする画像を店舗様自身で用意して差し替えていただく必要があります。


① /pc/templates/rpst_design_template/assets/imgのフォルダ内に[common]のフォルダを追加
※STEP6-4.ファイルの追加と同じように指定フォルダに[commonフォルダ]を追加してください。

② /pc/templates/rpst_design_template/assets/imgのフォルダ内に[home]のフォルダを追加
※STEP6-4.ファイルの追加と同じように指定フォルダに[homeフォルダ]を追加してください。

③ 赤枠内のファイルをファインダーより[commonフォルダ]にアップロードします。


④ 赤枠内のファイルをファインダーより[homeフォルダ]にアップロードします。

ここまでの作業でデザインの適用が完了しました。
正常に適用されているかSTEP7で確認してください。
STEP7.　 サイトの確認
デザイン管理＞PC用設定＞テンプレート設定よりプレビュー機能を使用してサイトの確認を行います。


「rpst_design_template」横のプレビューを押下すると別ウインドウでサイトがプレビュー表示されます。
2.デザインイメージのイメージ画像通りに表示されているか確認してください。


プレビューの解除方法などは下記マニュアルを参照ください。
プレビュー機能_マニュアル


確認できたらSTEP8へ
STEP8.　 オリジナルデザインへの変更
STEP1～STEP6を適用した状態ですとサンプルの画像や文言が表示されています。
御社オリジナルのページに仕上げてください。

変更方法は以下を参考にご対応ください。

対応箇所については表示箇所詳細を参照ください。

STEP8-1.　 画像ファイルの作成

対象画像は以下のファイルです。
「表示箇所詳細」で表示箇所を参考に、オリジナルサイトの画像を作成してください。
※ファイル名は変えないでください。

対象フォルダ 対象ファイル 表示箇所
img＞home fv_bg01.jpg
fv_bg02.jpg
fv_bg03.jpg
 表示箇所詳細①の個所（FVスライダー画像）
※画像サイズは任意ですが、目安はw1400×h700
img＞home img_intro.jpg
 表示箇所詳細②の個所
※画像サイズはw720×h623
img＞home img_motion.png
 表示箇所詳細③の個所
※画像サイズはw412×h385
img＞home img_insta01.jpg
img_insta02.jpg
img_insta03.jpg
img_insta04.jpg
img_insta05.jpg
 表示箇所詳細④の個所（SNS画像表示）
※画像サイズ
img_insta01,03,04,05はw282×h279
img_insta02はw564×h564
img＞common logo.png
 表示箇所詳細⑤の個所（フッターのサイトロゴ）
STEP8-2.　 画像ファイルのアップロード

STEP8-1で作成した画像をアップロードします。
STEP6-6のを参考にアップロードしてください。
※先に対象ファイルを削除した後にアップロードします。

STEP8-3.　 文言の変更

文言の変更箇所はデザイン管理＞デザイン共通設定＞ファインダーより以下を参考にご対応ください。

表示箇所詳細⑥
以下のファイルにアクセスしてこちらを参考に文言を編集してください。

/pc/templates/rpst_design_template/bloc/design-slider01.tpl

表示箇所詳細⑦
以下のファイルにアクセスしてこちらを参考に文言を編集してください。

/pc/templates/rpst_design_template/bloc/design-explanation01.tpl

表示箇所詳細⑧
以下のファイルにアクセスしてこちらを参考に文言を編集してください。

/pc/templates/rpst_design_template/bloc/design-explanation02.tpl

表示箇所詳細⑨
以下のファイルにアクセスしてこちらを参考にリンク先を編集してください。

/pc/templates/rpst_design_template/bloc/design-sns.tpl

表示箇所詳細⑩
以下のファイルにアクセスしてこちらを参考に文言を編集してください。

/pc/templates/rpst_design_template/bloc/design-qa.tpl
STEP8-4.　 表示箇所詳細⑪～⑬について

表示箇所詳細⑪
デザイン管理＞デザイン共通設定＞ロゴ画像設定で設定した画像が表示されます。

ロゴ画像設定については下記マニュアルをご参照ください。
ロゴ画像設定_マニュアル

表示箇所詳細⑫
コンテンツ管理＞オススメ商品管理＞オススメ商品1で設定されている内容が表示されます。

オススメ商品管理については下記マニュアルをご参照ください。
オススメ商品管理_マニュアル

表示箇所詳細⑬
コンテンツ管理＞新着情報管理で設定されている内容が反映されます。
新着情報管理については下記マニュアルをご参照ください。
新着情報管理_マニュアル


対応完了後にSTEP7の「サイトの確認」を再度行い、画像や文言など正常に変更されているか確認してください。


全ての作業が完了後に、サイトトップからページを確認して表示など問題ないかを確認してください。


スマートフォンの適用方法

基本的な作業は「PCの適用方法」と同じです。
下記STEP1からSTEP6まで順にご対応してください。
STEP1.　 テンプレートのコピーと設定
STEP1-1.　 テンプレートのコピー
デザイン管理＞スマートフォン用設定＞テンプレート設定＞テンプレートコピーよりテンプレートのコピーを行います。
① コピー元テンプレート選択：「pr_default」を選択
② 新テンプレート名：「rpst_design_template」と入力
③ テンプレートをコピーを押下してコピーする

※設定方法はPCと同じです。
STEP1-2.　 テンプレートの設定
デザイン管理＞スマートフォン用設定＞テンプレート設定＞テンプレート選択よりテンプレートの設定を行います。
① ユーザーテンプレートの「rpst_design_template」にチェック
② テンプレートを設定を押下して設定する

※設定方法はPCと同じです。

注意 新規の場合、テンプレートコピー後はテンプレートを必ず設定してください。
設定しない場合、STEP2の新規ブロック追加や編集ができません。


対応完了後、STEP2へ


テンプレートについては、下記マニュアルをご参照ください。
テンプレート設定_マニュアル
STEP2.　 新規ブロックの追加
デザイン管理＞スマートフォン用設定＞ブロック編集より下記のブロックを新規で作成してください。

追加ブロック 登録内容
デザインブロックーFVスライダー
ブロック名 デザインブロックーFVスライダー
ファイル名 design-slider01
デザインブロック-説明(右テキスト)
ブロック名 デザインブロック-説明(右テキスト)
ファイル名 design-explanation01
デザインブロック-説明(左テキスト)
ブロック名 デザインブロック-説明(左テキスト)
ファイル名 design-explanation02
デザインブロック-SNS
ブロック名 デザインブロック-SNS
ファイル名 design-sns
デザインブロック-よくある質問
ブロック名 デザインブロック-よくある質問
ファイル名 design-qa
① スマートフォンブロック編集画面下部の新規ブロック作成を押下
② ブロック名とファイル名を入力して登録を押下して作成完了です。

※テキストアリア等はなにも記載しないで登録してください。
STEP4で、上記5つのブロックはファイルごと上書きします。

※設定方法はPCと同じです。


設定完了後、STEP3へ


ブロックの追加方法は下記マニュアルをご参照ください。
ブロック編集_マニュアル
STEP3.　 レイアウトの変更
デザイン管理＞スマートフォン用設定＞レイアウト設定よりPCと同様のレイアウトで変更を行ってください。

設置が完了したらレイアウトを保存を押下して設定完了です。


設定が完了したら、STEP4へ


レイアウトの設定は下記マニュアルをご参照ください。
レイアウト設定_マニュアル
STEP4.　 ファイルをアップロードする
[PCの適用方法]のSTEP5で解凍したファイルを以下よりアップロードしてください。
デザイン管理＞デザイン共通設定＞ファインダー

アップロードは以下を参考にご対応ください。
ダウンロードしたファイルにを開くと[pc]と[sp]のフォルダがあります。
[sp]のフォルダを開きます。

STEP4-1.　 主要ファイルのアップロード

[sp]フォルダからPCのSTEP6-1を参考に以下のフォルダへアップロードしてください。

アップロード先フォルダ /smp/templates/rpst_design_template
STEP4-2.　 blockファイルのアップロード

[sp＞block]フォルダからPCのSTEP6-2を参考に以下のフォルダへアップロードしてください。

アップロード先フォルダ /smp/templates/rpst_design_template/block
STEP4-3.　 フォルダの追加

フォルダの追加はPCのSTEP6-4を参考にご対応ください。

① /smp/templates/rpst_design_template/colorvariation/defaultのフォルダ内に[assets]のフォルダを追加


② ①で追加した[assets]フォルダ内に[css][img][js]のフォルダを追加


③ ②で追加した[img]フォルダ内に[common][home]のフォルダを追加


④ ②で追加した[js]フォルダ内に[slick]のフォルダを追加


⑤ ④で追加した[slick]フォルダ内に[fonts]のフォルダを追加

STEP4-4.　 CSSファイルのアップロード

[sp＞assets＞css]フォルダからPCのSTEP6-3を参考に以下のフォルダへアップロードしてください。
※STEP4-3の②で追加した[css]フォルダです。

アップロード先フォルダ /smp/templates/rpst_design_template/colorvariation/default/assets/css
STEP4-5.　 jsファイル等のアップロード

① [sp＞assets＞js]フォルダからPCのSTEP6-5の①を参考に以下のフォルダへアップロードしてください。
※STEP4-3の②で追加した[js]フォルダです。

アップロード先フォルダ /smp/templates/rpst_design_template/colorvariation/default/assets/js

② [sp＞assets＞js＞slick]フォルダからPCのSTEP6-5の②を参考に以下のフォルダへアップロードしてください。
※STEP4-3の④で追加した[slick]フォルダです。

アップロード先フォルダ /smp/templates/rpst_design_template/colorvariation/default/assets/js/slick

③ [sp＞assets＞js＞slick＞fonts]フォルダからPCのSTEP6-5の③を参考に以下のフォルダへアップロードしてください。
※STEP4-3の⑤で追加した[fonts]フォルダです。

アップロード先フォルダ /smp/templates/rpst_design_template/colorvariation/default/assets/js/slick/fonts
STEP4-6.　 画像ファイルのアップロード

[sp＞assets＞img＞commonとhome]フォルダからPCのSTEP6-6を参考に以下のフォルダへアップロードしてください。

アップロード先フォルダ /smp/templates/rpst_design_template/colorvariation/default/assets/img/common
/smp/templates/rpst_design_template/colorvariation/default/assets/img/home
ここまでの対応でデザインの適用が完了しました。
正常に適用されているかSTEP5で確認してください。
STEP5.　 サイトの確認
デザイン管理＞スマートフォン用設定＞テンプレート設定よりプレビュー機能を使用してサイトの確認を行います。
PCのSTEP7を参考にご対応ください。

確認できたらSTEP6へ
STEP6.　 オリジナルデザインへの変更
[PCの適用方法]のSTEP8を参考に同様の作業をおこなってください。

スマートフォン用の対応箇所については表示箇所詳細を参照ください。

STEP6-1.　 画像ファイルの作成

PCのSTEP8-1で作成した画像を流用できます。
但し以下のファイルはサイズが異なりますのでサイズに合わせて作成してください。
また、ファイル名がPCと異なりますのでご注意ください。

対象フォルダ 対象ファイル 表示箇所
sp＞assets＞img＞home fv_bg-sp01.jpg
fv_bg-sp02.jpg
fv_bg-sp03.jpg
 表示箇所詳細①の個所（FVスライダー画像）
画像サイズ：w750×h1142
STEP6-2.　 画像ファイルのアップロード

STEP6-1で作成した画像をアップロードします。
PCのSTEP6-6を参考にアップロードしてください。
※先に対象ファイルを削除した後にアップロードします。

STEP6-3.　 文言の変更

作業はPCと同じです。
PCのSTEP8-3を参考に編集してください。

STEP6-4.　 表示箇所詳細⑪～⑬について

ここでの作業はありません。
PCのSTEP8-4で対応した内容が表示されます。


対応完了後にSTEP5の「サイトの確認」を再度行い、画像や文言など正常に変更されているか確認してください。


全ての作業が完了後に、サイトトップからページを確認して表示など問題ないかを確認してください。

この記事の目次

  1. デザインテンプレートについて
  2. デザインイメージ
  3. デザイン適用方法

ありがとうございました。
よろしければ、ご意見をお聞かせください。

件名、コメントをご入力いただき、『送信』ボタンをクリックしてください。

ご意見を送られない場合は、『閉じる』ボタンをクリックしてください。

件名：

お問い合わせ内容：

閉じる

© 2022 RPST Inc. All Rights Reserved.