ネットショップワークBASEを使ったネットショップデザインはこうやって作ろう!ツイートシェアはてブLINEPocketBASEではテンプレートを使用しデザインを簡単に作成することができますが、より売りやすくするには商品画像や説明文、導線など、様々な要素を含めたデザイン制作を行う必要があります。これからBASEでショップデザインを作る方、または既存のものに物足りなさを感じている方はご参考にしてください。以前の記事で香取慎吾さんがCMされているネットショップ「BASE」の概要のお話をしました。使ったネットショップのデザイン作成についてのお話です。BASEに限らず他ネットショップサービスでも共通する内容でもあります。最後にネットショップをデザインする上でのポイントまず、ネットショップをデザインする、作る上でのポイントは以下の通りです。お店がキレイなこと商品写真が見やすいこと説明が丁寧なこと導線などがしっかりあることネットショップのデザイン、制作というと「外観」ばかりを気にされる方が多いですが、ネットショップをデザインするということはお店をキレイにするだけでなく、全体を通しておこなうことがより良いデザインとなり売上に繋がります。このことを忘れてはいけません。デザインする上で大きく3つにわけることができます。MARKETのテーマ(テンプレート)を使うHTML編集でオリジナルデザインを作成BASEのデフォルトテーマBASEで予め準備されているテーマ(テンプレート)は、11種類あります。今後増えていく可能性もあるかもしれませんが、基本的には上記の中から選ぶ必要があります。シンプルなテーマとなっているので、色味以外を除けばどんなお店でも適用できるでしょう。MARKETでは、高品質なテーマを購入することができます。テーマによって値段は変わりますが、5,000円くらい~買い切りでジャンルに特化したテンプレートを購入することが可能です。買い切りというところがポイントですね。デザインにこだわりたい、時間をかけたくない、という方にはおすすめかと思います。HTML編集でオリジナルデザインHTML、CSS、JavaScriptなどを編集することで、オリジナルのネットショップデザインを作ることができます。ショップロゴ作成についてネットショップのロゴを作るとなると、時間も費用もかかります。お金をかけない場合は、自身で試行錯誤しなければいけません。結果、時間をかけたのに素人感がすごく出てしまった...という方も多く存在します。Appsという拡張機能のようなものがあります。その中に「ショップロゴ作成」というAppsがあり、こちらを活用することで簡単にオリジナルのロゴを作成することができます。ある程度の制限はありますが、サイズやカラー、フォントの種類なども選べて初心者の方には特におすすめです。日本語フォントにも対応しているところが有り難いですね。かっこいいロゴを簡単に作れるサービス他にも別のサービスとなりますが、ロゴを簡単に作れるツールやサービスもあります。参考までに、以下ご紹介いたします。DesignEVOCanvaLogojoy看板画像でよりショップを魅力的にデフォルトのデザインだとどうしても簡素的に見えがちです。雰囲気を変えたいときは、ロゴエリアを看板エリアとして活用します。以下のショップをご覧ください。こちらは、蜂の子や鹿肉などを販売している「あつたや」というショップ様です。BASEで作られており、看板画像を活用することで、より商品の魅力をお客さんに伝えやすくしています。看板画像やロゴエリアなどは、基本的にヘッダーエリアを活用することが多く、ファーストビューでもあるため、必要に応じてインパクトのある、あるいはキャッチーな印象をお客さんに与えることで滞在時間が増えると言われています。ヘッダーエリア、看板画像などについては「【初心者必見】ネットショップ用ヘッダー画像(看板)の作り方とポイント」でより詳しく解説しています。ひとつで売上が大きく左右されます。気をつけて欲しいのは、一枚目の画像です。一枚目に登録する画像は、基本的に商品一覧に反映されます。いうことは、ショップ内はもちろんのこと、モールやアプリ内から検索してくるユーザーが初めに目にする商品写真なわけです。この時の商品写真が、他店より見劣りしているとクリックされず、商品ページすら来てもらえない可能性があります。どんな写真がNG?どんな写真がよくないのでしょう。以下、参考としてご紹介いたします。暗い(購買意欲が喚起できない)ピンぼけ(瞬時に判断できない)色味がおかしい(意思決定に欠ける)どんな商品かわからない(パッケージのみなど)どの商品かわからない(さまざまなものと合わせて撮っている)大きさがイメージしづらい(商品そのものだけを撮っている)など。素人の場合、写真を撮るのはなかなか難しいと思いますが、たくさん撮ることで必ず使えそうな写真が出てきます。「数撃ちゃ当たる」で諦めず、初めのうちは時間をかけてでも撮影してみましょう。初心者の方にありがちなのが、被写体に対し寄りで撮られている写真がありますが、被写体のまわりはある程度余裕を持って撮るようにすると、ネットショップでは使いやすかったりします。被写体を常に中心にし撮影するだけでなく、中心からズラして撮ることで雰囲気の良い写真が取れることもあります(この場合、背景が大切)。費用に余裕がある場合は、プロのカメラマンにお願いするのもありですね。場合は写真で魅せるショップが比較的多いので、商品説明文エリアなどはシンプルなお店が多いように見受けられます。そんな中、最低限押さえておきたい内容を以下にまとめました。キャッチコピー(商品名)ボディーコピー(商品説明)ベネフィット(どんな体験ができるのか)キャッチコピー(商品名)BASEの場合、「キャッチコピー+商品名」というような形で商品名を設定します。間違っても某モールのような付け方は避けるようにしましょう。キーワードを入れることで、ユーザーに見つけてもらいやすくする手法ですが、ユーザーが求めていない商品もヒットしてしまうため逆にお店の印象が悪くなります。某モールでも、今後はユーザーのことを考えてこういった手法は少なくなっていくことでしょう。ボディーコピー、ベネフィット上記は、honeymarksさんの商品ページです。母の日のフラワーセットになりますが、わかりやすかったので例として掲載させていただきました。このように、ボディーコピーだけでなく、実際の使い方などを記載することでベネフィットにも繋がり、ユーザーは購入しやすくなります。文章を書くことが苦手な人も多いかもしれませんが、初めから上手く書く必要はなく、あなたが販売する商品だからこそ「あなたしか知らない情報を書ききることが大切」です。導線についてネットショップをデザインする上で、商品へ案内する道筋(導線)は欠かせません。以下は基本的な内容となりますが、正確におこなうことでユーザーにとってわかりやすいお店、購入しやすいお店になります。カテゴリ管理カテゴリ管理というAppsをインストールすることで、カテゴリ設定や整理がしやすくなります。入れておきたい機能です。商品ごとにカテゴリを大中小の3階層まで設定することができます。取り扱う商材によっては、カテゴリ設定をどうしたらよいか迷われる方もいると思います。身近なところにヒントや参考になるものが落ちているかもしれません。いうAppsをインストールすることで、検索窓が設置できます。こちらも必ず入れておきたい機能です。上記のように、左上に表示されます。使用するテンプレートによって、検索窓の表示場所やデザインは異なります。ラベルラベルというAppsをインストールすることで、商品にラベルを貼ることできます。ラベルは約100種類から選択可能。最後に冒頭でもお話した通り、ネットショップのデザインはTOPページの外観だけキレイにするだけでなく、商品写真や説明文、導線など、さまざまな要素をトータル的にデザインする必要があります。商品写真は、手に取って見ることができないユーザーにとって1番気になる部分です。売上が2倍、3倍に膨れ上がる可能性があります。pickup無料でネットショップを開業できるサービスBASE便利なウェブサービス・ツールBASEpickupネットショップ開業香取慎吾この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブLINEPocketfeedly使い方を間違えてない?SNSで集客する上で押さえておきたいポイント・コツとは香取慎吾のCMで話題!BASEのネットショップの作り方と集客方法とは?RECOMMENDこちらの記事も人気です。便利なウェブサービス・ツール2015.5.30楽天ショップでcsv商品一括登録の方法とエラー解決策について便利なウェブサービス・ツール2019.1.31ネットショップで営業日カレンダーを設置したい人におすすめの無料サービス・...便利なウェブサービス・ツール2015.1.17ネットショップの競合調査をする上で便利なツール6つ運営者プロフィール【クロ】WEBやECサイト運営の現場を経て、現在は個人事業主として、10年ほどネットショップのデザイン、コーディング、アドバイスなどを行っています。