ワイヤーDLごとうじゅうランドセル
子どもたちの写真と丸いロゴでやさしく迎え、色や性別から自分に合うランドセルを探せるようにする。
- TOP
- デザイン参考集
- 小売・ネットショップ
- 白杉酒造（シラキク）
webcan analyze sake-shirakiku.jp
RETAIL & EC · 京都府 · PICKED 2026.10.19
白杉酒造（シラキク）小売・ネットショップのホームページデザイン参考 — 酒蔵・オンラインショップ・縦書き
出典：sake-shirakiku.jp ↗確認日 2026.10.19
EDITOR'S NOTE編集部の視点
酒造りの写真と縦書きの物語で、「食べるお米だけで造る酒蔵」のこだわりを伝え、そのままオンラインショップへつなぐ。
京都府京丹後市の酒蔵、白杉酒造のサイト兼オンラインショップ。ファーストビューは酒造りの作業風景の写真に、筆文字の「shirakiku」のロゴを重ねている。続いて、写真と縦書きの短い文章を交互に置いて、地元・京丹後産の食用米だけで造る理由を物語として伝える。その後に商品のカルーセル、全国の取扱店、直売所、ドッグランの紹介と続く。
- 01ファーストビューは酒造りの作業風景の写真に、筆文字のロゴだけを重ねている
- 02酒蔵の物語は、大きさの違う写真と縦書きの短い文章を、左右に振りながら並べている
- 03商品カードは、瓶の写真と縦書きの紹介文に、容量と価格を添えて横に並べている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
物語のすぐ後に商品を並べる
食用米で日本酒を造る理由を読ませた後に、「このお酒も、好きかも？」の一言とともに商品のカルーセルを置いている。こだわりに興味を持った人を、そのまま商品と価格へ案内できる。
カートとお知らせを画面に残す
PCは画面の左下にカートのアイコンを固定し、ヘッダーにはお知らせを1行で表示している。スマホも画面の下にカートとログインを置き、どこからでも買い物に戻れる。
通販以外の買い方も案内する
全国の取扱店の一覧へのボタンと、酒蔵に併設した直売所の紹介を置いている。フッターには直売所の営業時間・定休日・駐車場まで載せ、店で買いたい人も迷わない。
チェック項目は 2026.10.19 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景・商品カード
#F0F4F4セクション背景・フッター · ペールグレー
#111111テキスト・ボタン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文）
- 使用フォント
- 秀英角ゴシック銀（Adobe Fonts）
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字（ボタン・見出し）
- 使用フォント
- Asul
- 無料で近いもの
- Asul
- 用途
- 約物
- 使用フォント
- YakuHanJP
- 無料で近いもの
- YakuHanJP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 18px / 500 | 1.80 | 15px / 500 |
| 本文（p） | 16px / 400 | 1.80 | 14px / 400 |
| ボタン | 18px / 600 | — | 16px / 600 |
実測値（PC 1440px・SP 375px、2026.10.19 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.19 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01作り手の作業風景の写真に、ロゴだけを重ねたシンプルなファーストビューにする
- 02こだわりは、写真と短い文章を交互に並べて物語として読ませる
- 03物語の後に商品を並べ、容量と価格をカードに出して買い物へつなぐ
- 04通販だけでなく、取扱店や直売所の営業時間も載せて、店で買いたい人にも応える
FAQよくある質問
白杉酒造のサイトで使われているフォントは？
和文は秀英角ゴシック銀（Adobe Fonts）、英字は Asul、約物は YakuHanJP です。無料で近づけるなら、和文は Noto Sans JP、英字は Google Fonts の Asul が使えます。
酒蔵や食品メーカーのサイトで、こだわりと通販はどう両立させればよいですか？
このサイトのように、先にこだわりを短い文章と写真で読ませ、その直後に商品と価格を並べると、興味を持った人をそのまま買い物へ案内できます。カートを画面に固定しておくと、読み進めた後でも買い物に戻りやすくなります。
どんな業種の参考になりますか？
酒蔵・醸造所のほか、和菓子店や茶舗、農家の直販サイトなど、作り手の物語とオンラインショップを一つのサイトで見せたい業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は白杉酒造（シラキク）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの小売・ネットショップの参考サイト
ワイヤーDLFROM REFERENCE TO YOUR SITE
このテイストで、
御社のショップのサイトを。
「白杉酒造（シラキク）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちら