webcan analyze fujiya1935.com

RESTAURANT & CAFE · 大阪府 · PICKED 2026.10.18

Fujiya1935飲食店・カフェのホームページデザイン参考 — レストラン・明朝体・アースカラー

出典：fujiya1935.com ↗確認日 2026.10.18

Fujiya1935飲食店・カフェ · 大阪府

サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

営業日カレンダーと「2か月先の同日分から受付」という予約のルールを、トップの1ブロックで説明する。

大阪市中央区のレストランのサイト。ファーストビューは木立の写真を背景に、白いロゴと「季節と記憶の食卓」の文字、角を丸くした店内の植栽の写真を中央に重ねている。コンセプト、料理人のメッセージ、メニュー、営業日のカレンダーつきのご予約、1935年からの4代の歴史、お知らせ、写真の帯、お問い合わせ・採用のフォームと続く。

01ナビ・見出しの英字を Cormorant Garamond、和文を明朝体にそろえ、こげ茶と生成りの2色で全体をまとめている
02写真を角の丸い枠で切り抜き、余白の多い画面に散らして配置している
031935年からの歴史を、世代ごとに切り替わる丸いパネルで見せている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー

－タップで電話できるSP・tel:リンク 0か所

－SPの追従ボタンSP・画面下に固定

✓予約・問い合わせ導線ご予約はこちら

－LINEで相談・予約LINE公式アカウント

✓営業・診療時間の明記トップページ内

予約のルールを先に説明する

ご予約の欄で、営業日のカレンダーと「毎朝10時に2ヶ月先の同日分まで受付」というルールを例つきで書き、その下に予約サイトへのボタンを置いている。予約が取りにくい店で、問い合わせを減らしながら予約まで迷わせない。

予約ボタンを常に右上に

ヘッダーの右上に「Reservation」のボタンを置き、スマホでもスクロール中に予約ボタンが画面上部に残る。読み物の多いサイトでも、予約への入口を見失わない。

問い合わせと採用を1つのフォームに

ページの最後に、種別を選べるお問い合わせ・採用情報のフォームを置いている。採用の募集の有無はこのフォームから聞いてもらう形で、窓口を1つにしている。

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

COLOR配色

#FFFFFF背景

#F5F3EFセクション背景 · 生成り

#544D37本文テキスト・カレンダー · こげ茶

#7F7A69サブの背景 · グレージュ

#C81515フォームの必須表示 · レッド

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

TYPOGRAPHYフォント

用途: 和文（見出し・本文）
使用フォント: Zen Old Mincho / YakuHanMP
無料で近いもの: Zen Old Mincho

用途: 英字（ナビ・見出し）
使用フォント: Cormorant Garamond
無料で近いもの: Cormorant Garamond

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h1	16px / 400	1.00	15.4px / 400
h2	16px / 400	1.00	15.4px / 400
h3	16px / 400	1.00	15.4px / 400
本文（p）	14px / 400	2.00	12.5px / 400
ボタン	14px / 400	1.00	13.5px / 400

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

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

01
ヘッダー
左上にナビ7項目、右上にJP/ENとReservationボタン。
ヘッダー／ロゴ＋ナビ＋1ボタン型
02
ファーストビュー
木立の写真にロゴと「季節と記憶の食卓」。中央に角丸の写真。
ファーストビュー／全面写真＋コピー型
03
concept（コンセプト）
余白に小さな写真を散らして配置。
コンセプト／写真＋メッセージ型
04
message（メッセージ）
料理人のモノクロ写真と言葉。
人・代表／代表・院長あいさつ型
05
menu（メニュー）
季節で内容が変わることと、メニューへのリンク。
コンセプト／写真＋メッセージ型
06
reservation（ご予約）
森の写真の背景に営業日カレンダーと予約のルール、予約ボタン。
イベント・キャンペーン／見学会・イベント告知型
07
history（フジヤ1935の歴史）
1935年からの4代を丸いパネルで切り替える。
強み・選ばれる理由／番号つき3〜4項目型
08
news（お知らせ）
お知らせ／お知らせ一覧型
09
写真の帯
角丸の写真を横に並べる。
事例・実績／写真グリッド型
10
contact & recruit
種別を選べるお問い合わせ・採用のフォーム。
行動喚起／電話＋Web予約の2ボタン帯型

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

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

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

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

Figmaでの使い方

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

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

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

01予約のルールと営業日を、予約ボタンのすぐそばで説明する
02予約ボタンをヘッダーに置き、スクロール中も見えるようにする
03写真は角丸で切り抜き、余白の多い画面に散らして静かな印象を出す
04店の歴史を世代ごとに区切って見せる

FAQよくある質問

Fujiya1935 のサイトで使われているフォントは？

和文は Zen Old Mincho（約物は YakuHanMP）、英字は Cormorant Garamond です。どれも無料で使えます。

予約が取りにくい店で、サイトに書いておくべきことは？

予約の受付開始のタイミングと営業日を、例を添えて書いておくことです。このサイトのように予約ボタンのすぐそばに書くと、電話での問い合わせを減らせます。

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

レストランや割烹のほか、予約制の料理教室・宿・サロンなど、予約の決まりごとを先に伝えたい業種に応用できます。

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

MOREほかの飲食店・カフェの参考サイト

ワイヤーDL

RESTAURANT & CAFE · 奈良県 · 2026.10.28

つながる駄菓子屋ふくふく堂

手描きのイラストと「ふく札」の仕組みで、子どもが一人で来られる駄菓子屋の過ごし方を伝える。

#イラスト#パステルカラー#中央1カラム#子ども向け#料金表

飲食店・カフェのすべてを見る5件

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら

Fujiya1935飲食店・カフェのホームページデザイン参考 — レストラン・明朝体・アースカラー

EDITOR'S NOTE編集部の視点