2021年1月27日にYahooストアが強制的に新ストアデザインに変わります。運営されている方は既にご存じだとは思いますが、ストアクリエイターにログインすると「重要なお知らせ」として表示されています。

今回の変更はPCのみの対応のため、モバイルやアプリ版の場合よりは優先順位は下がりますが、PCからの売上も馬鹿にできないので自動で切り替わる前にある程度設定が必要と考えます。

Yahooストアの新ストアデザインに関して簡単なまとめと変更のポイントを書かせて頂きます。

新ストアデザインの場所

新ストアデザインの変更はストアクリエイターProにログイン後、メニューの「ストア構築」→「ストアデザイン」→「新ストアデザイン」で確認することができます。

デザイン設定項目

メニュー表示項目選択

ナビゲーションメニューに表示させる項目を選択します。ナビゲーションメニューは、お客様がパソコン版を表示している際、常に上部固定表示されるメニューです。今までストアデザインで「ヘッダー・看板」でHTMLを組んで表示させていたメニューボタンの項目です。切り替えまでに編集しておく優先度高めです。

表示項目は大きく3種類で、
・カテゴリー
・ランキング
・カスタマイズメニュー
の3つとなります。

カテゴリーとランキングについては自動です。カテゴリーについては、「カテゴリー管理」の項目で表示される順番で表示されます。店舗によってはカテゴリーの順番や項目を再度検討しても良いでしょう。プルダウン型となり、カテゴリー名にカーソルを合わせると2階層目が開くような設定になっています。

カスタマイズメニューについては次のメニュー項目別詳細設定で設定します。

メニュー項目別詳細設定

ここで設定できるのは、手動カテゴリーとカスタマイズメニュー1から6です。

手動カテゴリー

手動カテゴリー20個まで設定ができ、サイドメニューに表示されます。
カテゴリーという名前ですが、ストア内の独自ページやストア内検索結果のページを設定することができます。順番はストアカテゴリーの下に表示され、ストアカテゴリーの上に表示させることはできません。

画像、カテゴリー名、リンク先URLを設定します。画像はリンク先の正方形の商品画像などでよいでしょう。

カスタマイズメニュー

カスタマイズメニューは、3パターンのレイアウトが選択ができます。メニュー名は、ナビゲーションメニューに表示される名前なので、お客様向けの名前で8文字以内で記入してください。切り替えまでに設定しておく優先度高めです。

「特集」では、画像・特集名・説明文・リンク先が設定できます。画像は縦45ピクセル×横174ピクセルです。この比率に合わなくても表示できますが、見た目の印象として、スカスカなデザインになるのでご注意ください。リンク先は手動カテゴリーと同様に自由なリンク先が設定できます。

「商品紹介」は、例えば「おすすめ商品」など、画像と名前付きで表示できます。商品コードを入力または参照のボタンから商品を選ぶだけで簡単に設定できます。

看板

看板はHTMLを使うことができます。旧デザインでバナーなどを貼っていた部分がこの場所になります。

しかし、高さと横幅に上限があるので注意が必要です。看板は、高さ上限200ピクセル×横幅上限1,290ピクセルで表示されます。

今まで、特に楽天などでは縦に長いLPの商品ページ作りが主流と言えましたが、購入までの導線を短くしたページが主流になるのではないでしょうか。

お知らせ

お知らせはPC版の「商品をカートに入れる」ボタンの下に「ストアからのお知らせ」として表示されます。

200文字以内で表示させることができるほか、ストアクリエイターで作ったページ・商品ページへのリンクなども可能です。

掲載期間も設定ができるので、セールのお知らせ、配送遅延などの連絡、お盆や年末年始などの長期休暇のお知らせにも使えます。

フッター

フッターには、ストア情報・おすすめ商品・フリースペース・インフォメーション・コピーライトの設定ができます。

「ストア情報」はデフォルトで表示されるので、メルマガの「ニュースレター」のボタンを表示させるか否かしか選べません。メルマガなどを定期的に行ってないのであれば表示させなくて良いと思われます。

「おすすめ商品」は、カスタマイズメニューと同様に商品コードを直接記載か、参照のボタンから表示させたい商品を選択できます。

「フリースペース」は、HTMLが10000文字以内まで可能です。バナーなどの設置がよいでしょう。高さの制限がないので、旧デザインでヘッダーに記載していたHTMLを移植することができます。

「インフォメーション」は、ショッピングガイド的な要素になります。旧ストアデザインメニューのフッターのフリースペースのHTMLをそのまま移行できます。切り替えまでに設定しておく優先度高めです。

コピーライトは、200文字までです。(c) ストア名 で良いでしょう。

ストアのロゴ

今までヘッダー部分のHTMLで表示させていたストア名が入ったロゴは表示されません。ナビゲーションメニューより上にストアのロゴを表示させたい場合は、「ストア構築」→「ストア情報設定」の上から4番目「ストア画像」を設定してください。現在のロゴとは異なり、ストア開設初期に使っていたものなどがそのまま残っているストア様もいらっしゃいますので注意が必要です。

幅120ピクセルｘ高さ30ピクセル、ファイルサイズ500キロバイト以下のGIF、PNGまたはJPEG画像と制限もあります。

ロゴの横にはテキストで店舗名が表示される仕様となるので、ロゴと一緒に店舗名を記載している場合は、ロゴだけの方が見た目が良いと思います。

トップページ・カテゴリーページ・カスタムページ等の設定

トップページやカテゴリーページ・カスタムページはHTMLが設定できます。旧デザインと新デザインではサイズがことなるので、現在のデザインが新デザインになったときに変ではないかチェックが必要です。

画面を大きく使った横広のデザインになるので、横広のデザインを意識した設定になります。iframeで固定幅で表示されるようなので、レスポンシブというわけではなく、幅1072pxにあったデザインにしましょう。

新ストアデザイン適用管理

ここまで設定出来たら、一番最初のページの新ストアデザイン管理から「適用する」にチェックして反映を押しましょう。

これで新ストアデザインは完了です。

分からない部分などございましたらお気軽にご連絡ください。