【2020/12/22更新】
Yahoo!ショッピングのパソコン版ページのデザイン(レイアウト)が商品ページ・トップページ・カテゴリページの全てでリニューアルになります。
※トリプルで作ったページは除く。
※パソコンのページのみで、スマートフォンのページは変更がありません。

この新しいパソコン版のデザイン(新ストアデザイン)が、2020年7月27日からストアクリエイターで編集できるようになっています。
正式な移行日は2021年1月27日です。この日までに新ストアデザインの設定をしておかないと、商品ページ・カテゴリページのデザインで看板しか表示されなくなります

新ストアデザインの最低限の設定だけはしておきましょう

何も設定をしていないと、看板しか表示されなくなってしまうので、最低限ヘッダーの設定などはしておきましょう。
なお現在は新ストアデザイン・旧ストアデザインとも利用可能になっていますが、切り替え後は旧ストアデザイン(今までのストアデザイン)の内容はすべて表示されなくなります。
新ストアデザイン スケジュール

新ストアデザインに移行する前の注意

サイドナビ(レフトナビ)がなくなるなど、パソコン版商品ページのレイアウトが大きく変わります。
このため、古いストアデザインで入力していた項目は自動的に新ストアデザインに移行されません。
今までのパーツをそのまま移植しただけではレイアウト的に無理があるので、まずは新ストアデザインだとどのような商品ページになるのかプレビュー画面でイメージを確認しておき、どこに何を配置し直すか、また今まで出していた内容を削除したりするなど新ストアデザインでどのようなページにするか、ラフ案でいいのでイメージ案を作ってみましょう。
どのように項目が変わるか、ヘッダー・サイドナビ・フッターの各項目で見ていきます。

変更になる部分と移行の流れ

新ストアデザインは、ストアクリエイターの編集画面を開いて、今までの「ストアデザイン」の横に「新ストアデザイン」というのがあるので、そちらをクリックすると確認ができます。
新ストアデザインのリンク
旧ストアデザインと新ストアデザインの項目を見比べながら、どのように移行したらいいか解説します。

ヘッダーの変更部分と移行の仕方

ヘッダーは今までのストアデザインでは、「看板」「フリースペース」と「ストアサービス」「パンくずリスト」「ストア内検索」の5つの項目がありました。
急ストアデザインヘッダー項目
このうち「ストアサービス」「パンくずリスト」「ストア内検索」については、新デザインでは強制表示になります。
そして「看板」「フリースペース」については、今までのストアデザインでは「看板」と「フリースペース」でそれぞれ1万文字までのHTMLが入力可能でした。

これが新ストアデザインでは「フリースペース」が廃止され、HTMLを入力できる欄は「看板」のHTML 1万文字のみになります。
さらに、「看板」のHTMLが表示されるのは縦200ピクセル×横950ピクセルに制限され、これを超えるサイズのHTMLを入力すると強制的にスクロールバーが表示されます。
画像1枚ごとのサイズではなく、合計で縦200ピクセルなので、例えば1行目に縦60ピクセルの画像を入れたら、その下に縦140ピクセルの画像を入れて終わりになります。
また新ストアデザインでは「ナビゲーションメニュー」の「カスタマイズメニュー」という機能を使ってヘッダーに表示することができますが、この欄については設定項目が多いので次回に解説します。

サイドナビの変更部分と移行の仕方

サイドナビ(レフトナビ)は、新ストアデザインで最も変更がある項目です。
今までは以下のように「フリースペース」が最大3個設置できるので、HTMLもフリースペース1万文字×3個文を入力できるなど、設定できるパーツも多い項目でした。
急ストアデザインサイドナビ
このサイドナビのフリースペースを含めて、サイドナビはすべて廃止になります。
サイドナビには「カテゴリ一覧」が自動で表示されるなど、ナビゲーションで重要な項目でしたがなくなるので、ヘッダーにナビゲーション用のメニューを作るなどして対応する必要があります。
唯一、「お知らせ」という欄がサイドナビ(ただし右側)に設定することができますが、以下のようにテキストの文字とリンク先を入力できるだけの欄で、バナー画像など入れられません。またリンクの数も最大10個に制限されています。
新ストアデザインお知らせ

フッターの変更部分と移行の仕方

今までのストアデザインでは、以下のように「フリースペース」を2個(それぞれHTMLが1万文字)配置できるなどいろいろな項目がありました。
今までのストアデザインのフッター
新ストアデザインでは、自由に設定できる項目として「フリースペース」「インフォメーション」がある他、「ストア情報(メルマガ申し込みリンク)」「おすすめ商品」があります。
「おすすめ商品」については、今までトップページや商品それぞれで設定できたのが全ページ統一で1種類のみになります。
なお「コピーライト」についてはHTMLが入力できないので、コピーライト表記を記載するなどテキスト文章を入れるだけの欄になります。

最終的な移行

新ストアデザインは、以下の「新ストアデザイン運用管理」で「適用する」を押さない限り、実際の商品ページに反映されることはありません。
※新ストアデザインの「ヘッダー」など各ページにある「反映」ボタンを押しても変わらないので大丈夫です。
なので、新ストアデザインでまずはざっくり各パーツに入力してみて、どのようなイメージになるか確認をしたら新ストアデザイン用のレイアウトを作り込むことをおすすめします。
新ストアデザイン反映ボタン

Yahoo!ショッピングSEO対策マニュアル無料配布中!

Yahoo!ショッピングSEO対策の手順をわかりやすくまとめたPDFマニュアルを無料配布しています。ダウンロードはこちらからどうぞ。

Follow me!