Yahoo!ショッピングのパソコン版ページのデザイン(レイアウト)が商品ページ・トップページ・カテゴリページの全てでリニューアルになります。

この新しいパソコン版のデザインが、2020年7月27日からストアクリエイターで編集できるようになりました。
トップページ・カテゴリページについては新デザインが使えるのは8月以降になること、またデザインの切り替えは店舗側で切り替えボタンを押さなければ変わらないのですぐに対応する必要はないですが、いずれは新ストアデザインがメインになるので対応できるように準備しておきましょう。

新ストアデザインは急がなくても大丈夫です

新ストアデザインは、まだデザイン設定機能があるだけで実際の商品ページ・トップページ・カテゴリページに表示されるのは2020年8月~9月の予定です。
あわてて設定しようとせずに、まずはどんな画面なのか様子を見るようにしましょう。
今までのストアデザインも2021年1月までは利用可能になっています。
新ストアデザイン スケジュール

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

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

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

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

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

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

これが新ストアデザインでは「フリースペース」が廃止され、HTMLを入力できる欄は「看板」のHTML 1万文字のみになります。
このため、今までのヘッダーに入力しているHTML文字数が多い場合はYahoo!トリプル(FTPでアップできるサービス。楽天GoldのYahoo!版)を使ってIframeで入力するなど対応が必要になります。
また新ストアデザインでは「ナビゲーションメニュー」の「カスタマイズメニュー」という機能を使ってヘッダーに表示することができますが、この欄については設定項目が多いので次回に解説します。

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

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

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

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

注意点

新ストアデザインはまだリリースされたばかりなので、こちらの記事が不正確である可能性もあります。実際に作業するときは新ストアデザインの「プレビュー」ボタンでどの様になるか確認しながら作業を進めてください。

最終的な移行

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

Follow me!