「ECサイトを作る時のポイントがわからない」
「何に気をつければ成果の出るECサイトになるの？」
正解がないと言われるECサイトのデザインですが、おさえておくべきポイントはあります。本記事では、参考サイトを探すときに役立つギャラリーサイトを紹介すると共に、ECサイトのデザイン制作時のポイントを解説します。
制作後に使えるチェックポイントも紹介しておりますので、ECサイト制作の際にはぜひお役立てください。
BeeCruiseのメルマガでは、越境ECや海外販売のノウハウを定期的にお届けいたします。
（メルマガ登録をする）
目次
ECサイトでおしゃれなデザインに出会えるギャラリーサイト5選
まずは、ECサイトを作る時の参考サイトを見ていきましょう。ここでは、網羅的にデザインを見られるギャラリーサイトを5つ紹介します。
SANKOU!：国内のデザインの参考
SANKOU!では、ECサイトやランディングページなどの参考サイトがまとめられたギャラリーサイトです。
カテゴリー検索がしやすく、自分がイメージする雰囲気で検索できるため参考サイトを見つけやすい特徴を持ちます。カテゴリー設計の参考にもなるサイトなため、設計時にもご覧ください。
MUUUUU.ORG：縦型（スマホ）デザインの参考
MUUUUU.ORGは縦型のサイトデザインを集めたギャラリーサイトです。ECサイトのデザインを作る時はスマホ版から作るのがセオリーなため、ワイヤーフレームを構築する際に縦長のデザインは参考になります。
また、色味による検索も可能で、コーポレートカラーに合わせた参考サイトを見つける時にも役立ちます。
I/O 3000：海外サイトも含めた参考
海外サイトも参考にしたい場合はI/O 3000がおすすめです。海外ならではのスタイリッシュなデザインやポップなデザインなど、日本ではまだ流行っていない最先端のデザインを参考にできます。
また、ECサイトに英語が多い場合や、外国のモデル写真が多い場合は海外サイトのデザインの方が親和性が高いためおすすめです。
Responsive Web Design JP：レスポンシブデザインの参考
レスポンシブウェブデザインを参考にしたいのであれば、Responsive Web Design JP（以下RWD）がおすすめです。
RWDは一目でスマホ、タブレット、PC版の画面が見られるギャラリーサイトで、特にヒーローエリアの配置に困っている時に参考になります。
1GUU：アニメーションの参考
1GUUは、アニメーションの参考になるサイトデザインを集めたギャラリーサイトです。アニメーションを前提としたデザインと、静止画のデザインではレイアウトが異なります。
アニメーションを入れる場合は、どのようなアニメーションかだけでなく違和感のないサイトデザインになっているかを、他サイトと比較して確認しましょう。
1GUUではPCから確認すれば、サムネイルがアニメーションで動くように設定されています。アニメーションでお困りの場合はぜひ参考にしてください。
売れるECサイトをデザインする7つの秘訣
売れるECサイトをデザインする時に、押さえるべきポイントがあります。ここでは7つの秘訣を紹介しましょう。
- 情報を整理し、シンプルな設計にする
- スマホのデザインを先に作る
- ID決済が使用可能なことが一目でわかるようにする
- 購入までの導線を意識する
- テンプレートを使用する
- トレンドを意識する
- UI/UXの重要性をおさえておく
1.情報を整理し、シンプルな設計にする
ECサイトを設計するうえで最も重要なことは、情報を整理しシンプルな設計にすることです。ワイヤーフレームの段階で、必要な情報が漏れなく、ダブりなく配置できているかを確認しましょう。
サイトのデザイン以外にも、カテゴリー設計や購入システムがシンプルかどうかの確認も重要です。
情報量の多さはユーザーを混乱させます。ECサイトから離脱する原因にもなりますので、必要最低限の情報をシンプルに伝えることを意識しましょう。
2.スマホのデザインを先に作る
サイトデザインをする時は、まずスマートフォンのデザインを先に作りましょう。スマホは画面が小さく、表示できる情報スペースが限られます。
まずは小さなスペースに配置し、そこからタブレット、PCなど画面サイズが大きいデザインに変更する方が作りやすいためおすすめです。
また、ECサイト完成後は必ずスマホの実機で確認しましょう。レスポンシブデザインに対応したコードで記載していても、機種によってはレイアウトが崩れる、一部分が表示されないなどのトラブルが起こり得ます。
3.ID決済が使用可能なことが一目でわかるようにする
近年ではクレジットカード払い以外にも、多くのID決済が登場しています。ID決済を利用すれば面倒な入力作業がなく、簡単に決済できるためユーザーにとってはありがたい機能です。
ECサイトの決済機能で、ID決済が使用可能な場合は、一目でわかるように案内を配置しましょう。ID決済があるだけでクレカ払いのサイトより、ハードルを一つ下げられます。他サイトよりも優位に立てる部分なため、アピールが重要です。
4.購入までの導線を意識する
ECサイトの購入は商品を選び、カートに入れて、決済画面へ進み情報を入力という3つのステップがあります。
次のページへ移った時に直感的に理解できるかが重要です。具体的にはボタンの色や形などを統一し、別ページであってもすぐに購入ボタンだとわかるような工夫が必要です。
5.テンプレートを使用する
社内にプロのデザイナーやフロントエンドエンジニアがいない場合、テンプレートの使用をおすすめします。ECサイトは決済機能も必要なため、技術面でも通常のサイトページより難しいためです。
また、費用面でも外注のデザイナーやデザインソフトに支払うよりテンプレートの方が安く済む場合があります。中には無料のデザインテンプレートもありますので、社内で完結できない場合はテンプレートの使用を検討しましょう。
6.トレンドを意識する
制作時のトレンドを意識することも重要です。2024年であれば、パララックスデザインやニューモーフィズムなどが流行しています。制作時期に合わせたトレンドを取り入れることもユーザーを惹きつける魅力の一つです。
ただし、全てを取り入れれば良いというわけではなく、自社サイトのイメージに合うものや目的に沿ったものを選んで取り入れるようにしましょう。
7.UI/UXの重要性をおさえておく
操作性が悪い、登録の手間が多いなどUI/UXの悪さはユーザー離脱に繋がります。せっかく商品に興味を持ってくれたユーザーを手放さないためにも、UI/UXについてはブラッシュアップしましょう。
サイトの見た目やフォント、画像などUI部分に力を入れるがあまり、決済システムやアフターサポートのUX部分が雑になっては本末転倒です。
具体的なポイントは、次の項目のチェックポイント内で解説しますので、あわせてご確認ください。
売れるECサイトにする5つのチェックポイント
ここでは、ECサイトを設計・制作した後のチェックポイントを紹介します。
- ユーザーが考えずに操作できるか
- ユーザーが安心できるか
- 商品画像は豊富にあるか
- カラーを多用していないか
- 近接・整列・反復は意識できているか
1.ユーザーが考えずに操作できるか
ユーザーが考えず、直感的に操作できるかが重要なポイントです。商品を見てから購入するため、スムーズに動作を行えなければユーザーは離脱します。
ユーザーの離脱を防ぐためには、ユーザーの操作が少ないデザイン・システムが必要です。最近ではAmazon payなど、登録済みのサービスと連携して購入できる仕組みもあるため、ユーザーの負担軽減を第一に検討しましょう。
2.ユーザーが安心できるか
ユーザーが安心できるサイトになっているかも重要なポイントです。ここで言う安心とは、デザインだけでなく記載内容も含みます。
例えば、企業概要や返品・交換のポリシー、配送料の表やサイトがSSLで暗号化されているかなど、ユーザーの不安を一つずつ取り除くことが重要です。
実態のない詐欺サイトと疑われるような内容になっていては、ユーザーは購入してくれません。プライバシーポリシーなど最低限の情報を記載したうえで、ユーザーがストレスなく安心して使えるECサイトを目指しましょう。
3.商品画像は豊富にあるか
商品画像の多さも、ユーザーの不安を取り除く上で重要です。例えば、正面だけの商品画像だと「裏面のデザインが予想と違うのではないか」「厚みが薄く使いにくいのではないか」などの不安を与えます。
必要な角度、内容は商品により様々ですが、ユーザーが使用しているイメージを持てる画像を選定することがポイントです。
4.カラーを多用していないか
サイトページ内のカラー数も重要なチェックポイントです。基本的には3色〜4色におさえることがベターとされています。
カラー数が多いと、その分情報量が多くなりユーザーは混乱します。また、重要な部分を目立たせようとするあまり、原色に近い色を使ってしまうのも見にくいデザインになる原因です。
カラーは足し算ではなく、引き算で考えるようにしましょう。目立たせたくない部分の色は淡く、目立たせたい部分はやや濃く、近い色の中で濃淡をつけて配色することがポイントです。
5.近接・整列・反復は意識できているか
デザインの基本である近接・整列・反復ができているかも確認しましょう。
画像と説明など、関連する情報が近くになければユーザーは探す手間が増えます。高さが揃っていなければ見にくく、ストレスを感じます。同じ形で反復できていなければユーザーは一つひとつ理解し直さなければいけません。
こういったストレスはユーザー離脱の原因になります。ユーザーの使いやすさを優先しつつ、サイトデザインとしてまとまっているか、ユーザーにストレスを与えないかを意識しながらチェックしましょう。
ECサイトのデザインを洗練させる3つの効果
ここでは、ECサイトのデザインを磨き上げることで得られる3つの効果を解説します。
- 売上に直結する
- ブランディングに繋がる
- 海外進出も選択肢になる
1.売上に直結する
一番大きな効果は売上に直結することです。広告などに比べると低コストで運用でき、直接的に利益に繋がるECサイトは資産になります。
しかし、ECサイトは作って終わりでなく、運用が必要です。ECサイトの売上は「アクセス数×購入率×客単価」になると言われています。デザインや操作性に注意して制作した後は、アクセス数や購入率を分析して改善し続けましょう。
2.ブランディングに繋がる
ECサイトはブランディングにも繋げられます。ブランディングとは、差別化された付加価値であり、他者と比較した際に決め手になる一手です。
自社ブランドへの愛着を持ってもらえれば、安売りせずとも購入してもらえる、リピーターが増加するなどのメリットに繋がります。
ブランドストーリーをサイト内で表現する、実例を用いて使用感をイメージしてもらうなどサイト内のコンテンツを工夫しましょう。
3.海外進出も選択肢になる
洗練されたデザインは海外進出の時も強い味方になります。海外のユーザーを取り込むことで、売上はさらにアップし、事業の安定に繋がります。
実店舗よりも比較的展開しやすく、専門業者のサービスを利用すれば、自社のリソースを割かずに決済〜配送までを任せられます。
しかし、海外販売する際に使うサービスを間違えるとデザインを一から作り直しになることもあるので注意が必要です。
海外販売を検討しているならBeeCruiseへ
BeeCruiseでは海外販売のサポートを実施しています。越境ECとも呼ばれる海外展開は、専門的な知識とスキルが必要となる場面が多々あり、自社内だけで完結するのは難しい分野です。
BeeCuiseではBuyee Connectというサービスを実施しています。簡単、低リスクで海外販売が可能で、配送や決済などの必要な機能はBuyeeが対応するため、国内ECのオペレーションを変えずに運用できます。
導入費・月額費・販売手数料は全て無料です。海外販売を検討しているならぜひ、BeeCruiseをご利用ください。
まとめ
売れるECサイトを作るためには、参考サイト探しとポイントを押さえることが重要です。
参考サイトは目的別にギャラリーサイトを使いこなし探します。最初はスマホ版のサイトを探し、レスポンシブやアニメーションは必要に応じて探すと見つけやすいです。
情報を最小限にし、シンプルな設計を心がけましょう。また、ID決済や購入までの導線などUI/UXに関する部分にも注力する必要があります。
ユーザーが直感的に操作できるか、安心感を与える情報は乗っているか、画像やカラー、デザインの基礎は適切に使われているかなどをチェックしてからサイトを公開しましょう。
越境ECも視野に入れている場合は、専門的な知識とスキルが必要になるため、外注を利用しながらの展開をおすすめします。