
猫の手で制作したECサイトを詳しく、そしてマニアックに解説します。
今回は、第一回として信濃屋食品様ワインサイトをご紹介!
特にデザイン視点とMakeShop視点から、推しポイントを深掘りします。
信濃屋食品様ワインサイト
まず、信濃屋食品様についてご説明します。
信濃屋食品様は、1930年に東京都世田谷区で酒屋として創業 され、その後、青果や輸入食品の取り扱いを拡大しながら発展を遂げてこられました。現在では、スーパーマーケット4店舗、酒販店12店舗、ECサイト2店舗 を運営され、2024年には新業態店舗「cask」もオープン。
特にワインやウイスキー、チーズなどの輸入食品に強みを持ち、バイヤーが現地で厳選した高品質な商品を取り揃えておられます。また、「本物の食とお酒の融合」をテーマに、専門性の高い品揃えと、日々の食卓に寄り添う提案を両立。お客様に新たな発見と感動を届けるお店作り を大切にされている企業です。

お酒はもちろんなのですが、おつまみの豊富さもすごいのです。オリジナル商品も、セレクトされた日配品もとっても美味しいのです。(納めの日に食べたバジルしらすピザがしらすてんこもりでバジルとトマトに合う合う)私の地元にもオープンしないかな〜
ファーストビューを見る

① 視覚的なインパクトと高級感の演出
ファーストビューのスライダーでは、ワイン樽やワイナリーの風景、贈答用ワインのギフトセット、新着商品の紹介など、多彩なビジュアルが展開されます。これにより、訪問者に対して「高品質なワイン専門店」としての印象を瞬時に伝えるとともに、自社輸入のこだわりやギフト需要への対応、新商品の入荷情報などを視覚的に訴求 しています。また、洗練されたタイポグラフィと上品なカラートーンがブランドイメージを強化し、特集ごとに変化する背景デザインが飽きさせない工夫を加えています。スライダーを活用することで、訪問するたびに新たな発見と魅力を感じられるサイト設計 となっています。

スライダーバナーも弊社デザイナーがこだわりぬいて作りました。
お友達にギフト用ワインを買うついでに、自分の家用に高コスパワインと産地こだわりワインを買おうかな〜
② 余白の活用とスッキリしたレイアウト
画面全体に適度な余白(ホワイトスペース) が確保されており、情報が整理されて見やすくなっています。特に、テキストやボタンが詰め込まれすぎていないため、視線の誘導がスムーズ に行われ、ユーザーが迷わず次のアクションを取れるデザインになっています。
③ CTA(行動喚起)の明確さ
右上の「お好みの条件から探す」ボタンが視認性の高いデザインで配置されており、ユーザーがスムーズに商品検索へ移動できる導線が確保されています。また、スライダーの各バナーにもリンクボタンが適切に配置されており、興味を持ったユーザーが迷わず詳細ページに進める作りになっています。
④ ブランドイメージに合わせた色使い
ワインを扱うサイトらしく、ブラウン系やワインレッドを基調とした色合いが採用されており、落ち着きのある上質な印象 を与えています。背景の色味とも調和しており、全体的に統一感のあるデザインになっています。

信濃屋食品様のCOサイトのトンマナを綺麗にECサイトにも落とし込んだデザイン、安定感と上品さが伝わってきます。
MakeShopの強みを活かした優れたサイト設計
信濃屋食品様のワインECサイトは、MakeShopの豊富な機能を最大限に活用しながら、高級感と使いやすさを両立 させた優れた設計になっています。本サイトのファーストビューには、MakeShopの機能を活かしたさまざまな工夫が見られます。

弊社猫の手は、MakeShopでの制作実績も数多くあり、
その実績が認められ「公式パートナー」となりました!
MakeShopを知り尽くしているからこそできるワザマエをご紹介します!
① MakeShopのバナー管理機能を活用したダイナミックなスライダー
トップページのスライダーでは、MakeShopの「バナー管理機能」 を活用し、最新の特集やキャンペーンを視覚的にアピール。管理画面から画像の差し替えやリンク設定が可能なため、運営側が手軽に更新できる のが大きな利点です。これにより、
✅ 季節ごとのプロモーション(例:ボジョレー・ヌーボー、クリスマスギフト特集)
✅ 期間限定キャンペーンの告知
✅ 新商品やおすすめ商品への誘導
がスムーズに行え、常に最新情報をユーザーに届けられるサイト運営が可能になっています。

お客様での更新ももちろんですが、弊社サービス「ネコノテプラス」を導入していただければ、高品質のバナーや、かゆいところに手が届くシステム開発もいたします!
② MakeShopの「カテゴリ管理機能」を駆使した直感的な商品検索
ファーストビューの上部には、MakeShopの**「カテゴリ管理機能」** を活用したメガドロップダウンメニューが配置されています。
✅ 「ワイン」カテゴリの中で、産地・価格・品種などで絞り込みが可能
✅ 管理画面でカテゴリーを柔軟に変更できるため、商品ラインナップに応じた調整が容易
✅ SEO対策にも有効(検索エンジンがカテゴリー構造を認識しやすくなる)
MakeShopの管理機能を最大限活用することで、ユーザーが「どのように商品を探すのか」を意識した設計になっており、ECサイト運営者にとっても管理しやすい作りになっています。
③ MakeShop標準機能を活かしたCTAボタン設計
右上に配置された「お好みの条件から探す」ボタンや、スライダー内の各バナーには、MakeShopの**「リンク管理機能」** を活用し、各特集ページや商品一覧ページへダイレクトに遷移できる導線が設計されています。
✅ シンプルな管理画面で運営側が手軽にボタンやリンクの配置を調整可能
✅ MakeShopの「絞り込み検索」機能を活用することで、ユーザーが求める商品へ素早く到達できる
✅ スマホ版でもタップしやすいボタン設計で、レスポンシブ対応も万全
MakeShopの標準機能を活かしながら、ユーザーの行動をスムーズに誘導するCTA設計が施されている点も、高評価ポイントです。

弊社では、お客様が更新しやすいように内側のシステムを整え、マニュアル作りまでまで致します。煩雑で挫折してしまっていたそこのEC担当のあなた!猫の手が伴走いたします!
ランキング機能で売れ筋を直感的にチェック!

サイト中間部分には、人気商品がひと目で分かるランキング機能 が搭載されています。これは、MakeShopの「売れ筋商品ランキング機能」を活用し、リアルタイムで売れ筋が更新される仕組みになっています。
✅ 順位が明確で、何が人気かすぐ分かる!
✅ 商品画像+価格が並び、比較しやすいデザイン!
✅ ランキングから直接購入でき、スムーズな導線設計!
「どれを選べばいいか迷う…」そんな時も、人気のワインをすぐチェック&購入できる便利な機能 です。MakeShopの標準機能を最大限活用し、ユーザーが楽しく買い物できる工夫が詰まっています!

この、ランキングのコーナー横のワイングラスのアイコンもかわいいのです。
細やかなこだわり。
自社輸入生産者特集をチェック


フォント・雰囲気・画像合成の巧みさ、これだけで信濃屋食品様が
このコーナーにリキ入れてるのわかっちゃうな〜。
ECサイトなのにこんなに読み物が豊富なんてすごい!
✅ 生産者のこだわりが伝わるビジュアル!
各カードに生産者やワイナリーの写真を大きく配置し、ワインの背景にあるストーリーを視覚的に演出。雑誌の特集ページのような洗練された雰囲気が魅力です!
✅ スッキリ見やすいレイアウト!
産地やブランド名が一目で分かる整理されたデザイン。写真とテキストのバランスが良く、情報がスムーズに入ってきます。
✅ 思わずクリックしたくなる設計!
カード型デザインで、各特集への導線が分かりやすく、視線の流れもスムーズ。「もっと知りたい!」と思った瞬間に次のページへ進める工夫がされています。
ブランドの世界観を保ちつつ、ワイン選びが楽しくなるデザインが秀逸です!
探す!コーナーを深堀り

✅ 視覚的に分かりやすいアイコン&国旗
各国のワインが国旗付きで表示されており、一目で選びやすいデザイン。視認性が高く、迷わずクリックできる工夫がされています。
✅ ユーザーの思考に寄り添ったカテゴリ分け
ワイン選びの軸となる「産地」と「味わい」で分類されているため、初心者でも直感的に自分好みのワインを見つけやすい 仕様になっています。
✅ スッキリとしたレイアウトで操作しやすい
余白を適度に確保し、ボタンをシンプルに配置することで、情報が整理されていて見やすい。スマホでもタップしやすいデザインになっているのもポイントです。
✅ ECサイトに最適なUX設計
クリック一つでワインの一覧ページへ遷移できるため、商品探索のストレスを軽減し、スムーズな購買導線を実現 しています。

ワイン選びを楽しく、簡単にするための工夫が詰まった、使いやすさ抜群の検索ナビゲーションです!
続いてMakeShopの視点から見てみましょう!
この検索ナビゲーションは、MakeShopの「カテゴリ管理」と「商品検索機能」 を活用し、ユーザーがスムーズにワインを選べる設計になっています。
✅ カテゴリ管理機能で柔軟な分類
「産地」「味わい」といったカテゴリは、MakeShopのカテゴリ管理機能 により、運営側が自由に設定・更新可能。新商品の追加やシーズンごとの調整も簡単です。
✅ 商品検索機能と連携し、スムーズな導線を実現
各ボタンをクリックすると、MakeShopの絞り込み検索機能 によって、条件に合うワイン一覧が表示され、ユーザーが迷わず商品を見つけられます。
✅ 無駄を省いたシンプルなデザインで操作性◎
情報を整理し、直感的に選べるレイアウトを採用。シンプルな構成ながら、欲しいワインに素早くたどり着ける工夫がされています。
分かりやすく、安心してお買い物ができる「ご利用ガイド」


小カテゴリにカード・車・段ボール箱・矢印アイコンを配置するところもニクイですねぇ!カレンダーの色味もしっかりトンマナに合わせてシック!
✅ 重要な情報がシンプルにまとまっている!
支払い方法・配送・送料・返品交換の情報が整理され、必要な情報がすぐに確認できる設計。ECサイトに欠かせない「安心感」を提供しています。
✅ 営業日カレンダーで出荷スケジュールが一目で分かる!
カレンダー形式で定休日が明示されており、「いつ発送されるか」が直感的に分かる工夫がされています。特にギフト需要の多いワインショップにおいて、購入前の不安を解消する親切な設計 です。
シンプルながら、ユーザーの利便性をしっかり考えた設計 で、スムーズな購入体験をサポートしています!
次回予告!独自開発のお好み検索に刮目せよ!
いかがでしたか?などとつまらない言葉で〆るわけにはいきません。
信濃屋食品様ワインサイトは次回の特集こそが真骨頂なのです!

本日はトップページ編でしたが、次回はこだわりの内部編になります!
信濃屋食品様のECサイトはMakeShopのデフォルトにはない機能が搭載されているのです!
次回もお楽しみに!
デザイン・SEO・ECにとにかく強い制作会社
デザインにこだわるのは当たり前!構成にこだわるのも当たり前!猫の手はECサイトの「あれがあったら」を解消します!
ご興味を持たれた方は下記フォームから是非お問い合わせ下さい。
この記事を書いたのは・・・

猫の手 井手
猫の手デザイナーです。 カニとハマグリが大好き。フェリー旅も好きです。