マガジン
STORES ネットショップ は、HTMLやCSSの知識がなくても、直感的な操作でネットショップのデザインをカスタマイズできます。デザインをうまく設定するには、まず自分のお店に合った「ストアタイプ」を把握することが重要です。
この記事では、ストアタイプの診断方法から、タイプ別のデザイン設定ポイント、使えるパーツの種類まで詳しく解説します。
自分のストアタイプを確認する
商品数と掲載したい情報を整理する
ストアタイプは、「商品数」と「掲載したい情報の種類」の2軸で決まります。以下のチェックリストで確認しましょう。
① 商品数を確認する
- 30点以上 → タイプA・Bが候補
- 30点未満 → タイプCが候補
② 掲載したい情報を確認する
- カテゴリ分類・ブランドイメージ・世界観を重視したい → タイプA
- 新着情報・イベント・ブログなどの情報発信もおこないたい → タイプB
- 商品をシンプルにすっきり見せたい → タイプC
3タイプの特徴まとめ
| ストアタイプ | 向いているお店 | デザイン方針 |
|---|---|---|
| タイプA | 商品数が多い・ブランドイメージを重視したい | 商品情報とブランドの世界観をバランスよく配置 |
| タイプB | 商品数が中程度・最新情報も発信したい | 商品発見と情報提供を両立した多層的な構成 |
| タイプC | 商品数が少ない・ビジュアルで勝負したい | 商品画像を際立たせるシンプルなレイアウト |
3タイプに共通するデザイン設定
タイプA・B・Cはそれぞれデザインの方向性が異なりますが、設定の出発点として共通する項目があります。
テンプレートは「STANDARD」を選ぶ
3タイプいずれも、テンプレートには「STANDARD」を選択することを推奨します。各タイプのデザインに近い状態から始められるため、カスタマイズの工数を抑えられます。テンプレートはあとから変更することも可能です。
そのほかのテンプレートについては、こちらをご確認ください。
ストアロゴを設定する
ストアロゴの設定方法は2種類あります。登録している店舗名をもとにフォントやサイズを選ぶ方法と、オリジナルのロゴ画像をアップロードして表示する方法です。
ブランドのロゴデータがある場合は画像アップロードを活用することで、よりブランドらしさを表現できるでしょう。
ストアロゴの編集方法はこちらをご確認ください。
メニューのレイアウトを設定する
タイプA・Bでは、メニューのレイアウトとして「1カラム上固定」の選択を推奨します。ナビゲーションがページ上部に固定されるため、お客さまが商品ページやカテゴリへスムーズに移動しやすくなります。
なお、この設定はPC表示を基準としています。
メニュー/レイアウトの設定方法については、こちらをご確認ください
タイプ別のデザイン設定ポイント
同じSTANDARDテンプレートを使用していても、タイプごとに効果的なパーツの使い方や設定には違いがあります。
タイプA｜ブランドイメージと商品情報のバランスを取る
ギャラリーパーツでブランドの雰囲気を伝える
タイプAで特に活用したいのがギャラリーパーツです。複数の画像をスライドショー形式で表示でき、テキストだけでは伝わりにくいブランドの世界観をビジュアルで訴求できます。
商品一覧の前後に配置することで、お客さまがショップ全体の雰囲気を感じ取りやすくなるでしょう。
ギャラリーパーツについての詳細は、こちらをご確認ください。
コラムパーツでブランドのこだわりを発信する
コラムパーツを使うと、画像とテキストを組み合わせて商品ストーリーや製作背景を伝えられます。
タイプAは商品数が多い分、個々の商品やブランドへの理解を深めるコンテンツを設けることで、購買意欲の向上につながります。
コラムパーツについての詳細は、こちらをご確認ください。
背景フレームの使い方
背景色を設定する場合のみ背景フレームを使用しましょう。背景色がない場合は外しておくと、余分な枠が表示されずすっきりとした見た目を保てます。
背景フレームの設定方法の設定方法については、こちらをご確認ください。
タイプB｜情報を多層的に配置して回遊を促す
ニュースパーツはストア上部に配置する
タイプBの特徴的な設定として、ニュースパーツをストアの上部に配置することを推奨します。新着商品・セール開始・イベント告知などの情報が来訪者の目に入りやすくなり、定期的に訪れてもらいやすいお店の雰囲気をつくれます。
ニュースパーツについての詳細は、こちらをご確認ください。
カテゴリ・コラム・バナーを組み合わせる
タイプBは商品カテゴリへの誘導・読み物コンテンツ・バナー告知を組み合わせることで、購入以外の情報接点を設けられます。商品を探しながらお店のことも知ってもらいやすい、奥行きのある構成が実現できるでしょう。
カテゴリパーツについての詳細は、こちらをご確認ください。
コラムパーツについての詳細は、こちらをご確認ください。
バナーパーツについての詳細は、こちらをご確認ください。
タイプC｜商品画像を最大限に活かす
商品名・価格を非表示にしてビジュアルを際立たせる
タイプCの特徴的な設定は、アイテムパーツで商品名と価格を非表示にする選択肢です。商品名のチェックを外すことでテキスト情報が消え、商品画像そのものへ視線を集められます。
ブランドイメージやビジュアルで訴求したいお店に特に有効な設定です。
アイテムパーツについての詳細は、こちらをご確認ください。
カテゴリ・バナーは必要に応じて追加する
タイプCはシンプルな構成が基本となります。商品数が増えてきたタイミングでカテゴリパーツを追加したり、告知があるときにバナーパーツを差し込む形で柔軟に拡張できます。
必要なパーツだけを配置することで、シンプルさを保ちながら情報を追加していけるでしょう。
カテゴリパーツについての詳細は、こちらをご確認ください。
バナーパーツについての詳細は、こちらをご確認ください。
デザインに使えるパーツの種類と役割
アイテムパーツ
商品を一覧表示するパーツです。PC表示・モバイル表示それぞれの列数や1パーツあたりの表示件数をカスタマイズできます。
商品名・価格を非表示にする設定も可能で、ビジュアル重視のレイアウトにも対応できる汎用性の高いパーツです。
アイテムパーツについての詳細は、こちらをご確認ください。
カテゴリパーツ
商品カテゴリを表示し、お客さまの回遊を促すパーツです。商品数が多く、カテゴリ分類が充実しているタイプA・Bで特に効果を発揮します。お客さまが探している商品にたどり着きやすくなるため、購入率の向上が期待できます。
カテゴリパーツについての詳細は、こちらをご確認ください。
ギャラリーパーツ
複数の画像をスライドショー形式で表示するパーツです。商品の使用シーンやブランドの世界観をビジュアルで伝えるのに適しており、タイプAを中心に活用されます。厳選した画像を使うことで、お店の雰囲気をより印象的に伝えられるでしょう。
ギャラリーパーツについての詳細は、こちらをご確認ください。
コラムパーツ
画像とテキストを組み合わせて、お店のコンセプトや商品のこだわりを伝えるパーツです。ブランドストーリーや製品の背景を言葉と画像で丁寧に表現したい場合に活用できます。タイプA・Bでのコンテンツ発信に適しています。
コラムパーツについての詳細は、こちらをご確認ください。
バナーパーツ
セール・お知らせ・外部メディア掲載情報などを目立つ形で掲載できるパーツです。タイプA・B・C共通で活用でき、訪問者に優先的に伝えたい情報を視覚的に強調するのに役立ちます。
バナーパーツについての詳細は、こちらをご確認ください。
ニュースパーツ
最新情報を一覧表示するパーツです。タイプBではストア上部への配置が推奨されており、新着情報やイベント告知を来訪者の目に留まりやすくできます。定期的な情報発信をおこないたいお店に向いています。
ニュースパーツについての詳細は、こちらをご確認ください。
区切り線
パーツとパーツの間に視覚的な区切りを入れるパーツです。セクションを明確に分けることでページ全体の読みやすさが向上し、情報が詰め込まれた印象を和らげることができます。
区切り線についての詳細は、こちらをご確認ください。
ストアデザインの操作方法はFAQをご確認ください
テンプレートの選択・各パーツの追加方法・設定手順など、具体的な操作方法は以下のFAQページで詳しく解説しています。
まとめ
STORES ネットショップ のストアデザインは、まず自分のお店のストアタイプを把握することが出発点です。3タイプはいずれもSTANDARDテンプレートからスタートしますが、パーツの使い方や設定の重点はタイプごとに異なります。
タイプAはブランドの世界観と商品のバランスを、タイプBは情報の多層的な配置を、タイプCはシンプルなビジュアル訴求を意識しながら設定することで、お店の魅力が伝わるストアデザインに近づけられます。まずは自分のタイプを確認し、ぜひデザインのカスタマイズに取り組んでみてください。
お役立ち資料
STORES ネットショップ サービスカタログ
STORES ネットショップ について、基本機能やおすすめ機能、料金プランなどをご紹介しています。特別プランのご紹介もしているので、ぜひ参考にしてみてください。
STORES ロイヤリティ サービスカタログ
オムニチャネルを実現するポイント・顧客管理システム「STORES ロイヤリティ」について、機能・特徴や導入事例、料金などについてご紹介しています。
STORES モバイルオーダー サービスカタログ
無料ではじめられるモバイルオーダーサービス「STORES モバイルオーダー」についてや、モバイルオーダーのトレンドをご紹介しています。ぜひ参考にしてください。
STORES ブランドアプリ サービスカタログ
お店独自のアプリ開発ができる「STORES ブランドアプリ」をご紹介しています。お客さまごとに最適化した自動プッシュ通知などで、顧客体験を最適化しませんか？
中・大規模EC、店舗運営 事業者さま向け STORES 活用資料
複数店舗運営、中・大規模EC、店舗運営 事業者さまに向けて、STORES のサービスを組み合わせることで実現できることをご紹介しています。
