.../articles/

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

しかし、「コンセプトの立て方がわからない」「リサーチの仕方がわからない」という方も多いでしょう。

そこで本記事では、売れるECサイトの作り方から、参考にしたいおしゃれな事例の探し方まで、徹底解説していきます。これからECサイトを立ち上げる方はぜひ参考にしてください。

おしゃれなECサイトデザインまとめ

1.ギャラリーサイトから

ギャラリーサイトには、良いデザインのウェブサイトが集められており、コンセプト決めやデザイン決めに困ったときにアイディアを得ることができます。

ECサイトに限らずWebサイトのデザインをいろいろな切り口から探すことができるため、Webサイトの方向性を決めかねている方にもおすすめです。

ここでは、ECサイトに絞って検索できるギャラリーサイトを4サイト紹介します。


縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
https://muuuuu.org/category/sitetype/ec

QUOITWORKS Inc.というウェブ制作会社の方が運営されているギャラリーサイトです。高品質なウェブサイトを更新頻度高めで紹介してくれます。


ハイクオリティなWebサイトを探すなら Webデザインギャラリー | S5-Style
https://bm.s5-style.com/?category=31&andor=category__in

こちらも現役のアートディレクターである田渕将吾さん(S5-Studio)が運営するギャラリーサイトです。


Check WebTech
https://cwt.jp/category/307/1
このサイトは利用しているサービスや技術ごとに検索することができます。リンク先はShopifyを採用しているサイトの一覧です。


2.ECサービスの事例から

ECサイトを構築する際は、BASEやShopfiyなどの、サイト上で売買ができるようにするためのプラットフォームを利用することがほとんどです。

それぞれのプラットフォームの公式サイトには、サービスを利用して作られた事例が掲載されていることが多いので、参考にすることができます。

BASE : https://thebase.in/category
STORES : https://stores.jp/ec/shopinfo
Shopify : https://www.shopify.com/jp/examples
メルマート : https://mercart.jp/case
ec-force : https://ec-force.com/user_voice
EC-CUBE : https://www.ec-cube.net/product/cases/backnumber.php

それぞれのECサービスの詳細は、下記記事にて解説しておりますのでご覧ください。
[関連記事] ECの構築方法、おすすめのECサービス。

3.制作会社の制作事例から

売れるECサイトを作るには、良いデザイナー、エンジニアのいる制作会社の事例を参照するのもおすすめです。ECサイトを制作している制作会社は数多くありますが、ここではいつも良い事例を作っていると個人的に思う会社を紹介します。

mount inc
https://mount.jp/
クオリティの高いデザインとそれを表現する実装を高いレベルで実現している会社です。特に、演出面のアイデアと気持ちの良い操作感は、見る人をブランドの世界観に引き込みます。
[mount incの事例]
神戸元町辰屋 : https://www.kobebeef.co.jp/
上記リンクの事例は、お肉のECサイトですが、実際にお店で接客してくれているような、人情味のあるイラストが印象的です。

MEFILAS
https://mefilas.com/works/
建築家の重厚な作品を紹介するサイトから、キャラクターがにぎやかに飾るものまで、幅広いクリエイションを行っている会社です。特に、個人的にはデコラティブな楽しい印象のサイトの「にぎやかなのにうるさくない」さじ加減が素晴らしいと思っています。
[MEFILASの事例]
ドラえもん | フェリシモ : https://www.felissimo.co.jp/doraemon/
上記リンクの事例は、felissimoのドラえもんの大人向けグッズを展開しているシリーズのページです。控えめながら効果的なアニメーションと、丁寧にトリミングされた写真がテンポよく商品を紹介します。

おしゃれなECサイトデザインをどう参考にするか

良いデザインを探すにはここを見よ!

ECサイト制作初心者の方は特に、参考サイトを見ても、「何を基準として良いサイトなのかわからない」「どのように参考にすべきサイトを見つけたら良いのかわからない」と悩まれる方も多いでしょう。

結論、ECサイトに関しては、商材や価格帯、狙っているターゲットが似ているサイトを参考にすることが重要です。

例えば、日々購入する消耗品とブランド品では消費行動が全く違うように、見た目がおしゃれ、好みだというだけで、見当違いな事例を参考にしてしまうと、想像していたターゲットと全く違うターゲットが集まったり、全く売れなかったりすることも考えられます。

売れるECサイトを作る3つのポイント

良いECサイトの事例が見つかったら、特に下記3つのポイントに注目し、ECサイトの構築を進めていきましょう。

1. 商品写真・商品情報

ECサイトでは、ユーザーが商品画像だけを見て購入するかどうかを決めるため、商品が魅力的に見える写真や情報を提供する事が最も重要です。

ユーザーは本物に触れる事ができない分、商品の説明欄など細かな情報まで確認しています。例えばファッションECサイトの「SHEIN」では、サイズやフィット感を細かく記載している上に、より自分の体のサイズの測り方まで詳しく解説しているため、購入前に自分の体型に合う服かどうかを確かめることができます。

他にも、表裏や利用時に形が変わるものであればその状態、大きさ、スペックなど、説明1つ1つに写真を当てはめるような感覚で商品画像を用意すると、更にわかりやすいです。

2. 導線設計

ECサイトで売り上げを上げるには、導線設計が重要です。導線設計とはユーザーのサイト内の動きを設計することで、欲しい商品に辿り着かせるための設計とお考えいただければわかりやすいでしょう。

ユーザーに欲しい商品が見つかっても、辿り着かなければ意味がないため、検索やカテゴリ分け、関連商品など、誰でもわかりやすい操作性にしなければなりません。

例えば、Amazonでは、購入しようとしている商品ページの下部に「よく一緒に購入されている商品」と、その商品を購入した場合の合計金額が表示されたり、関連商品が表示されたりします。
「良い商品だけどもう少し検討したい」「付随商品も購入したい」というユーザー心理に合わせて、さまざまな商品に回遊できる設計にしてあると購買率も上がりやすいです。

3. 採用しているECサービス

事例の探し方のところでも紹介しましたが、ECサイトを構築する際には、ECサービスを利用することが多く、各サービスによってさまざまな特徴があります。

サイトの規模やスタイルによって、利用すべきサービスが変わってくるので、最適なサービスがどれか見極めてから導入するようにしましょう。
[関連記事] ECの構築方法、おすすめのECサービス。

ちなみに、Chromeの拡張機能を使うと、競合サイトや参考サイトのコードを読み取り、ある程度の利用サービスを知ることができます。参考になるECサイトが利用しているECサービスが分かれば、自社の導入の際の説明もしやすくなるはずです。
Chromeの拡張機能:Wappalyzer

ECサイトデザインのトレンド傾向は?

ECサイトのデザインを決める際に、「今のトレンドデザインを採用したい」「おしゃれにしたい」と考えている方も多いでしょう。

しかし、Webサイトにおけるデザイントレンドは、技術や利用環境の進化とともにあるので、ユーザーからの見た目だけで採用できるデザインには「装飾」以上の意味はありません。なぜなら、おしゃれなサイトであっても、ユーザーにとって使いにくければ売り上げは上がらないし、購入までの導線設計が曖昧であれば購入に繋がらないからです。

そのため、ここではユーザーにとっての「使いやすさ」や「わかりやすさ」を求めるという観点から、ECサイト制作をする上での必須事項を紹介します。

スマートフォン(レスポンシブ)対応

スマートフォンやタブレットなど、さまざまな画面サイズのデバイスに対応することを、レスポンシブ、と言います。スマートフォンでの購買体験は今となっては誰しもが当たり前にする行動です。店舗利用しつつウェブサイトも見る、というようなことも多いため、ECサイトのスマートフォン対応は必須と言えます。持ち歩くのがスマホとは限らないため、さまざまなデバイスで使いやすいUIになっていることが重要です。

高品質な画像・動画メディア

ユーザーがECサイトで買い物をする上で、画像や動画は重要な情報源になります。そのため、より詳細な情報を提供し、購入に促すためにも、高品質な画像や動画メディアを用意する事が重要です。

特に、最近では5Gによる高速通信なども一般的になってきており、通信規格の進化に伴って画像や動画などのメディアの解像度も大きいものが求められるようになりました。拡大をすると商品の質感が詳細にわかったり、動画で商品を使用している様子が確認できたりすると、ユーザーに安心感を与えられ、ECサイト自体の信頼にもつながるでしょう。

表示速度やUIの使い心地

上のメディアの話と矛盾しますが、ウェブサイトの表示スピードはECに限らずとても重要な観点です。表示が遅かったりカクついたりするだけでユーザーは離れていってしまいます。ECサイトは情報を閲覧するだけではなく、カートへの追加や住所入力など、比較的複雑な操作を要求されがちなものになるため、1つ1つの使い心地の積み重ねが大きく影響してきます。

高品質な画像、動画を掲載することによる表示スピードへの影響を考慮し、常に改善していくことも重要です。


売れるECサイトを作るには、デザインのトレンドやおしゃれさにだけ目を向けすぎるのではなく、コンセプトやターゲティングが重要です。
まずは、商品やコンセプトをしっかり言語化し、参考サイトをいくつか出した上で、ターゲットユーザーにあった届け方を検討し、自社サイトらしい色をつけていくようにしましょう。

.../articles/

Articles

記事

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

monorepo管理しているNext.jsをAmplifyにデプロイしようとした際にいくつか躓く内容があったのでまとめておきます。

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaを利用するWebデザイナーの助けになれると嬉しいです。使い方は本記事をご覧ください。

ECの構築方法、おすすめのECサービス。

ECの構築方法、おすすめのECサービス。

ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。

FastAPIのスキーマクラスをOpenAPIから生成する方法

FastAPIのスキーマクラスをOpenAPIから生成する方法

PythonでAPIを構築する要件があり、フレームワークに比較的モダンなFastAPIを採用しました。FastAPIはバックエンドの開発を行えば自動でOepnApi定義を生成する機能が備わっていますが、今回はこれを使わず、事前に用意したOepnApi定義からFastAPIで利用するスキーマクラスを生成する方法を紹介します。

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel + MySQLで全文検索を実装する

とあるPythonのソースで sys.path.append としたく無かった話

とあるPythonのソースで sys.path.append としたく無かった話

とあるプロジェクトのとあるソースコードのレビューをしてた時、「ソースコードの参照がうまくいってなかったので修正しました」とレビュー依頼がきました。 ディレクトリ構造 ``` module L __init__.py L main.py L tests L __init__.py L test_main.py ``` ソースコード ``` python tests/test_main.py sys.path.append(os.path.abspath("..")) from main import fuga ``` 今まで案件でPythonに触れる機会も結構ありましたが、なんとなく使ってきた部分も多く、この書き方が良いのか悪いのか判別できなかったので、改めてPythonのモジュールのインポートに関して調べてみたのでブログにしました。普段PHPを書いている事が多くPythonに関して何も分からないので初心者向けの内容になっていると思います。

GiFT1号目新卒デザイナーの2021年振り返り

GiFT1号目新卒デザイナーの2021年振り返り

いつの間に、年末ですね。入社してもう、9ヶ月も立っていたようです。2021年の振り返りを記事にしました。

すべての記事

お問い合わせ