ヤフーショッピングで使える無料のテンプレートを紹介

Yahoo!ショッピングでページを開設したけれど、なんだかデザインがいまいちだったり、ほかのショップの印象に負けてしまうということはありませんか。

ショップページはテンプレートを使えば、格段に印象がよくなります。

今回は、無料で使えるテンプレートやその設定方法を紹介しますので、ぜひ試してみてください。

テンプレートを活用する

Yahooショッピングのトップページを作るためのテンプレートが存在することはご存知でしょうか。いまいち印象が薄いショップや、商品ページが見にくいページでも、テンプレートを使うことで改善できるかもしれません。

今回は、以前、Netshop Workで無料提供されていたテンプレートを軸にご紹介していきます。ちなみに、現在は無料テンプレートのダウンロードは中止されていますが、再開されたときはFacebook上で告知されるようなのでチェックしておくとよいでしょう。

参考：Netshop Work

ヘッダーエリアの作成

テンプレートを使えば、ヘッダーに最低限必要な要素を簡単に取り入れることができます。必要に応じて項目や機能を増やしたり、カスタマイズすることもできます。

ヘッダー部分は一番に目につく部分なので、テンプレートを使ってきれいに整えましょう。PCで表示させる場合、電話番号や自社ショップの簡単な紹介を目立つ位置に記載するのがおすすめです。スマホの場合は画面が小さいので、アイコンをうまく使って見やすいように配置していきましょう。

メインエリアの作成

商品画像が並ぶメインエリアは、商品を目立たせつつ見やすいデザインにしましょう。また、メインエリアは商品を一番アピールできる部分であるだけでなく、商品の説明や紹介文を書くエリアとしても活用できます。。

サイドエリアの作成

サイドエリアには、おすすめの商品やランキングなどを載せることができます。ランキングを載せれば商品の購入を迷っているユーザーにアピールすることができますし、カテゴリーなどを設定すればユーザーにとって使いやすいサイトになるでしょう。また、お知らせやイベントの告知用エリアとしても活用できます。

フッターエリアの作成

フッターには索引のような役割があるので、ショッピングガイドやインフォメーションを表示しましょう。文字だけでなく画像も入れることで、ユーザーに情報が伝わりやすくなるので、積極的にテンプレートを使ってカスタマイズしていきましょう。

テンプレートを使う際の注意点

テンプレートを使う際は、以下の点に注意が必要です。

・基本的なHTMLの知識
・テンプレートの導入は自己責任

テンプレートを使うとデザインはよくなりますが、ある程度HTMLの知識が必要になります。また、テンプレートを導入したことによって起きた不具合などはすべて自己責任になるので注意が必要です。

Yahoo!ショッピングのストア情報設定メニューの設定

ここからは、Yahoo!ショッピングストアの設定画面でデザインや情報を設定していく方法を見てきましょう。まずは、基本設定から変更していきます。

ストア情報を入力する

会社概要など、企業の情報を入力していきましょう。「ストア名」「ストア紹介文」「ストア画像」「取扱商品カテゴリ」など、上から順に入力していきます。

ストア名は、開店前ならいつでも変更可能です。しかし、開店後は開店日から90日間は変更ができなくなります。90日経つと変更できるようになりますが、変更すると、その時点から90日間再変更ができなくなります。ストア名を間違えないよう、注意して入力しましょう。ちなみに、すでに利用されているストア名は登録できません。

ストア紹介文では、ストアの情報やアピールポイントなどを入力します。ストア画像でストアのロゴ画像も設定しておきましょう。

プライバシーポリシーを設定する

プライバシーポリシーとは、個人情報の扱いについて説明するページです。個人情報を多く扱うネットショップでは必須のページです。プライバシーポリシーの設定で基本情報を入力すると、プライバシーポリシーのページを作成できます。

「情報管理責任者」「プライバシーポリシー」を入力しましょう。プライバシーポリシーにはサンプルが用意されています。サンプルの文面を使う場合は、ストア名を自身のストア名や法人名に変更して利用します。

ユーザーに安心感を与えるためにも、プライバシーポリシーは必ず作成しましょう。

お買い物ガイドを設定する

買い物のガイドページを作るための基本情報を入力していきます。項目は、主に支払いについてです。必須項目は「消費税の取り扱い」「送料」「引き渡し時期」「返品、交換」です。

ほかにも、「商品の保証」「アルコール商品について」など、必要に応じて入力しましょう。酒類を販売する場合は、ショッピングカートに生年月日を入力する欄を設ける必要があります。「オプションの設定をする」から設定できるので、確認しておきましょう。

ストアエディタ基本設定をする

ストアエディタの基本設定と、FTP環境設定を行います。

編集モードとして「かんたんモード」と「通常モード」の2種類があるので、使いやすいほうを設定します。

「ストア内検索表示設定」「価格入力方法」「ストアカテゴリの商品並び順設定」「FTP環境設定」を設定していきます。

商品ページカスタマイズ

ここからは、商品ページカスタマイズの手順を紹介します。カスタマイズすることで商品写真を大きく表示させることができるようになるので、売上のアップも期待できます。

推奨される商品画像サイズ

画像サイズは「600px × 600px」がおすすめです。これ以下だと、周りに余白が入ってしまいます。最大限の大きさで表示させるためにも、600pxの画像を準備しておきましょう。

ストアデザインから設定する

ストアデザインのメニューから商品ページを選択します。テンプレートを選択した状態で編集ボタンを押します。

デザイン編集タブの「商品基本情報」を選択し、商品基本情報欄の中から「タイプ13」を選択しましょう。後は、保存をして完了です。

変更内容を反映させる

保存したら「反映」をクリックして確認画面で変更を反映させます。

反映を実行させると、「未反映項目はありません」と表示されます。

以上で設定は完了です。

反映を確認する

実際に表示させて、間違いなく設定の変更が反映されているかを確認しましょう。

変更が完了していれば、商品のサムネイルが大きく表示されているはずです。

商品画像でイメージアップ

商品画像が大きく表示されていれば、商品をアピールできるとともにショップのイメージアップにもつながります。

デザインはショップのイメージを大きく左右します。設定から変更できるのでいろいろ試してみてください。

フルスクリーンで表示する方法

ここからは、ページをフルスクリーンで表示するためのカスタマイズ方法を紹介します。

フルスクリーン商品ページを作る

Yahoo!ショッピングでは、デザインを設定する上でいくつかの制約があります。

商品ページやサイトデザインのテンプレートの項目によってソースコードに変化があります。そのため、ショップによっては、自分でCSSを変更する必要があります。

CSSの変更といってもそれほど難しくはありません。

早速、CSSの変更方法を見ていきましょう。

フルスクリーン化のためのCSS

一般的なショップのページ内コンテンツを最上部から見ていきましょう。

(1)上部にYahoo!ショッピングの検索ボックスや情報などのナビゲーション
(2)店舗ごとに設定しているヘッダーとパンクズ
(3)左コンテンツ部分にレフトナビ
(4)右コンテンツ部分にショッピングカートと商品情報など
(5)店舗後に設定しているフッター
(6)Yahoo!ショッピングの表示によるおすすめの商品エリア

フルスクリーンに設定するには、(4)の右コンテンツの部分だけを残し、他の部分を削除します。CSSは以下のものを使います。

「商品ページ編集画面の」「フリースペース1」にCSSを読み込ませてください。

CSSが適用されると、商品ページがフルスクリーンで表示されます。ヘッダーなど、残したいエリアを指定して残すこともできます。

買い物カゴの位置を変更する

フルスクリーンにした場合、気になるのが買い物カゴの位置です。

Yahoo!ショッピングでは、買い物カゴの位置がすぐに見える位置に設定されています。その位置を下におろすCSSを紹介します。

このCSSをフリースペースに追記していきます。「top:***px !important;」こちらの数値を変更することで高さを変えることができます。この部分は、商品ごとに指定を変更しなければなりません。

CSSを設定したら、フルスクリーン商品ページの出来上がりです。あとは商品ごとに、「フリースペース1」に作り込んだ情報を反映させていきましょう。

CSSを設定することで、ユーザーに印象付けるページを作ることができます。大きな商品画像で、商品やショップをアピールしていきましょう。

ECサイトで使える無料HTMLテンプレート

テンプレートを使えば、簡単に凝ったデザインのページが作成できます。ECサイトに使える無料のテンプレートを集めましたので参考にしてください。

Essence

Essenceでは、内部セッションまで自由に使うことができます。購読フォームなども利用できます。テンプレートは、もっとも有名なフレームワーク「Bootstrap4」で作られています。

参考：Essence

Listashop

サイトを作成する手順を簡単な作業に変換する豊富な機能を搭載したテンプレートです。

参考：Listashop

aStar

おしゃれなデザインのHTMLテンプレートで他社と差をつけるのにもってこいです。ナビゲーションやニュースレターの購読、スライダーなどがフッターに埋め込まれています。

参考：aStar

footwear

フッターが充実しており、フルサイズのスライダーやウィジット機能が利用できます。機能性重視のHTMLテンプレートです。

参考：footwear

Wish

衣類やファッション雑貨など、アパレル関係におすすめのテンプレートです。フルサイズのスライダーが印象的なページを作れます。

参考：Wish

無料のテンプレートを使ってカスタマイズしよう

カスタマイズと聞くと難しいという印象を持ってしまうかもしれませんが、実は、無料のHTMLテンプレートを使えばそれほど難しくはありません。テンプレートをもとにさらにオリジナルのカスタマイズもできるので、ショップにオリジナリティを出すためにも積極的に取り入れましょう。

今回紹介した無料テンプレートを参考に、ぜひ導入してみてください。