物販

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

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

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

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

テンプレートを活用する

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

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

参考:Netshop Work

ヘッダーエリアの作成

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

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

メインエリアの作成

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

サイドエリアの作成

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

フッターエリアの作成

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

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

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

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

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

【特集#02】起業家インタビュー

フリマ出品代行サービスを立ち上げた大迫CEO率いる株式会社モノテクノロジーズ。しかしコロナで倉庫が止まり、アルバイトの自宅で商品を保管するハメに。

窮地に立たされた大迫CEOは『倉庫のクラウド化』に着手。新サービス、マカセルへとアップデートを遂げたのでした。

マカセルならフリマで高く売れるといいます。その理由とは・・?

アクシグ編集部の独占取材記事全文を是非ご覧ください。

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テンプレートを使えばそれほど難しくはありません。テンプレートをもとにさらにオリジナルのカスタマイズもできるので、ショップにオリジナリティを出すためにも積極的に取り入れましょう。

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

ところで、ビジネスで成功するためには独学よりも体系化された教材やサービスを活用して学ぶ方が結果が早く出ます。

インターネットを活用してビジネスを始めること自体は簡単です。そのためインターネット上にはあらゆるレベルの教材やサービスが存在しています。最新の情報にアップデートされているものから、途中で放置されているものまで本当にいろいろです。

そして、どんな教材やサービスを選ぶかによって、成功の度合いも大きく異なってきます。

評判も良いものから悪いものまでさまざまです。このように評価が安定しないのは、各々の教材のサービスの質が一定していないことが原因です。

ここではアクシグ編集部が予め登録した上で責任者に直接取材をし、有用性を確認した教材やサービスのみを厳選してご紹介します。無料ですのでお気軽にご登録またはご相談ください。

【無料レポート】中国輸入ビジネス成功の秘訣

安定して稼げる物販、副業として話題の中国輸入ビジネス。 「中国の卸サイト」で仕入れて、「アマゾン」「メルカリ」「ヤフオク」で売る、誰でもできる分かりやすい物販ビジネスです。

数万円の仕入れからスタートできる! 完全在宅でもOKだから、自分のペースでできる! 中国語不要、安く仕入れて検品・納品までしてくれる仕組みも紹介!

  • 数万円の仕入れからスタートできる!
  • 完全在宅でもOKだから、自分のペースでできる!
  • 中国語不要、安く仕入れて検品・納品までしてくれる仕組みも紹介!

行動力とやる気があればOK! サラリーマン、派遣社員、公務員、シングルマザー、自営業、フリーターなどあらゆる環境の方がどんどん成功しています。

この無料メール講座執筆者も、元は時給800円フリーターでしたが、 1年後には年収1,000万円、2年後には年収2,040万円を実現しました。

あなたも、中国輸入ビジネスで年収1,000万円を達成してみませんか?

【無料相談】Biz English

ビジネス英語は3ヶ月でマスターできます!

インターネットの買い物に慣れてくると、アメリカのアマゾンやeBayで購入したり出品したりしたくなるでしょう。英語ができなくてもGoogle翻訳やDeepLなどのツールを使えば始めるのは簡単です。

ところがクレームや返金などが発生すると機械翻訳では上手く交渉できません。金額が大きくなりビジネスレベルになるとなおさらリスクが高くなります。

ビズイングリッシュはビジネス英語専門の英会話スクールです。受講生は全くのゼロから英語でアカウントを復活させたり、海外の展示会で交渉に成功したりと幅広く活躍をしています!

今すぐビジネスレベルの英語力を身につけましょう!