新ストアデザイン対応の手順（1）基本的な流れと看板の設定 2021年2月更新

【2021/2/21更新】
2021年1月27日に、Yahoo!ショッピングのパソコン版ページのデザイン（レイアウト）が商品ページ・トップページ・カテゴリページの全てで変更になりました。
※トリプルで作ったページは除く。
※パソコン版のページのみで、スマートフォンとアプリのページは変更がありません。

今までのストアデザインとは全く違う機能になっているので、新しいパソコン版のデザイン（新ストアデザイン）の設定をしておかないと、今までバナーなどを配置していた部分が何も表示されなくなっています。

そもそも新ストアデザインとは？

新ストアデザインとは、Yahoo!ショッピングのパソコン版ページのデザインが全く新しくなった機能です。
今までのYahoo!ショッピングのデザイン設定は自由度が高くなっていましたが、その分ファーストビュー（最初に画面に出る領域）がバナーで埋まっていて分かりにくいページになっているショップが有るなど問題がありました。
そのため、機能をシンプルにしてお客様に分かりやすいページにするために開発された機能です。
なおPayPayモール出店店舗はPayPayモール用のデザイン設定があるので、新ストアデザインは適用されません。
何も設定をしていないと看板画像しか表示されなくなってしまうので、以下の手順で急いで設定をしておきましょう。

なお新ストアデザインへの切り替えは2021年1月27日で、すでに適用済みです。

新ストアデザインで設定できること

新ストアデザインでは、機能が単純化され設定できることも減っています。
今までのストアデザインで設定できたレフトナビはなくなっているので、注意が必要です。
レフトナビがなくなり入力できる欄も少なくなったので、実質行うべきことは以下2点に絞られます。
・ヘッダーの看板部分にHTMLを入れる
・ナビゲーションメニューを設定する
フッター（ページの最下部）にもフリースペースというHTMLが入力できる欄がありますが、ここはお客様がほとんど見ることがない上に新ストアデザインではヤフーショッピングが自動で表示する「おすすめ商品」などに埋もれてしまっています。
そのため、「ヘッダーの看板部分にHTMLを入れる」ことと「ナビゲーションメニューを設定する」ことをちゃんと行いましょう。

新ストアデザインで実際に表示される内容

新ストアデザインで単純に入力してみた内容です。

それぞれ、以下のようになっています。
・1の部分　ストアロゴが表示されます
この部分は新ストアデザインの画面で直接設定する部分ではないですが、ストアロゴがショップ名の横に表示されます。
ストアクリエイターで「3 -ストア構築」→「ストア情報設定」の「ストア画像」で設定が可能です。
・2の部分　ナビゲーションメニューが表示されます
次の記事で解説する、ナビゲーションメニューが表示されます。この部分はマウスでクリックすると展開されます。
・3の部分　看板（自由にHTMLを入力できる欄）が表示されます。
これから解説する、看板という欄で設定するとここに表示されます。

看板を設定する

新ストアデザインの看板機能とは？

「看板」という機能名になっていますが、ここは「看板」画像を入れるよりも自由にHTMLを入力できる欄と思ってください。
新ストアデザインでは看板画像はストアロゴで設定した画像が自動的にヘッダー上部に表示されます。
この「看板」という欄はHTMLが自由に入力できる唯一のスペースなので、バナーやナビボタンなどを配置しましょう。
特に商品数が多いショップの場合、レフトナビがなくなったことで他のカテゴリや商品への移動がとても不便になっています。
「看板」部分でお客様が店舗内を回遊しやすいようにしましょう。

新ストアデザインの看板機能の設定の仕方

新ストアデザインの設定は、ストアクリエイターで「3ストア構築」→「新ストアデザイン」を押したあと、「看板」という欄をクリックすると表示されます。

なお「看板」は入力できる文字数が半角1万文字までで、さらに表示されるスペースの制限として「高さ200px × 横幅1290px 」までのサイズ制限があります。
「高さ200px × 横幅1290px 」を超えたHTMLを入力した場合、以下のようにスクロールバーが出てしまい非常に見にくくなってしまいます。

公式マニュアルでは「高さ200px × 横幅1290px 」がサイズ上限となっていますが、スタイルシートの書き方などによってはこのサイズ以内でもスクロールが出ることがあります。
その場合は、スタイルシートを使わない書き方にするか、またはサイズを少し小さくしてスクロールが出ないか試してみましょう。
そして今までのストアデザインとは異なり、「反映」機能で「反映」ボタンを押す必要はなく、「看板」の右下にある「反映」ボタンを押せばすぐに変わります。