スマートフォン用のお店ページを作り込む③
－トップページ－

TOP > 制作 > モバイルページ

トップページを作り込む

トップページのパーツを編集していきます。必要なパーツのご案内だけご確認ください。
また、パソコン用お店ページに表示しているパーツをまだ追加していなければ、クリックして追加した上で編集してください。
ここではＰＣページと連動する設定になっているパーツは、他のページでご案内するので省略します。

■「新着商品」のパーツを編集します

商品台帳で「新着商品」にチェックした商品を表示するパーツです。
  1. 新着商品の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. 新着商品コーナーにつける「見出し」を入力します。
    「新着商品」のままで構いませんが、別の呼び方で表したければ、別の名称を入力します。
  3. 新着商品コーナーの並べ方を選びます。
    １列表示で商品画像ありとなし、２列表示、スライド表示から選べます。
  4. 新着商品の、表示したい情報にチェックを入れます。
  5. 新着商品コーナーに表示する商品の数を選びます。
    １０件まで選べます。
  6. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  7. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「おすすめ商品」のパーツを編集します

商品台帳で「おすすめ商品」にチェックした商品を表示するパーツです。
  1. おすすめ商品の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. おすすめ商品コーナーにつける「見出し」を入力します。
    「おすすめ商品」のままで構いませんが、別の呼び方で表したければ、別の名称を入力します。
  3. おすすめ商品コーナーの並べ方を選びます。
    １列表示で商品画像ありとなし、２列表示、スライド表示から選べます。
  4. おすすめ商品の、表示したい情報にチェックを入れます。
  5. おすすめ商品コーナーに表示する商品の数を選びます。
    １０件まで選べます。
  6. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  7. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「人気ランキング」のパーツを編集します

「人気ランキング」に登録した商品を表示するパーツです。
  1. 人気ランキング商品の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. 人気ランキング商品コーナーにつける「見出し」を入力します。
    「人気ランキング」のままで構いませんが、別の呼び方で表したければ、別の名称を入力します。
  3. 人気ランキングコーナーの並べ方を選びます。
    １列表示で商品画像ありとなし、２列表示、スライド表示から選べます。
  4. 人気ランキング商品の、表示したい情報にチェックを入れます。
  5. 人気ランキングコーナーに表示する商品の数を選びます。
    １０件まで選べます。
  6. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  7. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「商品検索」のパーツを編集します

商品検索ボックスを表示するパーツです。
  1. 商品検索の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. 商品検索コーナーにつける「見出し」を入力します。
    「商品検索」のままで構いませんが、別の呼び方で表したければ、別の名称を入力します。
  3. 検索対象を特定の商品カテゴリに絞って検索できるようにしたい場合にチェックします。「初期選択肢名」とは、カテゴリを指定する欄にあらかじめ表示されている文言です。
  4. 検索対象を特定の商品グループに絞って検索できるようにしたい場合にチェックします。「初期選択肢名」とは、グループを指定する欄にあらかじめ表示されている文言です。
  5. 検索するキーワードを入力する欄です。
  6. 検索対象を価格帯で絞って検索できるようにしたい場合にチェックします。価格帯入力欄を表示します。
  7. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  8. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「商品カテゴリ一覧」のパーツを編集します

商品カテゴリの一覧を表示するパーツです。
  1. 商品カテゴリ一覧の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. 商品カテゴリコーナーにつける「見出し」を入力する欄ですが、基本的は不要です。見出しをつけるなら、「商品カテゴリの管理」の見出し機能をご利用ください。
  3. 商品カテゴリの並べ方を選びます。
    パターンを選ぶと下のサンプル表示が切り替わるので参考にして下さい。
    違いとしては、以下の掛け合わせです。
    • 「１列表示」 or 「２列表示」
    • 「２階層まで表示」 or 「１階層しか表示しない」 or 「２階層まで表示してクリックで下層を表示」
    • カテゴリに属する商品数をカテゴリ名の右側に表示


    商品台帳で「陳列期間外の場合は商品を表示しない」の設定をしている場合は、パターン（商品数あり）に反映されません。


    商品カテゴリを５階層まで利用している場合でも、トップページでは２階層までの表示となります。

  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「商品グループ一覧」のパーツを編集します

商品グループの一覧を表示するパーツです。
  1. 商品グループ一覧の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. 商品グループコーナーにつける「見出し」を入力する欄です。
    「商品グループの管理」ページで入力してあるＰＣ用のものと同じ名称を入力してください。
  3. 商品グループの並べ方を選びます。
    選ぶと下のサンプルが切り替わるので、参考にしてください。
    違いとしては、以下の２つの掛け合わせです。
    • 「１列表示」 or 「２列表示」
    • 「２階層とも表示」 or 「１階層だけ表示」
  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「フリーページ（ＰＣ連動）」のパーツを編集します

フリーページ（ＰＣ連動）のカテゴリ・記事一覧を表示するパーツです。
  1. フリーページ（ＰＣ連動）の「編集」ボタンをクリックします。
    編集画面が開きます。
  2. フリーページ（ＰＣ連動）のカテゴリコーナーにつける「見出し」を入力します。
    ＰＣ用には同様の項目がありませんので、新たに検討した名称をつけてください。
  3. フリーページ（ＰＣ連動）の記事一覧を、あらかじめ表示させるか選択します。

  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「フリーページカテゴリの見出し」のパーツを編集します

フリーページのカテゴリを表示するパーツです。
これを表示しないと、自動的にフリーページへのリンクは表示されません。


管理画面メニュー「 スマートフォンサイト設定 ＞ 情報ページ ＞ フリーページ 」の内容を表示します。「フリーページ（ＰＣ連動）」の内容ではありません。

  1. フリーページカテゴリの見出しの「編集」ボタンをクリックします。
    編集画面が開きます。
  2. フリーページカテゴリコーナーにつける「見出し」を入力する欄です。
    ＰＣ用には同様の項目がありませんので、新たに検討した名称をつけてください。
  3. フリーページカテゴリの並べ方を選びます。
    選ぶと下のサンプルが切り替わるので、参考にしてください。
    違いとしては、以下の２つの掛け合わせです。
    • 「１列表示」 or 「２列表示」
    • 「見出しとフリーページカテゴリを表示」 or 「見出しだけに畳んで表示することもできる」
  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「フリーエリア」のパーツを編集します

フリーエリアを表示するパーツです。
文章や画像を自由に記述して表示できます。
  1. フリーエリアの「編集」ボタンをクリックします。
    編集画面が開きます。
  2. フリーエリアに入力したい文章を入力します。
    入力欄上部のアイコンメニューを使えば、太字、斜体、下線、フォントサイズ変更、文字色変更などの装飾などもできます。
    また、画像の挿入、顔文字などもできます。
    さらに、「HTML」アイコンを押せば、入力欄が html モードに切り替わり、html ソースを入力することもできます。
  3. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  4. 画面右上の「お店ページに反映する」ボタンをクリックします。

■「スライドショー」のパーツを編集します

画像が次々と切り替わるスライドショーを表示するパーツです。
お客さんがページをスクロールしなくても次々と商品を紹介でき、多くの商品ページへの導線を用意できます。
  1. スライドショーの「編集」ボタンをクリックします。
    編集画面が開きます。
  2. 「挿入」ボタンをクリックして、スライドさせたい画像を挿入します。
    スライドをきれいに見せるために、画像は縦・横サイズを全て揃えて作成してください。


    画像サイズはお客さんの利用するスマートフォンの液晶画面に合わせて自動で縮小されますが、オリジナルサイズよりも拡大はされません。大きめのサイズを登録してください。

    バナーサイズの目安 ：480px（横） × 200px（縦）以上
  3. リンク先のページの URL を入力します。
    空欄のままだとリンク無しになります。

    スライドさせたい画像の数だけ②③を順次繰り返します。
    最大１０枚まで挿入できます。
  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。


    バナー画像リストのパーツは、ドラッグ＆ドロップで上下に移動でき、順番を入れ替えられます。
    ドラッグは、グレーの枠内ならどこでも構いません。

■「お気に入り」のパーツを編集します

会員登録してあるお客さんが、以前に登録しておいたお気に入り商品のリストを確認できるパーツです。
それぞれのお客さん自身が、元々興味を持っている商品のリストをすばやく案内できるので、購入確度を高める効果を期待できます。
  1. お気に入りの「編集」ボタンをクリックします。
    編集画面が開きます。
  2. お気に入りコーナーにつける「見出し」を入力します。「お気に入り」のままで構いませんが、別の呼び方で表したければ、別の名称を入力します。
  3. お気に入り登録された商品のうち、最新の 10 件をトップページにスライド表示することができます。スライド表示しなければ、「お気に入り」のテキストリンクのみを表示します。
  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。


    お気に入りリストを表示するのは、お気に入り機能を利用している必要があります。あらかじめ設定しておいてください。