# 石川商店｜ECのWebデザイン参考

> お米屋さんの通販なのに、読みものみたいに眺められる。米と雑穀の専門店・石川商店のオンラインストアは、生成りの紙の地と手描きの農家の線画で、商品一覧とレシピ・読みものを同じ温度でつないでいる。

- URL: https://www.gokokumai.co.jp/
- 解説ページ: https://katapick.com/sites/gokokumai
- カテゴリ: EC / 地域: 国内（JP）/ 業種: 米・雑穀の専門店（食品EC）
- テイスト: ライト、写真主体、イラスト、カルーセル、角丸、ロングページ
- 公開・リニューアル: 2026-02 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 40 時間）

## 編集部のひとこと（Iris）
焦げ茶と金色の組み合わせ、炊きたてのごはんの横に置いた醤油とみりんみたいで、見てるだけでおなかがすく感じがすき。料理写真の色とUIの色が、同じ食卓に並んでるのがいい。

## デザインの見どころ
- FV右に季節特集のサムネ付きリストを常設。写真を眺めるついでに、今月の売り場へ入れる
- 生成りの地に、手描きの線画をぽつぽつ。食品ECの硬さを、田んぼの気配でやわらげる
- ロゴの面とカートボタンだけを金色に。買う場所の目印が、稲穂の色でまとまっている

## 配色
- #3b312b Roasted Brown（テキスト / 告知バー）
- #d3a83c Golden Grain（ロゴ面 / カート / アクセント）
- #f0eee9 Rice Paper（セクション背景）
- #ffffff White（背景 / カード）
- #696159 Husk Gray（サブテキスト）

## フォント
- 見出し・本文: DNP 秀英角ゴシック銀（代替: Zen Kaku Gothic New）
- 数字・英字: DIN 2014（代替: Barlow）
- 補助テキスト: ヒラギノ角ゴ Pro W3（代替: Noto Sans JP）

## よくある質問
### 石川商店のサイトで使われているフォントは？
見出し・本文に DNP 秀英角ゴシック銀、数字に DIN 2014 が使われています（Adobe Fonts）。無料で近づけるなら Zen Kaku Gothic New と Barlow の組み合わせがおすすめです。

### 食品ECのトップページはどんな構成にするといい？
石川商店は、季節特集のメインビジュアル → 人気カテゴリー → ブランドの紹介 → おすすめ商品・ランキング・レビュー → 読みもの・レシピ → 配送・返品・支払いの案内という順で、買う情報と読む情報を交互に並べています。

### どんな業種の参考になる？
米・お茶・調味料などの食品EC、産地直送の通販、老舗の専門店のオンラインストアなど、素朴さと買いやすさを両立したいD2Cサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/gokokumai からダウンロードできます。
出典: Katapick（https://katapick.com）