他のモールで使っていたコードをそのままYahoo!ショッピングに流用しようとして、うまく表示されなかった経験はないでしょうか。Yahoo!ショッピングには、使用できるタグに独自の制限があり、他モールで使えるコードがそのまま使えるとは限りません。この記事では、禁止タグの傾向と、安全にページを作るためのポイントを解説します。
Yahoo!ショッピングで使えないタグの傾向
Yahoo!ショッピングの商品説明文やストアデザインでは、他のモールで使えるタグでも使用できないケースが多く見られます。
たとえば、パソコン用の説明文では見出しタグの一部が使用できなかったり、スマートフォン用の説明文では文字装飾に関わるタグが使用できなかったりします。JavaScriptについても、利用できる範囲はプランや契約内容によって異なり、通常のストアクリエイターProの範囲では制限されていることが多いため、動きのあるバナーや自動で切り替わる表示を実現したい場合は、対応するオプションやサービスの利用条件を事前に確認しておく必要があります。CSSについても、指定方法によって使用可否が分かれる場合があるため、思い通りの装飾ができないときは、対応範囲をあらためて確認してみましょう。パソコン用とスマートフォン用で使えるタグの範囲が異なる点も、見落としやすい注意点です。
「他のモールで使えたから大丈夫」と思い込まず、Yahoo!ショッピング向けに使用可否を個別に確認する姿勢が大切です。
使用できないタグを見つけたときの対処法
使いたい表現が禁止タグに該当していた場合は、表現方法を変えて同じ見た目を実現できないかを検討しましょう。
見出しタグが使えない場合は、文字サイズや太さの指定を組み合わせて見出しらしい見た目を作る方法があります。動きのある表現をどうしても実現したい場合は、外部で用意したHTMLファイルを組み込む方法が検討されることもありますが、Yahoo!ショッピングでは利用できる環境や条件に制限があるため、他モールと同じ感覚で採用できるとは限りません。導入を検討する際は、現行のガイドラインで認められている範囲かどうかを必ず確認しましょう。
表示が崩れる原因の多くは、禁止タグをそのまま使ってしまっていることにあります。
コーディング後は必ず表示確認を行う
コーディングを終えたら、公開前に必ずパソコンとスマートフォンの両方で表示を確認しましょう。
一部のタグは、パソコン用とスマートフォン用とで使用できる範囲が異なる場合があります。パソコンでは問題なく表示されていても、スマートフォンでは意図した見た目にならないことがあるため、両方の環境で確認する工程を省略しないことが重要です。特に外部から用意したテンプレートやコードを流用する場合は、事前にテストページで表示を確認してから本番に反映しましょう。
禁止タグでよくある失敗
禁止タグでよくある失敗は、他モールや自社ECサイトで使っていたコードをそのまま流用し、表示崩れに気づかないまま公開してしまうことです。
コピー&ペーストでコードを流用すると、一見問題なく反映されたように見えても、実際には一部のタグが無視されて表示されていたり、ページ全体のレイアウトが崩れていたりすることがあります。また、禁止タグが含まれていることに気づかず、なぜページが崩れているのかわからないまま時間を費やしてしまうケースも見られます。
対策としては、他モールのコードを流用する際は使用タグを一つずつ確認すること、表示崩れが起きた場合は禁止タグの可能性から疑うことが実践のポイントです。
制作を外部に依頼する場合の注意点
デザイン会社や制作会社にページ制作を依頼する場合は、依頼先がYahoo!ショッピング向けの制作経験を持っているかを確認しておくと安心です。
他モール向けの制作実績が中心の会社に依頼すると、納品されたコードにYahoo!ショッピングで使えないタグが含まれていることがあります。発注時点で「Yahoo!ショッピングのストアクリエイターPro向けであること」を明確に伝えておくと、後からの手戻りを防ぎやすくなります。
まとめ
Yahoo!ショッピングでは、他モールで使えるタグでも使用できないケースが多くあります。禁止タグに該当する表現は、文字サイズや太さの調整などの代替手段を検討しつつ、利用条件が伴う手法については事前にガイドラインを確認したうえで対応し、公開前にパソコンとスマートフォンの両方で表示を確認しましょう。まずは自店のページで、他モールから流用したコードがないかを確認してみてください。
コーディング上の表示崩れやページ制作に迷う場合は、お問い合わせください。ページの状況を確認したうえで、具体的な改善策をご提案します。
Yahoo!ショッピング運用の教育ツールとしても活用可能！
ノウハウを社内で共有し、チームの底上げをサポート
あわせて読みたい記事
-
Yahoo!ショッピングの商品説明文を改善！伝わる文章の作り方
転換率アップの航海術
-
Yahoo!ショッピングの領収書発行対応！店舗運営に活かすポイント
その他の必須ノウハウ
-
Yahoo!ショッピングがChatGPTと連携｜出店店舗への影響と商品データ対策
その他の必須ノウハウ
-
Yahoo!ショッピングの出店費用はいくら？料金体系と注意点を解説
その他の必須ノウハウ
-
Yahoo!ショッピングのガイドライン違反を防ぐには？確認方法と対策
その他の必須ノウハウ
-
Yahoo!ショッピングの薬機法対策！広告表現と必須記載事項を確認
その他の必須ノウハウ
-
Yahoo!ショッピングの出店審査対策！必要な準備と審査落ちの注意点
その他の必須ノウハウ
-
Yahoo!ショッピングクーポンの設定ミスを防ぐ！割引条件の確認ポイント
その他の必須ノウハウ
