（この記事は10分程で読めます）

もしデザインひとつでECサイトの売上があがるなら、その秘訣を知りたくありませんか？この記事ではECサイトを構築するにあたり、すぐに実践できる“売れる”ECサイトデザインのポイントを紹介します。貴社のECサイトを構築・改善の手がかりにお使いください。

ECサイトの売上を伸ばすには、多くの人に購入してもらう、ファンになって商品をリピートしてもらうことが大切。そのために、サイト訪問者に以下の価値提供が欠かせません。

・商品の魅力が分かりやすい
・スムーズな商品購入
・ショップ独自の世界観
‍

デザインはこれら深く関係しており、売上を左右する大きな要因の一つです。「優れた顧客体験にはデザインの力が必須」です。ページの見た目がわかりやすく、操作しやすいサイトづくりが売上を作ります。そしてそこには“ECサイトのデザイン”が大きく関わってきます。

‍

‍

　CONTENTS

　■「オシャレなデザイン＝売れるデザイン」ではない

• サイト訪問ターゲットは？ユーザーに合わせたデザイン
• サイト訪問後3秒が鍵。ファーストビューにこだわる
• 制約のカギを握る購入ボタンのデザイン
• ECサイト内での回遊性を意識したデザインにする
• サクサク動きますか？表示スピードの速さ

　■Shopifyで“売れるECサイト”に直結するテーマを選ぼう

• Shopifyのテーマは真の意味で使える
• Shopifyのテーマははすべて「レスポンシブ対応」
• 猛スピードでアップデートされつづけるShopify　

‍

■「オシャレなデザイン＝売れるデザイン」ではない

デザインと聞くと「センスや芸術性がない自分には難しそう…」と思う方がいるかもしれません。ですが、ECサイトに必要なのはオシャレなデザインではなく「売れるデザイン」です。具体的には「ユーザーにとって分かりやすく、使いやすいデザイン」を指します。この5項目をまずは徹底的に見直してください。

‍

〇サイト訪問ターゲットは誰？ユーザーに合わせたデザイン

‍ユーザーの属性（性別・年齢・職業・年収・趣味など）に合ったデザインを提供できれば、それだけユーザーの心に刺さりやすくなります。たとえば
【 年配の方向け 】 文字サイズは大きく読みやすく
【 法律関係の職業向け 】 シンプルで信頼感と誠実さが伝わるデザイン
【 女性向け 】 やわらかくて淡い色調のデザイン
とはいえ、デザイン経験のない方が一から考えるのは時間もかかり素人ぽくなりがちです。基本的に近しい他サイトを参考に作るのがおすすめです。まずは他サイトで基本を押さえつつ、その後に独自性やこだわりを加えて、より魅力的なデザインに仕上げていきましょう。

‍

‍

〇サイト訪問後3秒が鍵。ファーストビューにこだわる‍

ファーストビューとは、ユーザーがスクロールせず最初に見る画面のことです。ユーザーはこのファーストビューを見て、読み進めるか・離脱するかを瞬時に判断しています。（一般的には8割のユーザーが離れ、2割のユーザーだけが残るといわれてます）。
つまり、いかにファーストビューでユーザーを離さないかが、売上を伸ばすうえでとても重要。ユーザーの興味を引きつけられるよう、下記の要素はファーストビューに積極的に配置しておきましょう。
・商品の魅力を最大限に表現したメイン画像
・お客様のベネフィットが直感的に伝わるキャッチコピー
・メディア掲載実績・販売数実績・キャンペーン情報
よくあるメイン画像の失敗として、商品単体をそのまま載せてしまうケースがあります。しかし、それではユーザーは強い反応を示しません。服ならモデルが着ている様子や、食品なら食べている様子など、実際に商品を使っているシーンやシズル感を演出してアピールしましょう。

‍

〇制約のカギを握る購入ボタンのデザイン

購入ボタンの色やサイズ、テキスト、配置場所を変えるなど、小さな工夫で成約率が大きく変わることがあります。

‍

【ボタンの色】
注意を引く赤色や、安心感を与える緑色だと成約しやすいともいわれていますが、高級ブランドの場合は黒を使うケースもあります。サイトの配色に合わせながらも、周囲の色に埋もれてしまわない色で目立たせましょう。

‍

【ボタンのサイズ】
ボタンのサイズが大きく、ユーザー（サイトの場合はマウスのポインター）との距離が近いほど、ユーザーはボタンを押しやすくなります。特にスマホで買い物をする人が増えているため、サイトの雰囲気を壊さない程度に、タップしやすくすることが重要です。

‍

【ボタンのテキスト】
「カートに入れる」などのボタン周りに、ユーザーの背中を押す一言を加えると売上アップが期待できます。たとえば「今なら2点目半額！」「◯円以上なら送料無料」「◯時までのご注文で当日発送予定」などです。

‍

【ボタンの配置場所】
スマホは一画面あたりの情報量が少なく、買いたいタイミングで購入ボタンが見当たらないことも。「画面下部に購入ボタンを固定する」「購入ボタンまでジャンプできる案内ボタンを置く」などをすると、ユーザーを迷わせず買いやすくする工夫が必要になります。

購入ボタンはECサイトの売上に大きく直結する部分なので、細かくABテスト（反応が良いパターンの検証）をするのがおすすめです。もしABテストの実施が難しい場合は、同ジャンルの有名な店舗のデザインを参考にしてみてください。なぜかというと、多くのユーザーが使い慣れているデザインは、より優れたユーザー体験をもたらしやすいからです。

‍

〇ECサイト内での回遊性を意識したデザインにする

「ユーザーが商品ページを下まで見たものの、購入には至らなかった」というケースは少なくありません。ですが、他の商品を見て回れるデザインをページ下に施せば、続けて商品を見てもらえる可能性が高くなります。
サイトの回遊率を上げて、ユーザーの離脱防止や売上アップを目指しましょう。
・新着、再入荷、カテゴリ別の商品案内
・人気ランキング、おすすめ商品、季節の限定商品
・お得なクーポン、セール、キャンペーン
・関連商品、閲覧履歴（最近チェックした商品）
・サイト内検索、よく検索される人気キーワード
ユーザーにとってベストな案内ができるよう、これらの要素を組み合わせてみてください。

‍

〇サクサク動きますか？表示スピードの速さ

スマホだと通信環境や端末のスペックなどが原因で、ページの読み込みや遷移が遅くなりがちです。実際に「ECサイトのページ表示に3秒以上かかる場合、40%のユーザーが離脱する」というデータも。せっかくの見込み客を逃さないためにも、ページ容量を軽くして、表示速度を意識したデザインにしましょう。

‍

【画像圧縮ツールで、画像のデータ量を減らす】

実際にサイトで使う大きさに、画像の大きさをリサイズし各デバイスにあった大きさにする
画像の遅延読み込みをする（先頭から優先的に表示させる）

‍

【データ量の大きいスライダーを、スマホでは静止画に切り替える】
特にECサイトは写真を多く使うので、写真まわりのデータ量の改善は必須です。

‍

意外と自社のECサイトで購入完了までを実際にやっている人は少ないです。ユーザーの立場になったつもりで、自分でスマホから商品を選んだり購入したりすると、改善点を見つけやすいので必須で試してみましょう。

‍

■Shopifyで“売れるECサイト”に直結するテーマを選ぼう

近年、世界中で急速にシェアを伸ばしているShopifyというECプラットフォームをご存じでしょうか。ShopifyのEC業界の概念を壊すほどの革新的なシステムは、世界で最も巨大なECサイトを運営する「Amazon」の存在をも脅かすと言われており、Shopifyは「Amazonキラー」と称されることもしばしばです。日本だけでなく、アメリカなど全世界で注目されるECサイト構築プラットフォーム、それがShopifyです。Shopifyは、本格的なネットショップを開設・運用できるクラウド型のECサービスです。

‍

〇Shopifyのテーマは真の意味で使える

Shopifyはデザインプレート「テーマ」が用意されています。 テーマにより、完璧なデザインを簡単に見つけることができます。もちろん無料で使えるものもあります。有料テーマでは開発を専任で行うパートナーが、機能のアップデートや、日々ユーザーから寄せられるバグの対応のサポートを行うことが義務付けられています。また一定期間、規定ダウンロード数に満たないテーマは精査される仕組みです。つまり、見た目の華やかさだけではなく、運用しやすい、バグが少なくセキュリティが高いという観点からも、真の意味で使えるテーマが提供されています。あらゆる側面から厳選された高クオリティのテーマをベースに、ブランドごとに最適化できるように設計されています。

‍

Shopifyが提供しているテーマは複数ありますが、レイアウトとベースカラーはそれぞれほぼ固定されています。テンプレートごとに推奨フォントも付いてきます。ShopifyでECサイトを構築する手順は、枠組みどおりに写真やテキスト、ロゴを配置していくだけです。トップページ・商品掲載ページ・特集ページ・ブログ機能などをそれぞれ設定していくと、すぐに運営可能なネットショップができあがります。テーマひとつで実現でき、カスタマイズもコードをかかなくてもデザインを簡単に変更できるのがShopifyが人気がある理由でもあります。

‍

テーマを編集することで、自分で構築したストアのコンテンツ、レイアウト、文字体裁、色などをある程度まで、カスタマイズが可能です。Shopifyは、テーマそのものの完成度の高さに加えてカスタマイズの柔軟性も高いです。シンプルなネットショップを立ち上げたい方にも、じっくり自分好みのサイトを構築したい方にも、どちらにも使いやすい点が特徴です。

‍

〇Shopifyのテーマははすべて「レスポンシブ対応」

スマホ対応されていないサイトは見にくく、閲覧しているだけで疲れてしまうものです。レスポンシブデザインとは、パソコン、スマートフォン、タブレットなど、異なる画面サイズのデバイスでも、それぞれのサイズに対応し見やすく表示させるデザインのことです。

スマホの普及率が高まるにつれ、ストアもレスポンシブ対応が必須。レスポンシブ化されていなければ、スマホで見たときに見にくいだけでなく、SEO対策においても不利になるからです。パソコン仕様で作成されたデータをレスポンシブデザインにしたり、一からレスポンシブデザインのストアをつくったりするのは時間もコストもかかります。

Shopifyの公式テーマはレスポンシブ対応が標準搭載されています。そのため、どのテーマを選んでも、わざわざレスポンシブデザインに作り直す必要はありません。デザインに定評があり、先進性があり、テーマひとつでPCもスマホもタブレットも“売れるサイト”がつくれるShopify。今後も注目のECプラットフォームであることは間違いなし。

‍

〇猛スピードでアップデートされつづけるShopify

世界中で急速にシェアを伸ばしているShopify。それだけに、Shopify本体もかなりのスピードでアップデートがされ続けています。次回はトレンドという切り口からも、引き続きECデザインについての記事をお届けしていきます。

‍

‍

■Shopify正式認定パートナーとしてのKIYONO

私たち株式会社KIYONOは、デジタルマーケティングの総合支援カンパニーとして、現在まで約150社の企業様の様DXに関するご提案～実働まで一気通貫で実施しております。Shopifyの正式認定パートナーとして、業界を横断した多数のECサイト構築から集客の戦略づくりから実施まで行っています。情報交換などでも、まずはお気軽にお問い合わせやご連絡お待ちしております。

‍