いつのまにやらすっかりマグネッツのショッピングモール担当なかわさきです。
最近Yahoo!ショッピングのサイト構築やディレクションを行う機会がちょこちょこありまして、ノウハウが溜まってきましたのでつらつらまとめてみました。主にデザイン面での話（「トリプル」やテンプレートの設定など）になります。
※紹介する機能は2018年9月時点の内容になります。
目次
用語集
ストアクリエイターPro
Yahoo!ショッピングの店舗管理画面の総称。楽天市場で言うところの「RMS」。商品管理の他、注文管理や広告管理、メルマガの発行等を行える。
ストアエディタ
ストアクリエイターPro 内の「ページ・商品・画像」の管理ツール。デザインもここから編集するので、制作会社的に一番お世話になるツール。
トリプル
FTPでアップ可能なサーバースペース（※有料オプション）。楽天市場で言うところの「楽天GOLD」。詳しくは該当の項目で。
ページの編集後は「反映」が必要
ストアエディタで編集したページやアップロードした画像は即時更新されません。本番に公開するには、反映処理を行う必要があります。
（初めてYahoo!ショッピングのサイトを構築したときに、「作業すれどもすれども、更新した内容が全然出てこないな…」と思ったのは内緒です…）
反映管理で反映処理を行うコンテンツは以下になります。
- ストアエディタで構築したページ（トップ、カテゴリ、商品ページなど）
- ストアエディタでアップロードした画像（商品画像・追加画像）
ストア全体の設定（送料や会社概要など）や、次項目で紹介する「トリプル」でアップロードしたファイルは含まれません。
ちなみにページに関しては「ページ編集」で更新した内容をプレビュー後、そのまま反映処理することが出来ます。
作業すれどもすれども更新されない…という悲しい事故は、ここで「保存」したからOKだろうという勘違いから生まれたわけですね…(´・ω・｀)
また、反映には時間がかかる場合があるため注意が必要です。
（目安時間・・・商品情報：15分、商品画像：1時間、追加画像：3時間）
サーバースペースオプション「トリプル」について
トップページやテンプレートデザインに凝りたい場合、「トリプル」の申し込みを
「トリプル」はhtmlや画像ファイルの他、cssやJavaScriptをアップロード可能なサーバースペースが利用できるオプションサービスです。
ストアエディタでは画像ファイルしかアップ出来ませんので、一般的なWebサイトのように外部のcssやJavaScriptを活用した表現豊かなページの構築は難しいです。また、ストアエディタデフォルトのフリーエリアは文字数制限が厳しい＋htmlのタグに制限があるので、入れたい内容をすべて入れられないことも…。
デザインに凝りたい場合や、弊社のような制作会社に依頼される場合はトリプルのお申し込みをオススメします。
※トリプルは有料サービスです。
- 300MBプラン … 月額 3,000円（税込）
- 10GBプラン … 月額 5,000円（税込）
また、トリプルのサーバーはシステムページとはドメインが別になっており、アップロードしたファイルのurlは
https://shopping.geocities.jp/ストアアカウント/
となります。「ジオシティーズ」のドメインに胸がざわつくWeb屋さんが多いとかなんとか…。
トリプルを利用してトップページを構築する
通常のWebページと同じ様に、html、css、JavaScript等を使用してページを作成し、トリプルのサーバースペースに「index.html」でアップロードします。他の個別ページを作る場合も同様です。
PCだけではなくスマートフォン用のトップページも制作可能です。その際はスマートフォン端末でアクセスがあった場合に専用ページにリダイレクトするように設定しておきます。
また、トリプル内のページに関してはレスポンシブウェブデザインでの構築も問題なくできますので、PCとスマートフォンで共通のページを表示させることも可能です。
トリプルでトップページを制作する際に必須の表記
- ヘッダーやフッターに以下のページへのリンクを設定する
- 会社概要
- お買い物ガイド（送料や手数料）
- プライバシーポリシー
- お問い合わせ
- ストア名をファーストビューに入れる
トリプルでトップページを使う場合、忘れずにリダイレクト設定を
通常、Yahoo!ショッピングのストアトップページは
https://store.shopping.yahoo.co.jp/ストアアカウント/
というURLになりますが、こちらにアクセスしたときトリプルのURL
https://shopping.geocities.jp/ストアアカウント/
にリダイレクトするように設定が可能です。
「ストアクリエイターPro トップページ」→ 「ツールメニュー：B-Space・トリプル」→ 「リダイレクト設定」
トリプルを利用してページテンプレートを作成する
楽天でも用いられる手法ですが、トリプルにヘッダー・フッター・サイドメニューを分割したhtmlをアップロードし、ストアエディタのテンプレートにiframeで呼び込みます。
※PC版限定。スマホ版iframeタグが使えないため利用出来ません。
こうすることでcssを用いてスタイルを付けたり、スライダーやドロップダウンメニューなど、動きのあるパーツを入れることが可能です。
また、「ストアデザイン」→「ヘッダ・看板」のフリースペースに<link>タグでトリプルのスペースにアップロードしたcssファイルを呼び出すことも可能です。テンプレートファイルのhtmlを直接記載する際のcss管理や、商品ページで共通で使うパーツのcssを呼び出すのに使えます。
トリプルの注意点
反映に時間がかかる
ファイルをアップロードするとウイルスチェックとURLチェックが実施されるため、反映までに時間がかかることがあります。ヘルプでは最短5分…と記載されているのですが体感として数時間かかることもあるので、急ぎの更新を行いたい場合は注意が必要です。
外部URLが記載されているファイルはアップロードできない
Yahoo!ショッピングでは外部リンクは禁止されていませんが、トリプルのサーバースペース内では不可となっており、Yahoo!ドメイン（yahoo.co.jp）以外のURLが含まれるファイルはアップロードできません。
表に表示されていなくても、ソースの中に記載があっても弾かれるようです。※jQueryのライセンス情報などで外部URLが記載さていて外せない場合は、コメントアウト（/* ～ */ で囲う）することで回避できるようです。
アップロードの成功 or エラーは、反映結果が通知メールで送られてくるので、そちらで確認します。
PC版テンプレートの幅について
ページ全体の幅はストアデザインで設定する
「ストアデザイン」の「全体の設定」で好きな値を設定可能です。
※ここでいう「ページ幅」は店舗個別のコンテンツを指しますので、上下にあるYahoo!ショッピングのヘッダーやフッターは含まれません。
「全体の設定」ではその他、背景色・文字色などが設定できます。
サイドカラムの幅は固定の3種類から選択
ページ幅に関しては値を自由に入力できますが、サイドカラムは 180px、200px、220px の3種類からの選択となります。
予め11種のテンプレート（配置）が準備されており、どれを選ぶかによって左カラムの幅が決まります。
メインカラム（ボディ）の幅は、設定した全体幅とサイドメニューの幅によって決まる
メインカラム（ボディ）に関しては、設定した全体幅と左カラム（一部右カラム）の値によって幅が可変します。
メイン幅を出す計算式は以下になります。
全体の幅 ー サイド幅 ー 余白（左右10px・計20px） ＝ メイン幅
トリプルにアップしたcssで幅を設定する
邪道かなとも思うのですが、Yahoo!ショッピングで予めつけてある各囲みのIDを使って、幅や余白を変更することも可能です。だってメインカラム・サイドカラム間の余白が10pxだとパッツパツなんですよ…。
下準備として、ヘッダー共通設定のフリースペースにcssを読み込んでおきます。（※トリプルの項目を参照）
サイドカラム・メインカラムには以下のIDがついています。
外側の囲みに「設定した幅＋10px」が設定され、内側の囲みの右にマージン10pxが設定されており、結果、メインカラムの左右に余白10pxができるわけです。
例えば、「メインカラムの幅 800pxなのを780pxにし、さらに右のマージンをつめる」という変更を行いたい場合、読み込んだcssに
|
1 2 3 4 5 6 |
#Container { width: 780px; } #Container .Container-inner { margin: 0; } |
と、書いてあげればいいわけですね。
小ネタ集
スマホ版のシステム内ページ（商品やカテゴリなど）は、ほぼデザインを触れない
PC版に関しては前項目のようにトリプルのcssなどを駆使してカスタマイズが可能ですが、スマホ版に関しては独自色を出すことはほぼできません。
https://store.shopping.yahoo.co.jp/soukaidrink/
ヘッダー周りを見ると、トップページは独自の看板を設定できますがカテゴリページは店舗名のみ、商品ページに至っては店舗名すら表示されません。
それぞれフリーエリアはありますので、バナーを掲載したり、商品ごとに詳しい情報を載せることはもちろん可能です。
スマホ版で凝った見せ方をしたい場合は、「トリプル」で別途ページを作りましょう。
※今後、もしかすると仕様が変わって独自色を出せるようになる可能性も無きにしもあらずですが、ユーザーの利便性を考えると全ショップ共通のフォーマットが適応される今のままがいいんじゃないかなー…などと個人的には思ったり。
店名に「Yahoo!」を入れる場合は注意が必要
Yahoo!ショッピングではガイドラインで、店名に「ヤフー」「Yahoo!」の名称を使用することを禁止しています。
例）「Yahoo!/ヤフーネットショップ」「○○○ Yahoo! SHOP（Shop/shop）」
ただし、自社サイトや他モールと区別をつけるために「ヤフー店」「Yahoo!ショップ」等、「ヤフー・Yahoo! ＋ 店・ショップ 等」をストア名の末尾につけることは可能です。
あと、英語で「Yahoo!」と記載する場合、「!」を含めて正式名称なので「!」がないとNGがでます。先日これで地味に開店審査を蹴られました…（涙）
店舗名設定以外でも、サイト上表記にもチェックが入りますので、デザインを作る際ご注意ください。
特定の商品だけ「送料無料」にする設定がないので、重量計算を活用する
楽天市場だと商品登録時に「この商品は送料無料にする」みたいなチェックを入れるだけでいいのですが、Yahoo!ショッピングではこの設定がありません。
ではどうするかというと、送料計算を「サイズ/重さ別」にして、送料無料商品は「重量：0」、送料有料商品は「重量：1」にするといいようです。
合わせて送料計算を以下のように設定します。
- 重量：0～ → 送料：0円
- 重量：1～ → 送料：●●●円（地域別送料がある場合、別途設定）
こうすると送料無料商品のみの場合は0円、1つでも送料有料商品が含まれると送料が加算される…というわけです。
この、送料無料設定と合わせて、商品ごとに利用可能な配送方法設定（この商品はメール便NGなど）がないのも地味に不便だったので、今後の実装に期待します…！
Yahoo!にログイン不要なお問い合わせフォームを使いたい時は「申し込みフォーム機能」が便利
以前、Yahoo!ショッピングが用意していたデフォルトのお問い合わせ機能は普通のお問い合わせフォームだったのですが、本年よりシステムが改定され、店舗・ユーザー双方が管理画面でやり取りを行うものになりました。
これはこれでメールが届かない…などのトラブルが無くてとても良いのですが、Yahoo!にログインが必須なため、普通のお問い合わせフォームとして使うには不便なところがあります。
そこで使えそうなのが、「申し込みフォーム」機能です。
元々はカタログ請求やプレゼント応募など用に用意された機能ですが、項目を色々カスタマイズ出来るので、普通のお問い合わせフォームとしても使用できます。
「ストアクリエイターPro トップページ」→ 「ツールメニュー：申し込み情報」→ 「申し込みフォーム設定」
テキストの他にチェックボックスやラジオボタン等も使え、注意分を入れたり必須設定も可能。
また、お問い合わせ内容は設定しているメールの他、管理画面でも一括で確認できます。
申し込みフォーム以外でもYahoo!ショッピングでは外部リンクが可能なので、自社サイトのお問い合わせフォームにリンクしてもいいかもしれません。（※トリプルはphp等アップできないので、お問い合わせフォームの構築はできません）
新規出店時は開店審査があるので、時間に余裕をもって構築を
楽天市場など他のショッピングモールでもありますが、Yahoo!ショッピングも開店審査があります。審査に通って初めて一般ユーザーが購入できるようになります。
審査で見られる内容は、お問い合わせガイドに不備がないか、必須の設定（送料など）がされているか等です。（※取り扱い商材によって異なるので、要確認）
数営業日かかることもあるので、開店日が決まっている場合は予めYahoo!側に問い合わせて、逆算してスケジュールを組んでおきましょう。不備があった際は再審査となるので、ある程度余裕をもたせておくことをオススメします。
開店審査は商品が1点でも登録されていれば可能なので、本格的な構築に入る前に必須の設定のみ行って、先に開店審査を済ませておくというのも一つの手です。
