あなたのキモチ つなげるカタチ

TOP > ECサイト > Yahoo!ショッピングの作成まとめ

Yahoo!ショッピングの作成まとめ

スポンサーリンク

この記事は2016年6月29日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

勤務している制作会社でECサイトを運用することになりました。
楽天市場とYahoo!ショッピングへ出店することとなり、私はYahoo!ショッピングの制作担当となりました。

しかし、ECサイトの運用は会社として初の試みであり、相談できる人間がいません。。
さらに、「まずは無料プランでどこまでリッチなデザインにできるか限界に挑んでほしい」との指示を受け、苦戦することとなりました。

Yahoo!ショッピングの概要

基本的には管理ツールであるストアクリエイターPro内のマニュアルを読みながら構築していく流れとなります。

ストアデザイン
ヘッダー、フッターの変更ができる。全ページ共通。
ページレイアウト
TOP、カテゴリー、商品ページの大きく分けて3つに分類されている。
フリースペースを利用してカスタマイズしていく感じでした。

無料プランと有料プランの違い

有料版と無料版が存在します。これは楽天も同じです。
有料版だと便利な機能がたくさんあります。担当しているECサイトはショップ公開前の段階で、無料プランだと制限が多すぎるので有料プランの契約をしました。

有料プランのトリプルについて
料金
Yahoo!ショッピング トリプル 300MBプラン  3,000円
Yahoo!ショッピング トリプル 10GBプラン  5,000円

ヘッダーのフリースペースなどに記述すれば
トリプルサーバー配下に置いたCSSを全ページで読み込み可能になります。

http://shopping.geocities.jp/ショップ名/
上記のトリプルサーバースペースへFTP接続ができます(しかし、反映に時間がかかる)

■ちょっとしたコツ
トリプルサーバー内にhtmlファイルを置けばフリースペース(HTML可)内でiframe使用することによりトリプルサーバーから
制限なくJSやCSSを効かせたファイルを表示できます。

無料プランの制限

無料プランで一番厳しいと感じたのは外部スタイルシートの読み込みできないという点です。

スタイルを効かせた場合はヘッダー、フッター、商品詳細にフリースペースにあるタグへインラインスタイルで記述していく必要があります。
当然、記述量は膨大になります。

そして、フリースペースには全角5000文字の制限があるので、あっという間に上限に達します。
(一応、商品詳細はフリースペースを3つまで使用できますが・・・・・)

インラインの記述はとても時間がかかるので、Yahoo!ショッピングの無料プランにおける構築でしか利用しないような「CSSをインラインCSSに変換」してくれるWebサービスを使用しました。

無料プランでデザイン性を高めたい場合は基本的に画像中心で表現することになりますね。

さらに追い打ちをかけるように、無料プランではフリースペースにおいて使用できるHTMLタグが限られています。。。

■無料版で使えるちょっとしたテクニック

無料版はフリースペースなどで一切スクリプトが使用できないはずなのですが、ロールオーバーだけは下記の方法で何故か実装可能でした。(バグ?)

記述例

参考にさせていただいたページ
http://catcherweb.com/yahoostore-hover/

まとめ

もし、無料プランを使用する場合だと作業自体は難しくないのですが、とにかく時間がかかります。
リッチなデザインで頻繁に更新するストアであれば絶対にトリプルの契約をしたほうがよいと私は思います。

また、制作において下記のサイト様が役立ちました、
http://xn--qckn0b3dc3gxa2h8c2508b382a.com/
http://peacepopo.net/

スポンサーリンク