STORESのショップデザインの方法について解説をします。

この記事では

• ショップデザイン方法
• デザインを好みにカスタマイズする方法
• ロゴを使ってお客様に訴求する方法
• ショップやアイテムへの思いをデザインで表現する方法

などSTORESのショップデザインについて紹介しているので、ぜひ続きを読み進めてみてください。

当メディア(物販ラボ)では1000名以上の方に転売・物販の指導実績があり、こちらの記事はネット販売の経験が8年の経験と知見による内容になっています。

記事の最後では「ネット販売スタートマニュアル」を配布しています。ぜひ最後まで読んでいただき、活用してください！

STORESでショップをオープンするときに考えたいデザインの重要性

インターネットの発達によって、ネットショップは世界中に続々と誕生しています。

生まれ続ける競合他社の中で生き残るために重要となるのが、そのショップにしかない強みやオリジナリティです。

ネットショップは、お客様にオリジナリティをわかりやすくアピールできる場所といえます。

ネットショップのデザインは、人間でいうところの第一印象。

その中でもトップページはまずお客様が目にする部分です。

デザインが平凡だと他のショップに埋もれてしまって、商品を見てもらうことさえもできません。

差別化を図るためにも、まずネットショップのデザインをどうするか考えましょう。

HTML編集やCSSの知識が必要か？

サイトをデザインするというとHTML編集をイメージする人も多いかもしれません。

私たちが見ているサイトの多くがHTMLで作られています。

HTMLタグを編集することによって自分好みのデザインにカスタマイズすることができるのです。

しかし、ソースコードを見ても何が書かれているのか全くわからないという人も多いでしょう。

またHTMLのほかにCSSと呼ばれる言語の知識や一部の専門知識が必要になることがあります。

サービスを提供している側で独自の関数を設定していることもあるため、むやみにHTML編集を行うのはお勧めできません。

STORES.jpでHTML編集はできるか？

HTML編集を行うことで、自由に自分好みのショップデザインをすることができます。

しかし、HTML編集にはインターネットやパソコンの知識も必要になるため、STORESではHTMLではなくパーツエディターモードが用意されています。

STORESでは専門知識がなくてもデザインができる

STORESでは専門知識がなくてもストアの世界観を表現したストアデザインが可能です。

テンプレートが48種類あり、自由に直感的にショップデザインをすることができます。

デザイン拡張機能として、アイテムへのシールやショップの告知ボード、人気ランキングも用意されています。

動画を埋め込むこともできるので、アイテムの動きを見せたい場合やコンセプトを動画で表現したい場合にも使うことができるでしょう。

バナーや動画などの各パーツは自由に設定して配置可能。

アイディア次第で、個性をページの中で表現することができます。

STORESでショップデザインをカスタマイズしてみよう

実際にSTORESでショップ画面をデザインするにはどのような操作が必要なのでしょうか。

順番に説明します。

STORESのデザインテンプレートを選択

初めにダッシュボード画面、左のメニューからテンプレートを選択します。

８種類のテンプレートが表示されているかと思いますが、「すべてのテンプレートを見る」をクリックすると全てのテンプレートを確認することができます。

また実際にテンプレートを適用した場合の表示を確認するには「デモを見る」という機能を使いましょう。

テンプレートを当てはめてみることで雰囲気をつかむことができます。

STORESのデザインテンプレートのレイアウトを変更

メニューの配置は５種類の中から選ぶことができます。

またメインビジュアルの追加やパソコン表示の時に適用する横幅を大・中・小から選ぶことができます。

またSTORESのロゴを削除することも可能です。

STORESのデザインにパーツを追加する

画面の右下にある青いアイコンはパーツエディターモードのボタンです。

クリックすると編集画面になり、好きな場所にパーツを追加したり、移動したりすることができます。

STORESでショップをスマートフォン画面を確認

多くの人がスマートフォンからネットショッピングを楽しんでいます。

パソコン画面でショップデザインをしている場合は、必ずスマートフォンでの表示を確認しましょう。

編集画面の上部を見るとパソコンとスマートフォンの切り替えアイコンがあります。

このボタンで表示を切り替えながらデザインを確認してください。

STORESでは、利用する端末に合わせてページレイアウトを柔軟に変えるレスポンシブ対応を実現しています。

パソコンでもスマートフォンでも閲覧できるサイトは、スマートフォン画面でもパソコンでも同じURLで表示することができるため、SNSなどでリンクをシェアしたいときにも便利です。

STORESのストアデザインをスマホで編集

STORESではスマートフォンからでも簡単にショップデザインを編集することができます。

初めに「MENU」ボタンからテンプレート編集画面を開いてください。

上部のメニュー部分をクリックすると「レイアウト」や「テキスト」を編集することができます。

パソコンと同様に右下の「パーツエディターモード」からパーツの追加、編集を行いましょう。

パーツを追加したい場所で「パーツを追加する」を押してください。

バナーや動画など追加したいアイテムを選択して編集します。

STORESであれば直感的にショップデザインが可能なので、スマートフォンしかないという人でもすぐに自分好みのショップを作ることができます。

STORESでボタンをデザインして設置

STORESではショップデザインができるだけでなく、自分でデザインしたショップボタンをあらゆるページに設置することができます。

ボタン機能は外部サイトへ購入ボタンを埋め込みできる機能です。

複雑に感じられる機能ですがSTORESであれば

1.ショップボタンをデザイン
2.販売アイテムの登録
3.設置

の3STEPだけでどこにでもショップボタンを設置できます。

ボタンデザインは背景色やサイズを変更できるほか、オリジナル画像を使用することが可能です。

プレビューでデザインを見ながらソースを生成できるので好みに合わせて調整しましょう。

販売を開始するにはダッシュボードからアイテム名や価格を登録して「公開」に設定してください

任意で在庫数や購入画面で表示されるアイテム画像を設定することもできます。

全て入力したら「貼り付けコードを生成する」をクリックします。

生成したコードはHTML編集機能があるウェブサイトに埋め込むことが可能です。

ウェブサイトによっては表示されない場合もあるので確認しておいてください。

ボタンから購入された注文は通常の注文と同じようにオーダーリストに表示されます。

ボタン機能は既存のサイトを使うことができるため、よりそのショップらしさをお客様に伝えやすくなるでしょう。

またショップに興味を持ったお客様に対してより購買を訴求しやすくなります。

STORESのロゴメーカーでロゴをデザイン

ショップの顔ともいえるのが、ロゴです。

ロゴはウェブサイトに表示されるほか、名刺や販促物に掲載するなど様々なシーンで活躍します。

コンビニや飲食店などでもオリジナリティのあるロゴを使用して、イメージを定着させています。

ショップロゴはデザイナーに依頼するのが一般的ですが、知識があればillustratorなどのツールで作成することも可能です。

STORES.jpが提供しているロゴメーカーを使えば、デザインの専門知識がないという人でも簡単にロゴをデザインすることができます。

STORESのロゴメーカーとは

ロゴメーカーとはだれでも簡単におしゃれなロゴを作ることができるサービスです。

作ったロゴは商用利用ができるうえに無料。

さらにソフトのインストールなども必要ありません。

ロゴメーカーでロゴを作ってみよう

ロゴメーカーでのデザインに専門知識は必要ありません。

アプリなどのインストールも不要なので、まずはロゴメーカーのURLにアクセスして、ブランド名など表示させたい文字を入力してください。

その後好きなフォントや大きさ、カラーを選択しましょう。

画面を見ながら選ぶことができるので、気軽に様々なパターンを試すことができます。

ロゴメーカーでは文字だけでなく、アイコンとなるシンボルマークもたくさん用意されています。

ベーシックなマークのほか、ファッションやアクセサリーなどカテゴリ別になったマークの中から好きなものを選んで自由に配置可能です。

完成したロゴは保存することができます。

ボタンをクリックするとさまざまなサイズの画像としてダウンロードできます。

保存形式やサイズを指定して保存してください。

また、ロゴメーカーのプレビュー画面では、いろいろな場面で活用したロゴを見ることができます。

多くのパターンのプレビュー画面が用意されているため、実際に印刷してみたらイメージが違ったといったトラブルも防ぐことができるでしょう。

STORESのロゴメーカー活用

自分でデザインしたロゴには愛着がわきます。

せっかくロゴを作ったのであれば、いろいろな場面で活用してください。

ロゴメーカーのロゴは商用利用できるため、ウェブサイト以外にもお客様へのサンキューレターやストアカード、名刺などにも使うことができます。

また商品タグにロゴを掲載してもよいでしょう。

マグカップやトートバッグなどにロゴをプリントしたアイテムを作ることもできます。

ショップの人気が上がれば、自然とロゴへの認識も増えていきます。

ロゴを目にする機会が増えることで、ブランドの認知度も高まっていくでしょう。

STORESのロゴメーカーはアカウントがなくても使用可能

ロゴメーカーを使うには登録などの手続きは一切必要ありません。

誰でも無料で使うことができます。

まだSTORESのアカウントを持っていないという人も、ロゴメーカーを利用することができます。

これからSTORESでショップをオープンしたい、自分のブランドをよりアピールしたいという人もロゴメーカーでロゴを作ってみてください。

STORESで作成したロゴをSNSで活用

作成したロゴは印刷して使うほかSNSに掲載して使うこともできます。

YouTubeのサムネ画像やTwitterのアイコン、Instagramのストーリーズ画像として活用してもよいでしょう。

ロゴを活用することで、ブランドの認知度好感度を上げてよりブランディング効果が高まります。

ショップや商品への思いを詰め込んだロゴは、視覚的にお客様にアピールするためのツールです。

ロゴを認識してもらえる機会を増やしてショップの認知度を高めましょう。

・（関連）STORESでアイテム一括登録!!CSVの活用方法を徹底解説!!

・（関連）STORESで越境ECは可能!?英語表記や海外向け販売までポイントを紹介!!

STORESのデザインのまとめ

STORESではHTMLの知識がなくてもショップを作成することができます。

デザインテンプレートの種類も多いので自分の好きなテンプレートを選んでカスタムしましょう。

カスタムも直感的に使用ができ、スマホでもすることができます。

ロゴメーカーで簡単にオリジナルのロゴもできるのでやってみましょう！

まだSTORESに登録をしていない方は、10秒で登録できるので登録をしてみましょう！
→STORES公式サイト

物販ラボでは「無在庫販売スタートマニュアル」も無料配布しています。

これから無在庫販売を始めるのに必須のノウハウをまとめています！興味のある方はぜひ下記からプレゼントを受け取ってください。