ECサイトはデザイン性が高くなり、簡単に導入できてECサイトを構築できるシステムも数多く開発されています。
ECサイトを作成したいと考えても、デザインはどのようにしたら多くの人に見てもらえる見やすいデザインとなるのか悩む方も多いのではないでしょうか。
本記事では、おしゃれで使いやすいECサイトの事例を10個厳選してご紹介します。
ぜひ参考にして、自社のECサイトの構築の際にもヒントとして活用してください。
この記事でわかること
- おしゃれなECデザインがわかる
- おしゃれで使いやすいECサイトの参考例がわかる
厳選デザイン10選
おしゃれで使いやすいECサイトをまとめました。
10個のサイトを厳選しましたので、ECサイト構築のデザインの参考としてください。
BottleBrew
「BottleBrew」はキッコーマンによる「育てる醤油」に関するECサイトです。
ファーストビューは、醤油を使うさまざまな生活でのシーンを盛り込んだ動画から始まります。
醤油の商品情報はもちろんのこと、醤油の作り方、使い方、説明、使ったレシピなどに至るまで、さまざまな醤油にまつわる情報をふんだんに掲載しています。
ファーストビュー以外の箇所は動画を使用せずに、スライドショーのようになっており、シンプルで多くの情報を提供でき、離脱率を下げる効果が期待できるでしょう。
スマホサイトの場合にもファーストビューにも動画を使用していません。動画にしてしまうと容量が大きく読み込みに時間がかかり、離脱率が高くなる原因となるためです。
動画を使用しない代わりとして、スライドショーのように切り替わる構造を、スマホサイトでは全体に採用しています。
ページ内を複雑にせずシンプルなままでも情報量を多く与える工夫がされていますね。
baraio
「baraio」は、静岡の薔薇と水を使用した薔薇水ブランドで、美容液や香水などの商品を販売するECサイトです。
情報量を抑えながら、商品が欲しいと思えるようなインパクトの強さが特徴のデザイン構成です。
美しさが際立つ写真はブランドのイメージに合った上品な印象で、トップページの大半を占めており、最低限の情報量でありながら
ECサイトでありながらブランドを前面に押し出しており、サイトのトップページには、イメージ画像やタイトル、商品コンセプトがメインとなっています。
さらにブランドイメージを語る「Philosophy」のページには、商品説明や背景が紹介され、どのように作られているか感じ取ることができるサイト構成です。
EC部分の購入画面では、ボタンが分かりやすい色でデザインされていたり、導線がスムーズになるといった工夫がされています。
日本語の文章の下にすべて英訳がつけられているので、海外ユーザーもターゲットとしていることがわかります。
小豆島商店
「小豆島商店」は、瀬戸内海にある香川県の島・小豆島で作られた食品などの特産品を販売するECサイトです。
そうめんや佃煮などの特産品が販売されています。
商品の美しい写真や、生産者の方の表情や作っている姿の写真、温かみのあるイラストと共に、小豆島の特産品についての魅力や作り手の思いの文章が載せられています。
トップページでは商品の中身の写真と、商品のパッケージ写真が交互に見えるアニメーションがつけられています。
これらのように、伝統の技法を元にして職人が思いを込めとことんこだわって作られたものというメッセージが伝わるサイトになっています。
コンセプトに準じて徹底した雰囲気をサイトから感じられる仕掛けです。
商品パッケージが並んでいる右側部分と、お店のブランドイメージや背景を想像させる左側の左右レイアウトを上手に活用しています。
BOTCHAN
「BOTCHAN」はメンズコスメブランドで、天然植物由来成分にこだわった商品が特徴です。
ファーストビューは、インパクトの大きな写真とデザインが特徴です。
デザインは多彩な色使い、手書き風の自由な筆の動きを感じるテキストやイラストを使っています。特徴的なデザインは訪問者の目を惹き、魅了すること間違いなしです。
アニメーションの動きや、躍動感のあるロゴマークなどあらゆる要素からおしゃれな感じが伝わってきます。
商品数はそれほど多くないので、トップページからでもすべての商品を見ることができ、購入までもスムーズにたどりつくことが可能です。
購入ページは、写真をコマ撮りのアニメーションのように動かして、商品の使い方を分かりやすく解説しています。
メンズスキンケアという商品の特性上、使用法がまだ分からない人にとっても親切な設計なので、訪問者の購買意欲の上昇が期待できるでしょう。
ACTUS
https://online.actus-interior.com/
「ACTUS」は家具や雑貨を扱うインテリアショップです。
白を基調としたスタイリッシュでとてもおしゃれな構成のサイトになっています。
多くのブランドを扱う大型ショップであるため、ごちゃごちゃして見にくくなってしまいそうですが、バナーを使ってうまく誘導し、サイトを訪れた人が目当ての商品を探しやすくなるようにしています。
また、さまざまな視点からの検索も可能なので、取り扱いの商品が多くてもたどりつきやすいです。
そのほかにも商品ページでインスタグラムの投稿を連動して見られるようにし、活用イメージがよりできるようになっています。
また編集記事を週1回程度定期的に更新して、何度もサイトを訪れる人に楽しめるようなコンテンツ作りをしています。
スタイリッシュでおしゃれな構成ですが、フッター部分にはさまざまな詳細の情報ページに遷移できるよう設計されているので、もっと商品のことを知りたい訪問者にも安心できるサイトです。
京都無添加おだし うね乃
京都のだし専門店「うね乃」のECサイトです。
トップページはスライドアニメーションとなっており、どのスライドにも美しいおしゃれな画像が使われています。このスライドのクオリティはとても高く、まるでCMを見ているように思えてきます。
うね乃の思いにおだしへの思いが強く込められており、お店全体のブランディングが現されています。
日本らしさ、京都らしさがとてもよく表現されていて、美しく繊細なフォントからも雰囲気を感じられます。「和」のテイストを取り入れたいECサイトの構築に大いに参考となるでしょう。
整然と商品一覧が並んでおり、背景は白とシンプルですっきりとしたキレイなデザインがされています。サイトの作りに無駄がないので、興味あるコンテンツにもすぐにたどり着けるでしょう。
商品の購入画面も手間を感じず、削除などもスムーズに行え、サイトの上部を見れば、カートに入れてから購入完了までの自分がどの段階に今いるのかを一目でわかるようユーザビリティにも力を入れています。
@suria
「@suria」はヨガウェアブランドsuriaのブランドサイトとECサイトのハイブリッド型ECサイトです。
ブランドコンセプトである「心呼吸する服」を想起させる柔らかくて優しいデザインがサイト全体に行き届いています。
ブランドサイトとECサイトを一つに統一することで、たくさんの魅力的な写真でブランドのイメージを伝えながら、直接商品販売ページとつなげられる構造となっています。
EC部分もブランドイメージそのままに、清潔感あるおしゃれなデザインと、ブランドのキャッチコピーが閲覧者の目をひきつけ、写真やキャッチフレーズが数秒ごとに切り替わるので、見る人を楽しませてくれるでしょう。
ギミック（演出）も各所にあり、商品画像のオンマウスでヨガのポージング画像や商品拡大画像に切り替わるようになっていて実際の使ったイメージを確認できます。
HiO ICE CREAM
クラフトアイスクリームの製造や販売を手掛ける「HiO ICE CREAM」のECサイトです。
東京・自由が丘にガラス張りのお店である工房アトリエがあり、職人が作るすべての工程を眺められ、食べることもできます。
ECが本店の扱いで、アトリエは価値観を表現する場のショールームと位置付けています。
ECでサブスクリプションサービスを展開し、毎月異なるフレーバーが送られてきます。
その他にも自分用か、ギフト用か、あるいはサブスクリプションによる定期的配送なのか目的から選ぶことが可能です。
商品のアイスクリーム容器のデザインがとてもおしゃれなので、ECサイトもそのおしゃれな世界観を引き継いでいて写真から味を伝えられるようなサイトになっています。
アイユー（aiyu）
「aiyu」は波佐見焼の食器やうつわなどを扱うECサイトです。
カラフルな背景に並んでいる器の美しい写真によってサイト全体が明るく華やかな印象を与えてくれます。
サイトの上部に目的別に探せるリンクを設けてあり、たくさんの商品の中からニーズに合った商品をまとめてユーザーに提案できます。
「シリーズから選ぶ」「ギフトから選ぶ」などの4つのカテゴリから商品を選べます。
メインページのビジュアルを2段にして、上段は左方向に流れ、下段は右方向に流れるスライドショーとなっており、商品の利用シーンをたくさん見せられる工夫がされています。
実際の食材をのせて使用するイメージをたくさん掲載することによって、サイズ感やシチュエーションなどを上手に伝えています。
赤坂柿山
「赤坂柿山」は厳選された素材で作るおかきが有名なお店です。
赤坂柿山のECサイトは、可愛い写真で構成されたファーストビューは目で見て楽しむことができ、サイトを訪れた人をワクワクさせてくれます。
テキストに縦書きと横書きがスムーズに切り替えられることで目をひき、読みやすくなります。
商品写真にカーソルを合わせると、写真が切り替わり、内容・パッケージの両方を見せる工夫もされています。
写真ではおかき以外の小物類の鮮やかさも美しさを際立たせてくれます。
余白の程よい感じなど構図は参考にできる点が多いでしょう。
まとめ
本記事では、おしゃれなECサイトを10個紹介しました。
それぞれのサイトで参考となる部分がいくつかあったのではないでしょうか？
ぜひ良いところを取り入れて自社のECサイト構築に生かしてください。
