WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 食品・菓子・農業
  4. 石川商店

webcan analyze www.gokokumai.co.jp

FOOD & FARM · 千葉県 · PICKED 2026.10.23

石川商店食品・菓子・農業のホームページデザイン参考 — ネットショップ・和紙のような背景・ランキング

石川商店のトップページ（PC）
PC（1440px）
石川商店のトップページ（スマホ）
スマホ（375px）
出典：www.gokokumai.co.jp ↗確認日 2026.10.22
石川商店食品・菓子・農業 · 千葉県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

商品・ランキング・レビュー・読みもの・レシピを1ページに重ね、「選ぶ理由」を何層も用意する。

千葉県君津市のお米・雑穀の販売店の通販サイト。ファーストビューは、上の帯に送料無料の条件、ヘッダーにフリーダイヤル・検索窓・お気に入り・ログイン・カートを並べ、季節の特集のスライドの右に8つの特集を写真つきの一覧で並べている。トップはおすすめ商品・人気ランキング・お客様の声・ピックアップ・読みもの・雑穀レシピと続き、最後に送料・返品・支払い方法を3列でまとめている。

  1. 01ヘッダーに、フリーダイヤルと受付時間・キーワード検索・お気に入り・ログイン・カートを1列に並べている
  2. 02スライドの右に特集の一覧を写真つきで並べ、スライドを待たずに見たい特集を選べる
  3. 03商品カードに玄米・白米などの種類のマークと生産者の顔写真、星の評価と件数を載せている

CONVERSION集客の工夫

✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 3か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

送料無料の条件を一番上の帯で見せる

ページの最上部の帯に「税込7,000円以上のご購入で送料、代引き手数料が無料」と出している。ページの最後にも送料・返品・支払い方法を3列でまとめ、注文前の不安に答えている。

ランキングとレビューで選びやすくする

人気ランキングを白米・玄米・雑穀などのタブで切り替えられるようにし、お客様の声では平均の評価（4.87）とレビュー件数を見出しの横に出している。初めての人が、ほかの人の評価を手がかりに選べる。

読みものとレシピで食べ方まで伝える

「ピックアップ3選」「注目の読みもの」「人気の雑穀レシピ」を並べ、レシピには調理時間を添えている。雑穀のように食べ方がわからないと買いにくい商品でも、使い方から興味を持ってもらえる。

チェック項目は 2026.10.22 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#F0EEE9セクション背景 · 生成り
#D3A83Cロゴ・カートボタン · 山吹
#3B312B本文テキスト・上の帯 · こげ茶
#696159補助テキスト
#3D76B4リンク

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
秀英角ゴシック銀（Adobe Fonts）
無料で近いもの
Zen Kaku Gothic New
用途
英数字
使用フォント
DIN 2014（Adobe Fonts）
無料で近いもの
Barlow
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h111px / 7001.40—
h243.2px / 7001.2028px / 700
h327.8px / 7001.4018px / 700
本文（p）15.4px / 6001.7013px / 600
ボタン17.5px / 6001.0013px / 600

実測値（PC 1440px・SP 375px、2026.10.22 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01
  2. 02

    ヘッダー

    フリーダイヤルと受付時間・キーワード検索・お気に入り・ログイン・カート。下の段にナビとメルマガ登録・カタログ請求。

    ヘッダー／電話番号＋予約ボタン常設型
  3. 03

    ファーストビュー

    季節の特集のスライドと、右に8つの特集の写真つき一覧。

    ファーストビュー／全面写真＋コピー型
  4. 04
  5. 05

    人気のカテゴリー

    おすすめ・白米・玄米・雑穀・体にやさしい食品などを写真のカードで横に並べる。

    記事・メディア／カテゴリナビ＋検索型
  6. 06

    石川商店について

    稲刈りの写真に縦書きのコピー。

    コンセプト／写真＋メッセージ型
  7. 07

    おすすめ商品

    左に商品・カテゴリから探すメニュー。商品カードに種類のマーク・生産者の写真・星の評価。

    メニュー・サービス／アイコン／写真グリッド型
  8. 08

    人気ランキング

    白米・玄米・雑穀などのタブで切り替え。

    記事・メディア／人気記事ランキング型
  9. 09

    お客様の声

    平均の評価とレビュー件数を見出しの横に。

    お客様の声／カード型
  10. 10
  11. 11

    注目の読みもの

    右に「よく読まれている記事」。

    記事・メディア／記事カードグリッド型
  12. 12

    人気の雑穀レシピ

    調理時間つき。

    記事・メディア／記事カードグリッド型
  13. 13

    石川商店からのお知らせ

    お知らせ／お知らせ一覧型
  14. 14

    お米HACCP・送料無料・メディア掲載・雑穀レシピのバナー

    イベント・キャンペーン／特集バナー並び型
  15. 15

    送料・返品・お支払い方法

    流れ／ステップ型
  16. 16

    フッター

    サイトマップ・メールマガジン登録・公式SNS・住所・フリーダイヤル・受付時間。

    フッター／店舗情報＋ナビ型
石川商店の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ヘッダーヘッダー／電話番号＋予約ボタン常設型
石川商店のヘッダー（PC）PC
石川商店のヘッダー（スマホ）SP
03ファーストビューファーストビュー／全面写真＋コピー型
石川商店のファーストビュー（PC）PC
石川商店のファーストビュー（スマホ）SP
05人気のカテゴリー記事・メディア／カテゴリナビ＋検索型
石川商店の人気のカテゴリー（PC）PC
石川商店の人気のカテゴリー（スマホ）SP
07おすすめ商品メニュー・サービス／アイコン／写真グリッド型
石川商店のおすすめ商品（PC）PC
石川商店のおすすめ商品（スマホ）SP
15送料・返品・お支払い方法流れ／ステップ型
石川商店の送料・返品・お支払い方法（PC）PC
石川商店の送料・返品・お支払い方法（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.22 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01送料無料の条件など、買う前に気になることを最上部の帯で先に答える
  2. 02スライドの横に特集の一覧を並べ、スライドを待たずに選べるようにする
  3. 03商品カードに種類のマーク・生産者の顔・評価の件数を入れ、比べやすくする
  4. 04読みものとレシピで、商品の使い方や背景まで伝える

FAQよくある質問

石川商店のサイトで使われているフォントは？

和文は Adobe Fonts の秀英角ゴシック銀、英数字は DIN 2014 です。無料で近づけるなら、和文に Zen Kaku Gothic New、英数字に Barlow が使えます。

トップに載せる内容が多すぎて、読みにくくなりませんか？

このサイトは、商品・ランキング・レビューの部分を生成り色の背景でまとめ、読みもの・レシピの部分を白い背景に切り替えています。背景色で「買う」と「読む」の区切りを見せると、情報が多くても迷いにくくなります。

どんな業種の参考になりますか？

米・雑穀のほか、お茶・調味料・干物など、産地や生産者で選ばれる食品の通販サイトや、地域の特産品のネットショップに応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は石川商店および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの食品・菓子・農業の参考サイト

食品・菓子・農業のすべてを見る5件
webcan design --sitemap www.gokokumai.co.jp

石川商店のサイトマップ

  • 16ページ
  • 1ページ内セクション
  • トップページ/
    • ページトップへ/#pagetopページ内
  • ピックアップ/wp/pickup/
  • 雑穀レシピ/wp/recipe/
  • 読みもの/wp/blog/
  • 石川商店について/wp/about/
    • 会社情報/wp/about/company/
    • 私たちのこだわり/wp/about/our-commitment/
    • 採用情報/wp/about/recruit/
  • メルマガ登録/wp/mailmagazine/
  • カタログ請求/wp/catalog/
  • お問い合わせ/wp/contact/
  • 業務店さま向け/wp/business_contact/
  • よくあるご質問/wp/faq/
  • ご利用ガイド/wp/guide/
  • 取扱店一覧/wp/shop/
  • プライバシーポリシー/wp/policy/

外部リンクX（旧Twitter）・Facebook・Instagram

2026.10.27 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の食品・農業の会社のサイトを。

「石川商店のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら