お知らせ 資料ダウンロード

魅力的なネットショップを作成しよう。ストアデザインの設定と基本

【スタートダッシュセミナー開催中】
ネットショップを始めるために、何をしたら良いかわかるセミナーです!内容詳細の確認、参加申込みは、こちらのページ から

 


魅力的なネットショップを作成しよう

 

STORESのストアデザインは、HTMLやCSSの知識がなくても直感的な操作でネットショップのデザインを作成することができます。

ここではデザインの設定方法とデザイン例と解説をご紹介します。

 

💡 具体的なストアのデザインがまだ決まってない方は商品点数が少ないストア向けのデザイン例や、デザインを更にカスタマイズしたい場合は商品点数が多いストアのデザイン例をチェックしましょう。

 

1. ストアデザインの設定方法

テンプレート選びと基本設定

管理画面のメニュー(PCは左・スマホは左上)から[ストアデザイン]を開いて設定します。

スマートフォンでストアデザインを設定する場合、一部PC表示時の設定ができない箇所がありますので、PC・スマートフォンの両方のストアデザインの設定をする場合は、PCでの設定をおすすめします。

 

まずはテンプレートの中からご自身のイメージに合ったものを選択し、ストアデザインの基本設定(メニュー/レイアウト・テキスト・ストアロゴ・背景)を設定します。

ストアデザイン画面

ストアデザイン編集画面

また、アイテムが未登録や非公開になっている場合はサンプルのアイテム画像が表示されます。

ご自身で販売するアイテムを作成し、公開にしておくことで、ストアデザインのプレビュー上でも実際のアイテムが表示され、より完成形をイメージしやすくなります。

サンプル付きデザイン画面

サンプルのアイテム画像が表示された状態

基本のストアデザインについて詳しくはこちらの記事(【STORES デザイン基本編】レイアウトやテキストの色を簡単にカスタマイズしよう!)を確認してください。

パーツ編集機能

さらにパーツ編集をして、オリジナリティ溢れるネットショップにしていきましょう。

 

ストアデザインページのメニューか右下にあるパーツ編集をクリックすると、パーツの追加・編集をすることができるようになります。

パーツ編集機能で使える各パーツについては、こちらの記事(【STORES デザイン上級編】動画やバナーを埋め込んでオリジナリティ溢れるストアにしよう!)をご覧ください。
 

2. ストアデザインの見本

誰でもかんたんにご自身のネットショップの魅力を伝えることができる、ストアデザインの見本をご紹介します。

商品点数が少ないストア向けのデザイン例

商品点数が少ないストアデザイン
sample-basic.stores.jp

こんな方におすすめ

□ とりあえず早めに公開・販売開始をしたい

□ アイテム点数は比較的少なめ

□ シンプルに情報を伝えたい

利用した機能

商品点数が少ないストアデザイン

  • メインビジュアル
  • 背景色変更
  • コラム(パーツ編集)
  • ニュース機能(パーツ編集)
  • 区切り線(パーツ編集) 

ストアデザインのポイント

野菜を販売するネットショップを想定して作成しました。

メインビジュアルで目を引く画像を設定し、ぱっと見で野菜を販売していることがわかるようになっています。

 

さらに、コラム機能のテキストや画像で野菜の新鮮さをアピールし、背景色も農園のイメージに合わせて変更しました。
ニュース機能を使って、旬の野菜や新しく入荷した野菜の情報を知ることができるようになっています。

商品点数が多いストアのデザイン例

商品点数が多いストアデザイン
sample-app.stores.jp

こんな方におすすめ

□ こだわりのストアデザインにしたい

□ アイテム点数は比較的多め

□ 情報をたくさん載せていきたい

□ 実店舗を運営している

利用した機能

商品点数が多いストアデザイン

  • ギャラリー(パーツ編集)
  • コラム×2箇所(パーツ編集)
  • ニュース(パーツ編集)
  • カテゴリー(パーツ編集)
  • バナー3枚(パーツ編集)
  • 区切り線×2箇所(パーツ編集)

ストアデザインのポイント

アパレルを販売するネットショップを想定して作成しました。

今度はバナーに着用画像を載せ、ブランドの世界観を表現できるよう意識しています。

商品点数が多いのでブランド別でアイテム一覧に飛べるようにしています。

 

さらにはバナーを使った問い合わせなどの動線やページの下部に実店舗の営業情報を入れるなど、アパレルの販売で必要になりそうなパーツを追加しています。

デザインが終わったら最終チェック

ストアデザインは商品に興味を持ってネットショップを訪れたお客さまが最初に見るところになります。

デザインが終わったら改めてご自身のネットショップを見てチェックしてみましょう。

☑ストアデザインチェックリスト

□ ぱっと見で何を販売するお店か認識できているか

□ ストアロゴやメニューの文字が見づらくなっていないか

□ スマートフォン表示は問題ないか

 

デザインによって商品やブランドの印象が大きく変わることもあるので、ぜひ色々触って試してみてください!

【番外編】お持ちのホームページにSTORESの購入ボタンを設置する

STORES BUTTONを利用することによって、ご自身のお持ちのホームページにHTMLタグを埋め込んでSTORESの購入ボタンを設置することができます。

 

詳しくはこちらの記事(商品を自分のブログやホームページで販売してみよう)をご覧ください。

 

ネクストアクション

スタートガイドの記事を参考に、ネットショップを開設しましょう!

ストアをデザインしよう

管理画面からストアデザインを設定しよう

□ ストアデザインの最終チェックをしよう

他スタートガイドを確認し、公開準備を進めよう

□ 商品を登録しよう

□ 発送方法を決め、送料を設定しよう

□ クレジットカード申請をしよう

□ 集客の準備をしよう

※スタートガイドの記事はこちら

公開前チェックリストを確認し、ストアを公開しよう

公開前チェックリストを確認しよう

管理画面からストアを公開しよう

 

関連記事

スタートガイド一覧