今回はshopifyを利用して作成したWEBデザインをご紹介します。
昨今shopifyはEC業界のなかでも激アツ！と呼ばれているくらい、人気が急上昇しているASPカートシステムです。
最近、続々とshopifyを使った新しくECサイトが作られるようになってきたので、記事としていい感じのデザインをまとめることにしました。
shopifyでWebデザインを作りたい人や、ECサイトのデザインを勉強をしたい人、社内外でのデザインイメージのアイデア出しに使ってもらえると幸いです。
この記事を書く僕は、Webディレクターとして、ECの案件に数多く携わらせていただき、shopifyで何度もサイトを作成してきました。
この経験のなかで、「このshopifyのデザインはお客様に見せたら受けが良かった」ものを紹介していきますね。
shopifyの登録はこちらから！
まずは14日間の無料トライアルからはじめてみましょう↓↓
Shopifyのデザイン
それでは早速、shopifyの事例を紹介いたします。
フルーツトマト専門農家 | 曽我農園の通販・オンラインショップ
https://sogafarm.jp/
曽我農園は、雪国・新潟のトマト産地で、甘みたっぷりの「越冬トマト」を生産・販売する農園です。
TheEC然としてデザインではなく、ブランドサイト的な要素も含まれていて、一見ECサイトには見えないくらい、おしゃれな雰囲気があります。
背景は落ち着いた生成色で、写真のトーンも統一されていてシンプルですね。
定番商品というセクションを設けて、ユーザーに購入の選択肢を提示しているのも参考にしたい点です。
- 「トマトの甘みは冬が育てた」というキャッチコピーのひきが良い
- 写真のトーンがGOOD！サイトの独特の世界観を作り出している
- トマトが甘そう、とシンプルに感じられる→トマトがちゃんと主役になっている
- 定番商品やセット商品があって、選択肢を限定して買いやすい工夫がされている
AND PLANTS
https://andplants.jp/
AND PLANTSは「自然を部屋に持ち込もう！」をテーマに日常に植物のある生活スタイルを提案する観葉植物・インテリアブランド。
メイン商材が植物ということもあり、緑色がとても綺麗なデザイン。
AND PLANTSでとくに目を見張るのは検索性。
商品一覧ページのレフトナビゲーションにはサイズ、日当たり、難しさ、ライフスタイルで絞り込みができるので求める観葉植物が探しやすいです。
また商品詳細ページでは鉢の色、鉢の形まで選べるのが面白いです。
またパーソナル診断という面白いコンテンツがあり
- サイズ
- 部屋につけたいアクセント
- 求める植物のテイスト等
用意された7つの質問に答えていくと、今のライフスタイルにぴったりな植物を提案してくれます。
- パーソナル診断で自分のライフスタイルにあった植物を探せる
- 商品一覧ページでの検索性が高い
- 商品ページも探しやすさが高い
財布とバッグのJOURNEY
https://journey-leather.com/
JOURNEYは埼玉県川口市で財布やバッグ、カメラストラ等手縫いの革製品を製作されている工房兼店舗です。
職人の写真と商品の写真（利用シーンも含めて）がページ内に散りばめてあることで、手仕事で作り込んでいる＝職人感が伝わってきます。
コピーも素敵で、その辺のライターが考えたのではなく、ちゃんとプロが入っているんだろうなという印象。
商品ページでは、商品カラーを選択できるようになっていますし、写真や説明文も豊富でしっかりと作り込まれています。
- ファーストビュー以下にすぐおすすめ商品が横４列×縦２で並んでいるので、すぐに該当の商材を探すことができます。
- カテゴリー分類に関してもバック・財布・小物等、上位カテゴリでまとめてあるのでユーザー的には探しやすいです。
- 読み物コンテンツもあり、集客対策もされつつ、リピーターが楽しめるようになっています。
- 商品ページが豊富！「店主のひとこと」というコメントもGOOD
TAKANOME (鷹ノ目)
https://takanome-sake.com/
TAKANOMEは、株式会社Forbulが展開する今急成長中の日本酒D2Cブランド。
SNSから有名になり、今では販売からたったの５分で即完売が続くほどの人気ぶりです。
デザインのキーワードとしては上品、エレガント、シック。
こういったイメージは
- どっしりと読み応えのある文章
- 高級感が伝わる写真要素
- 黒色を所々に差し込んで、締まった雰囲気を演出
- 秀英丸ゴシックを使用して落ち着いたトーン
といった工夫から感じられます。
ABOUTページは「TAKANOMEがどのようにうまさを追求しているのか」が詳細に書かれており、新規からリピーターまで楽しめるコンテンツになっています。
- 商材にあったエレガントで落ち着いた雰囲気のデザイン
- コピーライティングがとても良い！雑誌のような読み応えのある文章
- 販売を毎週水曜日21時と限定している→レア感を演出
ONWARD Design Diversity 公式オンラインストア
https://www.onwarddd.com/
オンワード・デザイン・ダイバーシティでは「１社会課題１ブランド」という新しいファッションを提案するECサイトです。
例えば、「ONWARD DD（オンワード・ディー・ディー）」というブランドはSDGSで有名な「サスティナビリティ」という社会課題に対して、そのひとつの解として「流行にながされない服」がラインナップされています。
デザイン的には、非常に写真の統一感がでていると思います。
例えばモデルさんがそれぞれポーズをとっていたり、シャビーな感じ背景の雰囲気、
このように写真のトーンに統一感があると、サイト全体の世界観も出すことができます。
・写真それぞれの粒に世界観があり、それが統一感が演出している。
Masht star｜日常で着られるアフリカン｜一点物の洋裁店
https://masht-star.jp/
Masht starでは日常で切られるアフリカンというコンセプトで、アフリカンファブリックを利用した洋服を販売しているECサイトです。
このサイトも非常に写真の雰囲気がかっこいいです。
日常で使えるアフリカンというコンセプトがあるので写真自体も日常のワンシーンを切り取ったようになっています。
なお商材がアフリカンテイストなので、写真は柄模様が多いです。
だから背景を白に、余白を多めにとることで商材が映えるような構成になっていますね。
・アフリカンテイストを意識した配色構成になっている。
freemom
https://mom.co.jp/
freemomではアトピーや敏感肌に優しい重曹洗剤・消臭スプレーを販売しています。
淡い雰囲気の優しいデザインテイスト。
フォントもサンセリフなので可愛らしく素朴な感じ。
商品一覧の写真は背景を
コピーライティングも非常によく
双子で生まれた息子たちのアトピー肌に悩む
ある⼀⼈の⺟親がいました。
ではじまるABOUT前の文は、まるで物語のようなはじまりです。
https://mom.co.jp/collections/all
商品写真の背景色が揃っている
HAUTオンラインストア
https://hautmens.com/
潤いをたもつメンズスキンケア、HAUT（ハウ）のオンラインストアです。
僕は乾燥肌で、皮脂量も多いのでお風呂あがりにメンズケアをするのですが、化粧水、乳液、美容液の3つが、HAUT1本で完結するのは魅力的。
ファーストビューで印象の強い写真がドンと置いてあり、アーティスティックなデザインが目を引きます。
ファーストビューからスクロールしても、背景画像が固定されて文字だけ動くという仕様も面白いです。
nap Inc.
https://nap-dog.com/
岡山県の吉備中央町の山の中で経営さえているnap,incのオンラインストアです。
商品としてはオリジナルプロダクトを中心にかばんや財布など日常生活で使えるアイテムから、キャンプや釣りなどアウトドアのときに役立つ商品が売られています。
デザイン的にはアウトドア的な雰囲気があります。
商品ページが充実しており、例えばカバンであれば、商品写真やカラーが選択できるようになっています。
いろんな商品がありすぎて、どれを買ったらいいか迷う方に「ライフスタイルから探す」というセクションを設けてあるので検索性が高いです。
カネコ小兵公式オンラインストア
https://store.ko-hyo.com/
岐阜県土岐市で窯元をしているカネコ小兵。
DIORから見初められたぎやまん陶、芸能人からデリグラマーまで著名人に愛されるリンカといった人気シリーズがあります。
シンプルな構成で、タイトル文字やバナーの大きさなど単調になりすぎないように強弱をつけています。
とくに各シリーズページには、シリーズの特長と写真を散らして購入のイメージを高めている構成になっています。
cado
https://cado.com/
cadoでは世界No.1の清浄能力を持つ空気清浄機をメインに、加湿器や除湿機などを販売しています。
清浄機を販売していることもあり、デザインから清潔感も伝わってきます。
例えば写真には上品な印象があるため、余白が多めのデザインでありながら、全体の存在感は非常いあります。
新宿 北村写真機店
https://store.kitamuracamera.jp/
商品が並んでいるだけの非常にシンプルなデザイン。
ですが、ヘッダーすぐ下に検索領域があり、その下におすすめ商品が並んでいるので探しやすさは高いです。
