構築
-
コマースクリエイターでのショップ構築で、一番はじめにすべきことは何ですか？
-
コマースクリエイターでのショップ構築の初めの1歩は、「デバイスごとにどのようにサイトを表示するか」を決定するです。
つまり、スマートフォンからPC、タブレットまですべてのデバイスで共通のデザイン、コンテンツで作成するなら、「レスポンシブデザイン」で制作、それぞれのデバイスで最適なデザインやコンテンツで作成するなら、「アダプティブデザイン（デバイス最適化）」にて作成する、ということになります。
それぞれ構築の方法や注意事項が異なりますので、マニュアルやPCとスマートフォンの表示を分けるべきか-デバイス設計を考えるなどを参考にご検討ください。
方針が決まったら、デバイス設定をします。
手順についてはPCとスマートフォンの表示を分けるべきか-テンプレートの選び方を参考にしてください。
その後、ベースとなるスタートアップテーマを元に構築をはじめましょう。
スタートアップテーマを利用したチュートリアルについては、ショップ開店ガイドのSTEP1より、順を追ってすすめていきましょう。 -
パネルパーツはどのようなときに使うとよいですか？
-
例えば、ヘッダやフッタなどです。
- 表示したい内容、例えば「会員登録ボタン」「利用規約」「お問い合わせフォーム」などをそれぞれ［パーツ］で作成し、ヘッダ用の［パネルパーツ］の中に配置します。
- 作成したヘッダ用［パネルパーツ］をECサイトの全ページのレイアウト（トップページや商品詳細・商品グループページなど）に配置します。
- 後日、例えば［検索フォーム］を全ページのヘッダに追加したい、となったとします。
- この場合、パーツで作成した［検索フォーム］をヘッダ用［パネルパーツ］に追加配置するだけで、全ページのヘッダが更新されます。
では、［パネルパーツ］を利用していなかった場合はどうなるでしょうか。
全ページのレイアウト変更画面を開き、［検索フォーム］パーツをレイアウトに一つずつ追加しなくてはなりません。
複数のパーツを、「複数ページで共通で配置（表示する）したい」、さらに「更新も同時に反映させたい」という場合には［パネルパーツ］に［パーツ］をひとまとめにし、ページのレイアウトに配置する方法がおすすめです。 -
コラムパーツはどのようなときに使うとよいですか？
-
「画像＋見出し＋本文」で構成されるコラムのような見せ方をしたい場合に便利です。
CSSの記述不要で、横並びのコラム形式の表示が可能です。
あらかじめデバイス表示幅に合わせて最適化されるよう設計されています。
画像も自動でリサイズされます。
またclassを付け替えることでコラム数に応じて、1コラムの幅を簡単に調整できます。
特集ページやSALEコンテンツなどを並べる他、（手動でメンテナンスは必要ですが）ランキング表示のような商品の見せ方（開店ガイドの記事へリンク）にも利用できます。 -
カルーセルパーツのカスタマイズ方法を教えてください。
-
パーツオプション設定画面にてカルーセルをカスタマイズできます。
例えば、「切替りの速度」「画像の表示時間」「ドットナビゲーションの表示」「表示サイズ指定」など調整が可能です。
詳しくは、マニュアルをご確認ください。 -
アイテムの一括登録はできますか？
-
はい、FTPサーバにアップロードすることができます。
詳しくは、 マニュアルをご確認ください。 -
商品の一括登録はできますか？
-
スタートアップテーマのユーザー画面のサンプル一覧はありますか？
-
各ページ別のサンプルキャプチャがあります。
サンプルキャプチャを元に、ページがどのような［パーツ］で構成されているか、表示文言や設定は管理画面のどの項目で変更できるか、についても解説しています。- 「ユーザー画面」表示イメージ一覧（イメージ逆引き集）
ショップ画面を確認中、変更したい箇所が出てきた場合は、該当ページのマニュアルをまず確認してください。
- 「ユーザー画面」表示イメージ一覧（イメージ逆引き集）
用語説明
-
パーツとは何ですか？
-
ECサイトを構成する最小のピースだとイメージしてください。
例えば商品情報ページは、「見出し」「商品画像」「商品説明1」「商品説明2」「商品価格」「カートボタン」などの［パーツ］の組み合わせでできあがっています。
それぞれの［パーツ］は、ページの［レイアウト］に「配置」されることで、はじめてECサイトに表示されます。
例えば「商品説明1」を削除したい場合、従来のようにhtmlを削除するのでもなく、管理画面の商品登録欄から記述を削除するのでもなく、「商品説明1」の［パーツ］を［レイアウト］の「配置」から外します。「商品説明1」を一時的に表示したくない場合などに、便利です。
また例えば「商品価格」と「カートボタン」の表示順を変更したい場合、htmlを変更するのではなく、「商品価格」パーツと「カートボタン」パーツの並び順を変更すれば、表示位置を変更できます。
このように［パーツ］を［レイアウト］に配置したり、外したりすることで表示コンテンツを調整でき、また［パーツ］の並び順を変更すれば、表示位置を調整することができます。※ただし、ECシステムの機能上、必ず必要となる［システムパーツ］と呼ばれるものは、 必ず［レイアウト］に配置する必要があります。配置を外す（表示しない）ということはできない、ということは覚えておきましょう。
-
レイアウトとは何ですか？
-
ECサイトの各ページに表示されるコンテンツを調整する「箱」だとイメージしてください。
「箱」の中に、［パーツ］と呼ばれるECサイトを構成する最小のピースを自由に「配置」し、 どのようなコンテンツをどのようなデザイン（レイアウト）でお客様（消費者）に見ていただくかを決定します。
［レイアウト］は階層構造を作ることができます。
これを［レイアウトパーツ］と呼びます。
［レイアウトパーツ］の中にさらに［パーツ］を配置することができます。
フォルダのようなものをイメージしてください。
配置された［パーツ］や［レイアウトパーツ］は［レイアウト（箱）］の中で、自由に位置を変えられ、同時にECサイトの表示も変わります。※一部の［パーツ］は配置できる［レイアウト］があらかじめ決まっています。
-
レイアウト割当てとは何ですか？
-
［レイアウト］と呼ばれる「箱」は何種類も作成できます。（Q．レイアウトとは何ですか？をご覧ください。）
商品、商品グループを、どの［レイアウト（箱）］を利用して表示するかを決める機能が「割当て」です。
例えば商品詳細用に［レイアウト（箱）］を複数作成します。
どの箱をどの商品用として利用するかを「割当て」ます。
写真を豊富に見せる［レイアウト（箱）］は、ハイブランド商品用、カラーオーダーやオプション選択肢が選択しやすい［レイアウト（箱）］は、セミオーダー商品用など、最適な見せ方で、それぞれの商品を表示できます。
利用手順については、マニュアルをご確認ください。 -
管理タグとは何ですか？
-
［アイテム］と［パーツ］の検索をしやすくするために、独自で作成できるタグです。
管理タグ名は任意につけられます。色は42色から選択できます。
「使用するページ」別に「画像のサイズ」別など運用にあわせて使用すると、更新時に変更すべきパーツを検索で引き当てることができるので大変便利です。
使い方のサンプルや、管理タグの設定方法についてはマニュアルをご確認ください。 -
置換文字とは何ですか？
-
置換文字が記入された場所に、特定の情報を読み込むことができます。
大きく分けて2種類あります。
システム的な置換文字例えば、商品名の置換文字{% product.name %}を利用し、商品詳細ページの見出し部分に 「{% product.name %}の商品詳細」と記載したとします。
各商品詳細ページの見出しには、表示される商品の名称が表示されます。
アラームクロックページには、「アラームクロックの商品詳細」、デジタルクロックのページには「デジタルクロックの商品詳細」と表示されます。
ただし、置換文字はそれぞれ利用可能な場所が決まっています。
システム的にあらかじめ設定されている置換文字と利用可能な場所については、 マニュアルをご確認ください。 また、マニュアル記載の置換文字以外にも、メールに利用できる置換文字もあります。
管理画面の［置換文字表示］ボタンをクリックすると、各設定項目ごとに利用可能な置換文字が表示されますのでご確認ください。独自に設定可能な置換文字置換文字は、上記のようにあらかじめシステム的に決定されているものを利用するほかに、 独自の置換文字を作成し、利用することもできます。
［パーツ］に置換文字を設定し、他の［パーツ」に記述すれば、htmlごとに読み込むこともできます。
置換文字を利用することで、htmlを短くし、更新時のソース更新を簡便にすることもできます。
［アイテム］に置換文字を設定すれば、置換文字を利用してパスを記述することができます。
置換文字を利用した場合は、アイテム入れ替え時に発生するキャッシュを防ぐこともできます。
独自で設定可能な置換文字は利用可能な場所については、以下をご参照ください。 -
商品タグとは何ですか？
-
商品にタグをつけると、タグにあわせた表示制御を行うことができます。
例えば、産地直送のためお届け指定ができない商品があるとします。
その商品に商品タグ「産地直送」と設定します。
設定＞配送・送料＞配送サービス一覧＞宅配便設定＞お届け日時設定の「利用不可設定」にも「産地直送」と設定します。
こうすると、「産地直送」という商品タグが付いた商品に関しては、［ご注文手続き］画面で、お届け日時指定ができなくなります。
同様に決済方法に関しても、特定に商品にのみ利用できない決済方法を指定したり、特定の商品のみに、特定の商品マークを表示したりできるようになります。
［レイアウトパーツ］の表示条件と組み合わせれば、特定の商品のみ、特定のコンテンツを表示する、などの使い方もできます。
使い方次第で、様々な使い方ができますので、ご活用ください。
操作方法
-
コマースクリエイターのプレビュー方法を教えてください。
-
プレビューが可能なページはcommerce creator管理画面の「テーマ」「レイアウト」「カラー・サイズ」「ページ」「フリーページ」画面です。
［プレビュー］ボタンをクリックするとプレビュー用のダイアログが表示されます。
コマースクリエイターのプレビューには「モード」の選択があります。
「デザイン確認モード」と「動作確認モード」です。
選択して［プレビューを表示する］をクリックすると表示されます。デザイン確認モード「デザイン確認モード」は、例えばオプション機能の利用設定がOFFになっている場合でも、プレビューできます。
デザイン調整にご利用いただけます。
非公開の商品や商品グループも表示されます。
ただし、オプション機能などは実際に動作しませんので、画面遷移の確認は一部制限されます。動作確認モード「動作確認モード」は、管理画面の設定にしたがって、ECサイトが表示されます。
非公開の商品や商品グループは表示されません。
それぞれのモードでどのようにプレビューされるかについては機能によってことなります。
詳しくは、 マニュアルをご確認ください。
各画面からのプレビュー表示の遷移と解説は以下をご確認ください。