- デザイン
- 運用
ECサイト制作|参考にしたいデザイン17選!費用相場と押さえるべきポイントを解説

時代のニーズに合わせて、ますます拡大しているネットショッピング。お店との距離や営業時間を気にせずに買い物ができるので、日常的に活用している人も多いのではないでしょうか?
需要の増加に合わせて、ECサイト開設をサポートするサービスも充実し、個人で営む小規模店舗でも以前に比べて簡単に自社のECサイトを構えられるように。オンラインでの買い物が一般的になった今、ECサイトはお店の顔ともいえる重要な役割を担っています。
そもそもECサイトの運営手法には、大きく分けて「モール型サイト」と「自社ECサイト」の2種類があります。Amazonや楽天市場のように多数の店舗が出品しているショッピングサイトが「モール型サイト」で、企業単独のショッピングサイトが「自社ECサイト」となります。
こちらの記事では、自社ECサイトを通して、お店のファンづくりに成功している企業・店舗をピックアップ。「ユーザーの利便性が高いECサイト」「デザイン性が高いECサイト」の2つに分けて、参考にしたいポイントを紹介していきます。
ECサイト制作時に気になる費用相場や、しっかりと売上を上げていくために大切なポイントも解説しているので、参考にしていただけたら嬉しいです。
ECサイト制作の費用相場
はじめに、ECサイトを作る時にかかる費用相場を確認しておきましょう。商品を販売するという目的は同じですが、依頼先やシステムの構築方法によって費用が増減します。構築システムにオープンソースを利用すれば、費用を抑えることができます。
制作費用の目安は1万円~500万円以上としていますが、完全に自社開発のシステムを利用すれば数千万円にまで膨らむ可能性もあります。
依頼先 | 制作費用 | 内容 |
フリーランス | 1~10万円以下 | 他のECサイト構築ツールを使って商品を出品 |
中小規模の制作会社 | 150~500万円 | オリジナルのデザインやコンテンツを使ってECサイト |
大手の制作会社 | 500万円以上 | 本格的なショッピングサイトを構築 |
ユーザーの利便性が高いECサイト8選
はじめに紹介するのは、ユーザーの利便性が優れたECサイトです。
ECサイトの立ち上げが簡単になったということは、それだけ競争が激しくなっているということ。ECサイトを成功させるためには、ブランドの世界観に共感してもらい、購入につなげることが大切です。
そのためには、ECサイトの使いやすさやブランドの価値を伝えるためのコンテンツ作りが重要になっています。
参考にしたいECサイトは、下記8つです。
- MUJI 無印良品
- 北欧、暮らしの道具店
- BOTANIST
- BULK HOMME
- 土屋印店
- ZOZOTOWN
- 豊島屋
- 山本珈琲
MUJI 無印良品
引用元: MUJI 無印良品
衣服や生活雑貨、食品など7,000アイテムを取り扱う無印良品のECサイトです。白×黒の配色をベースにしたデザインは、まさにブランドの価値観そのものを表しているような心地よい潔さ。商品パッケージを思わせるフォントをメインで使っているので、実店舗で商品を選んでいる時と同じ気分でショッピングを楽しめます。
暮らしに寄り添うブランドだからこそ、季節感あるコンテンツも充実。潜在的なニーズに響く内容で、購入への動機付け・導線をスムーズにしています。
個別の商品ページもとことんシンプル。余白の多いすっきりとしたスペースに必要な情報が過不足なく並んでいます。サイト全体を通して、情報が整理整頓されていて快適な使い心地です。
北欧、暮らしの道具店
引用元:北欧、暮らしの道具店
「北欧、暮らしの道具店」は、オーダーメイドなライフスタイルを求めるユーザーに寄り添うサービスを展開している株式会社クラシコムが運営しているECサイト。「フィットする暮らし、作ろう。」というミッションを実現するためのサービスで、商品の販売はもちろん、コラム・ドキュメンタリー・ドラマ、さらにはポッドキャストや劇場映画まで提供しています。
個別の商品やコンテンツではなく、ユーザーと世界観(ライフカルチャー)でつながるプラットフォームであることを重視。つい読みたくなる暮らしの情報を届けています。
商品ページは、まるで雑誌を読んでいるような作りが特徴的。使い方がリアルな写真と一緒に掲載されていて、商品がもたらす生活の変化まで想像できるので、思わずわくわくしてしまいます。
BOTANIST
引用元:BOTANIST
「BOTANIST」は、「植物と共に生きるボタニカルライフスタイル」をコンセプトにしたブランド。広告費をかけず、ECサイトの活用で認知を拡大し、商品を大ヒットさせた実績があります。ECサイトは、白地にグリーンが映えるデザインで、ブランドイメージとマッチした清々しい佇まいです。
各商品ページの上部は、情報がコンパクトにまとまった利便性重視の構成。買いたい商品がすでに決まっているリピーターの人は、スムーズに購入に進めます。
その下部には、他の商品との違いやどんな人におすすめかという情報に加え、商品のコンセプトから成分に至るまで、商品の価値に説得力を持たせる解説が丁寧にされています。初めて商品を買う人、他の商品と悩んでいる人の背中を押すコンテンツです。
BULK HOMME
引用元:BULK HOMME
「BULK HOMME」は、「メンズスキンケアの、ベーシックであり続ける。」をコンセプトに掲げるスキンケアブランド。ECサイトは、一貫した世界観のもと、ターゲットである男性の心に刺さる配慮が細部に至るまで施されています。
上記で紹介したBOTANISTのように、個別の商品ページではすぐに購入できる導線を作るのが一般的ですが、こちらは商品の詳細説明を上部に用意しています。
女性に比べてスキンケアになじみの薄い男性(=ターゲット)の視点に立ち、その商品価値や使い方を事細かに説明することで、購入へのストーリーを作っています。
土屋印店
引用元:土屋印店
土屋印店は、長野県須坂市に実店舗があるはんこのお店。従業員数4名という小規模店舗ながら、職人の高い技術が評判で、多数の受賞歴があります。
オンラインでは、銀行員・認印と実印の2種類を販売。ですが、ハンコは頻繁に作るものではないですし、書体や素材など何を選んだらいいか悩む人も多いはずです。
そこでこちらのサイトでは、印章のサイズから書体の由来、印材の細かな色味の違いまで、わかりやすく解説した選び方ガイドのページを用意。質感も伝わってくる高品質な写真とポイントを押さえた簡潔なテキストで、ユーザーの疑問・不安を解消しています。
ZOZOTOWN
引用元:ZOZOTOWN
日本最大級のファッションECサイト「ZOZOTOWN」は、「想像(SOZO)と創造(SOZO)の行き交う街」がコンセプト。
ZOZOTOWNは、多くのショップ・ブランドの商品を扱うサイトであるため、ユーザーが迷子になってしまわないように「探す」機能が充実しています。ブランドやランキング、セール対象などさまざまな条件やカテゴリーのもと、商品を探すことができる仕組みになっています。
これにより、ユーザーは自分が欲しい商品を見つけやすくなると同時に、サイト内で迷子になってしまうストレスから解放されます。「また使いたい」とユーザーに思わせる良い工夫であるといえるでしょう。
豊島屋
引用元:豊島屋
鳩サブレーでおなじみの、鎌倉市に本店を置く豊島屋のECサイトです。
豊島屋のECサイトは、トップが商品購入ページというダイレクトさが新鮮です。多くのECサイトのようにセール情報などをトップにするのではなく、商品そのものをトップに据えるというのはめずらしい手法ですが、ECサイト本来の機能を全面に出した利便性の高い構成です。
ホームページ全体の配色は鳩サブレーのイメージの強い黄色を使用。商品とECサイトで統一感を感じることができます。
山本珈琲
引用元:山本珈琲
山本珈琲は関西圏を中心に、徹底した品質管理の元、美味しい珈琲と豊かな生活を届け続けています。
ホームページは広く余白を取ることで、ゆったりとした印象を受けます。同社の「豊かな生活のために」という大切にしている価値観につながるような、落ち着いたデザインです。
珈琲選びについて詳しく知ることができるコンテンツも充実しています。分布図を意識したデザインで、おすすめの珈琲選びをサポート。実際に購入する際のヒントになります。
また、「美味しい珈琲の淹れ方」のコンテンツでは、珈琲を入れる際の淹れ方について紹介。珈琲を買って終わりではなく、買ったあとについてもサポートしている点からは珈琲を楽しんでもらいたい気持ちを感じます。
デザイン性が高いECサイト9選
次に紹介するのは、デザイン性が高いECサイトです。
今や270万件を超えるともいわれてるECサイトの中で、ユーザーの心を掴むためには、商品のラインアップはもちろん、ブランドコンセプト・商品の価値が伝わるデザインが重要です。
加えて、買い物の導線やどこをクリックしたらどんな情報が得られるかが直感的にわかる設計になっていることも大切。ECサイトを制作する際は、ユーザーの視点に立って、構成を考えましょう。
参考にしたいECサイトは、下記9つです。
- TOSACO
- 嬉野茶時
- YOAN
- たかしま農園
- ISURU ONLINE STORE
- TAKANOME
- stiiilll
- CIRAFFITI
- BNN
TOSACO
引用元:TOSACO
「TOSACO」は、「だれもが笑顔で楽しめる、高知の風土のような自由でおおらかなビール」を目指し、高知の素材を生かしたビールづくりに取り組む「高知カンパーニュブルワリー」の公式ECサイト。彩度の高い鮮やかな写真と、手描きのタッチが可愛らしいイラストを組み合わせていて、明るく朗らかな印象を受けます。
メインビジュアルの下には、ブランドの特徴を簡潔に示した3つのポイントを配置。ページの上部にユーザーの興味を引くコンテンツを用意することで、すぐに離脱してしまう可能性を下げています。
商品ビジュアルには、商品の横に使用している素材のイラストを配置。文字を読まなくても、感覚的に理解することができます。サイト全体で写真のトーンやイラストのタッチを合わせることで、一貫した世界観を演出することに成功しています。
嬉野茶時
引用元:嬉野茶時
こちらは、佐賀県・嬉野の土地で何百年もの間受け継がれている歴史的伝統文化「嬉野茶」を販売するECサイト「嬉野茶時」。白とグレーを基調に、自然光を生かした写真が並び、歴史あるお茶の上質さを表現しています。
トップページには、「知る」「触れる」「買う」という3つの入り口を用意。これによって、ユーザーは目的に合わせた情報をすぐに見つけることができます。
生産者紹介のページには、日本茶のイメージとは異なるユニフォームをまとった男性たちの姿が。伝統と革新が融合したブランドの魅力を表す、印象的なビジュアルです。
YOAN
引用元:YOAN
YOANは、女性から絶大な人気を集めるインフルエンサー•ゆうこすが手掛けるスキンケアブランド。ECサイトはベージュやピンクといった淡い色合いで統一されていて、ターゲットである20代〜30代の女性にぴったりな大人可愛い雰囲気です。
商品一覧ページの左側には、「洗い流す」「肌を整え、うるおす」のように商品の用途がわかるツールを設置。個別ページまでいかなくても、自分の目的に合わせた商品を探せるようになっています。
こちらは個別の商品ページ。必要な情報を整理して記載しながらも、打ち出したい定期購入や購入ボタンが目立つようにデザインされています。
たかしま農園
引用元:たかしま農園
続いて紹介するのは、長崎県・高島でトマトとメロンを育てている「たかしま農園」のECサイト。鮮やかな赤と緑を使っていて、フレッシュなトマトを想起させます。
一覧ページの商品画像の上には、販売状況を表すアイコンを設置。完売の商品を非表示にするのではなく、商品のラインアップを紹介し続けることで、次回以降の購入につなげています。
個別の商品ページもサイト全体の世界観を守りつつ、購入への導線がわかりやすい構成です。当たり前のようですが、フォントのチョイスや写真のクオリティーも高品質なサイトにするための大切な要素であることがわかります。
ISURU ONLINE STORE
「ISURU ONLINE STORE」は、ベビー寝具や雑貨などを扱っているブランド・ISURUのオンラインショップ。コンセプトや概要などはブランドサイトに集約されているため、ECサイトは要素を最小限に抑え、大変ミニマムにまとまっているのが特徴です。
メインビジュアルのすぐ下に商品の一覧ページを配置。すっきりと整頓された印象で、シンプルながら商品の上質さを感じます。
商品の個別ページでは、商品の質感が伝わる写真と共に、ブランドが大切にしている価値観を訴求。全体的に細めのフォントを使用することで、生まれたての赤ちゃんを包み込む繊細な優しさを表現しています。
TAKANOME
引用元:TAKANOME
TAKANOMEは山口県の酒蔵「はつもみぢ」とTAKANOMEが共同開発した高級日本酒ブランドです。即完売という状況が続くほど、美味しいお酒として有名です。
TAKANOME1本のみを商品としているため、ECサイトはTAKANOMEの魅力を最大限伝えることができるように設計されています。黒色の背景やクリーム色を使用することで他のECサイトにはない高級感を演出。高級日本酒ブランドと合致したイメージのECサイトです。
TAKANOMEを開発するに至った経緯や「うまさ」を追求するためのこだわりなどを紹介。TAKANOMEにかける想いがユーザーに伝わるECサイトです。
stiiilll
引用元:stiiilll
stiiilll(スティール)は「仮設」をコンセプトに、ユーザー次第で様々な使い方をすることができ、設置しやすい家具を販売しているブランドです。
メインビジュアルには、同ブランドの製品がリズムよく収納・展開する様子を見ることができる動画を採用。同ブランドのモダンな製品のイメージを損なわなず、フレキシビリティの高さをアピールしています。
モノクロのカラーリングや太すぎないゴシック体からはモダンさを感じる事ができ、製品のイメージにあったECサイトデザインです。随所に英字を用いることでも、モダンさ、現代感を感じることができるおしゃれなサイトになっています。
CIRAFFITI
引用元:CIRAFFITI
CIRAFFITIは鳥取発のノンアルコール・ローアルコールクラフトビール専門ブランドです。「シラフでも思いっきり楽しめる世界をつくる」をミッションに、お酒を飲めない・飲まない人でもホップの香りや苦味を楽しめるノンアル・ローアルビールを開発しています。
Webサイトのトップページは、スクロールするとページをめくるように遷移する仕様。大きく表示されたビール瓶の画像は、個性的なパッケージデザインが目を引きます。
また、下層の商品詳細ページは左半面に画像を掲載。商品画像のほか、ビールを楽しげに飲み交わす様子も掲載され、ユーザーの購買意欲をそそります。
随所に用いられるハンドサインのアイコンや、太めのゴシック体などの要素がユニークで、ポップな印象のサイトに仕上げています。
BNN
引用元:BNN
株式会社ビー・エヌ・エヌは主にデザイン書とコンピューター書を発行している出版社です。2002年に設立してから、デザインをする人を増やすこと、作る人を支援することを目指して、書籍や雑誌の出版活動のほか、コンピュータを使用した情報提供などのサービスを展開しています。
あえてグリッド線を見せたデザインが特徴的なBNNのWebサイト。色数をベースカラーのグレーと、テキストカラーの黒の2色だけに絞ったシンプルなデザインです。その分、罫線や枠をバランスよく用いることで視認性を損なわない工夫が見られます。
グリッドレイアウトは整列した配置でサイト全体に統一感を持たせるため、枠内に書籍を配置した当サイトでは、さながらギャラリーのような雰囲気に。
左サイドの商品カテゴリ一覧と検索欄で、絞り込み検索ができるなど便利な機能を備え、ミニマルながらユーザビリティもバッチリです◎
ECサイト制作で押さえるべき3つのポイント
ここまで参考にしたいECサイトの事例を紹介してきましたが、いかがでしたか?
ここからは実際にECサイトを作る上で、大切にしたいポイントを説明します。押さえるべきポイントは下記3つです。
- ターゲット設定・分析をしっかり行う
- ユーザーの利便性・体験を大切に
- コツコツ運用してファンを作る
ターゲット設定・分析をしっかり行う
効率的に顧客に商品を訴求するためには、ターゲットを理解することがなにより肝心です。そのため、まずはサービスや商品を利用購買する顧客の中で、最も象徴となる利用者の人物モデル(=ペルソナ)を設定しましょう。
「30代男性」「40代〜50代の女性」といった幅のあるターゲット設定だけでなく、職業や年齢、家族構成といった細かい情報まで踏み込んで具体化することで、ユーザー視点が明確に。担当者間の認識を合わせるためにも効果的です。
ユーザーの利便性・体験を大切に
市場ニーズが「モノ」から「コト」へ移っている昨今。形ある商品の「保有」ではなく、購入で得られたモノやサービスによる「体験」に価値を置く傾向が強まっています。
こうしたトレンドの中で、ECサイトでも顧客体験(=UX /ユーザーエクスペリエンス)に最適化されたデザインが重視されています。商品を購入するためのショッピングサイトとしての使いやすさはもちろんですが、店舗スタッフのリアルな口コミを入れたり、商品が手元に届いた時の生活の変化をイメージできるような写真を取り入れたりと、ユーザーの「知りたい」に応えるコンテンツ作りを心がけましょう。
コツコツ運用してファンを作る
ECサイトは開設したらゴール、ではありません。商品情報の更新や売上管理、カスタマー対応に加え、定期的なメンテナンスが不可欠です。
加えて、最近では自社ECサイトのメディア化でファンづくりに成功している例も少なくありません。生活雑貨のお店であれば季節に合わせたコラムの中でおすすめアイテムの活用法を紹介したり、アパレルショップであれば身長別のスタッフが同じ商品を着用した動画を取り入れたりと、商品の魅力・価値をより強く訴求するためのコンテンツを考えましょう。
まとめ|ECサイトの制作会社選びに迷ったら
オンラインでの買い物が当たり前になった今。多くの顧客との接点を生み出すECサイトは、ブランドの認知度向上はもちろん、売上アップにも必要な要素になっています。
ECサイトを気軽に開設できるサービスもたくさんありますが、成果を上げられるサイトにするためには、ユーザーを理解した設計と正しい分析・運用が不可欠です。そのため、ECサイト制作を依頼する場合は、Webマーケティングに精通している会社をパートナーに選びましょう。
弊社ドコドアでは、これまでに1,600社以上のホームページを制作してきました。その経験から得たWebマーケティングの知識やSEO対策のノウハウを活用して、各企業・店舗に合わせた提案をいたします。EC機能を持たせたアプリの制作も行っているので、まずは目的やイメージを聞かせてください。
見た目が美しいのはもちろん、ユーザーに正しく伝わるデザイン・導線で、貴社の想いを届けましょう。
#ECサイト#ECサイト制作#ホームページ制作
気になる方は、ぜひ一度ドコドアにご相談ください。
◎お問い合わせ・ご相談はこちらから

ドコドア 編集部
EditTeam