ワイヤーDLやまうちの鶏
産地の景色・ブランド・レシピの順に見せて、「この鶏を食べてみたい」まで運ぶ。
webcan analyze hachi-to-waltz.com
FOOD & FARM · 宮城県 · PICKED 2026.10.17
はちとワルツ食品・菓子・農業のホームページデザイン参考 — 菓子店・縦書き・イラスト
出典：hachi-to-waltz.com ↗確認日 2026.10.17
EDITOR'S NOTE編集部の視点
「どこの・何の店か」を3行のラベルで伝え、あとはイラストと縦書きで世界観に浸らせる。
宮城・仙台の秋保温泉にあるカステラサンドの店のサイト。ファーストビューは商品の写真を、金色の輪をつなげた線の飾りでアーチ状に縁取り、縦書きの店名と「宮城・仙台の奥座敷／秋保温泉にある／カステラサンドの店」という3行のラベルを添えている。本文は細い縦長の枠の中に、縦書きの見出しとバレリーナのイラストを組み合わせて、包装紙のような世界観で統一している。
- 01ファーストビューの3行のラベルで、場所（秋保温泉）と業態（カステラサンドの店）を最初に伝えている
- 02金色の輪をつなげた線の飾りで、写真や本文の枠を縁取り、パッケージと同じ世界観をつくっている
- 03見出しを縦書きの明朝体にし、包装紙と同じバレリーナのイラストを本文にも使っている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
店の場所と業態をファーストビューで言い切る
雰囲気を重視したデザインでも、ファーストビューに「秋保温泉にある」「カステラサンドの店」という具体的な言葉を置いている。検索から来た人が、自分の探していた店かどうかをすぐ判断できる。
来店に必要な情報をまとめる
店舗の写真、住所、Google マップへのボタン、営業時間・定休日・駐車場の有無を、アクセスのセクションにまとめている。観光地の店では、来店前に確認したい情報を一か所にそろえることが大切になる。
スマホではお知らせを下に固定する
スマホでは画面下に「グランドオープンのお知らせ」のバナーを固定している。営業の変更やイベントなど、来店前に知ってほしい情報を確実に目に入れられる。
チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFAF2背景 · クリーム
#B7983B飾り線・お知らせの背景 · ゴールド
#231815本文テキスト
#FFFFFFカード背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・ボタン
- 使用フォント
- Noto Serif JP
- 無料で近いもの
- Noto Serif JP
- 用途
- 和文本文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字（ナビ）
- 使用フォント
- Roboto
- 無料で近いもの
- Roboto
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 14px / 500 | 1.00 | 12.4px / 500 |
| h2 | 15px / 400 | 1.00 | 15px / 400 |
| h3 | 24px / 500 | 1.60 | 24px / 500 |
| 本文（p） | 14px / 400 | 1.75 | 14px / 400 |
| ボタン | 16px / 500 | 1.00 | 14.3px / 500 |
実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01パッケージや包装紙のデザイン（線の飾り・イラスト）を、サイトの飾りにもそのまま使う
- 02雰囲気重視でも、ファーストビューには「どこの・何の店か」を具体的な言葉で置く
- 03アクセスには住所・地図・営業時間・定休日・駐車場をまとめる
- 04見出しを縦書きにすると、和菓子や旅館のような落ち着いた印象になる
FAQよくある質問
はちとワルツのサイトで使われているフォントは？
見出しとボタンは Noto Serif JP、本文は Noto Sans JP、英字のナビは Roboto です。どれも Google Fonts で無料で使えます。
小さなお菓子屋でも、こうしたデザインはできますか？
できます。新しく何かを描かなくても、すでにある包装紙・ロゴ・ショップカードの模様や色をサイトに使うだけで、店らしさが伝わるデザインになります。
どんな業種の参考になりますか？
和洋菓子店・パン屋・カフェのほか、観光地の土産物店や旅館など、パッケージや空間の世界観で選ばれる業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利ははちとワルツおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの食品・菓子・農業の参考サイト
ワイヤーDLFROM REFERENCE TO YOUR SITE
このテイストで、
御社の食品・農業の会社のサイトを。
「はちとワルツのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちら