WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 食品・菓子・農業
  4. 信州アップルパイ研究所_Q

webcan analyze www.apple-q.jp

FOOD & FARM · 長野県 · PICKED 2026.10.27

信州アップルパイ研究所_Q食品・菓子・農業のホームページデザイン参考 — グレー×赤・アイコン・イラスト

信州アップルパイ研究所_Qのトップページ（PC）
PC（1440px）
信州アップルパイ研究所_Qのトップページ（スマホ）
スマホ（375px）
出典：www.apple-q.jp ↗確認日 2026.10.27
信州アップルパイ研究所_Q食品・菓子・農業 · 長野県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

グレーの地に赤いりんごのイラストと大きな「Q」の円で、アップルパイ専門店の印象を一目で残す。

長野県上田市のアップルパイとりんごジュースの専門店のサイト。ファーストビューは写真のスライドに白い大きな「Q」の円を重ね、上部に縦書きの店名を置いている。公式webショップへのボタンのあと、コンセプト、「なぜQのアップルパイはおいしいの？」の3つの理由、サイズ違いのパイとジュースの図、赤い背景の「どうしたらおいしく食べられるの？」、店舗情報と続く。

  1. 01グレーの背景に、赤い丸いりんごのイラストと白いアイコンを組み合わせている
  2. 02アップルパイの大きさ（12・6・3・2inch）とジュースを、箱や紙袋も含めた1枚の図で見せている
  3. 03「温めて」「冷やして」「アレンジして」の3通りの食べ方を、赤い背景にアイコンで並べている

CONVERSION集客の工夫

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

ファーストビュー直下で通販へ案内する

ファーストビューのすぐ下に「公式webショップ」の赤いボタンを置き、「急速冷凍で閉じ込めて、クール冷凍便にてお届けします」と添えている。遠方の人も、最初にお取り寄せできることが分かる。

買ったあとの食べ方まで伝える

温め方・冷凍保存・トッピングの3つを、アイコンつきで説明し、「アレンジレシピはこちら」へつないでいる。お土産やお取り寄せでも、おいしく食べてもらうための案内になっている。

店舗情報に「駐車場なし」を明記する

電話番号・営業日・住所と並べて、駐車場がないことと近くのコインパーキングの利用を書いている。来店前の不安や行き違いを減らせる。

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

COLOR配色

#DCDCDC背景 · ライトグレー
#E4004Dボタン・イラスト・帯背景 · りんごの赤
#333333本文テキスト
#FFFFFFアイコン・文字（赤背景）
#000000Qのロゴ・線

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

TYPOGRAPHYフォント

用途
英字（ナビ・見出し）
使用フォント
DIN Next LT Pro
無料で近いもの
Barlow
用途
和文
使用フォント
游ゴシック（端末のフォント）
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h116px / 4002.5012px / 400
h216px / 4002.5012px / 400
h316px / 4002.5012px / 400
本文（p）14px / 4000.0014px / 400
ボタン13.3px / 400—13.3px / 400

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

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

  1. 01

    ファーストビュー

    写真のスライドに白い大きな「Q」の円。上部中央に縦書きの店名、右上にメニューボタン、右下に「公式SNS」の赤い丸ボタン。

    ファーストビュー／全面写真＋コピー型
  2. 02

    ナビ

    ファーストビューの直下に CONCEPT・PIE & JUICE・LINE UP・RECIPE・SHOP と SNS アイコンを横に並べる。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  3. 03

    公式webショップ

    赤いボタンと、冷凍便で届ける説明。

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

    CONCEPT

    「信州りんごは好きですか？」の見出しと文章。右に縦書きの CONCEPT。

    コンセプト／写真＋メッセージ型
  5. 05

    なぜQのアップルパイはおいしいの？

    01〜03の白い丸の番号と赤いりんごのイラスト。下に「品種別の特徴はこちら」。

    強み・選ばれる理由／番号つき3〜4項目型
  6. 06

    パイとジュースのラインナップ

    箱・紙袋つきのパイとジュースの図に、サイズ別の一覧と「予約する」の丸ボタン。

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

    どうしたらおいしく食べられるの？

    赤い背景に白いアイコンで3通りの食べ方。下に「アレンジレシピはこちら」。

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

    SHOP（店舗情報）

    電話・営業日・住所・Google Map・駐車場の案内・Online shop。右に日本地図の線画。

    アクセス／地図＋時間表型
  9. 09

    フッター

    ナビ・住所・電話と「予約する」。

    フッター／店舗情報＋ナビ型
信州アップルパイ研究所_Qの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

01ファーストビューファーストビュー／全面写真＋コピー型
信州アップルパイ研究所_Qのファーストビュー（PC）PC
信州アップルパイ研究所_Qのファーストビュー（スマホ）SP
05なぜQのアップルパイはおいしいの？強み・選ばれる理由／番号つき3〜4項目型
信州アップルパイ研究所_QのなぜQのアップルパイはおいしいの？（スマホ）SP
06パイとジュースのラインナップメニュー・サービス／アイコン／写真グリッド型
信州アップルパイ研究所_Qのパイとジュースのラインナップ（PC）PC
信州アップルパイ研究所_Qのパイとジュースのラインナップ（スマホ）SP
07どうしたらおいしく食べられるの？メニュー・サービス／アイコン／写真グリッド型
信州アップルパイ研究所_Qのどうしたらおいしく食べられるの？（PC）PC
信州アップルパイ研究所_Qのどうしたらおいしく食べられるの？（スマホ）SP
08SHOP（店舗情報）アクセス／地図＋時間表型
信州アップルパイ研究所_QのSHOP（店舗情報）（PC）PC
信州アップルパイ研究所_QのSHOP（店舗情報）（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01背景色・差し色・アイコンを2〜3色に絞り、商品の色（りんごの赤）をそのままブランドの色にする
  2. 02通販があるなら、ファーストビューのすぐ下に入口を置く
  3. 03商品のサイズ展開を、写真より分かりやすい1枚の図にまとめる
  4. 04買ったあとの食べ方・保存方法をアイコンで添える

FAQよくある質問

信州アップルパイ研究所_Qのサイトで使われているフォントは？

英字は DIN Next LT Pro、和文は游ゴシックなど端末のフォントです。無料で近づけるなら、英字に Barlow、和文に Noto Sans JP が使えます。

色数を絞ると、さみしい印象になりませんか？

このサイトはグレーと赤の2色が中心ですが、赤いりんごのイラストを大きく散らし、赤い背景のセクションを1つ挟むことで単調にならないようにしています。色を増やすより、同じ色の使う面積で強弱をつけると統一感を保てます。

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

洋菓子店やパン屋、特産品を使った加工品のメーカーなど、看板商品が1つにはっきり決まっていて、通販と店頭の両方で売っている事業者に応用できます。

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

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

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

信州アップルパイ研究所_Qのサイトマップ

  • 3ページ
  • 3ページ内セクション
  • トップページ/
    • CONCEPT コンセプト/#conceptページ内
    • PIE & JUICE パイとジュース/#pie_juiceページ内
    • SHOP 店舗情報/#shopページ内
  • LINE UP 商品一覧/lineup/
  • RECIPE アレンジレシピ/recipe/

外部リンクInstagram・Facebook

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

FROM REFERENCE TO YOUR SITE

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

「信州アップルパイ研究所_Qのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら