WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 小売・ネットショップ
  4. 石田屋ESHIKOTO店

webcan analyze eshikoto-store.shop-ishidaya.com/jp

RETAIL & EC · 福井県 · PICKED 2026.11.05

石田屋ESHIKOTO店小売・ネットショップのホームページデザイン参考 — 日本酒・余白多め・明朝体

石田屋ESHIKOTO店のトップページ（PC）
PC（1440px）
石田屋ESHIKOTO店のトップページ（スマホ）
スマホ（375px）
出典：eshikoto-store.shop-ishidaya.com/jp ↗確認日 2026.11.05
石田屋ESHIKOTO店小売・ネットショップ · 福井県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

余白の多い薄いグレーの画面に、ボトルの写真を1本ずつ置いて限定酒を見せる。

福井の黒龍酒造を擁する石田屋二左衛門のブランド「ESHIKOTO」の店舗のサイト。開くと最初に「お客様は、20歳以上ですか？」の年齢確認が出る。ファーストビューは薄いグレーの背景に、左に明朝体のコピーと縦に置いた「ESHIKOTO」、右にボトルの写真を切り替えて見せる。黒背景のABOUT、商品ごとのSAKE、動画のSAKE EXPERIENCE、VISIT、NEWSと続き、最後に限定酒の抽選・予約販売の案内を置いている。

  1. 01薄いグレー（#F1F1F1）の背景に、切り抜いたボトルの写真だけを大きく置いている
  2. 02見出しは Zen Old Mincho の明朝体、ナビとセクション名は字間を広げた英字にしている
  3. 03SAKEでは、左に商品名・説明・View More、中央に大きなボトル、右に他の商品のボトルを縦に並べている

3 VIEWPOINTS3つの視点で見る

デザインの視点

薄いグレー（#F1F1F1）の背景に切り抜いたボトルを置き、明朝体のコピーと縦に置いた英字のブランド名を組み合わせたファーストビューが参考になる。ABOUTだけ黒背景（#000000）に白文字に切り替えて、流れに区切りを付けている。

集客の視点

お酒を扱うサイトとして入口に年齢確認を置き、VISITで20歳以上の利用や飲酒運転への注意、駐車場、営業時間、定休日を先に伝えている点を真似したい。限定品は抽選・予約販売の情報へ案内している。

Webディレクターの視点

ABOUT、SAKE、SAKE EXPERIENCE、VISIT、NEWSと続き、関連サイトと限定品の案内で終わる構成が参考になる。ヘッダーのSAKEから商品ごとのページ（ESHIKOTO・UMESHU・AWA・LIMITED）へつないでいる。

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

入口で年齢を確かめる

お酒の情報を扱うため、トップを開くと「20歳以上ですか？」の画面が出て、YESを押すまで本文が見えない。VISITにも「20歳以上のご利用」と飲酒運転についての注意を書いている。

来店前に知りたいことをVISITにまとめる

注意事項・住所とGoogle Map・駐車場・営業時間（10時〜17時）・定休日（毎週水曜日）を一つのセクションに並べ、施設内の建物の位置を図で示している。

限定酒の抽選・予約販売へ案内する

ページの最後に「LIMITED SAKE INFO」の枠を置き、生産本数に限りのある限定品の抽選・予約販売の情報へ More Detail で送っている。

チェック項目は 2026.11.05 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#F1F1F1背景
#EDEDEDセクション背景
#000000ABOUTの背景
#0F0F0F文字
#FFFFFF黒背景の上の文字

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し
使用フォント
Zen Old Mincho
無料で近いもの
Zen Old Mincho
用途
和文本文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字（ナビ・セクション名）
使用フォント
Roboto
無料で近いもの
Roboto
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h146px / 7001.0024px / 600
h224px / 6001.0024px / 600
h324px / 6001.0024px / 600
本文（p）14px / 4001.8014px / 400
ボタン16px / 6001.0016px / 600

実測値（PC 1440px・SP 375px、2026.11.05 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    左にロゴ、右にNEWS・ABOUT・SAKE・VISIT・CONTACTとJP/EN、メニューボタン。スクロールしても上に固定。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    左に明朝体のコピーと縦に置いた「ESHIKOTO」、右にボトルの写真を切り替えて見せる。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    ABOUT

    黒背景に白の明朝体の見出し「日本酒の新たな可能性に出会う場所」と説明文。

    コンセプト／写真＋メッセージ型
  4. 04

    SAKE

    商品ごとに、左に名前・説明・View More、中央に大きなボトル、右に他のボトルを縦に並べる。

    事例・実績／大判1件＋サムネ型
  5. 05

    SAKE EXPERIENCE

    大きな英字の上に動画を重ねる。

    コンセプト／写真＋メッセージ型
  6. 06

    VISIT

    注意事項・住所とGoogle Map・営業時間・定休日と、施設内の建物の位置の図。

    アクセス／地図＋時間表型
  7. 07

    商品の写真

    商品の写真を横に並べる。

    事例・実績／写真グリッド型
  8. 08

    NEWS

    日付・種類（PRODUCT・MEDIA）・タイトルの一覧。

    お知らせ／お知らせ一覧型
  9. 09

    関連サイトへのリンク

    複合施設ESHIKOTOと、石田屋のサイトへの写真つきリンクを2つ並べる。

    イベント・キャンペーン／特集バナー並び型
  10. 10

    LIMITED SAKE INFO

    限定品の抽選・予約販売の情報への案内。

    イベント・キャンペーン／見学会・イベント告知型
  11. 11

    フッター

    Instagram・Facebook・CONTACT。

    フッター／店舗情報＋ナビ型
石田屋ESHIKOTO店の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／左コピー・右写真の分割型
石田屋ESHIKOTO店のファーストビュー（PC）PC
石田屋ESHIKOTO店のファーストビュー（スマホ）SP
06VISITアクセス／地図＋時間表型
石田屋ESHIKOTO店のVISIT（PC）PC
石田屋ESHIKOTO店のVISIT（スマホ）SP
07商品の写真事例・実績／写真グリッド型
石田屋ESHIKOTO店の商品の写真（PC）PC
石田屋ESHIKOTO店の商品の写真（スマホ）SP
08NEWSお知らせ／お知らせ一覧型
石田屋ESHIKOTO店のNEWS（PC）PC
石田屋ESHIKOTO店のNEWS（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.05 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01背景は薄いグレー1色にして、商品は切り抜いた写真で大きく見せる
  2. 02商品の一覧は、1つずつ名前・説明・詳しく見るボタンと大きな写真で見せる
  3. 03来店に必要な情報（注意事項・住所・営業時間・定休日・駐車場）を一つのセクションにまとめる
  4. 04数に限りのある商品は、抽選・予約の案内ページを別に用意して最後に案内する

FAQよくある質問

石田屋ESHIKOTO店のサイトで使われているフォントは？

実測では、見出しが Zen Old Mincho、本文が Noto Sans JP、ナビの英字が Roboto です。いずれも Google Fonts で無料で使えます。

お酒を扱うサイトで、年齢確認はどう見せていますか？

このサイトでは、トップを開くと「お客様は、20歳以上ですか？」の画面が出て、YESを押すと本文が表示されます。日本語と英語の両方で書いています。

どんな業種の参考になりますか？

酒蔵の直売店やワイナリー、和菓子・茶などの専門店のように、少ない商品を1つずつ丁寧に見せたい事業者に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は石田屋ESHIKOTO店および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの小売・ネットショップの参考サイト

小売・ネットショップのすべてを見る7件
webcan design --sitemap eshikoto-store.shop-ishidaya.com/jp

石田屋ESHIKOTO店のサイトマップ

  • 9ページ
  • トップページ/jp/
  • News/jp/news/
  • About/jp/about/
  • ESHIKOTO/jp/sake/eshikoto/
  • UMESHU/jp/sake/umeshu/
  • AWA/jp/sake/awa/
  • LIMITED/jp/sake/limited/
  • Visit/jp/visit/
  • Contact/jp/contact/

外部リンクFacebook・Instagram

2026.11.05 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のショップのサイトを。

「石田屋ESHIKOTO店のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら