ヤフーショップテンプレート無料を活用して素人っぽさを無くそう!

ヤフーショップを開業したばかりでお店づくりが上手くいかない、自分で作って見たものの素人っぽさが出てしまいイマイチ。。
そんなお悩みはありませんか?そんな方向けにヤフーショップの無料テンプレートをご用意いたしました。
ご自由に使って頂いて構いませんので気になる方はダウンロードしてみてください。

ヤフーショップ無料テンプレート

この記事の目次

たくさんの方にダウンロード頂いております

ヤフーショップ無料テンプレート200ダウンロード突破

たくさんのヤフーショップでご活用いただき、ありがとうございます。
累計200ダウンロード突破いたしました。(2018年2月現在)
適用いただいているショップ様では、それぞれのお店に合わせて部分的にご利用いただいております。

ヤフーショップ無料テンプレートのコンセプト

ヤフーショップを開業したばかりで、お店のデザインや作成に困っているオーナー様に使っていただきたい!
そんな気持ちから無料テンプレートを提供しています。
その為、請負や同業者様はお応えできかねますので予めご了承ください。

ヤフーショップ無料テンプレートの仕様

  • サイト幅:1000px用
  • 画像を使わず(商品画像以外)読込が軽い作り
  • とにかくシンプル
  • トリプルを使用せずスタイルシートはstyle属性に直書き

*PC用のテンプレートです。

こんな人におすすめ

  • とりあえずショップの形を作りたい
  • シンプルなネットショップのデザインにしたい
  • サイドにカテゴリメニューを複数設置したい
  • テンプレートを元にカスタマイズしたい

テンプレートを活用するとこんなことができます

ヘッダーエリアの作成に役立ちます

ヤフーショップヘッダーエリア作成

メインエリアの作成に役立ちます

ヤフーショップメインエリア作成

サイドエリアの作成に役立ちます

ヤフーショップサイドエリア作成

フッターエリアの作成に役立ちます

ヤフーショップフッターエリア作成

ヤフーショップ無料テンプレート活用事例

ありがたいことに、実際に当テンプレートを適用されているショップ様が多数いらっしゃいます。
シンプルなテンプレートだからこそ、様々なジャンルのショップ様にお使い頂いております。

それでは、各エリアごとに活用事例をご紹介いたします。

ヘッダーエリア

ヘッダーエリア活用事例シンプル

ヘッダーエリアには最低限必要な要素を入れています。
そのため、必要に応じて要素を増やし、カスタマイズしていただくことも比較的簡単に行って頂けます。

ヘッダーエリア活用事例カスタマイズ

メインエリア

商品画像などが並ぶため、様々な色が入りやすいメインエリアですがシンプルな見出しですので、商品を引き立てつつ、見やすい仕様となっております。

メインエリアシンプル

また、一部のショップ様では以下のように商品をアピールするエリアとしても、ご活用いただいております。
メインエリアカスタマイズ

サイドエリア

サイドエリアは、一押しアイテムとして商品の訴求ができ、カテゴリーエリアを複数設置することで、ユーザーにとってやさしい作りになります。

サイドエリア-シンプル

また、イベントの告知などのエリアとしてもご利用いただいています。

サイドエリアカスタマイズ

 

フッターエリア

ショッピングガイドは、比較的そのまま使われているショップ様も多く見られます。

フッターエリアシンプル

 

カスタマイズして、画像なども入れておくとお客様に伝わりやすく、安心してお買い物頂けます。
フッターエリアカスタマイズ

 

 

テンプレートを適用頂いている皆様、誠にありがとうございます。

傾向としては、全体に使われるより部分的に使われているショップ様が多く見受けられます。
イメージされているショップの足りない部分や、難しい部分のみ適用いただくという使い方も可能です。

※上記掲載画像は、実際に適用されているショップ様の画像となります。
そのため、「この画像のようにカスタマイズしたい」等のような内容のご質問には、お応え出来かねますのでご了承ください。

テンプレートを反映する流れとご注意事項

  1. ダウンロードしたzipファイルを解凍し、yahooshop-template_ver~.htmlをお使いのエディタやメモ帳などで開く。
  2. ヘッダーエリア、メインエリア、サイドエリア、フッターエリアのコメントを確認する。
  3. それぞれのエリア内の画像URLやリンクURLなどを自分のショップ用に適宜編集する。
  4. 編集が完了したらブラウザなどで確認。
  5. 問題なければ、ヤフーストアクリエイターにて反映作業を行う。
  • プロフェッショナル出店用の無料テンプレートです。(ライト出店用ではございません)
  • テンプレート編集には基本的なHTMLスキルが必要です。(ヤフーショップの仕様のため、標準デザイン以外のデザインにする場合はHTMLの編集が必須となります)
  • 著作権は当方に帰属しています。
  • ご自身の責任のもとご利用ください。当方は一切の責任を負いかねます。
  • カスタマイズや編集等は自由に行なえますが、再配布などはご遠慮ください。
  • 請負や同業者様からのダウンロード申請はご対応できかねますので予めご了承ください。
  • 国外からの申請は対応できかねますので、予めご了承ください。
  • こちらのテンプレートは無料となっておりますので、その他ご質問はお受けできません。予めご了承下さい。
  • こちらが送信したメールに気づかず、再度申請をされる方が増えています。
    再度申請される際は、迷惑メールボックス等含め一度ご確認いただきますようお願いいたします。


恐れ入りますが、現在、無料テンプレートのダウンロード申請は一時中止しております。
再開はフェイスブック上でお知らせいたします。

テンプレートの反映方法

上記の手順をクリアできたら、テンプレートをショップに反映していきます。

下記のような形で該当する箇所をコピーし、ヤフーストアクリエイターPro→ストアデザイン内のそれぞれの箇所へ貼り付けます。

反映時のご注意事項

  • ストア基本設定から編集モードを「通常モード」にしておく必要があります。
  • パーツが設定されていない場合は、「パーツの並べ替え」をおこなう必要があります。
  • 内容が重複している場合(例:カテゴリーエリアなど)も「パーツの並べ替え」を適宜に行ってください。(詳しくは、ヤフーショップで用意されているストアデザインマニュアルをご確認ください)
  • フリースペースをすでにお使いの場合、フリースペース内に記述されている内容はバックアップしておくと安心です。

パーツの参考イメージ

ヤフーショップデザインパーツ画面

パーツ並べ替えの参考イメージ

ヤフーショップデザインパーツ並べ替え画面

パーツの並べ替えをおこなうことで、「フリースペース」を追加したり、「おすすめ商品」を非表示することも可。

ヘッダーエリアに反映する場合

コピーするエリア(テンプレート側)

<!– ヘッダーエリア –>~<!– //ヘッダーエリア –>までをコピーします。
ヘッダーエリアhtml

貼り付けるエリア(ヤフーストアクリエイター側)

設定場所:ストアデザイン→ヘッダー・看板→フリースペース
ヘッダーエリア反映イメージ

サイドエリアに反映する場合

コピーするエリア(テンプレート側)

<!– 一押しアイテム –>~<!– //カテゴリエリア2 –>までのhtmlを選択範囲しコピーします。
サイドエリアのコピー範囲

貼り付けるエリア(ヤフーストアクリエイター側)

設定場所:ストアデザイン→サイドナビ→フリースペース
サイドエリア貼り付ける場所

フッターエリアに反映する場合

コピーするエリア(テンプレート側)

<!– フッターエリア –>~<!– //フッターエリア –>までをコピーします。
フッターエリアhtml

貼り付けるエリア(ヤフーストアクリエイター側)

設定場所:ストアデザイン→フッター→フリースペース
フッターエリア反映イメージ

メインエリアに反映する場合

コピーするエリア(テンプレート側)

<!– 商品一覧 –>~<!– //商品一覧 –>までのhtmlを選択範囲しコピーします。
メインエリアコピー範囲

貼り付けるエリア(ヤフーストアクリエイター側)

設定場所:ページ編集→ストアトップ(編集)→フリースペース
メインエリア反映イメージ

最後に

今回、無料で提供しているヤフーショップテンプレートは、シンプルかつ最低限の要素を取り入れた初心者に優しい作りとなっております。

これを元に、一押しアイテムを追加してみたり、カテゴリエリアを2つ、3つに増やすなど応用が可能です。(文字制限には注意してください。)
少しでもお役に立てたら幸いです。

ヤフーショップ無料テンプレート
yahooショップホームページ制作

オリジナルショップ作り
ヤフーショップ制作代行

ヤフーショップ制作、作り方でお悩みごとはございませんか?
デザイン性をアップすることで、回遊性、転換率アップにも繋がります。