ワイヤーDL信州アップルパイ研究所_Q
グレーの地に赤いりんごのイラストと大きな「Q」の円で、アップルパイ専門店の印象を一目で残す。
webcan analyze soumaya.biz
FOOD & FARM · 福島県 · PICKED 2026.10.19
お米とパックご飯の相馬屋食品・菓子・農業のホームページデザイン参考 — 米店・日めくりカレンダー・オレンジと金
出典：soumaya.biz ↗確認日 2026.10.19
EDITOR'S NOTE編集部の視点
今日の日付を入れた日めくりカレンダー風のファーストビューで、「毎日のお米」を届ける米店らしさを伝える。
福島県いわき市の米店、相馬屋のサイト。ファーストビューは日めくりカレンダー風のカードに今日の日付を表示し、ごはんにまつわる写真と一言を入れ替えて見せる。生成りの背景にオレンジと金色を合わせ、事業内容、商品紹介のカルーセル、公式LINE、お米のはなし、お知らせ、会社紹介と採用、問い合わせと続く。
- 01ファーストビューは日めくりカレンダー風のカードに今日の日付を入れ、写真と一言を入れ替えて見せる
- 02「毎日が新鮮、安心のお米をあなたの食卓に。」のコピーは、大きな縦書きで「新鮮」「安心」を金色にしている
- 03生成りの背景に、ボタンのオレンジとアクセントの金色を合わせている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 4か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問合せ / お問合せはこちら
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
購入ボタンを画面に固定する
PCは画面の右下にオレンジの「ご購入はこちら」を固定している。スマホは画面の下にホーム・お米のはなし・商品紹介・ご購入・メニューを並べたバーを固定し、どこからでも買い物へ進める。
商品カードに価格を出す
商品紹介のカルーセルでは、白米やパックご飯の写真に、ひと言の特徴・商品名・税込価格を添えている。通販の入口は、フッターのBASEと楽天市場の店舗へのボタンにまとめている。
LINE登録の理由を示す
公式LINEのセクションでは、スマホの画面の画像と一緒に、お米マイスターによる「お米診断」や新米の入荷情報が届くことを伝えている。登録すると何が得られるかを先に示している。
チェック項目は 2026.10.19 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#EFEBE5背景 · 生成り
#E94709ボタン・差し色 · オレンジ
#B49646アクセント（コピーの強調・メニュー） · 金色
#FFFFFFカード
#F7F5F2セクション背景
#2E2218本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し（コピー・ナビ）
- 使用フォント
- Shippori Antique B1
- 無料で近いもの
- Shippori Antique B1
- 用途
- 和文の見出し
- 使用フォント
- しっぽりゴシック B2
- 無料で近いもの
- Zen Kaku Gothic New
- 用途
- 英数字
- 使用フォント
- Suisse Intl
- 無料で近いもの
- Inter
- 用途
- 約物
- 使用フォント
- YakuHanJP
- 無料で近いもの
- YakuHanJP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 24px / 700 | 1.15 | 24px / 700 |
| h3 | 14px / 500 | 1.40 | 8.5px / 500 |
| 本文（p） | 16px / 500 | 1.80 | 14px / 500 |
| ボタン | 16px / 500 | 1.15 | 16px / 500 |
実測値（PC 1440px・SP 375px、2026.10.19 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.19 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01毎日食べるものを扱うなら、今日の日付を入れたカレンダー風のファーストビューで「毎日」を印象づける
- 02コピーの大事な言葉だけ色を変え、縦書きで大きく見せる
- 03購入ボタンを画面に固定し、通販の店舗への入口をフッターにまとめる
- 04LINE登録を勧めるときは、登録すると届く情報を具体的に書く
FAQよくある質問
相馬屋のサイトで使われているフォントは？
コピーやナビは Shippori Antique B1、見出しの一部はしっぽりゴシック B2、英数字は Suisse Intl、約物は YakuHanJP です。Shippori Antique B1 は Google Fonts で無料で使えます。
米店や食品の会社のサイトに、通販の入口はどう置けばよいですか？
このサイトのように、購入ボタンを画面に固定し、商品カードには価格を出しておくと、読んでいる途中でも買い物に進めます。BASEや楽天市場など外部の店舗を使う場合は、入口をまとめて示すと迷いません。
どんな業種の参考になりますか？
米店や酒店、精肉店・鮮魚店などの食品の小売店、パックご飯や加工品をつくる食品メーカーなど、毎日の食卓に届ける商品を扱う業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はお米とパックご飯の相馬屋および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの食品・菓子・農業の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の食品・農業の会社のサイトを。
「お米とパックご飯の相馬屋のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。