やまうちの鶏

1. 01

   ヘッダー

   左に明朝のロゴ「やまうちの鶏」、中央に熊本あか鶏／九州うまかハーブ鶏／商品一覧／鶏レシピ／山鹿だよりの和文ナビ（下にオレンジの英字）、右に MY PAGE と CART。

2. 02

   ヒーロー

   不定形の楕円で切り抜いた料理写真と草原の写真、オレンジの人物と家のイラストを配置し、明朝のコピー「食べることは暮らすこと。日々のごはんを鶏でおいしく、楽しく。」を添える。下端はベージュの波形。

3. 03

   Made in Kumamoto

   九州の地図イラストと導入文の下に、赤の「熊本あか鶏」と緑の「九州うまかハーブ鶏」を、ロゴパネルと写真2枚のタイルで並べ、それぞれ「もっと見る」ボタンへつなぐ。

4. 04

   Lineup

   「直送！新鮮！おいしい鶏を熊本・山鹿からお届けします。」と配送車のイラスト。ブランドごとに円形ロゴ→商品カード3枚のカルーセル（重量バッジ・価格・ブランド色のラベル）→「商品をすべて見る」を繰り返す。

5. 05

   Recipe

   吹き出し型の「きょう、鶏でなにつくる？」と料理人のイラスト。中央の枠に大きな料理写真、左右に前後の料理がのぞくカルーセルでレシピを紹介する。

6. 06

   山鹿だより

   縦書きの見出し「山鹿だより」と、楕円で切り抜いた渓流や鶏の写真、日付付きの記事一覧、「記事をすべて見る」ボタン。

7. 07

   フッター

   ベージュの地に白い角丸カードで「やまうちフード」のロゴと所在地、ボタンを置き、右にサイト内リンクとショッピングガイド系のリンクを2列で並べる。

• Shopify のテーマで構築。カート追加時に「カートにアイテムが追加されました」のモーダルが出る作りで、ページを離れずに買い物を続けられる
• 商品カードとレシピはドットインジケーター付きのカルーセル。Swiper などのスライダーライブラリで再現可能
• 写真の不定形マスクは border-radius のパーセント指定か SVG の clipPath、波形の区切りは SVG の path を背景に敷くことで再現できる

スクロールのコマ撮り100–3000ms

検出された技術:ShopifyGoogle FontsAdobe Fonts

• 01背景は #f2f2eb の生成り、区切りは #e0dac2 の波形にし、純白を使わず食卓の温度に寄せる
• 02ブランドごとにカラーを1色決め（赤 #aa062a／緑 #73871c）、ロゴ・ラベル・ボタンの矢印まで同じ色で通す
• 03写真は楕円や不定形の角丸で切り抜き、単色のフラットなイラストを余白に散らす
• 04ナビは和文を主役に、英字を小さなラベルとして下に添える2段組にする

1---
2title: "やまうちの鶏 再現用デザイン仕様書"
3source: https://yamauchinotori.jp/
4katapick: https://katapick.com/sites/yamauchinotori
5category: ブランド
6region: 国内 (JP)
7tags: [ライト, 写真主体, イラスト, セリフ体, カルーセル, 余白]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# やまうちの鶏 — 再現用デザイン仕様書
17 
18> 精肉ECなのに、まず食卓の話から始まる。熊本・山鹿のブランド鶏「やまうちの鶏」の公式サイトは、料理写真と素朴なイラストをFVに置き、2つの鶏をブランド色で塗り分けて、精肉を“選ぶ楽しさ”に変えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22