【画像で解説】STORES.jp 全デザインカスタム機能の使い方まとめ

画像で解説・STORES.jp 全デザインカスタム機能の使い方まとめ

 

ネットショップの利便性やデザイン性は、お客様の購買意欲に直結する大きなポイント。見やすくて使いやすいネットショップを作成するには、テンプレートを上手に利用したり、ショップに合わせてカスタマイズするのがおすすめです。

 

「でも、カスタマイズにはHTMLやCSSの知識がいるのでは?」

そう不安に思うオーナー様もいるかもしれませんが、STORES.jpのデザイン機能を使えば、デザインカスタマイズはむずかしくありません!

 

この記事では、STORES.jpの全デザインカスタマイズ機能の種類・使い方を画像と共に詳しく解説します!

 

 

 

STORES.jpのデザインカスタマイズ【基本】

まず、STORES.jpの基本的なデザインカスタマイズについて解説します。

設定後はいつでも変更可能です。まだお試しでない方も、一度デザインしてその使い勝手の良さを体験してみてください!

 

はじめに、ストアデザインのページに移動してください。ログイン後、ページ上部の「ストアデザイン」をクリックします。

 

ダッシュボード画面

 

すると以下の画面になります。ここから基本編で①〜⑤を順番に解説していきます!

 

 

ストアデザインのページ

 

 

①テンプレート

先ほどの画面で、テンプレート>すべてのテンプレートを見る の順にクリックすると48種類のテンプレートが選択できるようになります。

デザイン画面2

 

テンプレート選択画面では、Aすべてのテンプレート」から絞り込みが可能です。

デザイン画面3

 

【選び方のコツ】

  • ショップの規模(商品数)に応じて選びたい方→Bから選ぶ
  • トップページに大きな画像を見せたい方→Cから選ぶ
  • ショップの雰囲気に合わせて選びたい方→Dから選ぶ

 

ベーシックなものから、ガーリー・クール・ポップ・ボタニカルな雰囲気まで多彩なラインナップを揃えているので、ショップの雰囲気に合わせて選択できます。

このテンプレートを利用すれば、自分で上手にデザインする自信がない人も、ショップのイメージ・取扱商品に合わせたショップデザインがスタートできます!

 

 

デザイン画面4

適用したいテンプレートを決めたら、あとは選択するだけ!適用前にデモを見るから、デザインやレイアウトイメージを確認することも可能です。

 

②メニュー/レイアウト

【メニュー】

先ほどの画面で、メニューレイアウト>メニュー内容「編集」 の順にクリックするとメニューの編集画面になります。メニューとはショップ内に設定できるメニューバーです。

デザイン画面5

 

追加したいメニュー名と、リンク先を設定します。カスタムリンクを選べば、任意のリンクを追加することもできます。

 

【設定のコツ】 
  • 英語、日本語など統一して設定すると統一感が出ます
  • 長すぎるメニュー名は△。簡潔な名前にしましょう
  • 外部ホームページやSNSアカウントページの設定に便利です
  • 青いスライドボタンで表示のON/OFFが設定できます

 

デザイン画面6

 

設置後に反映される箇所がこちら! 

 

デザイン画面7

メニュー編集画面で変更される箇所

次にレイアウトの設定方法です。

 

【レイアウト】

 Aメニューレイアウト」の項目でレイアウトを設定できます。メニューバーの表示位置も変更できます。

「カラム」はページを構成する大きな列の数と覚えておく分かりやすいです。1カラム=大きな1列で構成、2カラム=大きな1列と小さな1列の計2列で構成されている、とイメージしておきましょう。

 

デザイン画面8

 

テンプレートでメインビジュアルが最初から設定されていない場合、Bメインビジュアルを追加」から設定することが可能です。「画像が手元に無い…」という方はスキップしましょう!後からいつでも追加可能です。

 

デザイン画面9

メインビジュアルの大きさを変えることもOKです(※1920px × 720pxを推奨しています)

 

C「PC表示時の横幅」ではページ全体の幅を大中小から選んで選択できます。

D「アイテム画像比率」ではアイテム画像を正方形・縦長・横長から選択できます。

E「表示」ではSTORES.jpのロゴ表示有無の切り替えができます。(※スタンダードプランへのアップグレードが必要になります)

 

デザイン画面10



③テキスト

先ほどの画面で、「テキスト」をクリックするとテキストカラー編集画面になります。

 

あらかじめ用意されている黒、濃灰、薄灰、白の4色の他、一番右のグラデーションマークを選択して表示される欄にカラーコードを入力すれば、好きな色を直接指定することもできますよ。

 

カラーコードの確認には以下のサイトが便利ですので、あわせて参考にしてください。

 

デザイン画面12

「ストア全体」を選択時に反映される箇所

「ストア全体」部分で変更したカラーは、タイトルとメニューバーに反映されます。

デザイン画面13

「アイテム一覧(アイテム名)」を選択時に反映される箇所

「アイテム一覧(アイテム名)」で変更したカラーは、トップページのアイテム一覧に並んでいるアイテム名に反映されます。
 

④ストアロゴ

先ほどの画面で、「ストアロゴ」をクリックするとテキストカラー編集画面になります。

デザイン画面14

 

デザイン画面14

スライドバーを使って感覚でサイズ変更が可能です

ブランド名が長いショップは文字サイズを小さく調整し、画面にぴったり収まるようにすると良いでしょう。逆に、ブランド名が短いショップは文字を小さくしすぎないように注意してくださいね。

  

フォントは英語・日本語の両方に対応していて、「英語」「日本語」と表記されている箇所から簡単に切り替えて設定することが可能です。

 

「ストアロゴ」機能を使うと、デザイナーに依頼しなくても、フォント設定だけで雰囲気のあるストアロゴが作れます。いくつかフォントを選んで比べてみてくださいね!

 

⑤背景

f:id:storesblog:20200108153836j:plain

 

先ほどの画面で「背景」を選択すると、ショップ全体の背景色を設定可能です。「背景色」「背景画像」から1つを選択して設定することになりますが、まずは背景色をカスタマイズするだけでも十分です。

 

f:id:storesblog:20200108154125j:plain

 

先ほどの「テキスト」カスタマイズと同様に、あらかじめ用意されている色の他に、一番右のグラデーションマークを選択して表示される欄にカラーコードを入力すれば、好きな色を直接指定することもできますよ。

 

STORES.jpのデザインカスタマイズ【中級】

ここまで紹介したデザインカスタマイズ【基本】でも簡単にショップのデザインを作ることが可能ですが、オリジナリティをもっと出していきたいと考えているオーナーさんも多いですよね。

 

そんな方は、ぜひ次のレベルのカスタマイズにもチャレンジしてみましょう。ここからは、他のショップと一味違ったデザインにできるカスタマイズ【中級】編を紹介していきます。

 

背景画像をカスタマイズしよう

f:id:storesblog:20200108155825j:plain


 先ほどの【基本】では、背景色を設定することによるショップページ背景のカスタマイズ方法を紹介しましたが、背景画像を使ってカスタマイズすることも可能です。

 

あらかじめ用意されている52種類の画像デザインが用意されているためオーナー様のショップに合った雰囲気のものが選べるほか、自分で画像を用意して使うことも可能です。

 

f:id:storesblog:20200108160830j:plain

 

オリジナルの背景画像を使いたい場合、「デフォルト」「オリジナル」と表示されている部分の「オリジナル」を選択すると画像のアップロード画面に移行します。

自分で用意したオリジナル画像を使えば、世界でたったひとつの背景ができ上がりますよ。

 

ストアロゴに画像を使ってみよう

STORES.jpでは、あらかじめ用意されているフォントを使って簡単に雰囲気のあるストアロゴを作ることができますが、ロゴは画像で設定することもできます。

 

デザイン画面14

デザインカスタマイズ【基本】で紹介したときと同様に「ストアロゴ」を選択します。

 

f:id:storesblog:20200108161720j:plain
f:id:storesblog:20200108161717j:plain


「画像を使用する」を選択することで、ロゴ画像のアップロード画面に移行します。

点線の中をクリックしてパソコン/スマートフォン上の画像を選択するとアップロードされ、ロゴ画像として使えるようになりますよ。

 

ショップで用意したオリジナルロゴを使えば、ショップ内はイメージが統一され消費者の印象に残りやすくなり、ブランディングに大いに役立つでしょう。

 

ロゴメーカーでオリジナルロゴを作ろう 

またオリジナルロゴがないショップでも、無料でロゴが作成できる「ロゴメーカー」を使えば、オリジナルのストアロゴが簡単に作れます。

 

f:id:storesblog:20200108162419j:plain

先ほどの「ロゴ画像のアップロード」画面の下にある「ロゴメーカーで作成」を選択するか、以下のリンクにアクセスすることで「ロゴメーカー」を使うことができます。

 

 

 

実際にロゴメーカーでロゴを作る手順をチェックしていきましょう。

 

f:id:storesblog:20200108162752j:plain


ロゴメーカーの制作ページトップを表示しました。まずは画面左側にある「テキスト」から、ショップ名・キャッチコピーを入力しましょう。

 

f:id:storesblog:20200108163237j:plain

ショップ名・キャッチコピーは、それぞれで

  • 使うフォント
  • フォントの太さ
  • 使う色

を選ぶことが可能です。

 

f:id:storesblog:20200108163250j:plain

 

テキストだけでなく、ロゴメーカー上に用意されている豊富なアイコンを使うこともできます。

画面左側にある「アイコン」から使いたいアイコンを選びドラッグ&ドロップすればOKなので、とっても簡単です。

 

f:id:storesblog:20200108163259j:plain

 

作っているロゴがどんな仕上がりになるか不安な方も大丈夫。ロゴメーカーの画面右側では、名刺・商品タグ・マグカップ・トートバッグなど、実際にロゴをアイテムに使ったときのプレビューを見ることができます。


作り終わったロゴはpng、png(透過)、jpg形式の3種類の拡張子、3つの横幅(120px、240px、480px)からダウンロード可能。

 

ダウンロードした画像をデザイン編集画面からアップロードすれば、ストアロゴとして設定されます。

ロゴメーカーで作成したロゴは商用利用できるので、お客様へのレターやストアカード、名刺や商品タグなど、さまざまなシーンで利用できるのもいいですね。ぜひお気に入りロゴの作成にお役立てください。

 

ロゴメーカーの詳しい使い方については『デザイン知識なく無料で自分でロゴが作れる「STORES.jpロゴメーカー」を使ってみよう!』という記事で解説していますので、あわせて参考にしてみてくださいね。

 

 

STORES.jpのデザインカスタマイズ【上級】

ここまで紹介してきた【中級】のデザインカスタマイズができたら、さらに操作性を高めるカスタマイズがおすすめです。

 

この【上級】で紹介するカスタマイズでは、トップページに動画や写真スライドショーを埋め込んだり、最新ニュースへのリンクを掲載することが可能ですよ。早速設定方法を見ていきましょう!

 

f:id:storesblog:20200108165659j:plain

 

まず、デザイン編集画面の右下にある丸いボタンをクリックし、パーツエディタモードに移動します。

 

f:id:storesblog:20200108165706j:plain

パーツエディタモードに移動しました。ここではショップの見た目が大幅に良くなる「パーツ」を、実際に運営しているショップを見ながら追加・カスタマイズすることができます。

 

実際に追加できるようになるパーツは以下の通り。

 

 パーツエディタモードで追加できるパーツ一覧

  • バナー
  • コラム
  • 区切り線
  • ギャラリー
  • 動画
  • ニュース
  • アイテム
  • カテゴリー
  • ランキング

 

それぞれをピックアップして見ていきましょう。

 

バナー

f:id:storesblog:20200108171117j:plain

 

キャンペーンの告知などに便利なバナー画像を設置できる「バナー」パーツ。バナー画像は合計3枚まで設定可能で、トリミングや表示したい部分の設定も簡単にできます。

 

f:id:storesblog:20200108171751j:plain

 

画像にはリンクを貼り付けることもできるので、ショップ内のセールページやブログ・SNSへのリンクを掲載することもできますよ。

 

コラム

f:id:storesblog:20200108171121j:plain

 

ショップの成り立ちや商品コンセプトを説明することができる「コラム」パーツ

このパーツを使うことで、フリーワードや任意の画像をネットショップのトップページに設定できるようになります。

 

区切り線

複数のコンテンツが続いてしまい、ページにメリハリを付けたい時に効果的なパーツです。

 

ギャラリー

f:id:storesblog:20200108171126j:plain

 

ショップの目玉商品やキャンペーン情報をアピールしたい時には、先ほどの「バナー」よりも大きな画像が使える「ギャラリー」パーツが効果的です。

 

動画

f:id:storesblog:20200108171129j:plain

 

制作風景をまとめた動画やコンセプトムービーをショップで作成している場合、YouTubeもしくはVimeoに動画をアップロードしていれば「動画」パーツで埋め込むことが可能です。

 

動画のURLを入力して「保存」するだけで、すぐに動画が埋め込めますよ。

 

ニュース

f:id:storesblog:20200108171151j:plain

 

「ニュース」パーツでは、STORES.jpで提供しているニュース機能を使って書いた記事へのリンクを掲載することが出来ます。

 

このパーツを使えば、長期休暇に伴う業務停止のお知らせなどお客様に伝えなければいけない情報を効果的に表示させることが出来ますよ。

 

アイテム

f:id:storesblog:20200108171133j:plain

 

「アイテム」パーツでは、ショップで販売している商品を

  • 新着順
  • カテゴリー別
  • オーナー様によるカスタマイズ

という3つのパターンで自由に表示することができます。

 

f:id:storesblog:20200108171138j:plain

表示するアイテム数やショップ上での見せ方などもカスタマイズ可能で、自由度の高いアイテム表示が可能です。

 

カテゴリー

 

f:id:storesblog:20200108171142j:plain

 

「カテゴリー」パーツでは、販売している商品カテゴリーの一覧を表示することができます。

 

トップページに表示されるのは上位6件のカテゴリーで、画像は新規にアップロードするか、販売中のアイテムから選択して設定します。

 

ランキング

f:id:storesblog:20200108165301j:plain

「ランキング」パーツでは、過去3ヶ月にストアで購入された商品のランキングを表示できます。

売上ランキングを表示することでお客様に売れている商品を喚起することができるので、ぜひ追加しておきましょう。

 

最後に

ショップデザインをカスタムすればするほど、確実にネットショップのオリジナリティが出せます。

オーナー様の好きなようにカスタマイズしすぎては、かえってお客様にとっては複雑に感じられてしまいますが、適切なカスタマイズは売上アップに大きく貢献しますよ。

 

ショップの魅力が可能な限りお客様に伝わるよう、今回ご紹介した機能を使って、見やすく、わかりやすいページを作成し、売上アップをめざしませんか?

 

関連記事
  1. ショップとSNSを連携させるメリットと方法は?

  2. 今の写真で大丈夫?購入率が上がる写真の撮り方をご紹介

  3. 売れるショップのコンセプト事例を参考に売上UP

STORES.jpは最短2分!で
誰でも本格的なネットショップが作れるサービスです。

ネットの知識がなくても、 豊富なテンプレートとカスタマイズ機能で
自分だけの表現が驚くほどかんたんに出来ます!
 

\ まずは無料ではじめてみませんか? /

STORES.jp はこちら