楽天市場とYahoo!ショッピングに特化したコンサルティング・運営代行

2024.10.28

こんにちは、ファイブスプリングスです。

Yahoo!ショッピングではストアトップページや商品ページをはじめ、ニュースレターにもHTMLを使うことができます。

HTMLを使うことでより見やすく機能的なページやメールを作成できますが、HTMLと聞くだけでも「なんだか難しそう…」と感じている方もいらっしゃるのではないでしょうか。

そこで今回はYahoo!ショッピングで使用できるHTMLについて、よく使うタグを中心に使用時の注意点やよくあるミスなども解説します。

HTMLの知識がない方にもわかりやすく、またコピー&ペーストですぐに使えるように解説するため、HTMLを使ったページやメール制作に挑戦してみたい方はぜひ最後までご覧ください。

【初級編】ページ制作でよく使う基本のHTMLタグ

まずはYahoo!ショッピングのページ制作でよく使う基本のHTMLタグとして、以下の5つをご紹介します。

すべて初心者の方でも扱いやすいタグになっているため、これを機に押さえておきましょう。

<br>文字を改行する

文字を改行したい場合は、改行したい箇所に

<br>

を入力します。

ストアクリエイターPro上でEnterを使って改行しても実際のページでは改行されないため注意しましょう。

文章を途中で改行させたい場合は、<br>改行したい箇所にbrタグを入れてください。

<span style>文字を装飾する

文字の色や大きさを変更したい場合は、装飾したい箇所を

<span style="font-size:大きさ;color:色;"></span>

で囲います。

文字の装飾は<span style="font-size:24px;color:#F05050;">【注意事項】</span>など文字を強調させたい場合に有効です。

なお「色」「大きさ」どちらかだけ変更したい場合は、以下のように不要なコードは省いて問題ありません。

<span style="font-size:大きさ"></span>

<span style="color:色"></span>

<img src>画像を貼り付ける

画像を貼り付けたい場合は、貼り付けたい箇所に

<img src="画像URL">

を入力します。

ストアクリエイターProで記載する内容

<img src="https://shopping.c.yimg.jp/lib/hariti/wrapping_616x120.jpg">

実際に表示される内容

なお<img src>タグを使用する際は、以下のようにタグ内に情報を追記することで画像の大きさを指定することも可能です。

「横幅」「高さ」は、「px（ピクセル）」または「%（パーセント）」で指定します。（「width=”600px”」「height=”100%”」など）

<img src="画像URL" width="横幅">

<img src="画像URL" height="高さ">

<img src="画像URL" width="横幅" height="高さ">

※元画像サイズの縦横比を無視してサイズを指定すると画像が引き伸ばされてしまうため注意しましょう。

<a href>文字や画像にリンクを設定する

文字や画像にリンク（URL）を設定したい場合は、リンク設定したい箇所を

<a href="リンク先URL"></a>

で囲います。

<a href="https://search.rakuten.co.jp/search/mall/cp0828/?sid=402408">新着商品はコチラ！</a>

※上の例では文字色を変更したり下線を引いたりしていないためわかりづらいですが、「新着商品はコチラ！」の文章をクリックするとリンク先に飛びます。

ストアクリエイターPro上で記載する内容

<a href="https://shopping.geocities.jp/hariti/review_cp/review_cp.html"><img src="https://shopping.c.yimg.jp/lib/hariti/reviewcp_1200x1200.jpg"></a>

実際に表示される内容

Yahoo!ショッピングでは基本的に外部リンクの設置（＝Yahoo!ショッピング以外のページへの誘導）が認められていますが、いくつか知っておかなければならない注意点もあります。
詳しくはYahoo!ショッピングの外部リンクについてまとめた以下のページをご確認ください。

株式会社ファイブスプリングス

【Yahoo!ショッピング】外部リンクの設置方法や活用方法、注意点を解説！

https://www.5springs.co.jp/blog/yahoo-external-link/

こんにちは、ファイブスプリングスです。 Yahoo!ショッピングでは楽天市場など他のECモールと異なり、外部リンクの設置が認められています。外部リンクを設置できることで自社サイトやSNSなどへの誘導が可能...

<div align>文字や画像を自由に配置する

文字や画像の配置を自由に設定したい場合は、配置を決めたい箇所を

<div align="位置"></div>

で囲います。

「位置」には配置に応じて、以下3つのパターンを入力できます。

<div align="center"></div>

<div align="left"></div>

<div align="right"></div>

<div align="right">この文章を右寄せで配置します。</div>

ストアクリエイターPro上で記載する内容

<div align="center"><img src="https://shopping.c.yimg.jp/lib/hariti/wrapping_616x120.jpg"></div>

実際に表示される内容

【中級編】見やすいページ作りのためのHTMLタグ

Yahoo!ショッピングでよく使う基本のHTMLタグを押さえたところで、より機能的で見やすいページを作るためのHTMLタグとして以下3つをご紹介します。

こちらもそこまで複雑な作りにはなっていないため、必要に応じて積極的に取り入れていきましょう。

<table>表（テーブル）を作成する

表（テーブル）を作成したい場合は、作成したい箇所に

<table></table>

を入力します。

表を作成する場合は上記を基本として、作成したい「行」「列」に応じて<table>タグの間に以下のタグを追記していきます。

<tr></tr>

<td></td>

<table>
<tr>
<td>セルの内容A</td><td>セルの内容B</td>
</tr>
<tr>
<td>セルの内容C</td><td>セルの内容D</td>
</tr>
</table>

表を作れるようになると、以下のように仕様表を作ったり画像を横に並べたりできるようになります。

<table>
<tr>
<td>サイズ</td><td>○○cm</td>
</tr>
<tr>
<td>重量</td><td>○○g</td>
</tr>
<tr>
<td>材質</td><td>○○</td>
</tr>
</table>

ストアクリエイターPro上で記載する内容

<table> <tr> <td><img src="https://shopping.c.yimg.jp/lib/hariti/h228_color_bl.jpg"></td> <td><img src="https://shopping.c.yimg.jp/lib/hariti/h228_color_or.jpg"></td> </tr> </table>

実際に表示される内容

<!–Y store_search:>ストア内検索を表示する

ストア内検索用の検索窓を表示したい場合は、表示したい箇所に

<!--Y store_search:type=a-->

または

<!--Y store_search:type=b-->

を入力します。

検索窓には「type A」と「type B」の2種類があり、それぞれ以下のように形が異なります。

ストアクリエイターPro上で記載する内容

<!--Y store_search:type=a-->

実際に表示される内容

ストアクリエイターPro上で記載する内容

<!--Y store_search:type=b-->

実際に表示される内容

<!– Y youtube: –>YouTube動画を表示する

YouTube動画を表示したい場合は、表示したい箇所に

<!-- Y youtube:vid=YouTubeのコンテンツID -->

を入力します。

ストアクリエイターPro上で記載する内容

<!-- Y youtube:vid=XvB6a2GkDho -->

実際に表示される内容

視聴ページへ(外部サイト)

<!– Y youtube: –>タグは上の例のように、あくまでも動画のサムネイルとテキストリンクを生成するものです。
ページ内で直接動画を再生できるものではないため注意しましょう。
ページ内で再生できる動画の設置方法については、以下の記事をご確認ください。

株式会社ファイブスプリングス

【2024最新】Yahoo!ショッピング商品紹介動画の利用方法と注意点を解説！

https://www.5springs.co.jp/blog/yahoo-product-introduction-video/

こんにちは、ファイブスプリングスです。 Yahoo!ショッピングでは2023年秋から「商品紹介動画機能」がリリースされ、商品ページや検索結果画面で商品を紹介する動画を表示できるようになっています。動画を...

HTMLを使用する際のよくあるミス

ここでは初心者の方が陥りがちな、HTML使用時のよくあるミスを解説します。
HTMLで記載しても思ったように反映されない場合は、以下のミスを起こしてしまっていないか再度確認しましょう。

タグを閉じ忘れている

「<br>タグ（改行）」や「<img src>タグ（画像）」などを除き、ほとんどのHTMLタグは「</○○>」と入力してしっかりと閉じる必要があります。
以下の例のように閉じ忘れることがないよう注意しましょう。（赤色の下線が誤りの部分）

タグを全角で入力している

HTMLを記述する際は、すべて全角ではなく半角で入力する必要があります。
以下の例のように大文字で入力しないよう注意しましょう。（赤色の下線が誤りの部分）

不要なスペースが入っている

HTMLでスペースを入力する機会は少なくありませんが、必要以上にスペースが入力されていると正しく適用されません。
以下の例のように不要なスペースを入力しないよう注意しましょう。（赤色の下線が誤りの部分）

タグのつづりを間違えている

HTMLのタグは、正しいつづりで入力しなければ適用されません。
以下の例のようにつづりを間違えて入力しないよう注意しましょう。（赤色の下線が誤りの部分）

半角の「<」「>」をタグ以外で使用している

HTMLでは半角の「<」「>」をタグの記述に使用するため、本文中に半角の「<」「>」を使用すると正しく表示されない場合があります。
「<<<注意事項>>>」のように文字を強調するために使用したい場合なども、半角ではなく全角の「＜」「＞」を使うようにしましょう。

ただしどうしても半角で使用したい場合は、以下の文字コードを入力して表示することも可能です。

<

>

Yahoo!ショッピングでHTMLを使用する際の注意点

Yahoo!ショッピングでのストアページやストアニュースレター作りに非常に役立つHTMLですが、使用する上でいくつか注意点があります。

誤った使い方をしてしまうと最悪の場合休店措置などにつながってしまう場合もあるため、以下3点については把握しておきましょう。

記述箇所によって使えるHTMLタグが異なる

Yahoo!ショッピングでは主に「ストアページ」と「ストアニュースレター」にHTMLを使用できますが、記述箇所によって使用できるHTMLタグが異なる点には注意が必要です。

またそれぞれ「パソコン版」か「モバイル版」かによってもHTMLタグの制限が異なります。

Yahoo!ショッピングで使用できるHTMLタグの詳細については、以下のページをご確認ください。

<iframe>タグを使った外部リンクは禁止

今回ご紹介したHTMLタグのほかに、パソコン版のストアページでは<iframe>タグと呼ばれる「ページ内に別のWebページを埋め込めるようにするHTMLタグ」を設置することができます。

ページ遷移をせずに動画などを表示できるためWebページ制作でよく使用されるタグですが、Yahoo!ショッピングでは<iframe>タグを使った外部リンクは禁止されています。

ウイルス感染防止などの理由により、Yahoo!JAPAN内のページ以外へのリンクを設置することはできません。

<iframe>タグを使って外部リンクを設置した場合は、予告なくタグ部分が削除されるほか、ストアページ全体の削除や休店措置が取られる場合もあるため注意しましょう。

HTMLはサポートの対象外

ストアクリエイターProではHTMLに関するページなどがいくつか掲載されていますが、HTMLに関してはサポートの対象外となっていることを知っておきましょう。

Yahoo!ショッピング側から提供されている情報から学ぶことはできますが、使い方や修正方法などHTML自体について問い合わせて回答をもらうことはできません。

HTMLを勉強せずにページやメルマガを制作する方法

ここまでYahoo!ショッピングでよく使うHTMLタグについて解説してきましたが、「やっぱり自分で扱うのは難しそう…」と感じている方もいらっしゃるかと思います。

そこで最後に、HTMLを勉強しなくてもハイクオリティなストアページや商品ページ、ストアニュースレターを作成する方法として以下の2つをご紹介します。

マーケットプレイスの制作ツールを利用する

Yahoo!ショッピングでは「Yahoo! JAPAN コマースパートナー マーケットプレイス」で、HTMLを使ったページやメルマガを簡単に作成できる出店者向けの制作ツールが多数提供されています。

利用料はサービスにより異なるものの月額数千円～10,000円程度となっており、テンプレートや直感的な操作性によりHTMLを直接入力しなくてもおしゃれで機能的なページやメルマガを作成できます。

自動更新パーツなど運用が楽になる機能を備えた制作ツールも少なくないため、一度チェックしてみると良いでしょう。

ECコンサルティング会社に制作を依頼する

HTMLを駆使したハイクオリティなページやメルマガを作りたい場合は、ECコンサルティング会社や制作会社にページ制作を依頼することも有効な手段の1つです。

依頼料金は数万円～数十万円と依頼先や依頼内容によって異なりますが、デザイン性や機能性に優れたページやメルマガの制作をまるごと依頼できます。

制作を依頼する際は、HTMLの扱いだけでなく「Yahoo!ショッピングで売れるためのノウハウ」までよく知っている会社に依頼することをオススメします。

【Yahoo!ショッピングのページ制作もファイブスプリングスにおまかせ！】

ファイブスプリングスではコンサルティングサービスのほかに、ページの制作や改修サービスもご提供しています。 HTMLに精通したコーダーをはじめ、コンサルタント・ディレクター・デザイナーが連携して「Yahoo!ショッピングで売れる」サイト制作をおこないます。 ファイブスプリングスのサイト制作サービスについては、以下のページをご確認ください。 株式会社ファイブスプリングス 「売れるデザイン」ならおまかせ！サイト制作サービスのご紹介 https://www.5springs.co.jp/blog/web-design-service/ こんなお悩みはありませんか？ ECサイトを始めたいけど、何から始めたら良いかわからない… すでにECサイトはあるけど、もっとオシャレなサイトにしたい… 売れる商材はあるけど、商材のより良い魅せ方がわから...

Yahoo!ショッピングで使えるHTML：まとめ

今回はYahoo!ショッピングで使用できるHTMLについて、よく使うタグを中心に、使用時の注意点やよくあるミスなども含めてわかりやすく解説しました。

ストアページや商品ページ、ストアニュースレターのデザイン性や機能性を向上させるために役立つHTMLですが、使いこなすためにはある程度の知識や経験が必要です。

ファイブスプリングスではHTMLを使ったページ制作の代行をはじめ、分析～戦略立案～実行まで一貫してサポートするコンサルティングサービスをご提供しています。

「HTMLを使ったページ制作のことで相談したい」「店舗ページや商品ページの制作を依頼したい」という方は、ぜひ一度お問い合わせページからお気軽にご相談ください。

太田 薫(おおた かおる) 株式会社ファイブスプリングス 代表取締役 元楽天ECコンサルタント、その後楽天MVP獲得店舗の統括部長。 コンサルサポート企業様400店舗以上。 現在、企業様のコンサルティングと自社物販店舗の運営を行っています。 自社物販店舗は出店1年で月商8,000万円を越え、営業利益率15%以上。 実体験に基づいたリアルな情報を元に現場に即したサポートを致します。 店舗運営は悩みが多い！皆さんのお悩みを少しでも解消できればうれしいです。 どんな内容でも、お気軽に無料相談のご連絡をください。 ■無料相談■ 太田への直通連絡先 メールアドレス： チャットワーク：kaoru_ota56 Skype：kaoru.ota56