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

工夫次第でもっとオシャレに!ストアデザインのテクニックをご紹介

f:id:storesblog:20200911163317j:plain


STORES のストアデザインは、HTMLやCSSの知識がなくてもテンプレートを選択するだけでオシャレなネットショップが作れます。

 

でも、もっとオシャレに、工夫次第で魅せ方がグンと良くなる方法があります!

 

この記事では、ブランドの魅力を引き出すためのテクニックをいくつかご紹介しますので、ぜひ参考にしてください。

STORES サービス資料の
ダウンロードはこちら

 

テクニック1 訴求力のあるテンプレートを選ぼう

デザインテンプレートが48種類もあるので、最初、何を選択すればいいのか悩まれるかも知れませんが、テンプレートの選択は、「ブランドのイメージを効果的に見せたい」か、または「商品の表示数」や「商品写真の表示サイズ」などで選択します。

ブランドのイメージを効果的に見せるデザイン

1番よく見られるのは「トップページ」です。

そのため、トップページで、いかにブランドの世界観を表現したり、アピールしたい商品を分かりやすく見せるかが重要になってきます。

 そこでおすすめなのが、イメージ写真を挿入できるテンプレートです。

 

f:id:storesblog:20200511171304p:plain

 

左がベーシックなSTANDARDを使用。

右がイメージ写真を大きく表示できるWIDE VISUALを使用。

 

両方を比較したときに、どちらがブランド力や商品の魅力が伝わるでしょうか。

パッと見たときに「美味しそう」「買いたくなる」という気持ちが伝わりやすいのは、イメージ写真を挿入している右側だと思います。

 

テクニックの1つとして視覚的なインパクトを盛り込むのは大切です。

48種類のテンプレートの中でもイメージ写真を挿入できるものをまとめましたので、商品数なども踏まえて、訴求力があるテンプレートを選びましょう。

イメージ写真が挿入できるテンプレート 

MARKETシリーズ

商品数が多いショップにおすすめです。

・MARKET

f:id:storesblog:20200515183857p:plain

・MARKET_kraft brack

f:id:storesblog:20200515184419p:plain

・MARKET_milk mint

f:id:storesblog:20200515184451p:plain

 

WIDE VISUALシリーズ

メインビジュアルを大きく表示したいショップにおすすめです。

・WIDE VISUAL

f:id:storesblog:20200515184723p:plain

・WIDE VISUAL_gridpaper

f:id:storesblog:20200515184807p:plain

・WIDE VISUAL_cool

f:id:storesblog:20200515184758p:plain

 

CITYMARKETシリーズ

商品数が多く、ランキングを表示させたいショップにおすすめです。

・CITYMARKET

f:id:storesblog:20200515185149p:plain

・CITYMARKET_black texture

f:id:storesblog:20200515185235p:plain

・CITYMARKET_pop pattern

f:id:storesblog:20200515185320p:plain

・CITYMARKET_washi

f:id:storesblog:20200515185402p:plain

写真挿入について

テンプレートを選択したあとは、「NO IMAGE」部分に写真を挿入できます。

選んだテンプレートによっては、挿入方法が異なりますので下記の手順を参考にしてください。

 

<挿入方法〜MARKETシリーズ・CITYMARKETシリーズ〜>

1.右下のパーツエディタモードを選択
2.NO IMAGEを選択
3.EDITを選択
4.画像を挿入
5.画像の挿入が完了したら「パーツエディットを完了します」を押します

f:id:storesblog:20200511174518p:plain
 

<挿入方法〜WIDE VISUALシリーズ・CITYMARKETシリーズ〜>

1.メニュー/レイアウトを選択

2.メインビジュアルにチェックがすでに入っていますので、下にある写真挿入アイコンを選択し、画像を挿入

 

f:id:storesblog:20200511174523p:plain

 

購入されるお客様の多くがスマートフォンからお買い物をしています。

ストアデザインを選ぶときは、必ずパソコン表示だけでなく、スマートフォン表示でもチェックしてください。 

 

テクニック2 メニュー項目をカスタマイズして、ブランドの魅力を強調しよう

メニュー項目名やメニュー位置を変更することで、さらにブランドの魅力が引き立ちます。 

メニュー/レイアウトの使い方

メニュー項目名を変更

項目名を自由に変更できたり、新たに項目を追加することもできるので、見て欲しいサイトに飛ばすことも可能です。

カスタマイズ方法については以下の記事でご案内していますので、参考にしてみてください。

 

 

メニュー項目の位置を変更

項目名の位置もどこに置けば「分かりやすい」のか、「見やすい」のかを意識して設定してみましょう。

※メニュー項目の位置はパソコン表示のみ適用されます

 

f:id:storesblog:20200511185032p:plain

 

テクニック3 イメージに合う書体を選び、メッセージ性をアップさせよう

2020年1月に「明朝体」がフォントに追加されました。

フォントが与える印象は強いです。

ゴシック体・明朝体、どちらにするかでイメージが大きく変わるので、ブランドの雰囲気に合わせて、フォントを選択しましょう。

フォントの特徴

ゴシック体

ゴシック体は丸みがあり、柔らかさを与えるため、親近感・安定感・カジュアルといった印象を与えます。

f:id:storesblog:20200519150527p:plain

明朝体

明朝体はゴシック体の正反対のイメージがあり、高級感・上品さ・大人っぽい印象を与えます。
主に和のテイストを感じるものに合います。

f:id:storesblog:20200519150559p:plain

 

テクニック4 事例から学ぼう

どんなデザインが作れるかは、実際にSTORESをご利用いただいてるショップ様を見ていただくのが1番だと思います。

 

コンセプトをきちんと視覚的に伝えているショップ様の事例をご紹介していますので、ぜひ参考にしてみてください!

 

まとめ

ストアデザイン機能は誰でも簡単に、工夫次第でオシャレなデザインが作れます。

購入されるお客様の目線になって、「わかりやすい」「見やすい」そして「オシャレ」を意識して素敵なショップデザインを楽しんで完成させましょう!

 

STORES サービス資料の
ダウンロードはこちら

 

関連記事

STORES で、ネットショップの開設から、お店の
キャッシュレス化、予約システムの導入まで誰でも
かんたんにはじめられます。