石川商店

1. 01

   告知バー・ヘッダー

   茶色の送料無料告知バー、金色のロゴパネル、フリーダイヤル、キーワード検索、お気に入り・ログイン・カート、グローバルナビを2段で配置。

2. 02

   メインビジュアル

   季節の料理写真に縦書きのコピー（「食欲の秋」など）を重ね、右に新米特集・もちきびおはぎなどの特集をサムネ付きの縦リストで並べる。

3. 03

   重要なお知らせ・人気のカテゴリー

   角丸の告知バーと、写真にピル型ラベルを載せたカテゴリカードの横スクロール。

4. 04

   石川商店について

   収穫風景の写真に、縦書きのステートメント「石川商店はつくり手と食卓を繋ぐ米と雑穀の専門店です」と紹介文を重ねる。

5. 05

   おすすめ商品・人気ランキング・お客様の声

   ベージュの面に左サイドのカテゴリナビを置き、商品カード3列、タブで切り替えるランキングのカルーセル、レビューのカルーセルを続ける。

6. 06

   ピックアップ・読みもの・レシピ

   番号付きのピックアップ記事、注目の読みものと「よく読まれている記事」、所要時間付きの雑穀レシピカードを並べる。

7. 07

   お知らせ・バナー

   角丸カードのお知らせ一覧と田園の写真、HACCP・送料無料・メディア掲載などのバナーカルーセル。

8. 08

   ご利用ガイド・フッター

   01〜03の番号付きで送料・返品・支払い方法を案内し、フッターへ。

• 背景に紙のような細かいテクスチャを敷き、白一色の画面を避けている
• メインビジュアルは右の特集リストと連動するスライダーと思われる（Swiper の thumbs 機能で再現可能）。SPでは下にサムネ列とプログレスバーを置く
• 人気カテゴリー・ランキング・レシピは Swiper の横スクロールカルーセルで、端のカードを見切れさせて続きを示す
• 左下に閉じられるWEB限定価格のフローティングバナーを表示。スタックに Lottie があり、線画などの小さなアニメーションに使われていると思われる

スクロールのコマ撮り250–5500ms

検出された技術:SwiperWordPressGoogle FontsAdobe FontsLottie

• 01文字色は黒ではなく焦げ茶 #3b312b、アクセントは金色 #d3a83c の1色に絞る
• 02地は白に紙のテクスチャを薄く重ね、セクション背景に #f0eee9 の生成りを使う
• 03見出しは秀英角ゴシック銀（代替 Zen Kaku Gothic New）、価格や日付の数字は DIN 系（代替 Barlow）に分ける
• 04手描きの線画イラストをセクションの境目に置き、写真が続くページに抜けを作る

1---
2title: "石川商店 再現用デザイン仕様書"
3source: https://www.gokokumai.co.jp/
4katapick: https://katapick.com/sites/gokokumai
5category: EC
6region: 国内 (JP)
7tags: [ライト, 写真主体, イラスト, カルーセル, 角丸, ロングページ]
8launched: 2026-02
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# 石川商店 — 再現用デザイン仕様書
17 
18> お米屋さんの通販なのに、読みものみたいに眺められる。米と雑穀の専門店・石川商店のオンラインストアは、生成りの紙の地と手描きの農家の線画で、商品一覧とレシピ・読みものを同じ温度でつないでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22