• ホーム
  • >
  • ネットショップ運営
  • >
  • Stores
  • STORESならHTML編集も不要!!簡単にデザインをカスタマイズして販売可能!!

    STORESならHTML編集も不要!!簡単にデザインをカスタマイズして販売可能!!

    監修者中川 瞬

    物販ラボ運営責任者、アマラボ(物販ツール)の共同開発者、Amazon、ebay、Yahoo!ショッピング、ヤフオク、BUYMA、メルカリ、ラクマ、ヤフオクフリマ、Mercadolibre、etsy、BONANZA、ネットショップとあらゆる販路で販売。
SNS:TwitterLINE
    中川 瞬のプロフィール

    こんにちは。中川瞬(@buppan_system)です。

    中川
    STORESのショップデザインについて知りたい
    という方のために、STORESのショップデザインの方法ついて解説をします。

    この記事を読むことで、

    1. STORESのショップデザイン方法がわかる
    2. STORESのデザインを好みにカスタマイズできる
    3. ロゴを使ってお客様に訴求することができる
    4. ショップやアイテムへの思いをデザインで表現できる

    この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。

    時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。

    それではSTORESのデザインについて解説をしていきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    順番に説明します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    STORESのロゴメーカーとは

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

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

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

    <h3>ロゴメーカーでロゴを作ってみよう</h3>

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

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

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

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

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

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

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

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

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

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

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

    STORESのロゴメーカー活用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    STORESのデザインのまとめ

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

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

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

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

    まだSTORESに登録をしていない方は、10秒で登録できるので登録をしてみましょう!

     

    下記のLINEで

    ①パソコンの選び方
    ②国内転売マニュアル
    ③メルカリマニュアル

    が記載されている「ネット物販スタートマニュアル」をプレゼントしているのでぜひ受け取ってくださいませ!

    Visited 41 times, 1 visit(s) today

    あなたにおすすめの記事

    STORESのアクセス解析を使ったショップ戦略を解説!!

    STORESのアクセス解析を使ったショップ戦略を解説!!

    こんにちは。中川瞬(@buppan_system)です。 という方のために、STORESで使えるアクセス解析機能ついて解説をします。 この記事を読むことで、 アクセス解析の重要性がわかります。 STORESのアクセス解析...

    2023.10.05 更新

    STORESでのオリジナルグッズの作成と販売方法を解説!!

    STORESでのオリジナルグッズの作成と販売方法を解説!!

    こんにちは。中川瞬(@buppan_system)です。 という方のために、オリジナルグッズ作りのコツについて解説をします。 この記事を読むことで、 STORESでオリジナルグッズを販売するメリットがわかる STORES...

    2023.12.28 更新

    STORESでハンドメイド商品を販売!!ミンネとも比較あり!!

    STORESでハンドメイド商品を販売!!ミンネとも比較あり!!

    こんにちは。中川瞬(@buppan_system)です。 という方のために、STORESとミンネの違いについて解説をします。 この記事を読むことで、 ミンネでハンドメイド作品を販売するメリットが分かる STORESを利用...

    2024.01.05 更新

    STORESで販売するメリットとデメリットを解説!!

    STORESで販売するメリットとデメリットを解説!!

    こんにちは。中川瞬(@buppan_system)です。 という方のために、STORESを使って出店方法から解説をしていきます。 この記事を読むことで、 STORESを利用するメリットがわかる STORESでショップをオ...

    2023.12.26 更新

    STORESの特商法と住所の登録と表記を解説!!販売前の確認事項!!

    STORESの特商法と住所の登録と表記を解説!!販売前の確認事項!!

    こんにちは。中川瞬(@buppan_system)です。 という方のために、STORESの住所登録について解説をします。 この記事を読むことで、 STORESの住所登録ができる 特定商取引法に関する表記について知ることが...

    2023.12.25 更新

    STORESで集客をして売上を上げる方法とは!?広告とSNSについて!!

    STORESで集客をして売上を上げる方法とは!?広告とSNSについて!!

    こんにちは。中川瞬(@buppan_system)です。 という方のために、STORESで集客する方法ついて解説をします。 この記事を読むことで、 集客する方法を知ることができる 広告タグを使って集客することができる S...

    2023.11.08 更新

    STORESでできるブログ活用術!!SEO対策をして集客をする方法とは!?

    STORESでできるブログ活用術!!SEO対策をして集客をする方法とは!?

    こんにちは。中川瞬(@buppan_system)です。 という方のために、STORESでブログを活用する方法ついて解説をします。 この記事を読むことで、 STORESでブログを活用する方法がわかる SEO対策でより多く...

    2023.12.27 更新

    STORESで中古品を販売する方法を解説!!STORESとヤフオクの連携!!

    STORESで中古品を販売する方法を解説!!STORESとヤフオクの連携!!

    こんにちは。中川瞬(@buppan_system)です。 STORESをヤフオク!やメルカリのように使う方法を知りたい(わかわらない)という方のために、STORESの中古品販売について解説をします。 この記事を読むことで...

    2023.11.08 更新

    STORESの定期便でサブスク売上を得る方法を解説!!

    STORESの定期便でサブスク売上を得る方法を解説!!

    こんにちは。中川瞬(@buppan_system)です。 という方のために、STORESのサブスクついて解説をします。 この記事を読むことで、 STORESの定期便についてわかる 定期購入のメリットについて知ることができ...

    2023.12.25 更新