Yahoo!ストアクリエイターProのECサイト構築 開店申請から商品・カテゴリ管理、トリプル管理ツールを使ったレスポンシブサイト構築まで解説

ホームYahoo!ストアクリエイターProのECサイト構築PCスマホ共通の商品情報とPC/スマホ用フリースペース

PCスマホ共通の商品情報とPC/スマホ用フリースペース

ヤフーショッピングや楽天市場などのショッピングモールのECサイトでは、まず最初に購入者は商品ページにやってきます。商品ページに掲載する商品説明文章や画像は重要ですし、ヤフーショッピング内の検索結果で上位に表示されるということもとても重要です。このページではストアクリエイターProで商品登録をする際の、商品情報の書き方や入力する箇所で需要な点に関してご紹介させて頂きます。

商品の説明はPCスマホ共通の商品情報欄に入力


ストアクリエイターProにて、個々の商品情報入力画面を表示させます。上図がその登録・編集画面ですが、PCスマホ共通の商品情報という入力欄があります。ここはHTMLを入力することはできませんが、全角500文字でテキストの説明文章を入れることができます。【サイズ】などのようにカッコをうまく使って説明文章が見やすくなるように調整します。文章の中で改行した箇所は、実際の商品ページでも改行されます。この箇所の重要な点は、PCとスマホ共通で表示されるという点です。しかもPC版もスマホ版も共に商品画像の直下で目立つ箇所に表示されるレイアウトになっておりますので、直接商品ページを見にきたお客様が一番最初に目にする商品の説明文章になります。

キャッチコピーという箇所は、商品名の上に小さい文字で表示される、言わば商品名の補足的な内容を入れます。このキャッチコピーはヤフーショッピング内の検索結果の検索対象になっておりますので、実際に購入するお客様が気になって検索するであろう文言を入れると効果的です。このキャッチコピーは楽天でも同様に商品名の上に表示される為、楽天同様にモール内の検索対策用の文言を入れると良いです。

ひと言コメントの欄は、商品名の下に表示される小さな表示枠です。ここには一般的に横長のバナーを入れることが多いです。ここの入力欄の横幅が440pxと決まっておりますので、バナーのサイズも横440px×縦60px程度の横長のバナーを入れると綺麗に見えます。【10,000円以上購入で送料無料!】のバナーなどショップ全体として購入する際に気になる点を説明するページに飛ばすバナーを入れると効果的です。

実際の商品ページのレイアウト


上図はストアクリエイターProのマニュアル画面から引用した表示例です。前述の通り入力した商品情報やキャッチコピーが実際の商品ページのどの位置に表示されるのかを示したものです。見て頂くと分かるように商品情報は画像直下に表示されてとても重要です。繰り返しにはなりますが、PCスマホ共通で表示されますので、商品スペックはここで入力・管理する方法がベストです。

商品説明として画像を入れたい場合

前述の通りテキストで入力する商品情報欄と別に、画像をHTMLで入れて表示したい場合は、追加表示情報のタブをクリックします。

上図がその編集画面ですが、PC用フリースペース1とスマートフォン用フリースペースという入力欄があります。この欄を使ってHTMLで画像を表示されると実際の商品ページでは、PCスマホ共通の商品情報の下にその内容が表示されるレイアウト・仕組みになっています。ここも入力する欄は別ですが、PCとスマホ共通のHTMLを入れた方が管理がしやすいかと思いますので、上図のように画像と改行を入れる簡単なソースで管理する方法がおすすめです。