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

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

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

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

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

有料プランのトリプルについて

ヘッダーのフリースペースなどに記述すれば
トリプルサーバー配下に置いた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/

この記事を書いた人（著者情報）

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。