ストアーズで初心者向けデザインテクニックを解説

ストアーズを使用して慣れてきたら、デザインを変更したいと思いますよね。

テンプレートでcssが使えない、テンプレートのバリエーションがあまりない、一工夫することでオリジナルのようなでレイアウトを教えます！

 

完成したデザインレイアウト

 

\こちらからネットショップを確認できます/

ショップを見る

ストアーズのデザイン編集でできること

ストアロゴ画像

ロゴの設定は、テキストでも設定可能ですがどうしても安っぽく見えてしまうので、ロゴデザインを作成して設定したほうが見栄えがよりよくなります！

ストアーズの仕様上テキスト、ロゴの画像を設定は必須の設定になっています。
※ロゴなしは、設定できません。

ロゴ作成を安くプロに依頼できる「ココナラ」で、オリジナルのデザインで作成していただいたほうがいいでしょう。
相場は、3000円~10,000円程で作成してもらえます。

ストアーズから作成可能な、「商用OK! 無料でロゴがつくれるサービス」があります。
ロゴメーカ―ツールで作成できます。

カスタムテンプレートの設定

私が使用したのは、WIDE VISUAL、メインビジュアルが大きく表示されるデザインです。
メイン画像があることで見栄えも良く見えるレイアウト構成になるのでおすすめです。

メニュー・レイアウト

1カラムで上固定を選択しています。
メイン画像がないとスマホ時にロゴがトップで大きく表示されて見栄えがあまり良くない印象になるので、1カラムで上固定を選択で設定することできれいにレイアウトが整います。
メインビジュアル（トップ画像）の設定もこちらからできます。

テキスト

色あいと文字のフォントはゴシックか明朝の２種類から選択できます。
高級感や品があるイメージのサイトは明朝体をかわいいらしさやわらかいイメージのサイトはゴシック体を選択すると失敗しません。

背景色

サイトには、和モダンのイメージの背景画像を設定しています。

画像をお持ちの方や有料画像を使いたい方などアップロードして設定ができます。

素材データからイラストがダウンロードできるphoto acがおすすめ

無料会員の場合は、1日の素材ダウンロード数が9点までに制限がされています。
プレミアム会員は、月額1,307円でダウンロード数の制限なく何点でもダウンロードすることができます。

ダウンロードし放題のプレミアム会員登録はこちら

パーツ編集でオリジナルのような設定をする！

パーツ編集で各コンテンツが設定できるようになります。

バナーの設定

１枚バナー画像の推奨サイズが横1880×縦360です。
「厳選素材　海・里・山の恵み」のタイトル画像も同じサイズになります。

ショップ下部に配置している各カテゴリーバナーは、横1880×縦500で設定しています。

ギャラリー

最大5枚の設定が可能で横940px×縦400px推奨サイズになっています。
おすすめの商品をギャラリーを表示させると効果的です！

コラム

テキストは文字は最大300文字まで設定可能、写真を右か左に設定ができます。横940px×縦400px推奨サイズになっています。
テキストだけとしてコンテンツに設定ができるので、バリエーションが豊富です。

アイテム

「すべて」を選択すると全商品を表示することができる

登録商品が全て設定ができて、表示数が4列32商品、3列30商品までトップページに表示が可能です。
その他にも新着、カテゴリー別に表示、カスタマイズ設定（自由に商品が選べる）の選択ができて、最大6商品のみ表示ができます。

商品の並びのレイアウトは、パソコン表示の場合は、4つずつの表示、スマホの場合は２つずつの表示が見やすいです。
スマホの時に、商品数が多くて１列の配置だとスクロールの量が増えて不快感を与えて離脱しやすくなるので、気をつけましょう。

お問い合わせしてみる