２０２４.４.２６公開：　もうリピート注文で悩まない！顧客が顧客を呼ぶ機能！？１日でできるお中元・お歳暮商戦のベストアンサー

スマートフォン用のお店ページを作り込む⑥
－ＰＣサイトと連動した表現からスマートフォンサイトに適した表現へ切り替える－

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

商品情報を切り替える

連動設定でＰＣページと同じ内容を表示していた商品情報を、スマートフォンサイトに適した内容に切り替えていきます。
「外部用キャッチコピー」や「ＰＣページ用の商品紹介文」を表示していた商品紹介文と、内部用キャッチコピーを
スマートフォンサイト用の商品紹介文へ切り替えていきます。

■商品の編集画面を開きます

商品番号をクリックし、編集画面を開きます。

■商品紹介文を入力します

「 スマートフォン（オプション）用商品紹介文・内部用キャッチコピー 」の「 商品紹介文 ＞ メイン紹介文 」欄にスマートフォンサイト用の商品紹介文を入力します。
サブ紹介文もある場合は、下側にサブ紹介文用の欄もあるので、そちらに入力します。

入力欄上部のアイコンメニューを使えば、太字、斜体、下線、フォントサイズ変更、文字色変更などの装飾などもできます。また、画像の挿入、顔文字などもできます。さらに、「HTML」アイコンを押せば、入力欄が html モードに切り替わり、html ソースを入力することもできます。


スマートフォン用紹介文にＨＴＭＬタグを使用する場合は、「ＨＴＭＬ５」に則って記述してください。


「ＰＣページ用の商品紹介文」では html タグを使っているとレイアウト崩れなどの不具合が起こりやすく、「外部用キャッチコピー」では商品の説明が不足しがちです。 そのため、スマートフォンサイト用の商品紹介文を作成します。
「ＰＣページ用の商品紹介文」に html タグを使っていなければ、専用の商品紹介文を作る必要はありませんが、より魅力的な商品紹介にはhtmlの利用が欠かせないため、ＰＣサイト用とスマートフォンサイト用それぞれに商品紹介文を用意することをお奨めします。

■入力した事を確認します

「表示中の情報：」が「ＰＣ用メイン紹介文」や「外部用キャッチコピー」から「入力値」に切り替わったことを確認します。


『現在の設定：ＰＣ用の「商品紹介文」を表示』となっていますが、これはスマートフォンサイト全体としては連動設定が有効となっている事を表しています。
ＰＣページ連動設定を無効にする必要はありません。
スマートフォン用の商品紹介文を入力した商品のみ自動的に連動設定は解除され、未入力の商品は連動設定を継続できます。
一気に商品紹介文を入力しなくても、連動設定で商品紹介文は表示し続けされるので、順次、スマートフォン用の商品紹介文を入力していけばサイトを運営したまま、切り替えられます。

■内部用キャッチコピーを入力します

「 スマートフォン（オプション）用商品紹介文・内部用キャッチコピー ＞ 内部用キャッチコピー 」欄にスマートフォンサイト用の内部用キャッチコピーを入力します。


スマートフォン用内部キャッチコピーにＨＴＭＬタグを使用する場合は、「ＨＴＭＬ５」に則って記述してください。


内部用キャッチコピーは、お店ページ内で商品検索をした時の検索対象であるため、ＰＣ用と同じままの方が有利であると言えます。
しかし、スマートフォンサイトはＰＣサイトよりも表示領域が狭いため商品一覧ページの見やすさを重視して、連動を外して文字量を減らす、もしくは思い切って入力しないのも１つの方法です。

■内部用キャッチコピーを入力します

「表示中の情報：」が「ＰＣ用の内部用キャッチコピー」から「入力値」に切り替わったことを確認します。

フリーページ（ＰＣ連動）の表現内容を切り替える

パソコンサイトと同じ内容を表示していたフリーページ（ＰＣ連動）の内容をスマートフォンに適した表現へ切り替えます。
パソコンサイトと同じ表現で良い場合は、必ずしも設定を変える必要はありません。

■フリーページの内容を編集します

  1. 編集したい記事の「編集」をクリックし、編集画面を開きます。
  2. 「スマートフォン用」に入力します。


    ＰＣ向けとスマートフォン向けに入力する内容は、同じものにします。ＰＣとスマートフォンで違う内容にしてしまうと、同一ページとみなされないため、検索エンジンからペナルティ評価を受ける可能性ががあります。
  3. 入力が終わったら、「設定を保存する」をクリックします。


管理画面メニュー「 ページ編集 ＞ コンテンツの編集 ＞ フリーページ作成 」で編集したスマートフォンページは、管理画面メニュー「 スマートフォンサイト設定 ＞ 各種設定 ＞ URL一覧 」の「フリーページ（PC連動）」で、フリーページのＵＲＬが確認できます。

その他の連動している設定を切り替える

その他の連動している項目を切り替えていきます。必ずしも連動を解除する必要はありません。
ＰＣ用と同じままで良い項目はそのまま連動設定をお使いください。

お知らせの設定を切り替える

■連動設定を解除します

  1. 「ショップからのお知らせ」の項目の、「スマートフォン用」を選択します。
  2. 「設定を保存する」ボタンをクリックします。

■お知らせの作成画面を開きます

「お知らせを作成する」ボタンをクリックします。


お知らせは最大２０件まで登録できます。

■お知らせを入力します

  1. 作成するお知らせのタイトルを入力します。
    最大全角６４文字までです。
  2. 入力したい文章を入力します。
    最大全角１０，０００文字までです。
    入力欄上部のアイコンメニューを使えば、太字、斜体、下線、フォントサイズ変更、文字色変更などの装飾などもできます。
    また、画像の挿入、顔文字などもできます。
    さらに、「HTML」アイコンを押せば、入力欄が html モードに切り替わり、html ソースを入力することもできます。
  3. お知らせの「ページタイトル」「キーワード」「ディスクリプション」を入力します。
    これらの項目は検索エンジン対策として重要な項目です。
    カテゴリごとに異なる内容を入力できるので、目的に応じて適切な内容を入力します。
    • ページタイトル（全角128 文字以内）
      ページの内容を表す内容を２０字程度で入力します。
      html 上の<title>タグに反映します。
    • キーワード（500 文字以内）
      ページの特徴を表すキーワードを入力します。
      半角カンマ（,）で区切って、３～５個を目安に入力してください。
    • ディスクリプション（500 文字以内）
      ページの説明文を入力します。検索エンジンの検索結果に、サイト説明文として表示されます。全角で６０字以上９０字以内程度が目安です。
  4. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  5. 画面右上の「お店ページに反映する」ボタンをクリックします。

ご利用案内の設定を切り替える

■連動設定を解除します

  1. 「ご利用案内」の項目の、「スマートフォン用」を選択します。
  2. 「設定を保存する」ボタンをクリックします。

■修正したいパーツの編集ボタンをクリックします

修正したい箇所に該当するパーツの「編集」ボタンを選んでクリックし、編集画面を開きます。

■ご利用案内を修正します

ご利用案内のパーツは３パターンあります。

【パターン１】
該当パーツ: 「ページの見出し」


ご利用案内ページの見出しを入力します。
【パターン１】
【パターン２】
該当パーツ： 注文方法1
注文方法2
注文方法3
注文方法4
注文方法5
商品到着までの流れ
お支払方法
送料について
見出し： それぞれの案内の見出しです。
本文： 案内の本文です。
入力欄上部のアイコンメニューを使えば、太字、斜体、下線、フォントサイズ変更、文字色変更などの装飾などもできます。
また、画像の挿入、顔文字などもできます。
さらに、「HTML」アイコンを押せば、入力欄が html モードに切り替わり、html ソースを入力することもできます。
表示設定： このパーツを表示するかどうかの選択です。
【パターン２】
【パターン３】
該当パーツ： ポイントご利用案内
会員ランクご利用案内

お買い上げ際に付与されるポイントの付与率や、会員ランクの昇格条件などのご案内です。設定できるのは表示するかどうかの選択だけです。






修正したら、各パーツの「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
【パターン３】

■お店ページに反映します

画面右上の「お店ページに反映する」ボタンをクリックします。

個人情報の取り扱いページの設定を切り替える

■連動設定を解除します

  1. 「個人情報取り扱い案内」の項目の、「スマートフォン用」を選択します。
  2. 「設定を保存する」ボタンをクリックします。

■個人情報の取り扱い案内を修正します

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

メルマガ登録案内ページの設定を切り替える

■連動設定を解除します

  1. 「メルマガ登録案内」の項目の、「スマートフォン用」を選択します。
  2. 「設定を保存する」ボタンをクリックします。

■メルマガ登録の案内を修正します

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


    5. 空メールからメルマガ登録をすると、メールアドレスが自動的「読者管理」に登録されます。

お問い合わせ案内ページの設定を切り替える

■連動設定を解除します

  1. 「お問い合わせ案内」の項目の、「スマートフォン用」を選択します。
  2. 「設定を保存する」ボタンをクリックします。

■お問い合わせの案内を修正します

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

お店ページのヘッダーを切り替える

■連動設定を解除します

  1. 「ヘッダ画像」の項目の、「スマートフォン用」を選択します。
  2. 「設定を保存する」ボタンをクリックします。

■「標準」を選択します

「標準」を選択すると、必要な情報を入力するだけでデザインのクオリティが高いヘッダーを構築できます。「ＨＴＭＬカスタマイズ」を選択すると、ヘッダーパーツのすべてをＨＴＭＬタグを記述して構築できます。


構築したいデザインがすでに決まっているのでなければ、「標準」で構築することをお奨めします。

■共通ヘッダの編集項目を開きます

共通ヘッダの「編集」ボタンをクリックします。

■共通ヘッダの設定をします


  1. 会員情報を表示する帯とグローバルナビの背景色、およびテキストの色を指定します。
  2. 「表示する」を選択すると、会員ログイン時にテキスト欄に入力した内容が表示されます。未ログインの場合は帯も表示されません。
    以下リンク先ページの特殊タグを利用できます。
    「会員情報の特殊タグ一覧」「カート内情報の特殊タグ一覧」
  3. お店のロゴ画像を挿入します。初期値ではパソコンサイト用に登録したロゴが表示されます。
  4. お店のロゴとカートアイコンの間のスペースに自由に入力することができます。 お店のロゴを登録せず、フリーエリアのみを使うこともできます。
  5. 表示すると、カートに入っている商品数を表示できるようになります。アイコンを変更することもできます。
  6. 表示すると、ドロワーメニューを利用できるようになります。アイコンを変更することもできます。
  7. 「表示」にチェックを入れ、プルダウンから表示したい項目を選択すると、アイコンとリンクが自動で表示されます。設定されるＵＲＬは「 各種設定 ＞ URL一覧 」で確認できます。

    初期値では、「新規会員登録」「ご利用案内」「お問い合わせ」「メルマガ」「ランキング」が表示されます。
    • 「その他」を選択すると、画像もしくはテキストを自由に入力でき、任意のページにリンクを設定できます。
    • (空欄スペース)を選択すると、以下のようになります。


    「新規会員登録」「マイページ」「お気に入り」「レビュー」は、「利用中」である必要があります。

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


画像を登録する際の注意点
カートアイコン、ドロワーメニューアイコン、グローバルナビに登録した画像は、50%に縮小されて表示されます。そのため、表示したいサイズの倍の大きさの画像を登録してください。


白背景用アイコンや、別デザインのアイコンも用意しています
無料素材集でご提供しています。サイトのデザインに合わせてご活用ください。
オンラインサポート トップページ ＞ 無料素材集

■ドロワーメニューの編集項目を開きます

ドロワーメニューの「編集」ボタンをクリックします。

■ドロワーメニューの設定をします


  1. ドロワーメニューの背景色とテキストの色、およびドロワーメニュー内の見出しの背景色とテキストの色を指定します。
  2. ドロワーメニュー最上部に表示できるフリーエリアです。任意のテキストやアイコン画像を表示できます。空欄であればエリアごと表示されません。見出しだけ、表示内容だけを表示することもできます。
  3. 「表示する」を指定すると、商品検索エリアが表示されます。
  4. 商品検索と商品カテゴリの間に表示できるフリーエリアです。任意のテキストやアイコン画像を表示できます。空欄であればエリアごと表示されません。見出しだけ、表示内容だけを表示することもできます。
  5. 「表示する」を指定すると、商品の第１カテゴリのみ表示されます。
    また、カテゴリの見出しもある場合は、それも表示されます。
  6. 商品カテゴリの下に表示できるフリーエリアです。任意のテキストやアイコン画像を表示できます。空欄であればエリアごと表示されません。見出しだけ、表示内容だけを表示することもできます。
  7. 「プレビューに反映する」ボタンをクリックします。
  8. 「閉じる」をクリックして編集画面を閉じます。
  9. 画面右上の「お店ページに反映する」ボタンをクリックします。


最下部には「×閉じる」ボタンが自動でつきます。
このデザイン・色は固定です。

■ヘッダーパーツのHTMLカスタマイズについて

「標準」ではなく「HTMLカスタマイズ」を使えば、お店のヘッダーパーツのＨＴＭＬを直接記述できます。
設定項目に依存せずに構築できるので、お店のヘッダーパーツを自由にデザインできます。

「HTMLカスタマイズ」の場合、ヘッダーパーツの設定は「トップページ専用ヘッダ」と「お店ページ共通ヘッダ」の２つがあり、
両方を記述する必要があります。トップページにだけ異なるデザインを施すのでなければ、同じ内容でも構いません。
●トップページ専用ヘッダ
●お店ページ共通ヘッダ

トップページのＳＥＯ設定を切り替える

■連動設定を解除します

  1. 「ヘッダ画像」の項目の、「スマートフォン用」を選択します。
  2. 「設定を保存する」ボタンをクリックします。

■ＳＥＯ情報を入力します

  1. 「ページタイトル」「キーワード」「ディスクリプション」を入力します。
    これらの項目は検索エンジン対策として重要な項目です。
    カテゴリごとに異なる内容を入力できるので、目的に応じて適切な内容を入力します。
    • ページタイトル（全角128 文字以内）
      ページの内容を表す内容を２０字程度で入力します。
      html 上の<title>タグに反映します。
    • キーワード（500 文字以内）
      ページの特徴を表すキーワードを入力します。
      半角カンマ（,）で区切って、３～５個を目安に入力してください。
    • ディスクリプション（500 文字以内）
      ページの説明文を入力します。検索エンジンの検索結果に、サイト説明文として表示されます。全角で６０字以上９０字以内程度が目安です。
  2. 「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
  3. 画面右上の「お店ページに反映する」ボタンをクリックします。

商品検索の対象となる文字列を切り替える

■連動設定を解除します

  1. 「検索対象」の項目の、『「商品名」とスマートフォンの「内部用キャッチコピー」』を選択します。
  2. 「設定を保存する」ボタンをクリックします。


    あらかじめ、スマートフォンサイト用の内部用キャッチコピーを商品情報に入力しておいてください。