WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 飲食店・カフェ
  4. つながる駄菓子屋 ふくふく堂

webcan analyze fukufuku.nara.jp

RESTAURANT & CAFE · 奈良県 · PICKED 2026.10.28

つながる駄菓子屋 ふくふく堂飲食店・カフェのホームページデザイン参考 — イラスト・パステルカラー・中央1カラム

つながる駄菓子屋 ふくふく堂のトップページ（PC）
PC（1440px）
つながる駄菓子屋 ふくふく堂のトップページ（スマホ）
スマホ（375px）
出典：fukufuku.nara.jp ↗確認日 2026.10.28
つながる駄菓子屋 ふくふく堂飲食店・カフェ · 奈良県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

手描きのイラストと「ふく札」の仕組みで、子どもが一人で来られる駄菓子屋の過ごし方を伝える。

奈良市大宮町の駄菓子屋のサイト。食事・宿題・遊びができる場所として、子どもたちが勉強したり遊んだりする手描きのイラストをファーストビューにしている。PCでは画面中央にスマホ幅の縦長の本文を置き、左に店名とイラスト、右に枠で囲んだメニューを固定している。「未来につながる3つの特長」「すごしかた」「夜の学童について」「ふくふく定食」の料金、店の場所（地図・営業時間・住所）、お知らせ、よくある質問の順に並ぶ。

  1. 01PCでは本文をスマホ幅の1カラムで中央に置き、左に店名とイラスト、右に角丸の枠のメニューを固定している
  2. 02のれんの店名と、勉強・遊びをする子どもたちの手描きのイラストでファーストビューを作っている
  3. 03子ども・おとな＋子ども・おとなの3種類の定食の料金を、枠で囲んだ一覧で示している

CONVERSION集客の工夫

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

来店のルールを子どもにもわかる言葉で書く

「すごしかた」で、平日11:30から開いていること、来るだけならお金も予約もいらないこと、食事や駄菓子は「ふく札」で交換することを、子ども向けの短い文で説明している。初めての親子が来る前の不安を減らせる。

料金を家族の組み合わせごとに出す

ふくふく定食を「こども」「おとな＋こども1名」「おとな」の3つに分け、それぞれ税込の金額と追加料金を示している。家族で行くときの支払いの目安が事前にわかる。

場所を学校・駅からの距離で示す

住所に加えて「近鉄新大宮駅から徒歩約5分」「奈良市立大宮小学校から徒歩約２分」と書いている。子どもが学校帰りに寄れることが、保護者に伝わる。

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

COLOR配色

#F4FEEA背景 · ライトグリーン
#FFF0F0セクション背景 · ライトピンク
#FFADAEお知らせの背景 · ピンク
#FFC052特長01の差し色 · オレンジ
#B6C5FF特長02の差し色 · ラベンダー
#333333本文テキスト・枠線

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

TYPOGRAPHYフォント

用途
和文見出し
使用フォント
LINE Seed JP ExtraBold
無料で近いもの
LINE Seed JP
用途
和文本文
使用フォント
LINE Seed JP Regular
無料で近いもの
LINE Seed JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h216px / 8001.4016px / 800
h317px / 8001.5017px / 800
本文（p）14px / 4001.8014px / 400
ボタン15px / 7001.5015px / 700

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

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

  1. 01

    ナビ

    PCでは右に角丸の枠のメニュー（HOME・ふくふく堂とは？・すごしかた・メニュー・ふくふく堂の場所・お知らせ・よくある質問）と「おとな｜こども」、Instagram・LINEのアイコンを固定。左に店名と子どもたちのイラスト。

    ヘッダー／左固定サイドナビ型
  2. 02

    ファーストビュー

    のれんに「つながる駄菓子屋 ふくふく堂」、その下に勉強・遊びをする子どもたちの手描きのイラスト。

    ファーストビュー／全面写真＋コピー型
  3. 03

    ふくふく堂とは？

    中央揃えの文章の両側に子どものイラスト。

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

    未来につながる3つの特長

    01〜03の番号と写真、色違いの枠で見出しと説明。

    強み・選ばれる理由／番号つき3〜4項目型
  5. 05

    すごしかた

    「ふくふく堂のルールを守ろう」「食事や駄菓子は、ふく札で交換」「学び、気づきをもって帰ろう」の3項目。

    流れ／ステップ型
  6. 06

    夜の学童について

    開催日時の説明と動画、「申し込みはこちら」のボタン。

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

    ふくふく堂のメニュー

    定食の写真の下に、こども・おとな＋こども1名・おとなの料金を枠で囲んで並べる。

    料金／表組み型
  8. 08

    ふくふく堂の場所

    緑の地に、駅の方面と大宮小学校・店の位置を描いた地図。下に営業時間・夜の学童の時間・定休日・住所・電話と「google mapをみる」。

    アクセス／地図＋時間表型
  9. 09

    お知らせ

    ピンクの背景にカードを横にスライド。下に「もっと見る」。

    お知らせ／お知らせ一覧型
  10. 10
  11. 11

    フッター

    子どもたちのイラストと店名、ナビ。

    フッター／店舗情報＋ナビ型
つながる駄菓子屋 ふくふく堂の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
つながる駄菓子屋 ふくふく堂のファーストビュー（PC）PC
つながる駄菓子屋 ふくふく堂のファーストビュー（スマホ）SP
04未来につながる3つの特長強み・選ばれる理由／番号つき3〜4項目型
つながる駄菓子屋 ふくふく堂の未来につながる3つの特長（スマホ）SP
07ふくふく堂のメニュー料金／表組み型
つながる駄菓子屋 ふくふく堂のふくふく堂のメニュー（PC）PC
つながる駄菓子屋 ふくふく堂のふくふく堂のメニュー（スマホ）SP
08ふくふく堂の場所アクセス／地図＋時間表型
つながる駄菓子屋 ふくふく堂のふくふく堂の場所（スマホ）SP
09お知らせお知らせ／お知らせ一覧型
つながる駄菓子屋 ふくふく堂のお知らせ（PC）PC
つながる駄菓子屋 ふくふく堂のお知らせ（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01来店のルール（予約不要・営業時間・支払い方法）を、子どもにも読める短い文で書く
  2. 02料金は家族の組み合わせごとに分けて、追加料金まで示す
  3. 03住所に、駅と近くの学校からの徒歩時間を添える
  4. 04PCでもスマホ幅の1カラムを中央に置き、左右の余白にロゴとメニューを固定する

FAQよくある質問

ふくふく堂のサイトで使われているフォントは？

見出しは LINE Seed JP の ExtraBold、本文は LINE Seed JP の Regular です。LINE Seed JP は無料で使えるフォントです。

PCで本文を細い1カラムにしているのはなぜですか？

スマホと同じ縦長の並びをPCでもそのまま見せ、左右の余白に店名・イラストとメニューを固定しています。スマホで見る人が多いサイトでも、PCで見たときに余白がさびしくならない作りです。

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

子ども食堂、学童、駄菓子屋、地域の居場所づくりのスペースなど、子どもと保護者の両方に向けて「どう過ごす場所か」を説明したいサイトに応用できます。

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

MOREほかの飲食店・カフェの参考サイト

飲食店・カフェのすべてを見る5件
webcan design --sitemap fukufuku.nara.jp

つながる駄菓子屋 ふくふく堂のサイトマップ

  • 4ページ
  • トップページ/
  • おとな/top/
  • こども/top_kids/
  • 法人情報/corp/

外部リンクInstagram・LINE

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

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の飲食店サイトを。

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

無料相談はこちら