webcan analyze unagi-shikaroku.jp

RESTAURANT & CAFE · 和歌山県 · PICKED 2026.10.24

うなぎ料理鹿六飲食店・カフェのホームページデザイン参考 — ダークネイビー・明朝体・縦書き

出典：unagi-shikaroku.jp ↗確認日 2026.10.23

うなぎ料理鹿六飲食店・カフェ · 和歌山県

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

EDITOR'S NOTE編集部の視点

紺に近い黒の背景と縦書きの明朝体で、老舗のうなぎ屋の落ち着きをそのまま画面にする。

和歌山県新宮市のうなぎ料理専門店のサイト（新宮店・本宮店の2店舗）。ファーストビューは店の映像に「時の流れに漂う香り」のコピーを重ね、左下にお知らせを1件出している。紺に近い黒の背景で、鹿六について・こだわり・お品書き・歴史・店舗案内・観光ルートと続き、最後に2店舗の住所・電話・営業時間・定休日を並べている。

01ページのほぼ全体を紺に近い黒（#0F131E）の背景にし、文字は白の明朝体（Noto Serif JP）で通している
02「鹿六について」「鹿六の歴史」「おすすめ観光ルート」の本文を縦書きにしている
03こだわりを「産地」「炭焼」「伝統」の3枚の写真に、大きな漢字2文字を重ねて見せている

CONVERSION集客の工夫

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

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

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

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

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

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

予約の入口を画面の端に固定する

PCでは画面右端の縦長のエリアに、ロゴ・メニュー・「新宮店」「本宮店」・「ご予約はこちら」をまとめて固定している。どこまで読み進めても、店舗の情報と予約への入口が視界に残る。

2店舗の営業情報をページの最後に並べる

ページの終わりで、新宮店と本宮店の住所・電話番号・営業時間・定休日を左右に並べている。「当日分の鰻が無くなり次第終了」や、お正月・土用の丑・お盆前後の不定休の注意書きも添え、来店前の確認に答えている。

来店前の疑問と観光の情報につなぐ

「ご来店の前に」で予約・座席・料理についてのよくある質問へ、「おすすめ観光ルート」で熊野三山をめぐる観光情報へ案内している。観光で訪れる人が、食事の前後の予定まで含めて店を選べる。

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

COLOR配色

#0F131E背景 · ダークネイビー

#FFFFFF本文・見出しテキスト

#989898枠線・補足テキスト · グレー

#EDEDEDブログのセクション背景 · ライトグレー

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

TYPOGRAPHYフォント

用途: 和文見出し・本文
使用フォント: Noto Serif JP
無料で近いもの: Noto Serif JP

用途: 英字の小見出し（Info・Menu・History など）
使用フォント: EB Garamond
無料で近いもの: EB Garamond

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h1	48px / 400	1.20	32px / 400
h2	24px / 400	1.20	24px / 400
h3	56px / 400	1.20	40px / 400
本文（p）	15.2px / 400	1.65	13.6px / 400
ボタン	15.2px / 400	1.00	13.6px / 400

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

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

01
ヘッダー（右端の固定エリア）
PCは画面右端にロゴ・メニュー・新宮店・本宮店・ご予約はこちらを縦に並べて固定。スマホはロゴとメニューボタン。
ヘッダー／左固定サイドナビ型
02
ファーストビュー
店の映像に「時の流れに漂う香り」のコピー。スマホではコピーを縦書きにする。左下にお知らせを1件。
ファーストビュー／全面写真＋コピー型
03
About Us（鹿六について）
縦書きの本文と「ご挨拶へ」のボタン。
コンセプト／写真＋メッセージ型
04
Our Pride（鹿六のこだわり）
「産地」「炭焼」「伝統」の写真に大きな漢字を重ねる。
強み・選ばれる理由／番号つき3〜4項目型
05
Menu（お品書き）
料理の写真を横に並べたスライダーと「詳細へ」のボタン。
メニュー・サービス／アイコン／写真グリッド型
06
History（鹿六の歴史）
屋号の由来を縦書きで。「歴史を知る」のボタン。
コンセプト／写真＋メッセージ型
07
Outline（店舗案内）・FAQ（ご来店の前に）
店舗案内（新宮店・本宮店のボタン）と、よくある質問への入口を左右に並べる。
イベント・キャンペーン／特集バナー並び型
08
Sightseeing（おすすめ観光ルート）
線で描いた地図と、縦書きの紹介文。
コンセプト／写真＋メッセージ型
09
Blog（鹿六だより）
明るいグレーの背景に「一覧を見る」のボタン。
お知らせ／お知らせ一覧型
10
Reservation（ご予約・お問い合わせ）
電話かメールでの予約の案内と「ご予約はこちら」のボタン。
行動喚起／電話＋Web予約の2ボタン帯型
11
店舗情報
新宮店・本宮店の住所・電話・営業時間・定休日を左右に並べる。
アクセス／地図＋時間表型
12
フッター
ロゴとメニューのリンク。
フッター／店舗情報＋ナビ型

PARTSパーツ別に見る

うなぎ料理鹿六のOur Pride（鹿六のこだわり）（PC） — 04Our Pride（鹿六のこだわり）強み・選ばれる理由／番号つき3〜4項目型

うなぎ料理鹿六のOur Pride（鹿六のこだわり）（スマホ） — 04Our Pride（鹿六のこだわり）強み・選ばれる理由／番号つき3〜4項目型

うなぎ料理鹿六のMenu（お品書き）（PC） — 05Menu（お品書き）メニュー・サービス／アイコン／写真グリッド型

うなぎ料理鹿六のMenu（お品書き）（スマホ） — 05Menu（お品書き）メニュー・サービス／アイコン／写真グリッド型

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

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

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

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

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

Figmaでの使い方

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

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

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

01暗い背景と白い明朝体で、老舗らしい落ち着きを出す
02由来や想いを伝える文章は縦書きにして、和の雰囲気を強める
03こだわりは写真と短い漢字の見出しで、3つに絞って見せる
04複数店舗のある店は、ページの最後に店舗ごとの営業情報を並べる

FAQよくある質問

うなぎ料理鹿六のサイトで使われているフォントは？

和文の見出しと本文は Noto Serif JP、英字の小見出しは EB Garamond です。どちらも Google Fonts で無料で使えます。

暗い背景のサイトは、料理の写真が見えにくくなりませんか？

このサイトでは、写真を余白をとって配置し、背景を暗い単色にそろえることで、照りのあるうなぎの写真がかえって引き立っています。文字は白と灰色の2色に絞っています。

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

うなぎ・寿司・そば・料亭などの和食店のほか、旅館・和菓子店・酒蔵など、歴史や伝統を伝えたい業種に応用できます。

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

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

ワイヤーDL

RESTAURANT & CAFE · 奈良県 · 2026.10.28

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

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

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら

うなぎ料理鹿六飲食店・カフェのホームページデザイン参考 — ダークネイビー・明朝体・縦書き

EDITOR'S NOTE編集部の視点