ワイヤーDLつながる駄菓子屋 ふくふく堂
手描きのイラストと「ふく札」の仕組みで、子どもが一人で来られる駄菓子屋の過ごし方を伝える。
webcan analyze jofuku.jp
RESTAURANT & CAFE · 和歌山県 · PICKED 2026.11.02
徐福寿司飲食店・カフェのホームページデザイン参考 — 紺と赤・和柄・縦書き
出典：jofuku.jp ↗確認日 2026.11.02
EDITOR'S NOTE編集部の視点
雲形に切り抜いた寿司の写真の横に、電話注文と通販の入口を置く。
和歌山県新宮市の寿司店のサイト。ファーストビューは雲の形に切り抜いた寿司の写真で、上に縦書きのロゴ、右上に「電話注文はこちらから」の電話番号、右端に通販サイトのタブを置いている。紺・赤・生成りの3色と青海波の柄でまとめ、通販・商品紹介・お品書き・若女将奮闘記・店舗情報を載せている。
- 01写真を雲の形に切り抜き、紺と赤の線で縁取っている
- 02紺・赤・生成りの3色と青海波の柄を、ページ全体で使っている
- 03職人の姿を切り抜いた写真やさんま寿司のイラストを、見出しや文章の周りに配置している
3 VIEWPOINTS3つの視点で見る
デザインの視点
紺（#0B446F）・赤（#A2332F）・生成り（#E7E3D2）の3色に絞り、背景に青海波の柄を敷いて、雲の形に切り抜いた寿司の写真を大きく見せている。色数を絞って和の雰囲気を出す方法を真似できる。
集客の視点
ヘッダーに「電話注文はこちらから」と電話番号を置き、右端に「通販サイト」のタブを出して、来店以外の注文先を最初の画面で示している。説明文の「年間30,000本」「70年以上」のように実績を数字で書く点も参考になる。
Webディレクターの視点
商品、お品書き・お持ち帰り、若女将奮闘記、店舗情報の順に、飲食店に必要な情報を並べている。店舗情報に住所・アクセス・営業時間・定休日・電話番号をまとめる形を真似したい。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線節分巻のご予約開始です。
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
電話注文と通販の入口を最初に見せる
PCのファーストビューの右上に電話番号を「電話注文はこちらから」の言葉つきで置き、右端には「通販サイト 地方発送承ります」のタブを置いている。来店できない人の注文先も最初の画面で分かる。
実績の数字を説明文に入れる
サイトの説明文に「さんま姿寿司を年間30,000本の製造販売実績」「創業から70年以上」と書いている。数字にできる実績を添えると、初めて知った人にも店の歩みが伝わる。
店の日常を「若女将奮闘記」で発信する
商品やお店のことを「若女将奮闘記」としてカードで並べている。お知らせは別の一覧にまとめ、ページ上端の帯には定休日のお知らせを流して、最新の情報が目に入るようにしている。
チェック項目は 2026.11.02 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#0B446F文字・フッター · 紺
#A2332F通販セクション・メニューボタン · 赤
#E7E3D2セクション背景 · 生成り
#DD8E8B差し色 · 薄紅
#FFFFFF背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Shippori Antique
- 無料で近いもの
- Shippori Antique
- 用途
- 英字（About・Blog など）
- 使用フォント
- Hepta Slab
- 無料で近いもの
- Hepta Slab
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 24px / 400 | 1.00 | 24px / 400 |
| h3 | 20px / 400 | 1.80 | 13.4px / 400 |
| 本文（p） | 12px / 400 | 1.00 | 11.5px / 400 |
| ボタン | 16px / 400 | 1.00 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.11.02 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
お知らせ
お知らせ／お知らせ一覧型 - 06
- 07
お品書き・お持ち帰りの入口
イベント・キャンペーン／特集バナー並び型 - 08
- 09
若女将奮闘記
記事・メディア／記事カードグリッド型 - 10
- 11
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.02 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01電話での注文を受ける店は、最初の画面に電話番号と言葉を添えて置く
- 02通販がある店は、画面の端に通販の入口を出す
- 03色を3色に絞り、和柄などの模様を1つ決めてページ全体で使う
- 04店の人の記事に名前をつけて、更新を続ける場所を作る
FAQよくある質問
徐福寿司のサイトで使われているフォントは？
和文は Shippori Antique、英字は Hepta Slab です。どちらも Google Fonts で無料で使えます。
写真を雲の形に切り抜くのは難しいですか？
切り抜きの形を1つ用意すれば、写真を入れ替えて使い回せます。このサイトは形を統一し、スライドの写真を替えて見せています。
どんな業種の参考になりますか？
飲食店のほか、和菓子店や酒蔵、旅館など、地域の名物と歴史があり、電話注文や通販も受けたい事業者に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は徐福寿司および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの飲食店・カフェの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の飲食店サイトを。
「徐福寿司のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。