ワイヤーDLはちとワルツ
「どこの・何の店か」を3行のラベルで伝え、あとはイラストと縦書きで世界観に浸らせる。
webcan analyze yamauchinotori.jp
FOOD & FARM · 熊本県 · PICKED 2026.10.17
やまうちの鶏食品・菓子・農業のホームページデザイン参考 — 通販・明朝体・イラスト
出典：yamauchinotori.jp ↗確認日 2026.10.17
EDITOR'S NOTE編集部の視点
産地の景色・ブランド・レシピの順に見せて、「この鶏を食べてみたい」まで運ぶ。
熊本県山鹿市の会社が運営する、鶏肉の通販サイト。ファーストビューは料理と草原の写真を丸く切り抜き、明朝体の短いコピーと手描き風のイラストを添えている。2つのブランド鶏の紹介、価格つきの商品一覧、レシピ、地元の話題と続き、生産者のサイトらしいやわらかさと通販の使いやすさを両立させている。
- 01写真を丸みのある形で切り抜き、明朝体のコピーとイラストを添えたやわらかいファーストビュー
- 022つのブランドを、ロゴ・写真・説明をそろえた同じ型で並べて比べやすくしている
- 03商品一覧はブランドごとに分け、価格と在庫切れの表示を付けている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
産地を地図で見せる
「Made in Kumamoto」として九州の地図とともに産地を示し、2つのブランド鶏を紹介している。どこで育った鶏かが分かると、価格以外の理由で選んでもらいやすい。
商品一覧に価格と在庫を出す
ブランドごとの商品一覧に、価格と「SOLD OUT」の表示を付けている。トップページから迷わず購入に進め、品切れの商品で期待を裏切ることもない。
レシピで食べ方を見せる
「きょう、鶏でなにをつくる？」としてレシピをカルーセルで並べている。食べ方の具体例があると、買ったあとの場面を想像でき、購入やリピートの後押しになる。
チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F2F2EB背景 · オフホワイト
#E0DAC2セクション背景 · ベージュ
#3E3B30本文テキスト
#E59800差し色（英字ラベル・イラスト） · オレンジ
#AA062Aブランド色（熊本あか鶏） · レッド
#73871Cブランド色（九州うまかハーブ鶏） · グリーン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- 天明朝 アンティーク（Adobe Fonts）
- 無料で近いもの
- Zen Old Mincho
- 用途
- 英字（ナビの小見出し・ボタン）
- 使用フォント
- Poppins
- 無料で近いもの
- Poppins
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 30px / 500 | 1.70 | 22px / 500 |
| h3 | 18px / 500 | 1.70 | 18px / 500 |
| 本文（p） | 15px / 500 | 1.70 | 14px / 500 |
| ボタン | 24px / 400 | 1.20 | 24px / 400 |
実測値（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よくある質問
やまうちの鶏のサイトで使われているフォントは？
和文の見出しと本文は Adobe Fonts の天明朝アンティーク、英字は Poppins です。無料で近づけるなら、和文は Zen Old Mincho、英字は Poppins が使えます。
生産者の通販サイトで、レシピは必要ですか？
必須ではありませんが、効果は大きいです。食べ方が具体的に分かると購入の不安が減り、季節ごとにレシピを足すことで再訪やリピート購入のきっかけにもなります。
どんな業種の参考になりますか？
精肉・青果・米・お茶などの生産者や、地域の食品メーカーの通販サイトに応用できます。産地や作り手の話で選ばれたい食品全般に向いています。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はやまうちの鶏および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの食品・菓子・農業の参考サイト
ワイヤーDLFROM REFERENCE TO YOUR SITE
このテイストで、
御社の食品・農業の会社のサイトを。
「やまうちの鶏のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちら