WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 飲食店・カフェ
  4. 珈琲 占野

webcan analyze coffee-shimeno.com

RESTAURANT & CAFE · 長野県 · PICKED 2026.10.17

珈琲 占野飲食店・カフェのホームページデザイン参考 — 自家焙煎・モノトーン・英文コピー

珈琲 占野のトップページ（PC）
PC（1440px）
珈琲 占野のトップページ（スマホ）
スマホ（375px）
出典：coffee-shimeno.com ↗確認日 2026.10.17
珈琲 占野飲食店・カフェ · 長野県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

北信州の空と店内の写真を画面いっぱいに見せ、英文と和文の短い文章で、土地と季節の珈琲を伝える。

長野県信濃町の黒姫で珈琲を焙煎する店のサイト。ファーストビューは山の夕焼けや丸窓のある店内の写真を画面いっぱいに使い、下に「Coffee Shimeno is located in Kurohime, northern Shinshu.」などの短い英文を4つに分けて並べている。オンラインストアの商品、黒姫という土地の紹介、四季、記録と商品、予約制の珈琲と甘味の案内と続き、グレーと黒の背景に写真を置いて、静かな雰囲気にまとめている。

  1. 01写真を画面いっぱいに使い、下に短い英文を4つの段に分けて並べたファーストビュー
  2. 02「01/ Online store」のように番号付きの英語の見出しと、「（ 珈琲と甘味 ）」のような括弧付きの和文の見出しを組み合わせている
  3. 03薄いグレーと黒の背景を切り替え、豆や店内の写真を主役にしている

CONVERSION集客の工夫

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

商品に価格を添えて一覧で見せる

オンラインストアの商品を、写真の上に商品名と「Price:1,300 yen」のような価格を添えて並べている。トップページから価格を見て、そのまま購入に進める。

予約方法へのリンクを置く

「Serve coffee like traditional tea ceremony」として、季節の甘味と珈琲を出す予約制の場を紹介し、「Reservation」のリンクを置いている。ヘッダーにも予約方法へのリンクがあり、来店の前に予約の仕方を確かめられる。

土地と季節の話で店を選ぶ理由をつくる

黒姫の森と湖に囲まれた場所であることや、季節によって珈琲が変わることを、英文と和文の両方で伝えている。豆の種類や味の説明ではなく、場所の空気で選んでもらう作りになっている。

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

COLOR配色

#DFDFDF背景 · ライトグレー
#191919濃色セクション · チャコール
#121212フッター・濃色背景 · ブラック
#F3F3F3セクション背景 · オフホワイト
#000000本文テキスト

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

TYPOGRAPHYフォント

用途
英字（見出し・本文・ナビ）
使用フォント
PP Neue Montreal
無料で近いもの
Inter
用途
和文
使用フォント
こぶりなゴシック（指定）
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h211px / 4001.4511px / 400
h316.5px / 4001.4013px / 400
本文（p）14px / 4001.3012px / 400
ボタン15px / 4001.2015px / 400

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

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

  1. 01

    ヘッダー

    左にロゴ、About Us・Record・Products・Online Store・Cartを横に並べる。

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

    ファーストビュー

    山の夕焼けや店内の写真を画面いっぱいに使い、下に短い英文を4つ並べる。

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

    01/ Online store（珈琲と甘味）

    英文の見出しと和文・英文の説明、商品の写真に名前と価格。

    事例・実績／写真グリッド型
  4. 04

    02/ Coffee Shimeno（珈琲 占野）

    黒姫という土地の紹介を英文と和文で。

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

    03/ Four Seasons

    森と湖に囲まれた土地の四季を、文章と大きな写真で。

    コンセプト／写真＋メッセージ型
  6. 06

    04/ Records and Products（珈琲ノ記録と道具たち）

    予約の場・展示・コラボレーションなどの記録を写真のカードで並べる。

    事例・実績／写真グリッド型
  7. 07

    05/ Reservation（珈琲ノ席）

    黒の背景に、予約制の珈琲と甘味の場の紹介と予約へのリンク。

    イベント・キャンペーン／見学会・イベント告知型
  8. 08

    店内の写真

    窓から田んぼと山の夕焼けが見える店内の写真。

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

    フッター

    住所、サイト内のリンク、SNS、メールアドレス。

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01店のある土地の風景を、商品より先にファーストビューで見せる
  2. 02見出しに番号を振り、英文と和文を並べて、静かで整った印象にする
  3. 03背景はグレーと黒の2つに絞り、写真の色を引き立てる
  4. 04予約制の店は、予約方法のページへのリンクをヘッダーと本文の両方に置く

FAQよくある質問

珈琲 占野のサイトで使われているフォントは？

英字は PP Neue Montreal、和文はこぶりなゴシックを指定しています。無料で近づけるなら、英字は Inter、和文は Noto Sans JP が使えます。

カフェや焙煎所のサイトで、英文を多く使っても大丈夫ですか？

雰囲気づくりには効果的ですが、このサイトのように和文の説明も並べておくと、内容が伝わらない心配がありません。商品名や価格、予約方法など、必要な情報は読みやすく出しておくことが大切です。

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

自家焙煎の珈琲店やカフェのほか、和菓子店、ギャラリーを併設したお店、地方の宿など、土地の風景や季節感で選ばれたい店に応用できます。

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

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の飲食店サイトを。

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

無料相談はこちら